The system behind this site

Good solutions leave good systems behind.

We deliver design solutions: research, strategy, product design, and the build that ships it. A system like this one is what a solution leaves behind, so your team can keep moving without us. Every color, size, and spacing value on this site comes from one token file, exported to JSON, connected to Figma, and documented here. The swatches below render from the live tokens. They cannot drift from the implementation, they ARE the implementation.

Surfaces & brand

Page#FFFFFF

Cream#F1ECDE

Linen#EFE0D5

Ink (logo navy)#132442

Brass (keylines)#A9853B

Case-study accents

Each case study owns one accent. It appears as a thread, never as paint: context label, image mat, metric numeral, hero wash. Three values per accent keep every combination WCAG AA by construction.

lagoonSleep Number · $32M

indigoAI Fit Technology · BillAgent

terracottaLifetouch

palmAveda · commerce

aubergineEstée Lauder

brassAveda · landing pages

Type

Libre Bodoni for display, at medium weight. Bold is reserved for numerals. Jost for body and UI. Seven sizes, the top three fluid.

--text-2xlDisplay / h1Measured, not guessed

--text-xlh2Evidence before adjective

--text-lgh3 / leadsBehavioral science, applied

--text-mdBodyBody copy runs at eighteen pixels with a 1.6 line height for comfortable long-form reading.

--text-smMetaIn-house · Sleep Number

--text-xsLabelsDISTINCT VINTAGE ENGAGEMENT

Spacing

A strict 8pt grid. Eight steps, nothing between them.

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

How this ships inside an engagement

CSS custom properties as the single source of truth
Generated tokens.json for any toolchain to consume
Figma libraries wired to code with Code Connect
Accessibility built into the tokens, not audited in later

The system is the leave-behind. The solution is the work.Scoping a project is free.