# Gradient Systems — brand contract
# Canonical: https://gradientsystems.com/brand
# Machine reference: /brand/tokens.json · Human reference: /brand
# rev 0.3 · If a rule here conflicts with a mockup, this file wins.

## Scope
Applies to every surface that carries the name: marketing site, product UI,
docs, decks, print, and anything an agent generates on our behalf.

## Voice
Second person, active. Sentence case everywhere except legal names.
Digits for counts, space before the unit (8 nodes, 400 Gb/s).
Name the action; never promise a feeling. No exclamation marks.
Banned: "seamless", "revolutionary", "powerful", "unlock", "supercharge".

## Color
Dark is the base system; light is a mirror, not a variant.
dark:  page #0A0A0A · surface #111110 · line #1E1E1D · muted #8A8A85 · ink #FAFAF9
light: page #FAFAF9 · surface #FFFFFF · line #E4E4DF · muted #5E5E57 · ink #0A0A0A
signal: #D94A12 — the same value in dark and light. One signal per view.
On light ground the signal is for the mark, rules, and headline-scale type;
signal-colored body text on light lands at 4.1:1, so it is not used there.
amber #E8C547 and red #E85A5A are state-only — never marketing, never decoration.
No gradients, no glows except the lit-display treatment on the mark.
Disabled controls: surface #191918, label #57574F — the only exempt pair.
Body text holds 4.5:1; headline-scale type holds 3:1. Full-opacity ink only.

## Type
Display/UI: Schibsted Grotesk. Mono/labels: Martian Mono.
display 68/0.98/-0.045 · h1 38/1.05/-0.035 · h2 22/1.2/-0.025
lead 17/1.55/0 · body 14/1.65/0 · label 10/1/0.08 uppercase
Labels and data are mono. Prose is never mono.

## Links
Prose links: ink #FAFAF9 with a 1px signal underline, offset 0.22em.
Hover: text goes signal, underline stays. Color alone never marks a link.
Chrome links (nav, footer, tables): muted, no underline, ink on hover.
Current item: full ink, no box, no underline.
Signal at label scale (9-10px) sits on page ground #0A0A0A, not on surface —
on #111110 it measures 4.44:1 and misses the floor.
Standalone links: mono uppercase with a trailing arrow — → forward, ↗ off-site.
No visited state. Focus is the 2px signal outline used by buttons.

## Space
4px base scale. 96px between sections. 1100px max width, 40px gutter.

## Radius
0 on every surface and control.
12px on inset images and video — cards, details, thumbnails, players.
0 on full-bleed and background media so it meets the viewport edge.
12px is half the 24px marketing dot: the mark's corner, scaled up.
Media is the only place radius is allowed.

## Borders
1px, never 2. Color = line token. Borders separate; shadows do not exist.

## The mark
Lowercase g from the 5x7 display matrix, padded to a 9x9 square field.
Dots are round, lit dots at full opacity, unlit at 0.08 — display at rest.
Never re-letter, outline, rotate, or set it in a container.
Header uses the mark alone. No wordmark lockup.
Favicon: below 40px the mark is illegible — ship one lit signal dot,
half the box, on #0A0A0A, static. The full 9x9 field returns at 48px.

## Motion
Stepped, not eased: the system reads as hardware, not as software easing.
120ms state changes. Activity indicators blink hard on/off at 1.6s, steps(1).
Every animation respects prefers-reduced-motion — blink resolves to solid.
No parallax, no scroll-jacking, no entrance animations on content.

## Imagery
Hardware shot like product: #0A0A0A seamless, one hard key, one rim.
Straight-on elevation or 15 degrees. Any matrix in frame shows a real glyph.
No people, no offices, no data-center stock, no renders posing as photos.
Crops: 16:9 full-bleed, 4:3 detail, 1:1 card. Neutral grade, no filters.

## Data
One format per type, everywhere. Mono for all figures.
Throughput in Gb/s. Currency with the code (USD 1,200,000).
Status is a color plus a word — never color alone, including indicator
lights in chrome. An unlabeled light is a question, not a status.

## Enforcement
Off-system means: a hex not in tokens.json, padding off the 4px scale,
a radius on a control, eased motion, a second signal color, or emoji.
Reviewed on every pull request. Criticals block the merge.


## Depth
Surfaces separate by lightness, not outline.
Dark: 00 page #0A0A0A · 01 surface #141413 · 02 raised #1C1C1A ·
03 overlay #242422 · 04 top #2E2E2B. Light re-bases at #F0F0EC.
A 1px #1E1E1D hairline may divide two siblings on the same step.
It may never wrap a single element. No shadows, ever.

## Space and density
4 8 12 16 24 32 48 96 — nothing between them.
Row 32px, control 40px, card padding 16px, section break 96px.
Breakpoints 640 / 1024 / 1440. Below 640 every target is 44px and
tables stack into rows; they never scroll horizontally.
Above 1440 content caps at 1100px and centres.

## Interactive states
rest 01 · hover 02 (120ms) · active 00 · selected 02 plus a 2px
signal bar on the leading edge · disabled #191918 on #57574F ·
loading holds its width and blinks a pending dot in the leading slot.
focus-visible is a 2px signal outline at 2px offset, ink on a filled
signal control. It is never removed and never replaced by a surface
change. Tab order is DOM order. Overlays trap focus and return it.

## Status
A functional palette, separate from the brand.
pending #8A8A85 blinking · settled #5BC489 · requires action #E8C547 ·
failed #E85A5A · idle #57574F.
#D94A12 never indicates a status — orange means live, selected, or
primary, nothing else. Every indicator ships its label from this list.
Pending is the only state that moves. No success toasts: the row
changing is the confirmation. Toast is for failure the user has
navigated away from.

## Empty, loading, error
Every view ships four states. Skeletons match the result geometry
exactly, in graphite 02, with no shimmer. Under 400ms render nothing.
Over 10s name what is happening. No spinners. Recoverable errors are
inline with a retry, never a toast. Field errors state the rule, not
the violation. An em dash in a cell means no data; it is not a
view-level empty state.

## Icons
Drawn on the same 9x9 field as the mark — one unit is one dot.
The outer ring of the field is always unlit: the drawing area is the
inner 7x7 well. No icon reaches the edge of its field, ever.
One-unit strokes, no tapering, no filled/outline pairs. Terminals land
on dot centres. Orthogonal or 45 degrees only; curves are approximated
by the grid. Unlit cells show at 8% in brand contexts and are omitted
in dense product UI. One icon per control. Nothing licensed — if a
glyph cannot be built on the grid, use a word.

## Destructive actions
Friction scales with what cannot be undone.
1 reversible: no confirmation, 10s undo toast.
2 irreversible, no money: one dialog, the confirm button names the verb.
3 irreversible, moves money: type the exact amount or reference id.
4 above $1M: a second named approver with an audit timestamp.
Signal orange never appears on a destructive control. Focus opens on
cancel. 24px and a divider between destructive and primary actions.
The dialog states the consequence, then offers the button.

## Avatars and client identity
Counterparties are institutions, not faces. Each entity gets a
deterministic 9x9 identity field derived from its identifier, mirrored
about the centre column and drawn inside the inner 7x7 well — the same
clear-space rule as the icons. Monochrome; no hue per letter.
A supplied monochrome SVG logo takes precedence, rendered at 100% ink.
Client brand colours never appear inside a table; full colour is
allowed at 64px and above on detail pages and in press contexts.
One treatment per list — never logos and generated fields mixed.
Below 24px, a two-letter uppercase Martian Mono monogram on surface 02.
People always get monograms, never photographs: these screens end up in
audit files. Avatars are square, radius 0 — circles are for status dots.
Status never rides the avatar; it lives in the row's status cell.
Groups show at most three fields side by side with a 1px gap, then +n
in mono. No overlapping or fanned stacks.

## Display reference
/brand/reference holds the source sheets: the 5x7 character set, the
250ms letter animation, and the idle state. The 9x9 field, the round
dot, the stepped cadence, and the single lit glyph at rest are all
observations from these sheets. The warm amber in the photographs is a
property of real LEDs, not a token — on screen a lit dot is #D94A12 or
ink, never a colour sampled off a photograph. The face is lowercase
only and will not be extended; monograms use Martian Mono instead.