Design System
A living style guide for the PARA Workspace. Our design language is built on strict utility classes and semantic tokens.
01. Colors
Brand Configuration
Brand Purple
#6d13ec
bg-brand-purple Purple Dark
#5a0ec7
bg-brand-purple-dark Brand Blue
#137fec
bg-brand-blue Blue Hover
#0f6bd0
bg-brand-blue-hover Surface & Background
Surface Light
#ffffff
bg-white BG Light
#f7f6f8
bg-background-light BG Dark
#181022
bg-background-dark 02. Typography
Aa
Space Grotesk
Display Heading
Section Title
Component Header
Aa
Inter
The quick brown fox jumps over the lazy dog. Inter is used for body text, ensuring high readability at small sizes. It is the standard interface font for the PARA Workspace.
Bold • Medium • Light
Ag
JetBrains Mono
const para = require('@antigravity/sdk');
03. UI Components
Button Variants
Feature Cards
Standard Card
Minimalist container for secondary actions.
Active State
check_circleHigh-emphasis container for primary selection.
Component Specifications
| Component | Variant | Utility Classes | Tokens |
|---|---|---|---|
| Button | Primary | bg-brand-purple text-white px-6 py-3 rounded-lg font-bold | action-p |
| Button | Control | bg-white border border-gray-200 rounded-full shadow-sm | cta-s |
| Card | Info | p-8 border border-gray-200 rounded-xl | surf-low |
| Card | Highlight | p-8 border-2 border-brand-purple bg-brand-purple/5 | surf-brand |
04. Interactive Elements
React Island: Hero3DCube
south
Dark Mode Context
Components adapt to dark backgrounds automatically.
05. Grid Configuration
1
2
3
4
5
6
7
8
9
10
11
12
Max Width
1600px (Centered)
Sidebar
280px (Desktop Fixed)
Gaps
Spacer-4 (1rem) / Spacer-8 (2rem)
06. Spacing Scale
px-4 / 1
4px
px-8 / 2
8px
px-12 / 3
12px
px-16 / 4
16px
px-24 / 6
24px
px-32 / 8
32px
px-48 / 12
48px
px-64 / 16
64px
07. Iconography
We use Google's Material Symbols Outlined for consistent, geometric icons.
view_in_ar view_in_ar
architecture architecture
token token
hub hub
memory memory
psychology psychology
terminal terminal
code code
dataset dataset
deployed_code deployed_code
model_training model_training
smart_toy smart_toy
arrow_outward arrow_outward
check_circle check_circle
error error
warning warning
info info
lock lock