/* ============================================================ NULLTAG · DESIGN SYSTEM · CORE TOKENS ------------------------------------------------------------ Swiss independent electronic music label / artist project. Buchs SG · MMXXVI · Ivan Stricker ------------------------------------------------------------ Source-of-truth for type + color + spacing across all NULLTAG surfaces (covers, release packs, web, prints). ============================================================ */ @font-face { font-family: "Bebas Neue"; src: url("fonts/BebasNeue-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* Webfonts loaded from Google Fonts when this file is included alongside an HTML `` to the corresponding families: Inter Tight (400–800), Space Grotesk (400–700), JetBrains Mono (400–700), Bebas Neue (Regular). ============================================================ */ :root { /* -------------------------------------------------------- CORE PALETTE — the void, the bone, the single red mark -------------------------------------------------------- */ /* Backgrounds — voids and panels */ --void: #0a0a0a; /* primary background ("Asphalt-Schwarz") */ --void-deep: #050505; /* JPG-master void (LJ bg2) */ --panel: #141414; /* track-card / sidebar surface */ --code-bg: #1a1a1a; /* monospace blocks, suno prompts */ --border: #2a2a2a; /* hairline separators */ --border-warm: #3a3a3a; /* hover, focus rings */ /* Foreground — BONE on void, the only "white" we use */ --bone: #e8e3da; /* primary text — "Knochen-Weiss" */ --bone-dim: #c9c4bc; /* secondary copy */ --muted: #8a8580; /* muted / meta / labels */ --muted-deep: #5a5550; /* almost-disabled */ /* The single red mark — TIEFROT, used ONCE per surface */ --tiefrot: #ff2a55; /* lichtjahre accent (active) */ --tiefrot-dim: #3a0000; /* accent-dim, used for hover-bg of red ctrls */ --crimson: #c44a3a; /* warmer red (cinetekk panel accent) */ --crimson-deep: #822818; /* jupiter great-red-spot */ /* Cold counter-accent — used sparingly, mostly in meta tables */ --cold: #4a8aaa; --cold-blue: #5fc8e0; /* lichtjahre LJ-02 glow */ --good: #4a8a4a; /* -------------------------------------------------------- RELEASE-LINE COLOR SIGNATURES ("Schienen-Farben") One palette per release rail. bg1 = inner radial, bg2 = void edge, glow = hero glow, accent = always TIEFROT. -------------------------------------------------------- */ /* COSMIC · Lichtjahre · uplifting · warm magenta */ --cosmic-bg1: #1a0824; --cosmic-bg2: #0a0410; --cosmic-glow: #e879c4; --cosmic-glow2: #a445a0; /* NACHTBLAU · introspective · cool ocean */ --nachtblau-bg1: #031024; --nachtblau-bg2: #010614; --nachtblau-glow:#3aa8ff; --nachtblau-glow2:#1a5a90; /* EISFLUG · cyan ice · fragile clarity */ --eisflug-bg1: #0a1a1f; --eisflug-bg2: #04090c; --eisflug-glow: #7adfe8; --eisflug-glow2: #3a8896; /* GLUT · crimson fusion · burning */ --glut-bg1: #1a0604; --glut-bg2: #0a0302; --glut-glow: #ff6a2a; --glut-glow2: #a83818; /* KNOCHEN · bone parchment · ascetic */ --knochen-bg1: #0e0c08; --knochen-bg2: #050402; --knochen-glow: #d4c8a8; --knochen-glow2: #8a8068; /* GIFTGRÜN · poison green · uncanny */ --giftgrun-bg1: #06120a; --giftgrun-bg2: #020805; --giftgrun-glow: #5ae082; --giftgrun-glow2:#2a8048; /* SODIUM · NACHTSTROM · swiss night highway · 589nm */ --sodium-bg1: #1a1815; --sodium-bg2: #0a0907; --sodium-glow: #e8703a; --sodium-glow2: #8a4220; /* -------------------------------------------------------- TYPOGRAPHY — three families do everything -------------------------------------------------------- */ /* Bebas Neue — the cover title face. Only ever uppercase, only ever stacked, only ever HUGE. Never body copy. */ --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; /* Inter Tight — the brutalist hero alternative. 800-weight uppercase poster type for editorial covers. */ --font-brutal: "Inter Tight", "Helvetica Neue", system-ui, sans-serif; /* Space Grotesk — soft hero + body alternative for less aggressive surfaces (waveform covers, web). */ --font-grotesk: "Space Grotesk", "Inter", system-ui, sans-serif; /* JetBrains Mono — the technical voice of the label. Catalog numbers, BPM, key, ISRC, every meta string. */ --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; /* Body sans — only used for long-form prose inside packs. System stack so prose stays neutral, lets the mono pop. */ --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; /* -------------------------------------------------------- TYPE SCALE — mono-and-display dominant -------------------------------------------------------- */ --fs-mono-xs: 10.5px; /* tracked labels: NULLTAG / RECORDINGS */ --fs-mono-sm: 11px; /* eyebrows, catalog numbers */ --fs-mono-md: 12.5px; /* meta strips, table cells */ --fs-mono-lg: 14px; /* section headers / mono h3 */ --fs-mono-xl: 18px; /* track-card titles */ --fs-mono-2xl: 22px; /* H2 headings inside packs */ --fs-body-sm: 13.5px; --fs-body-md: 14px; --fs-body-lg: 17px; /* blockquote pull */ --fs-display-sm: 64px; /* hero h1 in packs */ --fs-display-md: 92px; /* cover title two-line stack */ --fs-display-lg: 128px; /* cover title single line */ --fs-display-xl: 168px; /* lichtjahre cover Bebas Neue */ --lh-tight: 0.86; --lh-display: 0.92; --lh-body: 1.6; --lh-mono: 1.55; /* Letter-spacing — extended tracking is core to the brand. NULLTAG wordmark sits at 0.22em or wider. */ --ls-tight: -0.04em; /* Inter Tight 800 hero */ --ls-display: -0.01em; /* Bebas Neue title (already condensed) */ --ls-mono-tag: 0.06em; /* mono inside tables */ --ls-mono-eye: 0.18em; /* mono eyebrow labels */ --ls-mono-stamp: 0.28em; /* "NULLTAG · MMXXVI · CINETEKK" */ --ls-mono-wide: 0.4em; /* wordmark on covers */ /* -------------------------------------------------------- SPACING / RADII / BORDERS The system is mostly square — radii are minimal. -------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px; --s-11: 120px; /* generous section rhythm — modern breathing room */ --s-12: 160px; --site-max: 1200px; /* max content width — slightly tighter for a calmer measure */ --r-0: 0px; /* structural grids stay sharp */ --r-sm: 4px; /* code badges */ --r-md: 8px; /* buttons, controls — softened for a cleaner, modern feel */ --r-lg: 12px; /* cards / panels */ --r-xl: 16px; /* hero-scale surfaces */ --r-pill: 999px; /* tag chips */ /* Modern refresh layer — subtle elevation + a focus ring, kept quiet */ --surface: #101010; /* raised panel, a hair above the void */ --surface-2: #161616; /* hover / nested surface */ --hairline: rgba(232,227,218,0.08); /* softer than --border, for calm dividers */ --glass: rgba(12,12,12,0.72); /* blurred nav / overlays */ --focus: var(--tiefrot); --shadow-soft: 0 18px 40px -24px rgba(0,0,0,0.7); --bw: 1px; /* hairline default */ --bw-2: 1.5px; /* corner ticks on covers */ --bw-3: 2px; /* tiefrot accent line */ /* -------------------------------------------------------- ELEVATION — almost flat. Light only sinks INTO the void. -------------------------------------------------------- */ --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset; --shadow-cover: 0 30px 60px -20px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset; --shadow-lift: 0 12px 32px -16px rgba(0,0,0,0.6); /* -------------------------------------------------------- MOTION — short, linear, no bounces. -------------------------------------------------------- */ --t-fast: 120ms; --t-base: 150ms; --t-slow: 240ms; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); } /* ============================================================ End of tokens. Element styles live in colors_and_type.css, which imports this file — surfaces that only want the tokens (app shells with their own component CSS, e.g. the piano trainer) link THIS file directly and collide with nothing. ============================================================ */