Quiet surfaces.
Earned green.

Principles

1. 01

   Quiet by default

   Near-black surfaces, one typeface, generous space. The record is the loudest thing on any screen.

2. 02

   Green is earned

   Proof green marks verification, live state and the one primary action per view. Never decoration.

3. 03

   Numbers are tabular

   Figures use tabular numerals and tight tracking so values align and never jitter while animating.

4. 04

   Motion explains

   Things move to show cause and effect — a source connecting, a total settling. Reduced motion gets the end state.

5. 05

   Samples are labeled

   Synthetic data always carries the violet Sample tag. Real and illustrative are never confusable.

6. 06

   Say what's not known

   Every state has words, not just color: Verified, Partial, Pending, Unsupported, Stale, Revoked.

Color

Type

Geist for everything; Geist Mono for identifiers, scopes and methodology versions.

• Displayclamp 56–128 / 600 / −0.06em

  Show Proof.

• Headingclamp 36–72 / 600 / −0.05em

  Every record, inspectable.

• Title21–30 / 600 / −0.025em

  Verify the number.

• Body15–17 / 400 / 1.6

  Net sales for a closed period, by a published method.

• Kicker12 / 600 / 0.14em caps

  How it works

• Figuretabular-nums / −0.05em

  $1,248,310.42

• MonoGeist Mono / IDs, scopes, methods

  PF-7H2K-9D4M · shopify-net-sales 1.0.0

Motion

Hover a row to replay its curve.

• --easecubic-bezier(.16, 1, .3, 1)

  Everything that arrives. Fast start, long settle.

• --ease-in-outcubic-bezier(.65, 0, .35, 1)

  Loops and ambient motion.

• --dur-1160ms

  Hover, press, color.

• --dur-2320ms

  Focus rings, small state changes.

• --dur-3700ms

  Scene and panel transitions.

• --dur-41200ms

  Scroll reveals, hero entrance.

Components