Tuja
Brand & Design System
01 — Wordmark
Light — Newsreader on background
Dark — Newsreader on primary
02 — Typography
Newsreader — Editorial
The quick brown fox
jumps over the lazy dog
Warm, trustworthy, refined — for headings and display text
DM Sans — Interface
The quick brown fox
jumps over the lazy dog
Clean, geometric, functional — for body text and UI elements
Geist Mono — Data
$1,234,567.89
€987,654.32
¥12,345,678
03 — Colors
light mode
Core
UI
Border & Ring
Chart
Sidebar
dark mode
Core
UI
Border & Ring
Chart
Sidebar
04 — Components
Button variants
| Variant | xs | sm | default | lg |
|---|---|---|---|---|
| default | ||||
| outline | ||||
| secondary | ||||
| ghost | ||||
| destructive | ||||
| link |
Icon buttons
Form controls
Paper forms refined for the screen — structured, legible, purposeful
New project
Provide the details below to get started.
Disabled fields indicate read-only state.
Navigation & Layout
Quiet wayfinding that orients without competing for attention
Tabs — Default
Tabs — Line
Separator
Autumn Campaign
Branding — #PRJ-0847
Budget
$25,000
Deadline
Apr 15
Status
In progress
Overlays
Layered surfaces for focused actions — a sheet of paper placed atop another
Dialog
Modal confirmation for irreversible actions. Demands attention before proceeding.
Sheet
Slide-out panel for supplementary detail without losing page context.
Tooltip
Contextual hint on hover — brief, informative, unobtrusive.