Four weights available. Regular for body text, Medium for labels, Semi Bold for headings, Bold for emphasis.
Aa
{{w.value}} · {{w.name}}
Line Height
Three line-height tokens tuned for different contexts. Tighter for display text, relaxed for long-form prose.
{{l.token}}: {{l.value}} · {{l.desc}}
Typography is the craft of endowing human language with a durable visual form. It mediates between author and reader.
Prose
Optimal measure at ~65 characters per line. Body text set at 16px / 1.65 line-height for sustained reading comfort.
Good typography establishes a visual hierarchy that guides the reader through content. The interplay of size, weight, and spacing creates rhythm — a cadence that makes information feel organized without effort.
When a type system works, you don't notice it. The text simply feels right: easy to scan, comfortable to read, and clear in its structure. That invisible quality is what a well-tuned design system delivers.
Elements exist at different distances in a calm spatial field.
Quiet Until Needed
Components rest in a low-contrast state and gain presence on interaction.
Newv1.0
Single Accent
One accent color as a precise tool for directing attention.
Breadcrumb
Empty State
No results found
Try adjusting your search terms or filters to find what you're looking for.
Table
Token
Value
Usage
Status
{{r.token}}
{{r.value}}
{{r.usage}}
{{r.statusLabel}}
09 — Component API
Usage & Props
Every component uses CSS custom properties for theming. No JS runtime needed — just HTML classes.
{{a.tag}}
{{p.name}}{{p.type}}{{p.desc}}{{p.default}}
{{a.showCode?'Hide':'Show'}} HTML
{{a.html}}
10 — Export
Export Your Design System
These outputs reflect your current configuration. Copy into your project or download as a file.
{{currentExport}}
11 — In Context
Real Interfaces
All tokens composing in real interfaces. Toggle the sidebar controls — everything adapts.
Paxcopia
Dashboard
Team
Documents
Settings
Overview
March 2026
Storage almost full
You've used 92% of your allocated storage. Consider upgrading your plan.
Revenue
$48.2k
↑ 12.5%
Active Users
2,847
↑ 8.1%
Completion
94%
↑ 3.2%
Member
Role
Status
Activity
{{m.init}}
{{m.name}}
{{m.role}}
{{m.statusLabel}}
{{m.time}}{{m.tag}}
Paxcopia
Dashboard
Team
Documents
Settings
Account Settings
Profile
Verified
Notifications
Email notifications
Receive updates about your account
Push notifications
Browser and mobile alerts
Weekly digest
Summary of activity every Monday
Danger Zone
Permanently delete your account and all data. This action cannot be undone.
Paxcopia
Dashboard
Calendar
Team
Settings
April 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
{{d.day}}
Upcoming
Design review
Today, 2:00 PM
In 2h
Sprint planning
Tomorrow, 10:00 AM
Quarterly review
Apr 7, 3:00 PM
3 days
Paxcopia
Dashboard
Team
Profile
Settings
AK
Alex Kim
Product Designer · San Francisco
ProVerified
Projects
24
Contributions
389
Followers
1.2k
About
Design systems enthusiast with 8 years of experience building scalable UI frameworks. Currently focused on bridging the gap between design and engineering through systematic approaches to visual language.
Recent Activity
AK
Updated the color system2h ago
AK
Created new component libraryYesterday
AK
Shipped v2.0 release3 days ago
milestone
Paxcopia
Dashboard
Notifications
Team
Settings
Notifications
Sarah Chen invited you to Design System v3
5 minutes ago
Build #247 passed all checks
32 minutes ago
Passed
Storage usage at 92% of quota
1 hour ago
MJ
Mike Johnson commented on your pull request
3 hours ago
New feature: Dark mode is now available
Yesterday
Choose your plan
Start free, scale as you grow. All plans include a 14-day trial.
{{wcagModal.reason==='gray'?'Accent needs color':'Color adjusted for accessibility'}}
Grayscale values can't serve as an accent — there's no hue to build a color scale from. Pick a chromatic color instead.
The color you entered falls in a contrast dead zone — neither white nor dark text can reach WCAG AA (4.5:1) on it. We snapped to the nearest safe color.
You have locked secondary colors. Switching to {{cap(harmonyWarn.pending)}} will replace them with auto-generated colors.
Confirm action
Are you sure you want to proceed? This will apply the changes to your workspace. You can undo this later from settings.
Share your design system
Anyone with this link can see your exact design system config. Paste it into the Paxcopia DS Figma Plugin to set up your Figma file with your unique design system.
Support
Questions, feedback, or need help with your design system? Reach out and we'll get back to you.