/* Tai Chi — Stillwater design tokens * -------------------------------------------------------------- * Single source of truth for colour, type, spacing, radii, * elevation, and motion. Names are semantic — pick by purpose, * not by hex. * * Every value here is currently in use by the round-2 prototype; * the comments record the intent that goes with each token so an * implementation engineer can hold the line. */ :root { /* ───────────────────────────────────────────────────────── * COLOUR — surfaces * The ivory page is the base. White card sits on top for * raised content; warm-cream is the alternative "paper" * surface used on hero illustrations. * ─────────────────────────────────────────────────────── */ --color-background: #faf7f1; /* ivory paper — app + scroll bg */ --color-surface: #ffffff; /* white card / row / pill */ --color-surface-raised: #fbf8f2; /* cream — hero image plate, text on water */ --color-surface-alt: #f2eedf; /* warm cream — secondary surface, rarely used */ /* COLOUR — text + lines */ --color-text-primary: #1a1a1a; /* body & headings */ --color-text-secondary: #6b6356; /* warm muted ink — labels, captions */ --color-text-on-accent: #fbf8f2; /* cream on solid water disc / buttons */ --color-border-hairline: #e8e2d2; /* every 1px divider in the app */ /* COLOUR — accents * One primary (water teal) carries brand identity and the * primary CTA. Leaf is the secondary accent, used sparingly. * Ember marks the favourite — warm, never red. */ --color-accent: #3f8585; /* water teal — primary CTA, icon disc, links */ --color-accent-hover: #2d6e6e; /* deep water — pressed / hover state */ --color-accent-soft: rgba(63, 133, 133, 0.12); /* faint teal tint for backgrounds */ --color-accent-secondary: #6e8a53; /* leaf sage — used sparingly */ --color-accent-favourite: #b07a3f; /* ember clay — favourite-star fill only */ /* COLOUR — overlay * Warm-cream background for the full-bleed image viewer modal. * The modal fully covers the page rather than dimming it. * Now an alias of --color-surface-raised (kept for naming; * redundant with that token). */ --color-scrim: var(--color-surface-raised); /* #fbf8f2 cream */ /* ───────────────────────────────────────────────────────── * TYPOGRAPHY * System fonts only (no web fonts, no FOIT). System-UI maps * to SF / Segoe / Roboto on the platforms that matter; ui-mono * gets the platform monospace for labels and meta. * ─────────────────────────────────────────────────────── */ --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-stack-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Size scale — read at arm's length, standing. Body floor 18px. */ --font-size-display: 36px; /* "Take a breath." home greeting */ --font-size-title: 28px; /* movement name */ --font-size-heading: 22px; /* sequence titles, card titles */ --font-size-cue: 18px; /* phase prose body */ --font-size-body: 16px; /* sequence row name, list rows */ --font-size-action: 15px; /* primary button label */ --font-size-meta: 13px; /* sub-titles, "Recently shown" labels */ --font-size-caption: 12px; /* row chevrons, footer labels */ --font-size-label: 11px; /* uppercase eyebrows, mono meta */ --font-size-micro: 10px; /* small size annotations */ /* Weights — only two, used purposefully */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* phase labels only */ /* Line heights */ --line-height-tight: 1.05; /* display + title */ --line-height-snug: 1.2; /* card titles */ --line-height-normal: 1.5; /* body prose */ --line-height-relaxed: 1.55; /* phase paragraph + tip list */ /* Letter-spacing — negative for large display, positive for caps */ --letter-spacing-display: -1px; --letter-spacing-title: -0.6px; --letter-spacing-heading: -0.4px; --letter-spacing-body: 0; --letter-spacing-label: 1.2px; /* uppercase mono eyebrows */ --letter-spacing-caps: 1.4px; /* section dividers, tips header */ /* ───────────────────────────────────────────────────────── * SPACING * Linear 4px step up to 24, then jump to 32 / 48 for layout * gutters. Mobile hit targets must use --space-touch. * ─────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; /* Layout */ --space-page-x: 22px; /* phone gutter — page-level horizontal padding */ --space-page-y: 14px; /* top/bottom padding inside a screen */ --space-touch: 44px; /* minimum tap target */ /* ───────────────────────────────────────────────────────── * RADII * Pill is the most common — buttons, badges, chips. * Card uses 20, image plates use 18, list rows 14, thumbs 10. * ─────────────────────────────────────────────────────── */ --radius-xs: 2px; /* tiny tick marks, ruler dots */ --radius-sm: 6px; --radius-md: 10px; /* thumbnail tile */ --radius-lg: 14px; /* list row card */ --radius-xl: 18px; /* hero image plate */ --radius-2xl: 20px; /* primary action card on home */ --radius-pill: 999px; /* buttons, badges, chips, icon disc */ /* ───────────────────────────────────────────────────────── * ELEVATION — shadows * Designed sparingly — only the primary water actions get a * coloured glow; surfaces are mostly defined by hairline borders. * Use these tokens; do not author new shadows ad hoc. * ─────────────────────────────────────────────────────── */ --shadow-row: 0 1px 1px rgba(26, 26, 26, 0.02); --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.04), 0 2px 14px rgba(26, 26, 26, 0.04); --shadow-action: 0 2px 8px rgba(63, 133, 133, 0.25); --shadow-action-strong: 0 2px 12px rgba(63, 133, 133, 0.25); --shadow-action-primary: 0 4px 20px rgba(63, 133, 133, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18); /* Selection outline — coloured ring around the active thumbnail * in the Move View image strip. */ --ring-selected: 0 0 0 1px var(--color-accent); /* ───────────────────────────────────────────────────────── * MOTION * Two transition speeds — fast for state changes, base for * positional changes. Always ease-out. No bounces. * ─────────────────────────────────────────────────────── */ --duration-fast: 160ms; /* border, colour, opacity flips */ --duration-base: 220ms; /* size / position transitions */ --easing-out: ease-out; --transition-fast: var(--duration-fast) var(--easing-out); --transition-base: var(--duration-base) var(--easing-out); /* ───────────────────────────────────────────────────────── * Z-INDEX * Three layers: page chrome, sticky footers, modals. * ─────────────────────────────────────────────────────── */ --z-base: 0; --z-sticky: 10; /* sticky footer with prev/next */ --z-modal: 100; /* image viewer overlay */ } /* ───────────────────────────────────────────────────────────── * Optional: example component bindings. * These show the intended pairings between tokens and components. * Engineers can either use these directly or as a reference when * wiring a CSS-in-JS / component library. * ─────────────────────────────────────────────────────────── */ /* Body baseline */ body { background: var(--color-background); color: var(--color-text-primary); font-family: var(--font-stack); font-size: var(--font-size-body); line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; } /* Primary action — used on Spin again, Next movement, etc. */ .btn-primary { background: var(--color-accent); color: var(--color-text-on-accent); border: none; border-radius: var(--radius-pill); padding: 13px 22px; font-size: var(--font-size-action); font-weight: var(--font-weight-medium); box-shadow: var(--shadow-action-strong); transition: background var(--transition-fast); } .btn-primary:hover { background: var(--color-accent-hover); } .btn-primary:active { background: var(--color-accent-hover); } /* Ghost / secondary action */ .btn-ghost { background: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-pill); padding: 13px 22px; font-size: var(--font-size-action); font-weight: var(--font-weight-medium); } /* Card surface — used by home tiles, sequence rows, etc. */ .card { background: var(--color-surface); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); } /* Phase label inside Move View prose */ .phase-label { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-right: var(--space-2); }