The system behind the work
The tokens, components, and motion that hold reedtereski.com together — the same primitives I bring to client design systems. Built for consistency, accessibility, and speed.
Principles
Tokens, not hardcodes
Every color, radius, and font weight resolves from one set of CSS variables — themed light and dark from a single source.
Motion has meaning
Animation signals state and hierarchy, never decoration. Every transition honors prefers-reduced-motion.
Accessible by default
AA contrast, visible focus rings, semantic HTML, and keyboard paths are requirements, not passes.
60fps or it doesn't ship
Reveals run on opacity and transform only — compositor-driven, zero layout shift.
Color tokens
Swatches render the live theme value. Hex pairs show how each token resolves in light / dark.
Background
--backgroundForeground
--foregroundPrimary
--primaryAA on white — 4.87:1
Card
--cardMuted
--mutedMuted FG
--muted-foregroundBorder
--borderDestructive
--destructiveStatus
Success
Warning
Error
Info
Typography
Inter, self-hosted via next/font. One scale across web and case studies.
text-4xl md:text-5xl font-bold tracking-tighttext-3xl font-bold tracking-tighttext-2xl font-bold tracking-tighttext-xl font-bold tracking-tighttext-lg text-muted-foregroundtext-base leading-7text-xs font-semibold uppercase tracking-wider text-muted-foregroundSpacing
4px base unit. Tailwind step = px ÷ 4.
Radius
Base --radius: 0.5rem; steps derive ±.
Motion specimens
The actual easing, durations, and reveals used across the site — live, replayable, and reduced-motion aware.
Specimens
Fade up
Section & hero reveal
Stagger
Lists & grids
Hover lift
Cards & tiles
Standard easing
cubic-bezier(0.25, 0.1, 0.25, 1)Quick out, soft landing — the curve behind every reveal, hover, and transition here.