The AetherSync design language.
One token layer, one card treatment, one button language and one motion curve — the primitives every page on this site is built from.
Surfaces & states
Every colour is a CSS custom property holding bare RGB channels, so Tailwind opacity modifiers work and the .light theme is a pure token swap.
background
Page ground
surface
Panels & cards
surface-elevated
Raised chrome
surface-hover
Interactive hover
primary
Ember accent
primary-hover
Accent hover
accent
Informational
success
Passing state
warning
Caution state
error
Failure state
foreground — the quick brown fox
text-secondary — the quick brown fox
muted — the quick brown fox
primary — the quick brown fox
Fluid type scale
Every step is a clamp(), so headings scale with the viewport without breakpoint jumps. Display faces use Plus Jakarta Sans; code uses JetBrains Mono.
Buttons
Cards
Flat
Hairline border on a translucent surface. The default.
Elevated
Raised surface with the panel shadow, for floating chrome.
Glass, interactive
Used sparingly — overlays only, never as a page-wide texture.
Badges & inputs
One curve, short durations
ease-cine
cubic-bezier(0.16, 1, 0.3, 1)
Every transition and reveal
200ms
Interactive states
Hover, focus, colour changes
reduced-motion
Fully honoured
Reveals resolve instantly