00 — Lab
System.
In motion.
A living look at the pieces behind onthic — the tokens, the type, and the motion principles I reach for on every build. Everything here is the real system, not a mockup.
01 — Tokens
Color.
Monochrome, plus one accent. Tap any swatch to copy its hex.
02 — Motion
Motion.
The handful of moves the whole site is built from — powered by Motion. All of it switches off under reduced-motion.
Signature ease
cubic-bezier(0.22, 1, 0.36, 1)
Magnetic · spring
stiffness 380 · damping 30
Blur-rise reveal
Design.
Build.
Ship.
Layout · shared
Tap to spring between states.
03 — Spec
One file.
The same tokens, written as a DESIGN.md — machine-readable for agents, readable for humans. It lives at the repo root so any tool understands the brand without re-reading the codebase.
---
name: onthic
tokens:
color:
ink: "#0d0d0d"
bone: "#f2f0ec"
signal: "#FF6520"
mid: "#6b6b6b"
radius:
sm: 8px
md: 14px
lg: 24px
full: 9999px
motion:
ease-signature: [0.22, 1, 0.36, 1]
elastic-compress: cubic-bezier(0.4, 0, 1, 1) 150ms
elastic-release: { stiffness: 320, damping: 14 }
calm-spring: { stiffness: 380, damping: 30 }
type:
font: "Inter"
headline: "clamp(3.5rem, 12vw, 14rem)"
---
# onthic — rounded, elastic, monochrome, one orange accent.04 — Type
Scale.
Every size is a clamp() — fluid between breakpoints, never fixed.
Bold.
leading 0.85 · uppercase · tight
30+
leading none · tabular
Full-stack design, from first pixel to shipped product.
leading relaxed · max 52ch
micro-label
bold · tracking 0.2em
05 — Principles
Ship right.
Three rules from the UX checklist — not listed, but felt. Focus, timing, and stagger are the difference between built and polished.
Focus visible
Click an item — Signal ring shows what's focused.
Transition · timing
Press each — feel the speed difference.
150ms
snappy
500ms
sluggish
Stagger · list
- Design tokens
- Typography scale
- Motion system
- Accessibility
- Sharp corners