Brand

Pick any color, or start from a kit hue. The three cards and chip row are the specimen — they read --brand-* the same way a consumer app would. Soft and emphasis derive from your secondary and primary picks; stroke derives from UI weight. Copy the snippet onto [data-theme] in your host.

Preset

Primary

Secondary

Paper

Box

Control

Type

Weight

Specimen · scoped to this sheet

Soft

Emphasis

Ledger

Live

North basin · this period

12,480USD

vs last month+8.2%

Wave 04

Field notes

A quiet brief for the week. Two threads, one decision.

Name this look

Saved on the paper you picked. Radius follows the control.

Unlayered remap. Do not put these tokens in gesso.brand.

Chips · soft fill, emphasis outline, stroke from weight

Default

Outline

Ghost

Retune

[data-theme="acme"] {
  --brand-primary: var(--neutral-900);
  --brand-primary-fg: var(--neutral-50);
  --brand-secondary: var(--neutral-700);
  --brand-secondary-fg: var(--neutral-50);
  --brand-secondary-subtle: var(--neutral-200);
  --brand-primary-subtle: var(--neutral-300);
  --brand-radius: var(--radius-scale-md);
  --brand-radius-control: var(--radius-scale-md);
  --brand-font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --brand-font-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --brand-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --brand-font-weight-ui: 400;
  --chrome-chroma: 0;
  --chrome-chroma-tag: 0;
  --chrome-hue: 80;
}