/* ========================================================================== NOCTUA — Design Tokens Version: 1.0 Date: April 2026 ========================================================================== The single source of truth for all visual decisions. Every component references these tokens. Change here, change everywhere. Structure: 01. Colour — core palette 02. Colour — semantic assignments 03. Colour — dark mode overrides 04. Typography — families 05. Typography — scale 06. Typography — weights, leading, tracking 07. Spacing 08. Layout — radius, borders 09. Shadows 10. Transitions 11. Component tokens — edition card 12. Component tokens — navigation 13. Component tokens — player 14. Component tokens — feed 15. Z-index ========================================================================== */ :root { /* ------------------------------------------------------------------------- 01. COLOUR — CORE PALETTE The five colours that define Noctua. Parchment, not white. Copper is the only expressive colour — used sparingly, meaningfully. -------------------------------------------------------------------------- */ --color-parchment: #F9F6EF; /* Base surface — warm off-white, never pure white */ --color-vellum: #F4EFE6; /* Secondary surface — slightly deeper than parchment */ --color-paper: #EDE7DA; /* Tertiary surface — card backgrounds, inset areas */ --color-border-warm: #D8CEBB; /* Primary border — the rule colour */ --color-border-faint: #E8E2D5; /* Faint border — dividers within cards */ --color-ink: #2C2C2A; /* Primary text — near-black, never pure black */ --color-ink-secondary: #4a4540; /* Secondary text — body copy */ --color-ink-tertiary: #6B5C45; /* Tertiary text — metadata, labels */ --color-dust: #9a8a70; /* Muted text — captions, placeholders */ --color-umber: #7a6a58; /* Subtle text — serial numbers, secondary labels */ --color-copper: #B87333; /* Accent — calls to action, active states, the mark */ --color-copper-hover: #9a6228; /* Accent hover — darker copper on interaction */ --color-copper-muted: #E8D5BC; /* Accent surface — copper tint for backgrounds */ --color-copper-faint: #F5EDE0; /* Accent wash — very light copper for selected states */ /* Status — functional only, never decorative */ --color-success: #3B6D11; --color-success-surface: #EAF3DE; --color-error: #A32D2D; --color-error-surface: #FCEBEB; --color-warning: #854F0B; --color-warning-surface: #FAEEDA; /* ------------------------------------------------------------------------- 02. COLOUR — SEMANTIC ASSIGNMENTS Named by purpose, not by hue. Use these in components, not raw palette. -------------------------------------------------------------------------- */ /* Surfaces */ --surface-base: var(--color-parchment); --surface-raised: var(--color-vellum); --surface-inset: var(--color-paper); --surface-overlay: var(--color-ink); /* Player bar, dark surfaces */ /* Text */ --text-primary: var(--color-ink); --text-secondary: var(--color-ink-secondary); --text-tertiary: var(--color-ink-tertiary); --text-muted: var(--color-dust); --text-on-dark: var(--color-parchment); --text-on-dark-muted: #6a6460; /* Muted text on the dark player bar */ --text-accent: var(--color-copper); /* Borders */ --border-default: var(--color-border-warm); --border-faint: var(--color-border-faint); --border-accent: var(--color-copper); /* Interactive */ --interactive-primary: var(--color-copper); --interactive-primary-hover: var(--color-copper-hover); --interactive-surface: var(--color-copper-faint); /* ------------------------------------------------------------------------- 03. COLOUR — DARK MODE Dark mode uses ink surfaces. Copper remains unchanged — warmth survives. Applied via @media (prefers-color-scheme: dark) below. -------------------------------------------------------------------------- */ /* Dark mode values are defined in the media query at the bottom of this file */ /* ------------------------------------------------------------------------- 04. TYPOGRAPHY — FAMILIES Two faces only. Playfair Display carries authority. Inter carries clarity. The owl is in the mark. The words stay clean. -------------------------------------------------------------------------- */ --font-display: 'Playfair Display', 'Georgia', serif; --font-ui: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'Fira Code', 'Courier New', monospace; /* ------------------------------------------------------------------------- 05. TYPOGRAPHY — SCALE Named by role, not by size. Sizes are in rem for accessibility. The display scale is for Playfair. The UI scale is for Inter. -------------------------------------------------------------------------- */ /* Display — Playfair Display — edition titles, headings, wordmark */ --text-display-xl: 2rem; /* 32px — page-level headings */ --text-display-lg: 1.625rem; /* 26px — edition title on card */ --text-display-md: 1.375rem; /* 22px — section headings, feed title */ --text-display-sm: 1.125rem; /* 18px — card headings at smaller sizes */ --text-display-xs: 1rem; /* 16px — inline display use */ /* UI — Inter — metadata, labels, body, navigation */ --text-body-lg: 1rem; /* 16px — primary body copy */ --text-body-md: 0.875rem; /* 14px — secondary body, descriptions */ --text-body-sm: 0.8125rem; /* 13px — card metadata, transcripts */ --text-label: 0.75rem; /* 12px — nav links, timestamps, durations */ --text-caption: 0.6875rem; /* 11px — serial numbers, legal, version strings */ --text-micro: 0.625rem; /* 10px — ticket field labels, uppercase labels */ /* ------------------------------------------------------------------------- 06. TYPOGRAPHY — WEIGHT, LEADING, TRACKING Two weights only: 400 regular, 500 medium. Never 600 or 700. Playfair 400 already carries authority — it doesn't need bolding. -------------------------------------------------------------------------- */ --weight-regular: 400; --weight-medium: 500; /* Line heights */ --leading-tight: 1.2; /* Display headings — tight, editorial */ --leading-snug: 1.4; /* Card titles, shorter copy */ --leading-normal: 1.6; /* Body copy, descriptions */ --leading-relaxed: 1.75; /* Transcript text — maximum legibility */ /* Letter spacing — the airline ticket principle: precise, considered */ --tracking-tight: -0.01em; /* Display headings */ --tracking-normal: 0em; /* Body, UI */ --tracking-wide: 0.04em; /* Metadata, button labels */ --tracking-wider: 0.08em; /* Serial numbers */ --tracking-widest: 0.14em; /* Uppercase micro labels — DURATION, SOURCE */ /* ------------------------------------------------------------------------- 07. SPACING Base unit is 4px. All spacing is multiples of 4. Named for clarity, not abstraction. -------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Semantic spacing — use these in components */ --gap-card-internal: var(--space-4); /* Padding inside a card */ --gap-card-section: var(--space-3); /* Between sections within a card */ --gap-field-stack: var(--space-1); /* Between label and value in ticket fields */ --gap-meta-row: var(--space-5); /* Between metadata columns in card footer */ --gap-feed: var(--space-2); /* Between edition cards in the feed */ --gap-nav: var(--space-5); /* Between navigation items */ --gap-page: var(--space-5); /* Page-level horizontal padding */ --gap-section: var(--space-6); /* Between page sections */ /* ------------------------------------------------------------------------- 08. LAYOUT — RADIUS & BORDERS Corners are sharp or barely rounded. No pill shapes performing friendliness. The sharpness is part of the authority. -------------------------------------------------------------------------- */ /* Border radius — airline ticket principle: sharp documents, not soft apps */ --radius-none: 0px; --radius-xs: 2px; /* Cards, edition cards — barely perceptible */ --radius-sm: 4px; /* Buttons, small interactive elements */ --radius-md: 6px; /* Modals, larger containers */ --radius-full: 9999px; /* Only for circular marks, avatars — never for cards */ /* Default card radius */ --radius-card: var(--radius-xs); --radius-button: var(--radius-sm); /* Border widths */ --border-width-hairline: 0.5px; /* Faint dividers */ --border-width-default: 1px; /* Standard card borders */ --border-width-accent: 1.5px; /* Active/selected card — copper border */ --border-width-focus: 2px; /* Focus rings — accessibility */ /* Border styles — pre-composed */ --border-default: var(--border-width-default) solid var(--color-border-warm); --border-faint: var(--border-width-hairline) solid var(--color-border-faint); --border-accent: var(--border-width-accent) solid var(--color-copper); --border-focus: var(--border-width-focus) solid var(--color-copper); /* ------------------------------------------------------------------------- 09. SHADOWS Almost none. Noctua uses borders, not shadows, to define surfaces. The one exception: focus rings for accessibility. -------------------------------------------------------------------------- */ --shadow-none: none; --shadow-focus: 0 0 0 3px var(--color-copper-muted); /* Focus ring — copper wash */ /* ------------------------------------------------------------------------- 10. TRANSITIONS Subtle. Only what moves should move. -------------------------------------------------------------------------- */ --transition-fast: 0.12s ease; --transition-default: 0.2s ease; --transition-slow: 0.3s ease; /* ------------------------------------------------------------------------- 11. COMPONENT TOKENS — EDITION CARD The ticket anatomy. Every field follows label-above-value. Serial numbers on every edition — permanence and occasion. -------------------------------------------------------------------------- */ --card-bg: var(--color-vellum); --card-bg-active: var(--color-vellum); --card-border: var(--border-default); --card-border-active: var(--border-accent); --card-radius: var(--radius-card); --card-padding: var(--space-4) var(--space-5); --card-footer-bg: var(--color-paper); --card-footer-border: var(--border-faint); --card-footer-padding: var(--space-3) var(--space-5); --card-title-font: var(--font-display); --card-title-size: var(--text-display-sm); --card-title-weight: var(--weight-regular); --card-title-leading: var(--leading-snug); --card-title-color: var(--text-primary); --card-label-size: var(--text-micro); --card-label-weight: var(--weight-medium); --card-label-tracking: var(--tracking-widest); --card-label-color: var(--text-muted); --card-label-transform: uppercase; --card-value-size: var(--text-body-sm); --card-value-weight: var(--weight-medium); --card-value-color: var(--text-secondary); --card-serial-font: var(--font-mono); --card-serial-size: var(--text-caption); --card-serial-color: var(--color-umber); --card-serial-tracking: var(--tracking-wider); --card-num-font: var(--font-mono); --card-num-size: var(--text-caption); --card-num-color: var(--color-copper); --card-num-tracking: var(--tracking-wide); --card-divider: var(--border-faint); /* ------------------------------------------------------------------------- 12. COMPONENT TOKENS — NAVIGATION Quiet and functional. The wordmark anchors identity. Copper only on the active state — nothing else competes. -------------------------------------------------------------------------- */ --nav-bg: var(--color-parchment); --nav-border: var(--border-default); --nav-height: 52px; --nav-padding: 0 var(--space-5); --nav-wordmark-font: var(--font-display); --nav-wordmark-size: var(--text-display-xs); --nav-wordmark-weight: var(--weight-regular); --nav-wordmark-color: var(--text-primary); --nav-wordmark-tracking: 0.02em; --nav-link-size: var(--text-label); --nav-link-color: var(--text-muted); --nav-link-color-active: var(--text-primary); --nav-link-weight-active: var(--weight-medium); --nav-action-size: var(--text-caption); --nav-action-color: var(--color-copper); --nav-action-border: var(--border-accent); --nav-action-padding: var(--space-1) var(--space-3); --nav-action-radius: var(--radius-none); /* Sharp — not a pill */ --nav-action-tracking: var(--tracking-wide); /* ------------------------------------------------------------------------- 13. COMPONENT TOKENS — PLAYER BAR Dark surface, copper accent. The active heartbeat of the product. Progress line is the only copper in an otherwise monochrome bar. -------------------------------------------------------------------------- */ --player-bg: var(--color-ink); --player-height: 56px; --player-padding: 0 var(--space-5); --player-title-font: var(--font-display); --player-title-size: var(--text-body-sm); --player-title-weight: var(--weight-regular); --player-title-color: var(--text-on-dark); --player-meta-size: var(--text-micro); --player-meta-color: var(--text-on-dark-muted); --player-meta-tracking: var(--tracking-wide); --player-track-bg: #4a4540; --player-track-height: 2px; --player-progress-color: var(--color-copper); --player-time-font: var(--font-mono); --player-time-size: var(--text-caption); --player-time-color: #6a6460; --player-btn-color: #6a6460; --player-btn-color-active: var(--color-copper); --player-play-border: 1.5px solid var(--color-copper); --player-play-radius: var(--radius-full); --player-play-size: 28px; /* ------------------------------------------------------------------------- 14. COMPONENT TOKENS — FEED VIEW The primary daily surface. Editorial and unhurried. -------------------------------------------------------------------------- */ --feed-bg: var(--color-parchment); --feed-padding: var(--space-5); --feed-gap: var(--gap-feed); --feed-max-width: 720px; --feed-heading-font: var(--font-display); --feed-heading-size: var(--text-display-md); --feed-heading-weight: var(--weight-regular); --feed-heading-color: var(--text-primary); --feed-count-size: var(--text-caption); --feed-count-color: var(--text-muted); --feed-count-tracking: var(--tracking-wide); /* ------------------------------------------------------------------------- 15. Z-INDEX Simple and explicit. No magic numbers elsewhere in the codebase. -------------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; /* Raised cards on hover */ --z-nav: 100; /* Navigation bar */ --z-player: 200; /* Player bar — always above content */ --z-modal: 300; /* Modals, drawers */ --z-toast: 400; /* Toast notifications */ } /* ========================================================================== DARK MODE Surfaces invert to ink. Copper remains unchanged. Warmth survives. ========================================================================== */ @media (prefers-color-scheme: dark) { :root { /* Surfaces */ --surface-base: #2C2C2A; --surface-raised: #363532; --surface-inset: #1e1e1c; --surface-overlay: #1a1a18; /* Text */ --text-primary: #F0EBE0; --text-secondary: #C8BCA8; --text-tertiary: #9a8a70; --text-muted: #6B5C45; --text-on-dark: #F0EBE0; --text-on-dark-muted: #6a6460; /* Borders */ --color-border-warm: #3e3a34; --color-border-faint: #333128; /* Card */ --card-bg: #363532; --card-footer-bg: #2C2C2A; /* Nav */ --nav-bg: #2C2C2A; --nav-border: 1px solid #3e3a34; /* Feed */ --feed-bg: #2C2C2A; /* Copper stays — warmth survives dark mode */ /* --color-copper: #B87333 — unchanged */ } } /* ========================================================================== BASE STYLES Minimal global resets that apply the token system. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--surface-base); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--text-body-md); font-weight: var(--weight-regular); line-height: var(--leading-normal); } /* Focus — accessibility, using the copper wash */ :focus-visible { outline: var(--border-focus); outline-offset: 2px; box-shadow: var(--shadow-focus); } /* Display headings — Playfair takes over */ .display, h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-regular); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-primary); } h1 { font-size: var(--text-display-xl); } h2 { font-size: var(--text-display-lg); } h3 { font-size: var(--text-display-md); } /* Ticket field label — the micro uppercase pattern used throughout */ .field-label { font-family: var(--font-ui); font-size: var(--card-label-size); font-weight: var(--card-label-weight); letter-spacing: var(--card-label-tracking); text-transform: var(--card-label-transform); color: var(--card-label-color); } /* Serial — monospaced identifiers */ .serial { font-family: var(--card-serial-font); font-size: var(--card-serial-size); color: var(--card-serial-color); letter-spacing: var(--card-serial-tracking); } /* Copper accent text */ .accent { color: var(--color-copper); }