Title Font
Lexend Black (900), used for headings.
Title H1
Title H2
Title H3
Body Font
Lexend, used for all readable content.
Body Large: Primary descriptive text mapped to the ecosystem.
Body Normal: Default paragraph text.
Subtle / Caption: Used for metadata.
A blockquote highlighting specific text.
This container has our standard rounding, soft shadows, and a subtle border. It scales dynamically.
Primary Action
Continue
Launch
Primary
Secondary Action
Explore Projects
Add Project
Secondary
Tertiary Action
Learn More
Tertiary
Status Actions
Checkboxes
Radio Buttons
6.1 Pill Tabs
6.2 Dropdown Menu
6.3.1 Infinite Canvas UI
Now properly accepting projected HTML children directly inside the panning surface.
7.1 Modal
Open Modal
7.2 Alerts
7.3 Tooltip (via Component)
Status Info
7.4 Badges
Hover Me
Brand
Success
Error
3
8.1 Accordion / FAQ
8.3 List Components
Unordered (JSON Array)
Ordered
List with Icons
Navigational
Avatars
Simple Clickable Card
Card with Action
Image Components (Max Widths, SVGs & GIFs)
Images auto-fill their container. Wrap them in a source-box to constrain width.
Custom Video Player
Fully overrides the ugly native browser controls with a custom Glassmorphic HUD.
Custom Audio Player
A sleek, unified card dropping native UI.
With Title, Artist & Cover
Collapsed Single Row
9.2 Uploader & Copy
9.5 Indeterminate
9.6 Determinate
9.7 Bouncing Dots
9.8.1 Infinite Carousel (Looping Cards)
9.8.2 Selection Carousel (Image Input Dial)
Acts as an input selector. Swipe or use trackpad to select.
9.10 Data Visualization
9.11 Inline Charts
10.1 Before/After Slider
Image Comparison (Object Contain)
Video Sync Comparison (fit="cover")
10.4 File Trees
Interactive Folders
Interactive (No Icons)
Selectable Cascade
Parents auto-check children.
Flat Selectable (No Icons)
Clean multi-select list.
11.1 KPI Cards
11.5 Ecosystem Toasts
Trigger Notification
11.6 Options Menus
12. Glassmorphism Login Modal
Show Login Overlay