Tokens, scale & motion

Surfaces

The ground under a mark

A project plate is one colour: the plate ground with a percentage of the project's own hue mixed into it. Both halves are tokens, and both differ per theme for reasons that are not symmetry.

Space

The rhythm

A 4px base, but only six steps are ever used. Sections breathe at 64, cards at 20, and related things sit 8–12 apart. Constraint is the point: fewer choices, faster decisions, consistent result.

Shape

Radius & rule

Radius scales with the surface: the bigger the box, the softer the corner. One border weight everywhere: 1px at token colour. Depth comes from surface lightness, not from a glow. Nothing the system itself draws carries a shadow, and the ones you will find in the repo are inside product mockups drawing someone else's interface.

Three steps are derived from --radius: 0.625rem in the Tailwind config, so moving one number moves the set. Only xl and the default are Tailwind's own.

Type

The ramp

One family, four weights, and a ramp that leans light. Display sizes get extralight with negative tracking; small text gets medium with positive tracking. The inversion is deliberate: it is what makes small type read as a label rather than shrunken body copy.

The scale is closed. These nine are the sizes the config names, and a size is one of them or it is not on the site: an arbitrary pixel size is a violation the check reports.

Motion

Timings & the rule

One rule governs everything, including the brand engines: energy moves space, never brightness: scale, position, displacement. No strobe, no flash, no opacity pulsing. It keeps long loops watchable and the whole system safe for photosensitive viewers.

Layout

Widths & breakpoints

Transfer

The whole system, in one block

Two files, because this is Tailwind v3 and the mapping from token to utility lives in a config. It used to be printed here as v4 (@import "tailwindcss", @theme inline, no config file), which does not parse on v3 and is exactly the mistake a generator makes when it guesses the version.

/* globals.css */
:root {
  --background:       oklch(0.955 0.002 106);
  --foreground:       oklch(0.122 0.001 0);
  --muted-foreground: oklch(0.36  0.001 0);
  --border:           oklch(0.88  0.003 106);
  --select:           oklch(0.58  0.13  250);  /* the one accent */
  --radius:           0.625rem;
}

.dark {
  --background:       oklch(0.09  0 0);
  --foreground:       oklch(0.985 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --border:           oklch(1 0 0 / 10%);
  --select:           oklch(0.707 0.108 152.216);
}

@layer components {
  .max-w-site { max-width: 1180px; }
  .site-inset { @apply px-5 sm:px-6 md:px-12 lg:px-16; }
  /* the two reading inks, named so an essay carries a name rather than a number */
  .aka-ink-body  { color: color-mix(in srgb, var(--foreground) 82%, transparent); }
  .aka-ink-quiet { color: color-mix(in srgb, var(--foreground) 62%, transparent); }
}

// tailwind.config.cjs
module.exports = {
  darkMode: ['class'],
  // every hover: compiles inside @media (hover: hover), so a tap on a
  // touch screen cannot latch a hover state that never releases
  future: { hoverOnlyWhenSupported: true },
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  theme: {
    extend: {
      maxWidth: { site: '1180px' },
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
        border:     'var(--border)',
        muted: { DEFAULT: 'var(--muted)', foreground: 'var(--muted-foreground)' },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
}