Design System
The ONCE Design System provides a cohesive set of colors, typography, components, and layout patterns used across all ONCE products — from the marketing site to the documentation you’re reading now.
This guide is both a reference for developers and a contract for AI agents working in the codebase.
Dark-first
Designed for dark backgrounds with carefully tuned contrast and opacity scales.
Minimal palette
Four brand colors and three utility colors — nothing more. Hierarchy comes from opacity, not extra hues.
Two typefaces
Manrope for all prose and display text. JuliaMono for code, tags, and technical labels.
Subtle motion
Transitions on hover and focus only. No decorative animations that distract from content.
Quick reference
| Token | Value | Usage |
|---|---|---|
--once-blue | #3A455C | Primary accent |
--once-bg | #070D19 | Page background |
--once-white | #FFFFFF | Primary text on dark |
--font-sans | Manrope | Body & display |
--font-mono | JuliaMono | Code & labels |
Sections
Colors
Brand palette, utility colors, opacity scale, and CSS variables.
AI Features
AI state colors, thinking ring loader animation, and face fade patterns.
Typography
Font families, weight scale, responsive sizing, and code styling.
Components
Buttons, cards, badges, text hierarchy, and border patterns.
Layout & Spacing
Container widths, page template, and structural patterns.
Guidelines
Animation rules, accessibility notes, and general conventions.