Loading...
Visual Style
Native dark panels, system-level blur, 1px borders, and extreme restraint. Depth through shade, not shadow.
Palette
Three shades of dark gray plus system accent colors. No gradients.
Typography
Headings
Georgia, serif
Used for all headings and display text. Adds warmth and authority.
Body
System sans-serif
-apple-system, BlinkMacSystemFont for body text. Clean and native.
Code
SF Mono
Monospace for code blocks, values, and technical content.
Components
Every component follows the same rules: dark backgrounds, 1px borders, subtle hover states.
Variants
Sizes
States
Guidelines
Philosophy
No gradients or glow. Depth comes purely from three shades of dark gray, each slightly lighter than the last.
The sidebar uses backdrop-blur to let underlying content subtly show through, simulating macOS NSVisualEffectView.
Serif headings add warmth, sans-serif body stays clean, monospace handles code. Three typefaces, each with a clear role.
Every separator is a 1px semi-transparent border. No shadows for depth. The border is the only visual divider.
No gradients, no glow, no animations. The content itself is the decoration. The UI stays invisible.
Traffic light buttons, system fonts, restrained interactions. Everything should feel like it belongs on macOS.