/* ───────────────────────────────────────────────────────────── NUCLEUS — The Core Design System Tokens: colors, type, spacing, motion, surface ───────────────────────────────────────────────────────────── */ @font-face { font-family: "Barlow"; src: url("./fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("./fonts/Barlow-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Barlow"; src: url("./fonts/Barlow-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("./fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("./fonts/Barlow-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("./fonts/Barlow-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Barlow"; src: url("./fonts/Barlow-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("./fonts/Barlow-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; } /* Space Mono is loaded from Google Fonts in HTML — kept off the critical font path because Barlow does 95% of the typography. */ :root { /* ═══ CORE COLOR TOKENS ═══════════════════════════════════ */ /* Primary surface family — paper, never pure white */ --vellum: #EBE9E1; /* Primary surface (warm off-white) */ --paper: #DEDAD0; /* Alt surface, fallback media */ --paper-lift: #E4E2D9; /* Card surface on vellum */ /* Ink family — cast iron, never pure black */ --ink: #1C1C1E; /* Primary type & UI */ --graphite: #4A4A4C; /* Secondary UI / body on light */ --ash: #8A8A8C; /* Tertiary / placeholders */ --ghost: #C8C5BA; /* Borders on vellum */ /* Signal accents — reserved for meaning, never decoration */ --moss: #4B5320; /* Completion (15/15 daily brief) */ --moss-deep: #3A4118; /* Moss hover */ --moss-mid: #5C6628; /* Moss secondary */ --moss-light: #A8B86A; /* Moss accent on dark */ --ochre: #B87333; /* Milestone / smart suggestion / streak */ --ochre-deep: #8F5A25; /* Ochre hover */ --ochre-light: #C8854A; /* Ochre on dark */ /* Border + scrim alpha tokens (ink-based) */ --border: rgba(28, 28, 30, 0.12); --border-md: rgba(28, 28, 30, 0.22); --border-hi: rgba(28, 28, 30, 0.50); --scrim-04: rgba(28, 28, 30, 0.04); --scrim-08: rgba(28, 28, 30, 0.08); --scrim-14: rgba(28, 28, 30, 0.14); --scrim-24: rgba(28, 28, 30, 0.24); --scrim-46: rgba(28, 28, 30, 0.46); --scrim-65: rgba(28, 28, 30, 0.65); /* Inverse alphas — vellum on ink */ --vellum-12: rgba(235, 233, 225, 0.12); --vellum-20: rgba(235, 233, 225, 0.20); --vellum-28: rgba(235, 233, 225, 0.28); --vellum-46: rgba(235, 233, 225, 0.46); --vellum-65: rgba(235, 233, 225, 0.65); --vellum-80: rgba(235, 233, 225, 0.80); /* ═══ SEMANTIC ALIASES ═══════════════════════════════════ */ --surface: var(--vellum); --surface-alt: var(--paper); --surface-card: #FFFFFF; /* used as Card-on-vellum within app */ --surface-completion: var(--moss); --fg-1: var(--ink); /* Primary text */ --fg-2: var(--graphite); /* Body / secondary */ --fg-3: var(--ash); /* Tertiary, labels */ --fg-disabled: var(--vellum-46); --fg-on-ink: var(--vellum); --fg-on-moss: var(--vellum); --fg-on-ochre: var(--ink); --accent-positive: var(--moss); --accent-milestone: var(--ochre); /* ═══ TYPOGRAPHY ═══════════════════════════════════════════ */ --font-display: "Barlow", "Helvetica Neue", system-ui, sans-serif; --font-body: "Barlow", "Helvetica Neue", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — display set is dense, headline-driven. Tight tracking on big sizes; open tracking on mono labels. */ --t-display-1: 44px; --t-display-1-lh: 44px; --t-display-1-tr: -1.2px; --t-display-2: 38px; --t-display-2-lh: 38px; --t-display-2-tr: -1.1px; --t-headline: 32px; --t-headline-lh: 34px; --t-headline-tr: -0.8px; --t-title: 24px; --t-title-lh: 30px; --t-title-tr: -0.5px; --t-subtitle: 22px; --t-subtitle-lh: 28px; --t-subtitle-tr: -0.2px; --t-body-lg: 21px; --t-body-lg-lh: 29px; --t-body-lg-tr: -0.2px; --t-body: 18px; --t-body-lh: 26px; --t-body-tr: 0px; --t-body-sm: 16px; --t-body-sm-lh: 22px; --t-body-sm-tr: 0px; --t-caption: 14px; --t-caption-lh: 20px; --t-caption-tr: 0px; --t-micro: 12px; --t-micro-lh: 16px; --t-micro-tr: 0px; /* Mono labels — wide letter-spacing (1.8px ~= 0.16em at 11px) */ --t-label: 11px; --t-label-lh: 16px; --t-label-tr: 1.8px; --t-label-sm: 10px; --t-label-sm-lh: 14px; --t-label-sm-tr: 2px; --t-label-xs: 9px; --t-label-xs-lh: 12px; --t-label-xs-tr: 2.2px; /* ═══ SPACING — base unit = 4px (ring stroke at 100px canvas ≈ 13px) ═══ */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* ═══ CORNER RADII — soft, but never decorative ═══ */ /* App icon uses Apple superellipse ratio: r = 0.2237 × size */ --radius-0: 0px; --radius-1: 4px; /* hairline detail */ --radius-2: 8px; /* none in spec — avoid */ --radius-3: 12px; /* small cards, primary CTA */ --radius-4: 16px; /* reason pills, source chips */ --radius-5: 18px; /* source chip */ --radius-6: 24px; /* media surface, secondary card */ --radius-7: 28px; /* completion card */ --radius-pill: 999px; /* tab bar capsule, feedback pills */ --radius-icon-1024: 229px; /* 0.2237 × 1024 app icon */ /* ═══ ELEVATION — minimal. The system avoids shadow as decoration ═══ */ --shadow-0: none; --shadow-1: 0 4px 10px rgba(28, 28, 30, 0.08); /* pills, chips */ --shadow-2: 0 4px 16px rgba(28, 28, 30, 0.10); /* tab bar */ --shadow-3: 0 6px 24px rgba(28, 28, 30, 0.14); /* bottom sheet */ --shadow-icon: 0 8px 22px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.18); /* ═══ MOTION — spring-led, no easing curves chosen at random ═══ */ --duration-snap: 90ms; /* dismiss */ --duration-quick: 140ms; /* open */ --duration-base: 180ms; /* fade */ --duration-medium: 240ms; /* slide */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* default out */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* symmetric */ /* Spring values used by ring lift (Framer): stiffness 780, damping 42, mass 0.58 — ring rise stiffness 1400, damping 50, mass 0.34 — gap snap */ /* ═══ GRAIN — applied as fixed overlay at 3% opacity, multiply ═══ */ --grain-opacity: 0.03; } /* Force the warm paper texture on whatever the root surface is. */ html, body { background: var(--surface); color: var(--fg-1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ═══ SEMANTIC TYPE STYLES ════════════════════════════════════ Apply these classes directly OR copy properties into components. ─────────────────────────────────────────────────────────── */ .display-1, h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-display-1); line-height: var(--t-display-1-lh); letter-spacing: var(--t-display-1-tr); color: var(--fg-1); } .display-2 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-display-2); line-height: var(--t-display-2-lh); letter-spacing: var(--t-display-2-tr); color: var(--fg-1); } .headline, h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-headline); line-height: var(--t-headline-lh); letter-spacing: var(--t-headline-tr); color: var(--fg-1); } .title, h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-title); line-height: var(--t-title-lh); letter-spacing: var(--t-title-tr); color: var(--fg-1); } .subtitle, h4 { font-family: var(--font-body); font-weight: 400; font-size: var(--t-subtitle); line-height: var(--t-subtitle-lh); letter-spacing: var(--t-subtitle-tr); color: var(--fg-1); } .body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body-lg); line-height: var(--t-body-lg-lh); letter-spacing: var(--t-body-lg-tr); color: var(--fg-2); } .body, p { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body); line-height: var(--t-body-lh); letter-spacing: var(--t-body-tr); color: var(--fg-2); } .body-sm, small { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body-sm); line-height: var(--t-body-sm-lh); color: var(--fg-2); } .caption { font-family: var(--font-body); font-weight: 400; font-size: var(--t-caption); line-height: var(--t-caption-lh); color: var(--fg-2); } /* Mono labels — system signage. ALL CAPS, wide tracking. */ .label { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-label); line-height: var(--t-label-lh); letter-spacing: var(--t-label-tr); text-transform: uppercase; color: var(--fg-2); } .label-sm { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-label-sm); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-tr); text-transform: uppercase; color: var(--fg-3); } .label-xs { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-label-xs); line-height: var(--t-label-xs-lh); letter-spacing: var(--t-label-xs-tr); text-transform: uppercase; color: var(--fg-3); } /* Mono inline (no caps) — for timestamps, source codes */ code, .mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-caption); line-height: var(--t-caption-lh); color: var(--fg-2); letter-spacing: 0.02em; } /* ═══ THE GRAIN OVERLAY ══════════════════════════════════════ Drop into any page root to add the paper-grain texture. Inline data URI so it works without network. */ .grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: var(--grain-opacity); mix-blend-mode: multiply; }