/* =============================================================================
Sound Creations Lab — Brand Tokens v1.0
-----------------------------------------------------------------------------
Canonical CSS source for the SCL brand system. Derived directly from the
v1.0 brand book (deck pages 010–015). Every value here can be traced back
to a specific slide or rule in that document.
Three decisions are locked for this surface (soundcreationslab.com):
1. Wordmark uses italic "Creations" with the phosphor dot accent
(per §02 · Wordmark, page 006 construction spec).
2. Tone (#D86A3A) doubles as the error / misuse marker color
(per §02 · Misuse, page 009 — re-used here as semantic error).
3. The site is a DARK surface — Ink ground, Bone type, Signal reserved
for the wordmark dot and live indicators
(per §03 · Combinations, page 011, combination B "INVERTED").
The light combinations (A, E, F, G) are kept here as tokens for future
editorial / blog / case-study surfaces. They are NOT applied to this site.
Production loading note:
The @import below is fine for development and small landing pages,
but for any heavier surface, move font loading into with
+ and drop the @import.
CSP note:
Loading Google Fonts requires _headers to allow:
style-src https://fonts.googleapis.com
font-src https://fonts.gstatic.com
Update `_headers` before deploying any page that consumes this file.
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Instrument+Serif:ital,wght@0,400;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
/* ---------------------------------------------------------------------------
§03 · COLOR — palette of five values (page 010)
Ink and Bone do 80% of the work. Signal is the wordmark dot and the live
state — one accent per page only. Tone warms editorial AND doubles as
the error / misuse marker on this surface. Mist handles disabled.
We do not introduce new hues.
--------------------------------------------------------------------------- */
--ink: #15130E; /* Foreground · type · structure */
--bone: #F0EBE1; /* Default surface · paper */
--signal: #D2EE4A; /* Voice · listening · live */
--tone: #D86A3A; /* Editorial warmth AND error / misuse marker */
--mist: #B8B1A2; /* Disabled · meta · hairlines */
/* Derived shades — NOT new hues, just controlled mixes for elevation and
long-form readability on the dark surface. Kept minimal on purpose. */
--ink-elevated: #1E1B14; /* Slight lift for cards on Ink ground (≈8% Bone) */
--ink-deeper: #0E0C09; /* For headers / chrome below the page body */
--bone-dim: #C4BFB4; /* Dimmed Bone for secondary text on Ink (~AA) */
--bone-quiet: #8E8A80; /* Tertiary / metadata on Ink */
--hairline: rgba(240, 235, 225, 0.10); /* 1px dividers on Ink ground */
--hairline-strong: rgba(240, 235, 225, 0.22);
/* ---------------------------------------------------------------------------
SEMANTIC SURFACE TOKENS — what the rest of the codebase reads.
This is the dark-default mapping. A future light surface (editorial /
blog) would re-bind these without touching the palette above.
--------------------------------------------------------------------------- */
--bg: var(--ink);
--bg-elevated: var(--ink-elevated);
--bg-inverted: var(--bone);
--text: var(--bone);
--text-dim: var(--bone-dim);
--text-quiet: var(--bone-quiet);
--text-inverted: var(--ink);
--accent-live: var(--signal); /* Wordmark dot · listening indicator */
--accent-editorial: var(--tone); /* Warm editorial blocks · pull quotes */
--error: var(--tone); /* Misuse marker · form errors */
--border: var(--hairline);
--border-strong: var(--hairline-strong);
/* Focus ring — Signal on Ink is 12.1 : 1 per the contrast table, so a solid
3px ring is both accessible and on-brand. */
--focus-ring: 0 0 0 3px var(--signal);
/* ---------------------------------------------------------------------------
CONTRAST CHECKS (from §03 · Color, page 010 + dark-mode calc)
Bone on Ink ......... 14.8 : 1 · AAA ✓ body text default
Signal on Ink ....... 12.1 : 1 · AAA ✓ accents, focus rings
Bone-dim on Ink ...... 9.5 : 1 · AAA ✓ secondary text
Bone-quiet on Ink .... 4.6 : 1 · AA ✓ metadata only, never body
Tone on Ink .......... ~6.5 : 1 · AA ⚠ large only — DO NOT body
Tone on Bone ......... 4.7 : 1 · AA ✓ for the rare light surface
RULE: Tone never carries body text on Ink. It's a border, marker, or
icon color on this surface. Bone is always the text in error messages,
and Tone is the bar / dot / number beside it. (See §02 Misuse layout.)
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
§03 · TYPOGRAPHY — three families, fixed roles (page 012)
Display ........ Instrument Serif — italic is the voice
Use: headlines, pull quotes, the wordmark
Weights: Regular (400) + Italic (400) ONLY
Text ........... Geist
Use: body, UI, navigation
Weights: 300, 400, 500, 600
Mono ........... JetBrains Mono
Use: eyebrows, metadata, code, captions
Weights: 400, 500
System fallbacks are intentional and conservative — if Google Fonts
fails to load, fall back to the matching system family. Never swap
across families (no serif → sans fallback).
--------------------------------------------------------------------------- */
--font-display: 'Instrument Serif', 'Iowan Old Style', 'Apple Garamond',
'Baskerville', 'Times New Roman', Times, serif;
--font-text: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo,
Consolas, monospace;
/* ---------------------------------------------------------------------------
§03 · HIERARCHY — scale & usage (page 013)
Fluid sizes clamp(min, preferred, max) so the brand reads correctly
from mobile through 4K. Pixel anchors match the deck spec at the
desktop end of the clamp.
--------------------------------------------------------------------------- */
--size-display: clamp(3.5rem, 9vw, 9rem); /* 56 → 144px (Instrument Serif) */
--size-display-l: clamp(5rem, 11vw, 15rem); /* 80 → 240px hero only */
--size-h1: clamp(2.25rem, 5vw, 3rem); /* 36 → 48px (Geist Medium) */
--size-h2: clamp(1.5rem, 3vw, 1.75rem); /* 24 → 28px (Geist Medium) */
--size-pullquote: clamp(1.5rem, 3vw, 2.25rem); /* 24 → 36px (Instrument Italic) */
--size-lede: clamp(1.0625rem, 1.5vw, 1.3125rem); /* 17 → 21px (Geist 400) */
--size-body: 1rem; /* 16px */
--size-small: 0.875rem; /* 14px */
--size-eyebrow: 0.75rem; /* 12px UC */
--size-eyebrow-l: 0.875rem; /* 14px UC */
--size-caption: 0.8125rem; /* 13px mono log */
--leading-display: 1.05; /* Tight for big serif headlines */
--leading-heading: 1.15; /* Geist H1 / H2 */
--leading-body: 1.55; /* Body reading */
--leading-tight: 1.2; /* Pull quotes */
--leading-mono: 1.6; /* Mono caption / log lines */
/* Tracking — the deck uses PowerPoint "tracking" units (×0.001 em). Map:
deck "−10" → letter-spacing: -0.01em
deck "+120 to +200" → 0.12em to 0.20em
deck "+280" wordmark tag → 0.28em */
--track-display: -0.01em; /* Display / H1 tight */
--track-tight: -0.005em; /* H2 */
--track-normal: 0; /* Body */
--track-loose: 0.18em; /* Mono eyebrows / tags */
--track-loose-xl: 0.28em; /* Wordmark cap-line tag (S·C·L) */
/* ---------------------------------------------------------------------------
§02 · LOCKUPS · CLEAR SPACE (page 008)
Minimum digital sizes and clear-space rules for the wordmark.
--------------------------------------------------------------------------- */
--wordmark-min-mark: 40px; /* compact monogram */
--wordmark-min-lockup: 96px; /* three-line wordmark */
--wordmark-dot-ratio: 0.32; /* lime dot = 0.32 × cap-height of "S" */
--wordmark-tag-track: var(--track-loose-xl);
/* ---------------------------------------------------------------------------
SPACING SCALE — base unit 4px. Doubling-where-it-makes-sense, not
strict 8pt. The deck's spatial rule is "X = cap-height of L"; on the
web that translates to vertical rhythm tied to body line-height,
enforced via these tokens rather than ad-hoc margins.
--------------------------------------------------------------------------- */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 144px;
/* ---------------------------------------------------------------------------
RADII — the brand is editorial / specimen. Default to hard corners.
Pills are reserved for "specimen" status tags. No rounded cards.
--------------------------------------------------------------------------- */
--radius-0: 0; /* default — cards, panels, frames */
--radius-1: 2px; /* form inputs only */
--radius-pill: 999px; /* status tags / "specimen" eyebrows */
/* ---------------------------------------------------------------------------
MOTION — proposed motion spec (deck §05 sign-off is a sketch, not a
spec). Ease-out is the default; never spring-overshoot; never the
"AI shimmer" gradient sweep (the audio equivalent is explicitly
prohibited on the sonic-identity page).
--------------------------------------------------------------------------- */
--ease: cubic-bezier(0.2, 0, 0, 1);
--ease-decel: cubic-bezier(0, 0, 0.2, 1);
--duration-ui: 160ms; /* hover, focus, small state changes */
--duration-prominent: 320ms; /* card lifts, drawer reveals */
--duration-hero: 640ms; /* wordmark reveal, page-enter */
/* ---------------------------------------------------------------------------
LAYOUT — max widths and gutters. The brand book uses generous margins
and a narrow text column; mirror that here.
--------------------------------------------------------------------------- */
--content-max: 920px;
--content-text: 620px; /* lede / paragraph max for readability */
--gutter: 28px;
--gutter-tight: 16px;
/* ---------------------------------------------------------------------------
BORDER WIDTHS — hairlines, per the motif spec (2px stroke at 100px
frame). At UI scale, default to 1px; iconography uses 2px.
--------------------------------------------------------------------------- */
--hairline-width: 1px;
--stroke-icon: 2px;
}
/* =============================================================================
PRESET TYPOGRAPHIC ROLES
These are utility classes for the seven roles defined on page 013.
The site stylesheet can either use these directly or compose from the
custom properties above. Either way, the spec stays in this file.
============================================================================= */
.scl-display {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: var(--size-display);
line-height: var(--leading-display);
letter-spacing: var(--track-display);
color: var(--text);
}
.scl-h1 {
font-family: var(--font-text);
font-weight: 500;
font-size: var(--size-h1);
line-height: var(--leading-heading);
letter-spacing: var(--track-display);
color: var(--text);
}
.scl-h2 {
font-family: var(--font-text);
font-weight: 500;
font-size: var(--size-h2);
line-height: var(--leading-heading);
letter-spacing: var(--track-tight);
color: var(--text);
}
.scl-pullquote {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: var(--size-pullquote);
line-height: var(--leading-tight);
letter-spacing: var(--track-tight);
color: var(--text);
}
.scl-lede {
font-family: var(--font-text);
font-weight: 400;
font-size: var(--size-lede);
line-height: var(--leading-body);
letter-spacing: var(--track-normal);
color: var(--text-dim);
max-width: var(--content-text);
}
.scl-body {
font-family: var(--font-text);
font-weight: 400;
font-size: var(--size-body);
line-height: var(--leading-body);
color: var(--text);
}
.scl-eyebrow {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--size-eyebrow);
line-height: 1;
letter-spacing: var(--track-loose);
text-transform: uppercase;
color: var(--text-quiet);
}
.scl-caption,
.scl-log {
font-family: var(--font-mono);
font-weight: 400;
font-size: var(--size-caption);
line-height: var(--leading-mono);
letter-spacing: 0;
color: var(--text-quiet);
}
/* =============================================================================
PRESET COMPONENT TOKENS — buttons + form fields
Locked here so every surface uses the same affordances. Derived from the
misuse / lockup discipline (hard corners, mono labels, generous touch).
============================================================================= */
:root {
/* Buttons — Bone fill on Ink ground is the primary affordance; Signal is
reserved for the live indicator and must NEVER be a button color. */
--btn-primary-bg: var(--bone);
--btn-primary-fg: var(--ink);
--btn-primary-bg-hover: #FFFFFF;
--btn-primary-fg-hover: var(--ink);
--btn-ghost-bg: transparent;
--btn-ghost-fg: var(--bone);
--btn-ghost-border: var(--bone);
--btn-radius: var(--radius-0);
--btn-padding: 14px 22px;
--btn-label-font: var(--font-mono);
--btn-label-weight: 500;
--btn-label-track: var(--track-loose);
--btn-label-transform: uppercase;
--btn-label-size: var(--size-eyebrow-l);
--btn-min-touch: 44px;
/* Form fields — Bone field on Ink ground, 1px Bone-alpha border,
Signal focus ring (3px solid, per --focus-ring above).
Hard 2px radius to keep the editorial / specimen feel. */
--field-bg: rgba(240, 235, 225, 0.04);
--field-fg: var(--text);
--field-placeholder: var(--text-quiet);
--field-border: var(--border-strong);
--field-border-focus: var(--signal);
--field-radius: var(--radius-1);
--field-padding: 14px 16px;
--field-font: var(--font-text);
--field-size: var(--size-lede);
/* Error state — Tone is a 1px left border + an icon, NOT the text color. */
--field-border-error: var(--error);
--field-error-text: var(--text); /* still Bone — see contrast rule */
--field-error-marker: var(--error); /* icon / left rule only */
}
/* =============================================================================
GLOBAL RESETS — surface only. Components live in the site stylesheet.
============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-text);
font-size: var(--size-lede);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection {
background: var(--signal);
color: var(--ink);
}
a {
color: var(--text);
text-decoration-color: var(--text-quiet);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-color var(--duration-ui) var(--ease),
color var(--duration-ui) var(--ease);
}
a:hover {
text-decoration-color: var(--signal);
}
/* =============================================================================
ACCESSIBILITY
The deck implies but never states: sonic primitives must always have a
paired visual signal. Motion respects prefers-reduced-motion.
============================================================================= */
@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;
}
}
/* Focus ring — visible by default for keyboard users; suppressed for mouse
per :focus-visible. Signal-on-Ink at 12.1:1 is AAA. */
*:focus { outline: none; }
*:focus-visible {
box-shadow: var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-1);
}
/* =============================================================================
END — brand-tokens.css v1.0
Source: SCL Brand Book v1.0 (May 2026) · sounds-creations-lab.pptx
Decisions locked 2026-05-22: italic Creations, Tone-as-error, dark default
============================================================================= */