/* ========================================================================= CLEAN & MODERN — Design Tokens Aesthetic DNA distilled from a best-in-class consumer health app. Single source of truth. Every color, size, and radius in the product references a variable here — never a hardcoded value in a component. ========================================================================= */ :root { /* --------------------------------------------------------------------- NEUTRALS (cool-tinted, the 60/30 of every screen) Depth comes from canvas-vs-surface CONTRAST, not shadows. Never pure #000 or #fff. --------------------------------------------------------------------- */ --canvas: #F4F4F8; /* 60% — app background */ --surface: #FFFFFF; /* 30% — cards, sheets, the floating dock */ --surface-sunken: #EDEDF2; /* recessed wells, gauge tracks, skeletons */ --surface-hover: #F7F7FB; /* row / card hover */ --border: rgba(17, 17, 19, 0.06); /* hairline, 1px */ --border-strong: rgba(17, 17, 19, 0.10); /* dividers, input outlines */ --text: #1C1C1E; /* near-black, primary */ --text-secondary: #6E6E78; /* labels, captions */ --text-tertiary: #A4A4AF; /* placeholders, disabled, "No data" */ /* --------------------------------------------------------------------- INK (the primary interactive chrome) The reference UI is monochrome: selected tabs, the home button, and primary buttons are near-black. This is what makes it read "premium" — monochrome + one accent. Reach for --ink before reaching for color. --------------------------------------------------------------------- */ --ink: #1C1C1E; --ink-hover: #2E2E32; --on-ink: #FFFFFF; /* --------------------------------------------------------------------- BRAND ACCENT (the 10% — green = positive / live / "you're on track") Used sparingly: live indicators, positive status, primary highlights. --------------------------------------------------------------------- */ --accent: #34B36B; --accent-hover: #2C9E5E; --accent-tint: #E8F6EE; /* soft chip / highlight background */ /* --------------------------------------------------------------------- SEMANTIC (meaning-only — never decorative) Each has a base (text/icon) and a -tint (chip background). --------------------------------------------------------------------- */ --success: #34B36B; --success-tint: #E8F6EE; --warning: #E0A93C; --warning-tint: #FBF1DD; /* gold */ --danger: #E5492C; --danger-tint: #FCE9E4; /* coral */ --info: #4F86EE; --info-tint: #E8F0FD; /* blue / "lower" */ /* --------------------------------------------------------------------- DATA VIZ (categorical — rings, bars, sparklines ONLY) A wider palette is allowed here because it carries information. Do not use these for UI chrome. --------------------------------------------------------------------- */ --data-green: #3FB970; --data-lime: #A6E542; /* the "energy/charge" bar gradient top */ --data-teal: #5BB8B2; --data-gold: #E8C24B; --data-coral: #E5492C; --data-orange: #EE8C5E; --data-blue: #5B8DEF; --data-indigo: #5660A6; --data-pink: #E58CC8; /* --------------------------------------------------------------------- RADIUS (round family — modern/friendly. Children < parents.) --------------------------------------------------------------------- */ --r-xs: 8px; /* chips, small inner elements */ --r-sm: 12px; /* buttons, inputs, inner cards */ --r-md: 16px; /* nested cards */ --r-lg: 20px; /* default card */ --r-xl: 24px; /* large feature card / sheet top */ --r-2xl: 28px; /* the floating dock */ --r-full: 999px; /* pills, avatars, icon buttons */ /* --------------------------------------------------------------------- SPACING (8pt grid; 4px only for fine-tuning inside components) RULE: internal spacing <= external spacing. --------------------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; /* default card padding, gap between cards */ --s-5: 20px; --s-6: 24px; /* gap between sections (label -> stack) */ --s-8: 32px; --s-10: 40px; --s-12: 48px; /* big section breaks */ --s-16: 64px; /* --------------------------------------------------------------------- TYPOGRAPHY One typeface. Inter (closest clean grotesk to SF Pro) + system fallback. Scale ~1.2 (Minor Third). Big bold numerals do the premium work. --------------------------------------------------------------------- */ --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; --text-xs: 12px; /* timestamps, fine print */ --text-sm: 13px; /* labels under metrics, captions */ --text-base: 15px; /* body */ --text-lg: 17px; /* section headers */ --text-xl: 20px; /* screen title */ --text-metric: 32px; /* the big numbers (16.2, 65.7) */ --text-display: 48px; /* hero gauge numerals */ --lh-tight: 1.1; /* metrics & display */ --lh-snug: 1.3; /* headings */ --lh-normal: 1.5; /* body */ --tracking-tight: -0.02em; /* large text */ --tracking-normal: 0em; --tracking-wide: 0.06em; /* ALL-CAPS micro labels */ --weight-regular: 400; --weight-medium: 500; /* labels, section headers */ --weight-semibold: 600; /* buttons, values */ --weight-bold: 700; /* metric numerals */ /* --------------------------------------------------------------------- ELEVATION Two layers do the work: a tight 1px contact shadow + a wide, very soft ambient shadow. This is the gentle "lift" the reference cards have — present but never heavy. Contrast still carries most of the hierarchy; the shadow just keeps cards from feeling pasted flat onto the canvas. Floating surfaces (dock, sheets) go deeper and pair with a frosted blur. --------------------------------------------------------------------- */ --shadow-none: none; --shadow-card: 0 1px 2px rgba(17, 17, 19, 0.04), 0 8px 20px rgba(17, 17, 19, 0.05); /* cards: soft lift */ --shadow-float: 0 10px 30px rgba(17, 17, 19, 0.12), 0 2px 8px rgba(17, 17, 19, 0.06); /* the command dock */ --shadow-sheet: 0 -8px 40px rgba(17, 17, 19, 0.12); /* bottom sheets */ /* Frosted surface for floating chrome (dock, sticky bars): background: var(--glass-bg); backdrop-filter: blur(22px); */ --glass-bg: rgba(255, 255, 255, 0.82); --glass-border: rgba(255, 255, 255, 0.60); /* --------------------------------------------------------------------- MOTION (durations + easing; spring configs live in motion.ts) --------------------------------------------------------------------- */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* entering */ --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* leaving */ --ease-mo: cubic-bezier(0.4, 0, 0.2, 1); /* repositioning */ } /* ========================================================================= DARK MODE (considered, not inverted. Lighter surfaces = elevation.) ========================================================================= */ :root[data-theme="dark"], .dark { --canvas: #0E0E11; --surface: #1A1A1F; --surface-sunken: #141417; --surface-hover: #222228; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.12); --text: #F2F2F5; --text-secondary: #A0A0AB; --text-tertiary: #6B6B76; --ink: #F2F2F5; /* chrome flips: near-white is now primary */ --ink-hover: #E2E2E8; --on-ink: #1C1C1E; --accent: #3FC579; /* desaturated a touch for dark */ --accent-hover: #4FD188; --accent-tint: rgba(63, 197, 121, 0.14); --success: #3FC579; --success-tint: rgba(63,197,121,0.14); --warning: #E8BE5A; --warning-tint: rgba(232,190,90,0.14); --danger: #F0664B; --danger-tint: rgba(240,102,75,0.14); --info: #6B9BF2; --info-tint: rgba(107,155,242,0.14); --shadow-card: none; --shadow-float: 0 6px 24px rgba(0, 0, 0, 0.5); --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.55); }