/* ============================================================================ Apple Design Tokens — drop-in theme layer for the web ---------------------------------------------------------------------------- Real Apple system values (colors, type, spacing, radii, materials, motion) expressed as CSS custom properties. Import once at the root of your app: @import "tokens.css"; Everything below is light-mode default; dark mode is applied automatically via prefers-color-scheme AND an explicit [data-theme="dark"] override so you can force a theme. Semantic tokens (--label, --bg, --fill-*) are what you should reference in components — never hardcode a hex. ============================================================================ */ :root { /* ---- Type: system font stacks -------------------------------------- */ /* -apple-system/BlinkMacSystemFont pull SF Pro on Apple platforms; the rest degrade gracefully. "SF Pro Display" vs "Text" is handled by the OS via optical sizing — we opt in with font-optical-sizing below. */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif; --font-rounded: "SF Pro Rounded", -apple-system, "Nunito", system-ui, sans-serif; --font-serif: "New York", ui-serif, Georgia, "Times New Roman", serif; --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; /* ---- Type scale: Apple's text styles, in rem (1rem = 16px base) ----- Each style is a *set*: size + weight + tracking + leading. See references/typography.md. Tracking tightens as size grows; leading loosens as size shrinks. Values are Apple's, converted pt→rem at 16px root. */ --text-large-title: 2.125rem; /* 34pt */ --text-title-1: 1.75rem; /* 28pt */ --text-title-2: 1.375rem; /* 22pt */ --text-title-3: 1.25rem; /* 20pt */ --text-headline: 1.0625rem; /* 17pt, semibold */ --text-body: 1.0625rem; /* 17pt */ --text-callout: 1rem; /* 16pt */ --text-subhead: 0.9375rem; /* 15pt */ --text-footnote: 0.8125rem; /* 13pt */ --text-caption-1: 0.75rem; /* 12pt */ --text-caption-2: 0.6875rem; /* 11pt */ --tracking-tight: -0.022em; /* large display text */ --tracking-snug: -0.014em; /* titles */ --tracking-normal: 0em; /* body */ --tracking-wide: 0.01em; /* small caps / footnotes */ --leading-tight: 1.05; /* headlines */ --leading-snug: 1.2; --leading-normal: 1.35; /* body-ish */ --leading-relaxed: 1.5; /* long-form reading */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Spacing: 4/8pt grid ------------------------------------------- */ --space-1: 0.125rem; /* 2 */ --space-2: 0.25rem; /* 4 */ --space-3: 0.5rem; /* 8 */ --space-4: 0.75rem; /* 12 */ --space-5: 1rem; /* 16 */ --space-6: 1.25rem; /* 20 */ --space-7: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-9: 2.5rem; /* 40 */ --space-10: 3rem; /* 48 */ --space-12: 4rem; /* 64 */ /* ---- Radii: Apple leans on generous, continuous corners ------------ iOS uses "continuous" curvature (a squircle), not a plain arc. On the web you approximate it with a slightly larger border-radius; for hero elements use the squircle recipe in references/tokens.md. Capsule = fully rounded. */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; /* iOS app-icon / large card feel */ --radius-2xl: 28px; --radius-capsule: 999px; /* ---- Elevation: soft, layered, low-contrast shadows ---------------- Apple shadows are diffuse and never harsh. Two-layer: a tight contact shadow + a soft ambient one. Tune opacity down in dark mode. */ --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.06); --shadow-2: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08); --shadow-3: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08); --shadow-4: 0 16px 48px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.10); --shadow-glass: 0 8px 32px rgba(0,0,0,0.18); /* floating glass chrome */ /* ---- Motion: easing + duration tokens ------------------------------ Apple UI never uses the weak built-in ease-*. These curves are the ones Apple's own interfaces and the best web recreations use. Springs cannot be expressed in pure CSS — see references/motion-physics.md for the JS tokens (damping/response) consumed by Motion and GSAP. NEVER use ease-in on UI: it starts slow and feels laggy. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* default UI exit-of-motion */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* symmetric moves */ --ease-ios: cubic-bezier(0.32, 0.72, 0, 1); /* sheets/drawers (iOS) */ --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1); /* quick, neutral */ --duration-instant: 100ms; /* button press / tap feedback */ --duration-fast: 200ms; /* tooltips, small popovers */ --duration-base: 300ms; /* dropdowns, most UI (keep UI under 300ms) */ --duration-slow: 450ms; /* modals, sheets, drawers */ /* ---- Semantic colors: LIGHT (defaults) ----------------------------- */ /* Accents (Apple system colors) */ --blue: #007AFF; --green: #34C759; --indigo: #5856D6; --orange: #FF9500; --pink: #FF2D55; --purple: #AF52DE; --red: #FF3B30; --teal: #30B0C7; --cyan: #32ADE6; --yellow: #FFCC00; --mint: #00C7BE; --brown: #A2845E; --accent: var(--blue); /* Grays */ --gray-1: #8E8E93; --gray-2: #AEAEB2; --gray-3: #C7C7CC; --gray-4: #D1D1D6; --gray-5: #E5E5EA; --gray-6: #F2F2F7; /* Backgrounds (base → elevated) */ --bg: #FFFFFF; --bg-secondary: #F2F2F7; --bg-tertiary: #FFFFFF; --bg-grouped: #F2F2F7; /* settings-style grouped lists */ /* Labels (text) — Apple encodes hierarchy as opacity over a base ink */ --label: rgba(0, 0, 0, 1); --label-secondary: rgba(60, 60, 67, 0.60); --label-tertiary: rgba(60, 60, 67, 0.30); --label-quaternary: rgba(60, 60, 67, 0.18); /* Separators & fills */ --separator: rgba(60, 60, 67, 0.29); --separator-opaque: #C6C6C8; --fill-1: rgba(120, 120, 128, 0.20); /* thick control fill */ --fill-2: rgba(120, 120, 128, 0.16); --fill-3: rgba(120, 120, 128, 0.12); --fill-4: rgba(120, 120, 128, 0.08); /* thin, e.g. hover */ /* ---- Materials: the tint + blur pair per thickness ------------------ A "material" is a translucent tint color paired with a backdrop blur. Use --material-*-tint as background and --material-*-blur inside backdrop-filter. See references/liquid-glass.md for the full layered recipe (specular + rim). */ --material-ultrathin-tint: rgba(255, 255, 255, 0.44); --material-thin-tint: rgba(255, 255, 255, 0.60); --material-regular-tint: rgba(255, 255, 255, 0.72); --material-thick-tint: rgba(255, 255, 255, 0.84); --material-blur: 20px; --material-blur-thin: 12px; --material-saturate: 180%; color-scheme: light dark; } /* ============================================================================ DARK MODE — auto via prefers-color-scheme, plus [data-theme] overrides so you can force light/dark regardless of OS setting. ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --blue: #0A84FF; --green: #30D158; --indigo: #5E5CE6; --orange: #FF9F0A; --pink: #FF375F; --purple: #BF5AF2; --red: #FF453A; --teal: #40C8E0; --cyan: #64D2FF; --yellow: #FFD60A; --mint: #63E6E2; --brown: #AC8E68; --gray-1: #8E8E93; --gray-2: #636366; --gray-3: #48484A; --gray-4: #3A3A3C; --gray-5: #2C2C2E; --gray-6: #1C1C1E; --bg: #000000; --bg-secondary: #1C1C1E; --bg-tertiary: #2C2C2E; --bg-grouped: #000000; --label: rgba(255, 255, 255, 1); --label-secondary: rgba(235, 235, 245, 0.60); --label-tertiary: rgba(235, 235, 245, 0.30); --label-quaternary: rgba(235, 235, 245, 0.16); --separator: rgba(84, 84, 88, 0.60); --separator-opaque: #38383A; --fill-1: rgba(120, 120, 128, 0.36); --fill-2: rgba(120, 120, 128, 0.32); --fill-3: rgba(120, 120, 128, 0.24); --fill-4: rgba(120, 120, 128, 0.18); --material-ultrathin-tint: rgba(30, 30, 32, 0.44); --material-thin-tint: rgba(30, 30, 32, 0.62); --material-regular-tint: rgba(30, 30, 32, 0.74); --material-thick-tint: rgba(30, 30, 32, 0.86); --shadow-1: 0 1px 2px rgba(0,0,0,0.30); --shadow-2: 0 2px 8px rgba(0,0,0,0.36); --shadow-3: 0 8px 24px rgba(0,0,0,0.44); --shadow-4: 0 16px 48px rgba(0,0,0,0.52); --shadow-glass: 0 8px 32px rgba(0,0,0,0.50); } } /* Explicit dark override (force dark even in a light OS) */ [data-theme="dark"] { --blue:#0A84FF; --green:#30D158; --indigo:#5E5CE6; --orange:#FF9F0A; --pink:#FF375F; --purple:#BF5AF2; --red:#FF453A; --teal:#40C8E0; --cyan:#64D2FF; --yellow:#FFD60A; --mint:#63E6E2; --brown:#AC8E68; --gray-1:#8E8E93; --gray-2:#636366; --gray-3:#48484A; --gray-4:#3A3A3C; --gray-5:#2C2C2E; --gray-6:#1C1C1E; --bg:#000; --bg-secondary:#1C1C1E; --bg-tertiary:#2C2C2E; --bg-grouped:#000; --label:rgba(255,255,255,1); --label-secondary:rgba(235,235,245,0.6); --label-tertiary:rgba(235,235,245,0.3); --label-quaternary:rgba(235,235,245,0.16); --separator:rgba(84,84,88,0.6); --separator-opaque:#38383A; --fill-1:rgba(120,120,128,0.36); --fill-2:rgba(120,120,128,0.32); --fill-3:rgba(120,120,128,0.24); --fill-4:rgba(120,120,128,0.18); --material-ultrathin-tint:rgba(30,30,32,0.44); --material-thin-tint:rgba(30,30,32,0.62); --material-regular-tint:rgba(30,30,32,0.74); --material-thick-tint:rgba(30,30,32,0.86); } /* ============================================================================ BASE — sensible defaults so the tokens feel Apple-native immediately. ============================================================================ */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-optical-sizing: auto; /* SF switches Text↔Display by size */ -webkit-font-smoothing: antialiased; /* thinner, Apple-like rendering */ text-rendering: optimizeLegibility; font-size: var(--text-body); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); color: var(--label); background: var(--bg); } /* Accessibility: respect the three reduced-* preferences everywhere. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }