/* ============================================================ * 29COURT DESIGN LANGUAGE v2 — TOKENS * The single source of truth for every new 29Court surface. * * What this is, concretely (no hand-waving): * - bencho.dev -> warm bone neutrals, ring-borders not shadows, * wash fills, two-tier type (headline != body) * - Element Plus -> token architecture: global -> component * cascade, runtime CSS vars, color-mix derived * stops, 4 principles (consistency, feedback, * efficiency, controllability). NOT its blue. * - Cloudflare -> hairline-first structure, tabular-nums on * every figure, compact 13px operator type, * judgment in the sub-line never the number * - Linear -> surface ladder + hairlines for depth, * Inter ss03/cv11 glyph distinction, -subtle * badge variants, dark-mode-native thinking * - Stripe -> 3px low-alpha focus halo, 4-8px control * radii, anti-decorative discipline * - Raycast -> keyboard badges as chrome, accent = brand * mark not functional color, opacity-step depth * * Live: https://ideas.29court.com/design-system/tokens.css * Include: * * * * RULES * 1. Every color, radius, space, shadow, font, motion value * resolves to a --29d-* token. Hardcoded hex/rgb/px outside * this file is a violation. * 2. Dark mode is [data-theme="dark"] on . Never ship a * screen in one mode only. * 3. Density is [data-density="compact"] on a container (or * ). Tools/dashboards/tables = compact. Marketing, * onboarding, empty states = comfortable (default). * 4. If a value you need is missing, the design is probably * wrong. Re-read the skill before inventing a token. * ============================================================ */ :root { /* ---------- COLOR: brand coral (the action color) ---------- */ --29d-coral-50: #FFF4EE; --29d-coral-100: #FFE4D4; --29d-coral-200: #FFC8A6; --29d-coral-300: #FF9E70; --29d-coral-400: #FB7E54; --29d-coral-500: #F46036; /* links on light, focus accents */ --29d-coral-600: #D94E26; /* PRIMARY button bg (white text) */ --29d-coral-700: #B03D1C; /* button hover, text on coral-100 */ --29d-coral-800: #8A3018; --29d-coral-900: #652412; /* ---------- COLOR: text ladder (5 steps, warm) ---------- */ --29d-text-1: #1C1917; /* primary: headings, body */ --29d-text-2: #44403C; /* secondary */ --29d-text-3: #78716C; /* tertiary: metadata, captions */ --29d-text-4: #A8A29E; /* placeholder */ --29d-text-5: #D6D3D1; /* disabled, faintest */ /* ---------- COLOR: surfaces (warm bone, bencho lane) ---------- */ --29d-bg: #F7F5F0; /* page */ --29d-surface: #FFFFFF; /* cards, panels */ --29d-raised: #FFFFFF; /* popovers, dropdowns */ --29d-overlay: #FFFFFF; /* modals */ --29d-sunken: #F1EEE7; /* wells, code blocks, inset areas */ --29d-wash: color-mix(in srgb, var(--29d-text-1) 6%, transparent); /* hover wash */ --29d-wash-2: color-mix(in srgb, var(--29d-text-1) 10%, transparent); /* active wash */ /* ---------- COLOR: borders (ONE default, hairline-first) ---------- */ --29d-border: #E5DFD2; /* the only border color at rest */ --29d-border-strong: #D3CAB6; /* emphasis, input borders */ --29d-ring: color-mix(in srgb, var(--29d-text-1) 14%, transparent); /* ring-borders on tints */ /* ---------- COLOR: info blue (links + info ONLY, never primary) ---------- */ --29d-blue-100: #E2F0FE; --29d-blue-600: #2E7FDB; /* links, info text */ --29d-blue-700: #1F63B4; /* ---------- COLOR: semantic (meaning only, never decoration) ---------- */ --29d-green-100: #DFF3E5; --29d-green-600: #2E8B4E; --29d-green-700: #20693A; --29d-amber-100: #FBEFD8; --29d-amber-600: #B97A17; --29d-amber-700: #8F5D10; --29d-red-100: #FDE7E7; --29d-red-500: #F56C6C; --29d-red-600: #D64545; --29d-red-700: #A93232; --29d-teal-600: #1E8A83; --29d-teal-100: #DDF3F1; --29d-gold-500: #E9A13B; --29d-gold-600: #C77F1A; /* stars, premium markers, sparingly */ /* ---------- COLOR: on-color text (contrast-paired) ---------- */ --29d-on-coral: #FFFFFF; --29d-on-dark: #FFFFFF; /* ---------- TYPE ---------- */ --29d-font-ui: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --29d-font-display: "Nunito", "Quicksand", -apple-system, "Segoe UI", sans-serif; --29d-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* Linear steal: alternate glyphs = distinction without a custom font */ --29d-font-features: "ss03", "cv11", "tnum" 0; --29d-text-2xs: 11px; --29d-lh-2xs: 16px; --29d-text-xs: 12px; --29d-lh-xs: 16px; --29d-text-sm: 13px; --29d-lh-sm: 20px; --29d-text-md: 15px; --29d-lh-md: 24px; --29d-text-lg: 17px; --29d-lh-lg: 26px; --29d-text-xl: 20px; --29d-lh-xl: 28px; --29d-text-2xl: 24px; --29d-lh-2xl: 32px; --29d-text-3xl: 32px; --29d-lh-3xl: 40px; --29d-text-4xl: 40px; --29d-lh-4xl: 48px; --29d-weight-regular: 400; --29d-weight-medium: 500; --29d-weight-semibold: 600; --29d-weight-bold: 700; --29d-weight-xbold: 800; /* ---------- RADIUS (dual-radius rule) ---------- App controls: 4-6px. Cards/panels: 8px. Large: 12px max. Pills: marketing CTAs, toggles, avatars ONLY. Never 16px+ blobs. */ --29d-r-1: 4px; /* kbd badges, tiny chips, focus inner */ --29d-r-2: 6px; /* buttons, inputs, dropdowns: THE operator default */ --29d-r-3: 8px; /* cards, panels, table containers */ --29d-r-4: 12px; /* modals, large panels, showcase cards: the max */ --29d-pill: 999px; /* marketing CTAs, toggles, avatars, segmented */ /* ---------- SPACE (4pt base; 2px for micro-gaps only) ---------- */ --29d-s-0: 2px; --29d-s-1: 4px; --29d-s-2: 8px; --29d-s-3: 12px; --29d-s-4: 16px; --29d-s-6: 24px; --29d-s-8: 32px; --29d-s-12: 48px; --29d-s-16: 64px; /* ---------- ELEVATION (borders do the work; shadows are rare) ---------- Panels/cards: 1px var(--29d-border), NO shadow. Shadows exist for floating UI only. */ --29d-shadow-pop: 0 0 0 1px var(--29d-ring), 0 8px 24px rgba(28, 25, 23, 0.10), 0 2px 6px rgba(28, 25, 23, 0.06); --29d-shadow-modal: 0 0 0 1px var(--29d-ring), 0 24px 64px rgba(28, 25, 23, 0.18); /* ---------- MOTION (Cloudflare-fast: 120-220ms for repeated actions) ---------- */ --29d-t-instant: 80ms; /* toggles, checkboxes, press */ --29d-t-fast: 120ms; /* hovers, exits */ --29d-t-base: 160ms; /* default transitions */ --29d-t-slow: 240ms; /* entrances, modals */ --29d-t-page: 320ms; /* page transitions, large reveals */ --29d-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* everything eases out */ --29d-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* success moments ONLY */ /* ---------- FOCUS (Stripe's 3px halo, coral) ---------- */ --29d-focus-halo: 0 0 0 3px color-mix(in srgb, var(--29d-coral-500) 32%, transparent); --29d-focus-ring: 0 0 0 1px var(--29d-coral-500); /* ---------- DENSITY: comfortable (default) ---------- */ --29d-body-size: var(--29d-text-md); --29d-body-lh: var(--29d-lh-md); --29d-control-h: 40px; /* input / button height */ --29d-control-h-sm: 32px; --29d-row-h: 48px; /* table row */ --29d-card-pad: var(--29d-s-6); --29d-section-gap: var(--29d-s-8); --29d-page-pad: var(--29d-s-6); } /* ---------- DENSITY: compact (tools, dashboards, data tables) ---------- */ [data-density="compact"] { --29d-body-size: var(--29d-text-sm); --29d-body-lh: var(--29d-lh-sm); --29d-control-h: 32px; --29d-control-h-sm: 28px; --29d-row-h: 36px; --29d-card-pad: var(--29d-s-4); --29d-section-gap: var(--29d-s-6); --29d-page-pad: var(--29d-s-4); } /* ---------- THEME: dark (warm, Linear/Raycast lane; never pure black) ---------- */ [data-theme="dark"] { --29d-coral-500: #FB7E54; /* brightened for dark */ --29d-coral-600: #FB7E54; /* primary button bg on dark */ --29d-coral-700: #FF9E70; --29d-coral-100: #3A2318; /* tinted surfaces on dark */ --29d-coral-50: #2A1A12; --29d-text-1: #F5F0E8; --29d-text-2: #B8B0A4; --29d-text-3: #7E766B; --29d-text-4: #57504A; --29d-text-5: #3A352F; --29d-bg: #14110D; --29d-surface: #1C1917; --29d-raised: #26211C; --29d-overlay: #2E2822; --29d-sunken: #100E0B; --29d-wash: rgba(255, 255, 255, 0.04); --29d-wash-2: rgba(255, 255, 255, 0.07); --29d-border: rgba(255, 255, 255, 0.08); /* Linear's hairline */ --29d-border-strong: rgba(255, 255, 255, 0.16); --29d-ring: rgba(255, 255, 255, 0.10); --29d-blue-100: #16283D; --29d-blue-600: #6FB3FF; --29d-blue-700: #9CC8FF; --29d-green-100: #12291B; --29d-green-600: #4CC276; --29d-green-700: #7BD89B; --29d-amber-100: #2E2312; --29d-amber-600: #EFA93F; --29d-amber-700: #F5BE6B; --29d-red-100: #331917; --29d-red-500: #F67E7E; --29d-red-600: #F67E7E; --29d-red-700: #FAA3A3; --29d-teal-100: #102726; --29d-teal-600: #3FC1B8; --29d-gold-500: #F2B95C; --29d-gold-600: #F2B95C; --29d-on-coral: #1C1917; /* dark text on bright coral buttons */ --29d-shadow-pop: 0 0 0 1px var(--29d-ring), 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35); --29d-shadow-modal: 0 0 0 1px var(--29d-ring), 0 32px 80px rgba(0, 0, 0, 0.55); --29d-focus-halo: 0 0 0 3px color-mix(in srgb, var(--29d-coral-500) 38%, transparent); }