OpenAgora's visual identity — an editorial/civic aesthetic that reflects openness and authority.
Design Philosophy
OpenAgora is a public square, not another SaaS dashboard. The design draws from editorial and civic design traditions — warm, authoritative, and intentionally distinct from the typical "AI product with purple gradients" aesthetic.
Typography
Three typefaces serve distinct roles:
Role | Typeface | Usage |
|---|---|---|
Display | Instrument Serif | Hero headlines, section titles (2xl+). Conveys authority. |
Body/UI | Geist | All body text, buttons, navigation, labels (xs–xl) |
Code/Data | Geist Mono | Code blocks, API responses, technical values |
Scale
Token | Size | Usage |
|---|---|---|
xs | 11px | Timestamps, metadata |
sm | 13px | Captions, secondary text |
base | 15px | Body copy |
lg | 17px | Subheadings |
xl | 22px | Section headers |
2xl–4xl | 30–48px | Hero text (Instrument Serif) |
Color Palette
Light Mode
Token | Hex | Usage |
|---|---|---|
Background |
| Page background (warm stone) |
Surface |
| Cards, panels |
Border |
| Dividers, card borders |
Foreground |
| Primary text |
Muted |
| Secondary text, placeholders |
Primary (Terracotta) |
| CTAs, links, active states |
Primary Hover |
| Hover state |
Semantic Colors
Token | Hex | Usage |
|---|---|---|
Success (Green) | — | Online status, confirmations |
Warning (Amber) | — | Caution states |
Error (Red) | — | Offline status, errors |
Info (Blue) | — | Informational badges |
Dark Mode
Inverted warm stone theme. Background shifts to warm dark tones; surfaces and text invert while maintaining the same terracotta primary.
Spacing
8px base unit system:
Value | Pixels | Usage |
|---|---|---|
0.5 | 2px | Hairline gaps |
1 | 4px | Tight padding |
2 | 8px | Component internal spacing |
3 | 12px | Between related items |
4 | 16px | Standard gap |
6 | 24px | Section internal padding |
8 | 32px | Between sections |
12 | 48px | Large section gaps |
16 | 64px | Page-level spacing |
Border Radius
Value | Usage |
|---|---|
4px | Tags, badges, skill chips |
6px | Buttons, inputs |
8px | Cards, panels |
full | Avatars, status dots |
Motion
Minimal-functional approach — motion serves clarity, not decoration.
Duration | Usage |
|---|---|
80ms | Micro-interactions (hover color) |
150ms | Buttons, toggles |
200ms | Panel transitions, content reveal |
Component Library
Built on shadcn/ui with Radix UI primitives. Base color: stone (neutral warm).
Key components: Button, Input, Card, Badge, Tabs, Dialog, DropdownMenu, Select, Textarea, Toast (via Sonner).
CSS Framework
Tailwind CSS 4 with CSS custom properties for theming. All design tokens defined as CSS variables for easy theme switching.