---
version: 2
name: Kuickr v2
description: Winter design system for Kuickr-owned product chrome, public pages, numbered specs, and MCP-authored pages.
colors:
  primary: "#12181f"
  on-primary: "#eef2f5"
  secondary: "#2f7fb0"
  on-secondary: "#ffffff"
  neutral: "#eef2f5"
  kk-bg: "#ffffff"
  kk-wash: "#eef2f5"
  kk-paper: "#f8fafb"
  kk-card: "#ffffff"
  kk-fill: "#eef2f5"
  kk-fill-soft: "#f4f7f9"
  kk-line: "#e6ecef"
  kk-border: "#dbe3e8"
  kk-ink: "#12181f"
  kk-text: "#25303a"
  kk-text-soft: "#3a434c"
  kk-muted: "#7c8791"
  kk-muted-soft: "#8f98a1"
  kk-faint: "#a9b2ba"
  kk-primary: "#12181f"
  kk-on-primary: "#eef2f5"
  kk-secondary: "#2f7fb0"
  kk-secondary-hover: "#3f8dc9"
  kk-secondary-soft: "#dcedf5"
  kk-on-secondary: "#ffffff"
  kk-orientation: "{colors.kk-secondary}"
  kk-orientation-hover: "{colors.kk-secondary-hover}"
  kk-decision: "#4b7bd7"
  kk-blocker: "#d74b4b"
  kk-question: "#8b5cf6"
  kk-idea: "#e8a53b"
  kk-outcome: "#1f7a68"
  kk-parked: "#66717b"
  kk-private: "#66717b"
  kk-link: "#2f7fb0"
  kk-public: "#1f7a68"
themes:
  dark:
    colors:
      kk-bg: "#121b24"
      kk-wash: "#16212b"
      kk-paper: "#18242e"
      kk-card: "#1d2a35"
      kk-fill: "#243441"
      kk-fill-soft: "#202f3b"
      kk-line: "#2a3b49"
      kk-border: "#314252"
      kk-ink: "#eef2f5"
      kk-text: "#eef2f5"
      kk-text-soft: "#c3c9cf"
      kk-muted: "#8f98a1"
      kk-muted-soft: "#74808a"
      kk-faint: "#65717b"
      kk-primary: "#eef2f5"
      kk-on-primary: "#121b24"
      kk-secondary: "#5aafe2"
      kk-secondary-hover: "#79c2eb"
      kk-secondary-soft: "#203b4c"
      kk-on-secondary: "#121b24"
      kk-orientation: "{colors.kk-secondary}"
      kk-orientation-hover: "{colors.kk-secondary-hover}"
      kk-outcome: "#5fd6c4"
      kk-private: "#c3c9cf"
      kk-public: "#5fd6c4"
typography:
  display-lg:
    fontFamily: Libre Baskerville
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0px
  display-md:
    fontFamily: Libre Baskerville
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: 0px
  body-md:
    fontFamily: Space Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-sm:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-caps:
    fontFamily: JetBrains Mono
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.08em
spacing:
  kk-s-1: 4px
  kk-s-2: 8px
  kk-s-3: 12px
  kk-s-4: 16px
  kk-s-5: 24px
  kk-s-6: 32px
  kk-s-7: 48px
  kk-s-8: 72px
rounded:
  kk-r-xs: 4px
  kk-r-sm: 7px
  kk-r-md: 10px
  kk-r-lg: 14px
  kk-r-xl: 20px
  kk-r-pill: 999px
motion:
  kk-t-fast: 120ms
  kk-t-base: 200ms
  kk-t-slow: 320ms
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.kk-r-sm}"
    padding: "{spacing.kk-s-2} {spacing.kk-s-4}"
  orientation-link:
    textColor: "{colors.kk-ink}"
    borderColor: "{colors.kk-orientation}"
    typography: "{typography.body-md}"
  focus-ring:
    borderColor: "{colors.kk-secondary}"
    rounded: "{rounded.kk-r-sm}"
  card:
    backgroundColor: "{colors.kk-card}"
    borderColor: "{colors.kk-border}"
    textColor: "{colors.kk-text}"
    rounded: "{rounded.kk-r-lg}"
    padding: "{spacing.kk-s-5}"
  public-status:
    textColor: "{colors.kk-public}"
    typography: "{typography.label-caps}"
  private-status:
    textColor: "{colors.kk-private}"
    typography: "{typography.label-caps}"
---

# Kuickr v2 DESIGN.md

## Overview

Kuickr v2 is Winter: cool ink, frost, paper-white surfaces, and a restrained ice accent. It governs Kuickr-owned application chrome, marketing, docs, and agent-authored Kuickr pages. The system keeps the stable `--kk-*` vocabulary while changing its visual contract from v1 brass to v2 ice.

Page content with an explicitly selected design system remains isolated. Kuickr v2 styles the surrounding Kuickr chrome; it does not repaint a Page body that selected Kuickr v1, Nodepad, InventList, NOCTURNE, or a private user-owned system.

## Color

Use ink for the primary action and strongest hierarchy. Use `--kk-orientation` for ice as a non-text orientation indicator: focus rings, active borders, underlines, and icons. Body links, help copy, and compact metadata use ink or soft text so small text remains accessible. Frost is the page wash and quiet fill.

Do not use ice as universal decoration. Decision blue, blocker red, question violet, idea amber, outcome teal-green, private slate, and public teal are semantic colors and must only communicate those meanings. The compatibility `kk-on-secondary` token is not a component recipe: do not pair light-theme ice with white normal-sized text or treat it as a filled-button combination.

Dark mode uses Blue-charcoal surfaces with a brighter ice accent. Apply it explicitly with `data-theme="dark"`; when no explicit theme is set, Kuickr follows `prefers-color-scheme: dark`. Explicit `data-theme="light"` always wins over the system preference.

## Typography

Libre Baskerville carries display headings and promises. Space Grotesk carries body copy, controls, and labels. JetBrains Mono is reserved for paths, URLs, code, commands, and compact metadata. Prefer sentence case; uppercase mono is only for short kickers and statuses.

## Layout

Use the 4/8/12/16/24/32/48 spacing rhythm. Cards use 12–16px radii. Pills are for compact controls, filters, and statuses, not general containers. Keep reading measure near 720px.

## Components

Primary actions are ink with frost text. Orientation links keep accessible ink text and use ice only for their border, underline, icon, or active indicator; focus rings use ice as a non-text boundary. Cards use white or Blue-charcoal surfaces with quiet borders. Public and private treatments consume their semantic tokens rather than the brand accent. On dark cards, public/outcome uses light teal `#5fd6c4` and private uses soft text `#c3c9cf`.

## Dark mode

Dark mode preserves the same hierarchy on Blue-charcoal: background `#121b24`, card `#1d2a35`, border `#314252`, text `#eef2f5`, and ice `#5aafe2`. Do not substitute neutral-black or the retired warm/brass palette.

## Do's and Don'ts

- Do use `var(--kk-*)` instead of hard-coded Winter values in Kuickr-owned surfaces.
- Do use ink for primary actions and accessible link text; use ice for non-text focus and orientation indicators.
- Do keep Page body design-system scopes isolated from Kuickr chrome.
- Do preserve semantic colors for meaning-only states.
- Don't use the retired brass or terracotta palettes in Kuickr v2.
- Don't use NOCTURNE `--gm-*` tokens outside play and published game surfaces.