--- version: alpha name: Kuickr description: Default Kuickr deck-app design system for app chrome, public pages, numbered specs, and MCP-authored pages. colors: primary: "#15161a" on-primary: "#fafaf8" secondary: "#b58a2f" on-secondary: "#15161a" neutral: "#fdfcf9" kk-bg: "#ffffff" kk-wash: "#fdfcf9" kk-paper: "#fcfcfb" kk-card: "#ffffff" kk-fill: "#f1f0ec" kk-fill-soft: "#f3f2ef" kk-line: "#ece8e0" kk-border: "#e4e3de" kk-ink: "#15161a" kk-text: "#1f1f22" kk-text-soft: "#3a3633" kk-muted: "#6b7280" kk-muted-soft: "#9ca3af" kk-faint: "#b8b5ad" kk-primary: "#15161a" kk-on-primary: "#fafaf8" kk-secondary: "#b58a2f" kk-secondary-hover: "#9c7626" kk-secondary-soft: "#f3ead4" kk-on-secondary: "#ffffff" kk-decision: "#4b7bd7" kk-blocker: "#d74b4b" kk-question: "#8b5cf6" kk-idea: "#e8a53b" kk-outcome: "#2fb36b" kk-parked: "#6b7280" kk-private: "#9a958c" kk-link: "#8a6a1f" kk-public: "#3a5a3f" 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 components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-sm}" rounded: "{rounded.kk-r-sm}" padding: "{spacing.kk-s-3} {spacing.kk-s-4}" button-primary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.kk-card}" textColor: "{colors.kk-ink}" typography: "{typography.body-sm}" rounded: "{rounded.kk-r-sm}" padding: "{spacing.kk-s-3} {spacing.kk-s-4}" surface-card: backgroundColor: "{colors.kk-card}" textColor: "{colors.kk-text}" rounded: "{rounded.kk-r-md}" padding: "{spacing.kk-s-5}" badge-public: backgroundColor: "{colors.kk-public}" textColor: "{colors.kk-on-secondary}" typography: "{typography.label-caps}" rounded: "{rounded.kk-r-pill}" badge-private: backgroundColor: "{colors.kk-fill}" textColor: "{colors.kk-text}" typography: "{typography.label-caps}" rounded: "{rounded.kk-r-pill}" badge-link: backgroundColor: "{colors.kk-secondary-soft}" textColor: "{colors.kk-text}" typography: "{typography.label-caps}" rounded: "{rounded.kk-r-pill}" --- # Kuickr DESIGN.md ## Overview Kuickr uses the deck-app visual system: editorial, structured, and durable rather than decorative. The interface should feel like a permanent organized home for pages made by humans and agents. Use restrained surfaces, clear hierarchy, and a small number of meaningful accents. The runtime source is still CSS custom properties in `docs/kuickr/style/design-systems/kuickr/tokens.css`, mirrored to `docs/kuickr/style/tokens.css` and `app/assets/stylesheets/tokens.css`. This `DESIGN.md` file is the Stitch-style AI companion for that token contract. ## Colors The light theme is the default. Backgrounds move from `kk-bg` and `kk-wash` into `kk-paper`, `kk-card`, and `kk-fill`; do not invent intermediate surface colors. Text uses `kk-ink` for primary headlines, `kk-text` for body copy, and `kk-muted`/`kk-faint` for metadata. Kuickr's brand pair is ink plus brass. Use `kk-primary` for high-contrast ink treatments and `kk-secondary` for the single most important action or active state in a local region. Semantic colors are reserved for page/card meaning: decision, blocker, question, idea, outcome, and parked. Visibility colors are reserved for access states: private, link, and public. Dark mode is an explicit `[data-theme="dark"]` override in CSS. Do not use a system-preference media query for new Kuickr surfaces. ## Typography Use Libre Baskerville for display headings and Space Grotesk for the product UI. JetBrains Mono is for metadata, file paths, status labels, and compact technical context. Keep letter spacing at `0` for normal text; only the mono label token uses positive tracking for uppercase metadata. ## Layout Use the `kk-s-*` scale for spacing. Compact controls generally use `kk-s-2` to `kk-s-4`; panels and page sections use `kk-s-5` to `kk-s-7`. Keep reading content near `--kk-read` from the CSS token file, currently `720px`, unless the surface is a dashboard or registry grid. ## Elevation & Depth Prefer borders, tonal layers, and spacing over heavy shadows. When elevation is needed, use the CSS shadow tokens from `tokens.css`; do not create one-off shadow recipes in views. ## Shapes Kuickr is lightly rounded, not pill-heavy. Cards and panels should usually use `kk-r-sm` or `kk-r-md`; reserve `kk-r-pill` for badges, chips, segmented controls, and compact status labels. ## Components Buttons use plain Rails/ERB elements with the local component classes in `app/assets/stylesheets/kuickr.css` and the deck-app `--kk-*` tokens. Primary actions should be brass, secondary actions should be quiet card or outline treatments, and destructive actions should not reuse brass. Badges and chips should carry real product state, not decoration. Access states must use the shared Private / Unlisted / Public vocabulary and map to the visibility token family. ## Do's and Don'ts - Do use `var(--kk-*)` in app CSS and generated pages. - Do fetch the current design system through `/api/v1/design-systems/kuickr` or the MCP design-system tools when authoring pages. - Do keep CSS token files and this YAML front matter value-equivalent when token values change. - Don't hard-code hex colors outside token files and this `DESIGN.md` token block. - Don't revive RapidRails UI helpers or Phlex components for active Kuickr surfaces. - Don't use decorative gradients, blobs, or a one-note monochrome palette.