# Color

Values live in [`visual-system.json`](visual-system.json) and are consumed as CSS variables from [`tokens.css`](tokens.css) (`--m-color-*`, and the semantic `--m-bg`, `--m-fg`, `--m-muted`, `--m-rule`…). This file explains **when** to use each one.

## The rule

**Meddle is monochrome. Color is earned by imagery, not by the interface.**

Ink, paper, concrete, and sheet carry every surface. Greys handle hierarchy. Purple is a *signal*, not a color scheme. When a layout feels like it "needs color," it needs a photograph, a video, or a stronger headline.

- **Why:** Monochrome makes the work look expensive and lets client work and imagery (sky blue, liquid gold, chrome) supply the color. It's the discipline half of the magic trick.
- **Where:** Everywhere Meddle speaks as itself: site, decks, proposals, social templates, merch.

## Palette

| Token | Hex | Role |
|---|---|---|
| `ink` | `#1a1918` | Primary dark: covers, heroes, CTAs, footers. Text and wordmark on light. |
| `paper` | `#e8e8e8` | Text and wordmark on ink. The active nav pill. |
| `concrete` | `#d9d9d9` | Default light background on the web. |
| `sheet` | `#fcfbfa` | Warm near-white for reading-heavy documents: column slides, proposals, PDFs. |
| `graphite` | `#757575` | Muted text on light (large sizes). Deck rules and image frames. |
| `ash` | `#8c8d8d` | Muted text on ink (web). |
| `signal` | `#af69f4` | The only accent. Selection, focus on dark, rare live indicators. |

**Never use pure `#000000` or `#ffffff`.** Ink is warm, and paper is soft on purpose. (The 2025 deck's InDesign black `#231f20` counts as ink.)

## Themes: which background, when

| Theme | Background | Use for | Why |
|---|---|---|---|
| **dark** (default) | ink | Heroes, deck covers, the final CTA band, footers, testimonial sections | Openings and closings. It sets the stage and makes type and video feel cinematic. |
| **light** | concrete | Web content: work, services, pricing, contact, case-study bodies | The work happens here. Concrete has weight, so it doesn't feel like a blank document. |
| **paper** | paper | Decks: the cover and most slides (Figma master) | The deck's default ground. It's quieter than white on a projector and matches the site's type-on-grey feel. |
| **sheet** | sheet | Reading-heavy slides (columns), proposals, SOWs, one-pagers, anything printed | Dense reading gets the lightest surface. |

**Open dark, work light** (on the web). A Meddle page starts on ink, crosses into light when the substance begins, and returns to ink for the final CTA. The crossing is animated (see `motion.md`, theme-crossfade). **Decks** open on a paper cover, work on paper and sheet, and switch to ink for statement and big-idea slides, which is the deck's version of turning the lights down for a moment.

Apply a theme with a class: `.m-theme-dark`, `.m-theme-light`, `.m-theme-paper`, `.m-theme-sheet`. Components read the semantic variables, so they adapt automatically.

## Text color by surface

| On | Primary | Secondary | Muted / labels | Rules | Hairlines |
|---|---|---|---|---|---|
| ink | paper | paper @ 80% | ash | paper @ 42% | paper @ 10% |
| concrete | ink | ink @ 75% | graphite (large only) | ink @ 42% | ink @ 10% |
| paper | ink | ink @ 75% | graphite (large only), bold graphite labels | graphite (solid) | ink @ 10% |
| sheet | ink | ink @ 75% | graphite (large only), bold graphite labels | graphite (solid) | ink @ 10% |

Small muted text (mono labels, captions, list numbers) on any light surface uses **ink @ 65%** (`--m-muted-small`), because graphite fails at small sizes. On ink it's ash.

### Contrast (generated by `build-tokens.mjs`)

| Theme | Pair | Ratio | Use |
|---|---|---|---|
| dark | fg (paper on ink) | 14.33:1 | any size |
| dark | fg-secondary | 9.54:1 | any size |
| dark | muted (ash on ink) | 5.27:1 | any size |
| light | fg (ink on concrete) | 12.44:1 | any size |
| light | fg-secondary | 6.36:1 | any size |
| light | muted (graphite on concrete) | 3.26:1 | **large text only** (18.66px bold / 24px+) |
| light | muted-small (ink @ 65% on concrete) | 4.72:1 | small labels |
| paper | fg (ink on paper) | 14.33:1 | any size |
| paper | label (graphite on paper) | 3.76:1 | **bold labels 18.66px+ only** (deck labels) |
| paper | muted-small (ink @ 65%) | 5.04:1 | small labels |
| sheet | fg (ink on sheet) | 16.99:1 | any size |
| sheet | muted / label (graphite on sheet) | 4.46:1 | large text, or bold labels |
| sheet | muted-small (ink @ 65%) | 5.38:1 | small labels |

If you need small muted text on a light surface, use `--m-muted-small` (ink @ 65%), not graphite.

### The ghost wordmark

Deck interior slides carry the wordmark as a *ghost*: concrete `#d9d9d9` with `mix-blend-mode: multiply` on light slides, and graphite at 30% opacity on ink (`--m-wordmark-ghost`, `--m-wordmark-ghost-blend`). It's intentionally low contrast, because it's identification, not text. See `brandmark.md`.

## Signal (purple)

Owner decision, 2026-09-30: purple is the only accent, and it's a signal.

**Allowed:**
- `::selection` background at 40% (`--m-selection`), on every theme
- Keyboard focus ring on **dark** surfaces (`--m-focus`). On light surfaces the focus ring is ink, because purple on concrete is only 2.42:1.
- A tiny "live" or "new" indicator (a dot, a single glyph), at most once per screen

**Never:**
- Button fills, backgrounds, section bands, gradients
- Headlines, italic emphasis, or the wordmark
- Charts with more than one highlighted series (see below)
- As the "interference." The interference is typographic or material, never a color.

## Retired colors

Green `#00ff6a`, blue `#4160ff`, and red were accent colors in earlier site CSS. They're **retired** as of 2026-09-30. If you find them in the live site's SCSS, that's legacy code, not a brand decision. Don't reintroduce them. (Green and gold can still appear *inside imagery*, as in the hero video. That's the imagery supplying the color, which is allowed.)

## Color in imagery

Photography, 3D, and video bring the color, and there's no fixed palette for it. Recurring notes in approved imagery: saturated sky blue, liquid gold and green glass, chrome with iridescent reflections, raw grey concrete, and a flash of red-orange motion blur. See `art-direction.md`.

## Data visualization

Charts are monochrome too: ink or paper for the primary series, graphite/ash for context, rules for axes. If one value must stand out, make it the only ink-colored bar among grey ones. Use signal for a highlighted series only when the chart sits on ink, and only for one series.

## Client work

This palette is Meddle's. When showing client work, show it in the client's colors, framed by Meddle's monochrome.