Blog
Design
Designing a quiet interface
Why our design system is monochrome, and how tokens let every section switch between light and dark.
Maya ChenProduct Designer
Color is loud. When everything is colorful, nothing stands out. Our system uses a ten-step gray scale for hierarchy and saves color for meaning: focus, success and warnings.
Tokens, not values
Components never use hex codes. They use semantic tokens like background, foreground and border. A dark section redefines those tokens for everything inside it, so every component works in both themes for free.
styles/tokens.csscss
.theme-dark { --ds-bg: #000000; --ds-fg: #ededed; --ds-border: #2e2e2e;}Tight type, generous space
Headlines use tight tracking and balanced line breaks. Sections breathe with consistent vertical rhythm. Together they make dense product content feel calm.
Read the full guidelines in DESIGN.md in the repository.
