Design System
Inspired by Lovable

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Start Building View Documentation
01 / Colors

Color Palette

Primary
Cream
#f7f4ed
Page background
Charcoal
#1c1c1c
Primary text, headings
Off-White
#fcfbf8
Button text on dark
Neutral Scale (Opacity-Based)
Charcoal 83%
rgba(28,28,28,0.83)
Strong secondary
Muted Gray
#5f5f5d
Body text, captions
Charcoal 40%
rgba(28,28,28,0.4)
Interactive borders
Charcoal 4%
rgba(28,28,28,0.04)
Hover tint
Charcoal 3%
rgba(28,28,28,0.03)
Subtle overlay
Surface & Border
Light Cream
#eceae4
Borders, dividers
Interactive
Ring Blue
rgba(59,130,246,0.5)
Focus ring
02 / Typography

Typography Scale

Display Hero
Display Hero — 60px / 600 / 1.10 / -1.5px / Camera Plain Variable
Section Heading
Section Heading — 48px / 600 / 1.00 / -1.2px / Camera Plain Variable
Sub-heading
Sub-heading — 36px / 600 / 1.10 / -0.9px / Camera Plain Variable
Card Title
Card Title — 20px / 400 / 1.25 / Camera Plain Variable
Body Large — Build something lovable. Create web applications with AI-powered development tools.
Body Large — 18px / 400 / 1.38 / Camera Plain Variable
Body — Standard reading text for descriptions, paragraphs, and UI content.
Body — 16px / 400 / 1.50 / Camera Plain Variable
Button / Link — Interactive text
Button / Link — 14px / 400 / 1.50 / Camera Plain Variable
Caption — Metadata and small labels
Caption — 14px / 400 / 1.50 / Camera Plain Variable
03 / Buttons

Button Variants

Start Building
Primary Dark
Documentation
Ghost / Outline
Settings
Cream Surface
Pill Icon
04 / Cards

Card Examples

Template

Portfolio Website

A minimal portfolio template with project showcase, about section, and contact form. Built with modern design principles.

Featured

AI Chat Application

Full-stack AI chat interface with streaming responses, conversation history, and customizable prompts. Hover-state border shown.

Starter

SaaS Dashboard

Analytics dashboard with charts, data tables, and user management. Integrates with common APIs and databases.

05 / Forms

Form Elements

Default (border)
Focus (blue ring)
Error (red ring)
06 / Spacing

Spacing Scale

8
10
12
16
24
32
40
56
80
07 / Radius

Border Radius Scale

4px
Small
6px
Buttons
8px
Compact
12px
Cards
16px
Containers
9999px
Pills
08 / Elevation

Elevation & Depth

Level 0: Flat
No shadow, cream bg
Level 1: Bordered
1px solid #eceae4
Level 2: Inset
Button inset shadow
Level 3: Focus
Focus shadow glow
Ring
Accessibility ring