Design System
This website is built in accordance with the Pageel Theme Kit and fully developed on PARA Workspace.
01. Identity
Primary Logo
Standard horizontal lockup. Text: Black, Icon: Brand Purple.
Icon Specimen
Variants for dark, light, and brand surfaces.
02. Colors
Brand Configuration
bg-brand-purple bg-brand-purple-dark bg-brand-blue bg-brand-blue-hover Surface & Background
bg-white bg-background-light bg-background-dark 03. Typography
Display Heading
Section Title
Component Header
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.
04. UI Components
Button Variants
Badges
Antigravity Code Blocks
// Core initialization sequence...
async function bootstrap() {
const settings = await loadConfig('.para-workspace.yml');
if (!settings) {
console.error('Missing settings, falling back...');
return false;
}
return true;
}
bootstrap();
Full block presentation uses #1A1A1A background with semantic syntax highlighting (Purple for keywords, Blue for functions, Green for strings).
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 |
| Badge | Any | px-3 py-1 text-[9px] font-mono uppercase rounded-full font-bold border | tag-pill |
05. Interactive Elements
React Island: Hero3DCube
Dark Mode Context
Components adapt to dark backgrounds automatically.
06. Grid Configuration
Vertical Axis Consistency
To maintain a unified visual flow, the vertical line at the 280px mark must be **continuous across all pages**, including the 80px header padding area. This prevents visual gaps when viewing subpages.
left-0 w-[280px] border-r
top-0 bottom-0 (Ensures line runs behind header)
Remove local lg:border-r from logo area
to avoid double-line or 1px misalignment.
07. Spacing Scale
08. Iconography
We use Google's Material Symbols Outlined for consistent, geometric icons.