---
version: alpha
name: Molecular Sound
description: Pitch-black editorial canvas for a sound design studio — full-bleed work imagery on pure black, off-white grotesque type with tight tracking, near-invisible UI chrome, and a single bright signal accent. Sound made visual through restraint and contrast.
colors:
  # Canvas + ink
  background: "#000000"
  surface: "#0a0a0a"
  surface-soft: "#141414"
  ink: "#f5f5f0"
  ink-secondary: "#a3a3a0"
  ink-muted: "#6b6b68"

  # Signal accent — used sparingly for active/interactive
  primary: "#e8ff3a"
  on-primary: "#000000"

  # Interactive
  link: "#f5f5f0"
  link-hover: "#e8ff3a"
  focus-ring: "#e8ff3a"

  # Neutral scale (dark)
  gray-100: "#1f1f1f"
  gray-200: "#2a2a2a"
  gray-400: "#4d4d4d"
  gray-600: "#7a7a78"
  gray-800: "#d4d4d0"

  # Borders + hairlines
  border: "#222222"
  border-strong: "#333333"

  # On-color
  on-ink: "#000000"

typography:
  display-hero:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 0.98
    letterSpacing: -2.16px
  section-heading:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.32px
  sub-heading:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-label:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.65px
  caption:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.6px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-label}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 20px 32px
    borderColor: "{colors.border}"

  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-label}"
    padding: 8px 0px
  nav-link-active:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-label}"
    padding: 8px 0px

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  card-caption:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    padding: 12px 0px

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.primary}"

  divider:
    backgroundColor: "{colors.border}"
    height: 1px
---

# Molecular Sound Design System

## Overview

Molecular Sound presents itself the way a recording studio presents a control room — lights down, attention on the work. The canvas is pure black (`{colors.background}`), and the design system treats that blackness as a feature rather than a backdrop. Full-bleed project imagery floats on the void with almost no chrome between viewer and content. The interface gets out of the way so the sound work (and its visual representation) carries the page.

Typography is the structural voice. An Archivo-class grotesque sets every headline in a heavy weight with tight negative tracking (-2.16px at the hero), giving titles a compressed, editorial-poster density. Off-white ink (`{colors.ink}`) is deliberately not pure white — a faint warmth that softens the contrast against deep black and reads as photographic rather than clinical. Secondary text steps down through a muted gray scale, never competing with the imagery.

Color is rationed to a single move. Against the achromatic black-and-bone palette, one electric signal yellow (`{colors.primary}`) marks the things that respond — the active nav item, a hover state, a primary call to action. Like a meter peaking, it appears only where there is energy. Everything else is grayscale, so the accent never loses its charge.

The chrome is near-invisible: hairline borders (`{colors.border}`), zero-radius rectangles, generous black negative space, and uppercase-leaning nav labels with positive tracking. There are no rounded cards, no soft shadows, no gradients. Structure comes from the grid and from contrast alone.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) treated as the primary design surface
- Off-white ink (`{colors.ink}`) — warm, photographic, never pure white
- Archivo-class grotesque headlines with heavy weight and tight negative tracking
- One rationed signal-yellow accent (`{colors.primary}`) for interactive/active states only
- Sharp zero-radius geometry throughout — no rounded corners on chrome
- Hairline borders (`{colors.border}`) instead of fills or shadows for separation
- Full-bleed imagery with minimal surrounding UI
- Uppercase-leaning nav labels with positive letter-spacing for a technical voice

## Colors

### Canvas & Ink
- **Black** (`{colors.background}`): The dominant page surface — gallery-dark.
- **Near-Black Surface** (`{colors.surface}`): Slightly raised panels, image wells.
- **Soft Surface** (`{colors.surface-soft}`): Subtle tonal blocks, badges.
- **Bone Ink** (`{colors.ink}`): Headings and primary text — warm off-white.
- **Secondary Ink** (`{colors.ink-secondary}`): Captions, supporting copy.
- **Muted Ink** (`{colors.ink-muted}`): Metadata, the quietest labels.

### Accent
- **Signal Yellow** (`{colors.primary}`): The single accent — active nav, hover, primary CTA. Used sparingly.
- **On Primary** (`{colors.on-primary}`): Black text on the yellow fill.

### Interactive
- **Link** (`{colors.link}`): Default link in bone ink.
- **Link Hover** (`{colors.link-hover}`): Shifts to signal yellow on hover.
- **Focus Ring** (`{colors.focus-ring}`): Signal-yellow keyboard focus outline.

### Neutral Scale
- **Gray 800** (`{colors.gray-800}`): Brightest gray, near-ink.
- **Gray 600** (`{colors.gray-600}`): Secondary supporting text.
- **Gray 400** (`{colors.gray-400}`): Disabled / placeholder.
- **Gray 200** (`{colors.gray-200}`): Raised hairline blocks.
- **Gray 100** (`{colors.gray-100}`): Faint tonal separation.

### Borders
- **Border** (`{colors.border}`): Default hairline separation on black.
- **Border Strong** (`{colors.border-strong}`): Emphasized outlines, inputs.

## Typography

### Font Family
- **Primary**: `Archivo`, with fallbacks `Helvetica Neue, Arial, sans-serif`. A grotesque with tight, engineered proportions used across all weights.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 72px studio name / hero — poster-scale, maximum compression |
| `section-heading` | Section titles, project headers |
| `sub-heading` | Sub-sections, large labels |
| `card-title` | Project / work titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense copy, secondary blocks |
| `nav-label` | Navigation, buttons — positive tracking |
| `caption` | Metadata, image captions, badges |

### Principles
- **Compression at scale**: Headlines use heavy weight with negative tracking (-2.16px hero, relaxing as size drops) for poster density.
- **Warm bone, never white**: Primary ink is off-white to keep contrast photographic rather than harsh.
- **Tracking inverts with size**: Display type goes tight-negative; small nav/caption labels go positive (0.6–0.65px) for a technical, instrument-panel voice.
- **Restrained weights**: 400 (read), 500 (UI/labels), 600 (headlines). No ultra-bold body.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}`–`{spacing.4xl}`) for cinematic vertical breathing room between full-bleed sections.

### Grid & Container
- Full-bleed imagery breaks the content container edge-to-edge
- Project grid: multi-column on desktop, collapsing to single column
- Generous black gutters between work items
- Nav pinned with hairline bottom border

### Whitespace Philosophy
- **Darkness as space**: Black negative space frames every element; separation comes from contrast, not fills.
- **Cinematic rhythm**: Large vertical gaps let full-bleed work breathe between sections.
- **Hairlines over boxes**: 1px `{colors.border}` lines structure the page instead of cards or shadows.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | Pure black, no border | Page background, full-bleed media |
| Hairline (Level 1) | 1px `{colors.border}` | Section + nav separation |
| Raised (Level 2) | `{colors.surface}` fill, no shadow | Image wells, subtle panels |
| Accent (Interactive) | `{colors.primary}` fill or outline | Active/hover/CTA states |
| Focus (Accessibility) | 2px solid `{colors.focus-ring}` outline | Keyboard focus |

**Depth Philosophy**: Molecular Sound rejects soft elevation entirely. There are no drop shadows or glows. Depth is implied only through tonal steps between pure black and near-black surfaces, and through hairline borders. The result is flat, sharp, and editorial — closer to print than to material UI.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, inputs, images |
| `xs` | 2px | Rare tiny inset accents |
| `sm` | 4px | Small functional elements |
| `md` | 6px | Larger functional containers |
| `pill` | 9999px | Rare status dots only |

Sharp corners are the rule. The zero-radius geometry reinforces the editorial, technical tone — nothing softens the contrast between bone type, black void, and signal yellow.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.nav-bar}`).

### Buttons
- **`button-primary`** — Signal-yellow fill, black text, zero radius. The single loud element; inverts to bone-on-black on hover.
- **`button-secondary`** — Black surface with `{colors.border-strong}` outline; outline and text shift to signal yellow on hover.

### Navigation
- **`nav-bar`** — Black bar, hairline bottom border, uppercase-tracked labels.
- **`nav-link`** — Muted secondary ink by default; active link goes full bone ink. Hover lifts toward signal yellow.

### Cards & Media
- **`card`** — Near-black surface, zero radius, hairline border. Holds full-bleed work imagery.
- **`card-caption`** — Caption text in secondary ink below media, on black.

### Inputs
- **`input`** — Near-black surface, strong hairline border, zero radius. Focus border goes signal yellow.

### Badges
- **`badge`** — Soft-surface block, secondary ink, caption type, zero radius — a tag, not a pill.

## Do's and Don'ts

### Do
- Keep the canvas pure black (`{colors.background}`) and let it carry the page
- Use bone ink (`{colors.ink}`) not pure white for primary text
- Ration signal yellow (`{colors.primary}`) to interactive/active states only
- Use heavy grotesque headlines with tight negative tracking
- Structure with hairline borders, not cards or shadows
- Use zero-radius geometry throughout
- Give full-bleed imagery generous black negative space

### Don't
- Don't use drop shadows, glows, or gradients
- Don't round the corners of chrome — keep it sharp
- Don't use pure white (#ffffff) for body text — keep ink warm
- Don't spread the yellow accent decoratively; it loses its charge
- Don't add colored backgrounds — the palette is black + bone + one accent
- Don't crowd imagery with UI; let work dominate

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, hamburger nav |
| Tablet | 600–1024px | 2-column work grid, reduced gutters |
| Desktop | 1024–1440px | Full multi-column grid, max content width |
| Large Desktop | >1440px | Centered, generous black margins |

### Touch Targets
- Buttons use comfortable 14px vertical padding
- Nav labels at 13px with adequate spacing
- Full-bleed media remains tappable edge-to-edge

### Collapsing Strategy
- Hero: 72px → scales down, maintains negative tracking proportionally
- Navigation: horizontal labels → hamburger menu
- Work grid: multi-column → 2-column → single column
- Section spacing: 96px+ → ~48px on mobile
- Footer: multi-column → stacked single column

### Image Behavior
- Full-bleed work imagery maintains edge-to-edge treatment at all sizes
- Aspect ratios preserved; lazy-loaded
- Captions stay below media in secondary ink

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Black `{colors.background}`
- Heading text: Bone `{colors.ink}`
- Body text: Secondary ink `{colors.ink-secondary}`
- Accent / CTA: Signal yellow `{colors.primary}`
- Border: Hairline `{colors.border}`
- Focus ring: Signal yellow `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on pure black. Studio name at 72px Archivo weight 600, line-height 0.98, letter-spacing -2.16px, color `{colors.ink}`. Below it, a single signal-yellow (`{colors.primary}`) primary button, zero radius, black text, 14px 28px padding, 13px label with 0.65px tracking."
- "Build a work grid: full-bleed images on black, zero radius, hairline `{colors.border}` between items. Caption below each in `{colors.ink-secondary}` at 12px weight 500, 0.6px tracking."
- "Design navigation: black bar, hairline bottom border `{colors.border}`. Labels at 13px Archivo weight 500, 0.65px tracking, `{colors.ink-secondary}`; active label full `{colors.ink}`, hover shifts to `{colors.primary}`."

### Iteration Guide
1. Black is the canvas — never lighten it to gray; depth comes from `{colors.surface}` steps and hairlines
2. Yellow is a meter peak — only on interactive/active states
3. Headlines tight-negative tracking; nav/caption labels positive tracking
4. Zero radius everywhere; no shadows or gradients
5. Ink is bone, not white — keep the warmth

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Molecular Sound. Brand names and trademarks belong to their respective owners.