/* ========================================================================== NOCTUA — Field System Tokens Version: 2.0 — Field System (TX-6 inspired) Date: April 2026 ========================================================================== The single source of truth for all visual decisions on the landing page. Monochrome surface · LED accents for state only · lowercase technical type. Structure: 01. Colour — surface palette 02. Colour — LED accents (state only, <5% of surface) 03. Colour — semantic assignments 04. Colour — legacy aliases (keep old selectors working) 05. Typography — families 06. Typography — scale 07. Typography — weights, leading, tracking 08. Spacing 09. Layout — radius, borders 10. Shadows + LED glows 11. Transitions 12. Component tokens — nav, edition card, player, feed 13. Z-index ========================================================================== */ :root { /* ------------------------------------------------------------------------- 01. COLOUR — SURFACE PALETTE Monochrome only. CNC aluminium, anodised black, brushed steel. -------------------------------------------------------------------------- */ --color-black: #0a0a0a; /* Base surface — the chassis */ --color-carbon: #161616; /* Raised surface — cells, cards */ --color-graphite: #1e1e1e; /* Inset surface — nav, footer */ --color-steel: #2a2a2a; /* Border, hairline divider */ --color-anodized: #3a3a3a; /* Edge of a milled part */ --color-grey-700: #5c5c5c; /* Disabled labels, very muted */ --color-grey-500: #8a8a8a; /* Muted text, secondary labels */ --color-grey-300: #bcbcbc; /* Body text, mid emphasis */ --color-grey-100: #e4e4e4; /* Near-white text */ --color-white: #f4f4f2; /* Primary text — never pure white */ /* ------------------------------------------------------------------------- 02. COLOUR — LED ACCENTS Used only where they signal state. Never decorative. <5% of surface. Each accent carries a meaning, not a mood. -------------------------------------------------------------------------- */ --color-led-orange: #ff5a1f; /* Primary accent — calls to action, "now playing" */ --color-led-amber: #ffae00; /* Warning, sync, attention */ --color-led-green: #3ad17a; /* Ready, success, signal present */ --color-led-red: #ff3b30; /* Error, clip, overload */ --color-led-orange-hover: #ff7440; /* Brighter on interaction */ /* ------------------------------------------------------------------------- 03. COLOUR — SEMANTIC ASSIGNMENTS Use these in components, not raw palette. -------------------------------------------------------------------------- */ /* Surfaces */ --surface-base: var(--color-black); --surface-raised: var(--color-carbon); --surface-inset: var(--color-graphite); --surface-panel: var(--color-carbon); --surface-overlay: var(--color-graphite); /* Text */ --text-primary: var(--color-white); --text-secondary: var(--color-grey-300); --text-tertiary: var(--color-grey-500); --text-muted: var(--color-grey-700); --text-on-dark: var(--color-white); --text-on-dark-muted: var(--color-grey-500); --text-accent: var(--color-led-orange); /* Borders */ --border-default: var(--color-steel); --border-faint: var(--color-graphite); --border-ano: var(--color-anodized); --border-accent: var(--color-led-orange); /* Interactive */ --interactive-primary: var(--color-led-orange); --interactive-primary-hover: var(--color-led-orange-hover); --interactive-surface: var(--color-steel); /* The mark itself — monochrome, never coloured */ --color-mark: var(--color-white); /* ------------------------------------------------------------------------- 04. COLOUR — LEGACY ALIASES Old token names from the parchment system, remapped to field-system values. Allows existing CSS rules to keep working while we transition. These will be removed once the codebase fully uses the new names. -------------------------------------------------------------------------- */ --color-parchment: var(--color-black); --color-vellum: var(--color-carbon); --color-paper: var(--color-graphite); --color-border-warm: var(--color-steel); --color-border-faint: var(--color-graphite); --color-ink: var(--color-white); --color-ink-secondary: var(--color-grey-300); --color-ink-tertiary: var(--color-grey-500); --color-dust: var(--color-grey-500); --color-umber: var(--color-grey-700); --color-copper: var(--color-led-orange); --color-copper-hover: var(--color-led-orange-hover); --color-copper-muted: rgba(255, 90, 31, 0.18); --color-copper-faint: rgba(255, 90, 31, 0.06); /* Status — functional only */ --color-success: var(--color-led-green); --color-success-surface: rgba(58, 209, 122, 0.08); --color-error: var(--color-led-red); --color-error-surface: rgba(255, 59, 48, 0.1); --color-warning: var(--color-led-amber); --color-warning-surface: rgba(255, 174, 0, 0.1); /* ------------------------------------------------------------------------- 05. TYPOGRAPHY — FAMILIES Helvetica Neue carries the display. JetBrains Mono carries the data. No serifs — the field system is engineered, not editorial. -------------------------------------------------------------------------- */ --font-display: 'Helvetica Neue', 'Helvetica', 'Inter', Arial, sans-serif; --font-ui: 'Helvetica Neue', 'Helvetica', 'Inter', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ------------------------------------------------------------------------- 06. TYPOGRAPHY — SCALE Display sizes hold tight. UI sizes hold quiet. -------------------------------------------------------------------------- */ --text-display-xl: 2.5rem; /* 40px — page-level headings */ --text-display-lg: 1.875rem; /* 30px — section headings */ --text-display-md: 1.375rem; /* 22px — card / sub-section headings */ --text-display-sm: 1.0625rem; /* 17px — small headings */ --text-display-xs: 0.875rem; /* 14px — inline display use */ --text-body-lg: 1rem; /* 16px — primary body */ --text-body-md: 0.875rem; /* 14px — secondary body */ --text-body-sm: 0.8125rem; /* 13px — card metadata, mono data */ --text-label: 0.75rem; /* 12px — nav links, labels */ --text-caption: 0.6875rem; /* 11px — serial numbers, legal */ --text-micro: 0.625rem; /* 10px — uppercase micro labels */ /* ------------------------------------------------------------------------- 07. TYPOGRAPHY — WEIGHT, LEADING, TRACKING The field system permits 700 on display headings only — the engraved- faceplate weight. Body stays at 400. Mono labels at 400 or 500. -------------------------------------------------------------------------- */ --weight-regular: 400; --weight-medium: 500; --weight-display: 700; /* New — display headings only */ /* Line heights */ --leading-tight: 1.05; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.75; /* Letter spacing */ --tracking-tight: -0.03em; /* Display headings — tight, technical */ --tracking-snug: -0.015em; /* Sub-display */ --tracking-normal: 0em; --tracking-wide: 0.06em; --tracking-wider: 0.1em; --tracking-widest: 0.18em; /* Uppercase micro labels */ /* ------------------------------------------------------------------------- 08. SPACING — 8px module (was 4) The grid is the law. All padding, margin, gap resolve to multiples of 8. -------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px — sub-unit, only for icon adjustments */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 2.5rem; /* 40px */ --space-10: 3rem; /* 48px */ --space-12: 4rem; /* 64px */ --space-16: 5rem; /* 80px */ --gap-page: var(--space-4); --gap-section: var(--space-6); /* ------------------------------------------------------------------------- 09. LAYOUT — RADIUS & BORDERS Sharp. 2–3px maximum — enough to soften the edge of a milled part, never enough to read as "round". -------------------------------------------------------------------------- */ --radius-none: 0px; --radius-xs: 2px; --radius-sm: 2px; --radius-md: 3px; --radius-full: 9999px; /* Only for circular marks, LED dots */ --radius-card: var(--radius-md); --radius-button: var(--radius-xs); --border-width-hairline: 1px; --border-width-default: 1px; --border-width-accent: 1px; --border-width-focus: 2px; /* ------------------------------------------------------------------------- 10. SHADOWS + LED GLOWS Almost no drop shadows — borders define surfaces. LED glows reinforce the indicator-light metaphor for state. -------------------------------------------------------------------------- */ --shadow-none: none; --shadow-focus: 0 0 0 2px var(--color-led-orange); --glow-led-orange: 0 0 6px var(--color-led-orange); --glow-led-amber: 0 0 6px var(--color-led-amber); --glow-led-green: 0 0 6px var(--color-led-green); --glow-led-red: 0 0 6px var(--color-led-red); --screen-inset: inset 0 0 28px rgba(0, 0, 0, 0.65); /* ------------------------------------------------------------------------- 11. TRANSITIONS -------------------------------------------------------------------------- */ --transition-fast: 0.1s ease; --transition-default: 0.15s ease; --transition-slow: 0.25s ease; /* ------------------------------------------------------------------------- 12. COMPONENT TOKENS — NAV, CARDS, PLAYER, FEED -------------------------------------------------------------------------- */ /* Navigation */ --nav-bg: var(--surface-base); --nav-border: 1px solid var(--border-default); --nav-height: 56px; --nav-padding: 0 var(--space-5); --nav-wordmark-font: var(--font-display); --nav-wordmark-size: var(--text-display-xs); --nav-wordmark-weight: var(--weight-display); --nav-wordmark-color: var(--text-primary); --nav-wordmark-tracking: var(--tracking-tight); --nav-link-size: var(--text-label); --nav-link-color: var(--text-tertiary); --nav-link-color-active: var(--text-primary); /* Edition card — full token set so consumers (frontend EditionCard.module.css) resolve */ --card-bg: var(--surface-raised); --card-bg-active: var(--surface-raised); --card-border: 1px solid var(--border-default); --card-border-active: 1px solid var(--color-led-orange); --card-radius: var(--radius-card); --card-padding: var(--space-4) var(--space-5); --card-footer-bg: var(--surface-inset); --card-footer-border: 1px solid var(--border-default); --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-display); --card-title-leading: var(--leading-snug); --card-title-color: var(--text-primary); --card-label-size: var(--text-micro); --card-label-weight: var(--weight-regular); --card-label-tracking: var(--tracking-widest); --card-label-color: var(--text-tertiary); --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(--text-muted); --card-serial-tracking: var(--tracking-wider); --card-num-font: var(--font-mono); --card-num-size: var(--text-caption); --card-num-color: var(--color-led-amber); --card-num-tracking: var(--tracking-wider); --card-divider: 1px solid var(--border-default); /* Gap aliases */ --gap-card-internal: var(--space-4); --gap-card-section: var(--space-3); --gap-field-stack: 0.25rem; --gap-meta-row: var(--space-5); --gap-feed: var(--space-2); --gap-nav: var(--space-5); /* Border focus pre-composed */ --border-focus: 2px solid var(--color-led-orange); /* Player */ --player-bg: var(--surface-inset); --player-track-bg: var(--color-steel); --player-progress-color: var(--color-led-orange); /* Feed */ --feed-bg: var(--surface-base); /* ------------------------------------------------------------------------- 13. Z-INDEX -------------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-nav: 100; --z-player: 200; --z-modal: 300; --z-toast: 400; } /* ========================================================================== BASE STYLES ========================================================================== */ *, *::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); /* Subtle film-grain noise + radial wash — gives the surface a brushed-metal feel */ background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.025), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); background-attachment: fixed; } /* Focus — LED-orange ring */ :focus-visible { outline: var(--border-width-focus) solid var(--color-led-orange); outline-offset: 2px; } /* Display headings — Helvetica 700 tight lowercase. Wrapped in @layer base so consumers (e.g. the React app's Tailwind utilities) can override these defaults via more specific utility classes. Without the layer, this rule is unlayered and beats any layered styles regardless of specificity. */ @layer base { .display, h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-primary); text-transform: lowercase; } h1 { font-size: var(--text-display-xl); } h2 { font-size: var(--text-display-lg); } h3 { font-size: var(--text-display-md); } } /* Mono label — uppercase, wide tracking */ .field-label { font-family: var(--font-mono); font-size: var(--text-micro); font-weight: var(--weight-regular); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-tertiary); } /* Serial — monospaced identifiers */ .serial { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); letter-spacing: var(--tracking-wider); } /* LED accent text */ .accent { color: var(--color-led-orange); }