Video for developers

A warm ground, one rotating accent hue.

The home page leads with orange; the same slots (border, fill, link) are re‑themed per section across a fixed set of hues. Exact hex values in the extract are role descriptions — these are representative.

Rounded display, grotesque body, mono everywhere else.

Live site uses Rotonto (display) and Aeonik (body), both commercial. This preview substitutes Rubik and Inter; JetBrains Mono is already free and unchanged.

A pushable key and a corner‑morph pill.

The primary button lifts ~5px on hover and snaps back on press; the secondary pill animates its border‑radius between round and square.

Quick token summary.

:root {
  --color-putty:          #e2e4dd;   /* warm off-white canvas */
  --color-putty-light:    #f4f6f4;
  --color-putty-lighter:  #fafaf9;
  --color-putty-deep:     #d0d2c8;

  --color-orange:         #ff6100;
  --color-orange-dark:    #ba4300;
  --color-orange-neon:    #ff8e0a;

  --font-display: "Rubik", sans-serif;      /* display, UPPERCASE */
  --font-body:    "Inter", sans-serif;      /* body, regular/bold */
  --font-mono:    "JetBrains Mono", monospace;

  --spacing: 1.75rem;               /* 28px, constant at every breakpoint */
  --max-width-content: 42rem;       /* 672px prose cap */
  --radius-4: 112px;                /* pill */

  --ease-in-out-energetic: cubic-bezier(.7, 0, .3, 1);
  --ease-out-energetic:    cubic-bezier(.2, .3, .65, 1);
}