Design system
A considered visual language for building clear, expressive product experiences. Explore the foundations, components, and interaction patterns that bring Graphics Studio to life.
Typography
Plus Jakarta Sans pairs confident, compact headlines with comfortable body text. A consistent type scale keeps the interface readable at every size.
Display styles
Make ideas matter.
Plus Jakarta Sans · 48px / 800 · −0.075em · 0.99 line height
A clearer way forward.
Plus Jakarta Sans · 38px / 800 · −0.055em · 1.05 line height
Heading styles
Build with purpose
29px · Weight 800 · −0.045em
Thoughtful by design
23px · Weight 700 · −0.04em
Made for momentum
18px · Weight 700 · −0.025em
Good work, made simple
16px · Weight 700 · −0.02em
Body styles
Clear language helps people move through complex work with confidence.
16px · Weight 400 · 1.7 line height
Our components use a consistent rhythm, giving content room to breathe without losing its sense of focus.
14px · Weight 400 · 1.7 line height
Supporting details should feel clear, useful, and easy to scan.
12px · Weight 400 · 1.7 line height
A brief label for secondary information.
11px · Weight 500 · 1.6 line height
Color system
A bright, balanced palette anchors the interface in white and soft neutrals, with blue for action and carefully tuned semantic colors for feedback.
Primary palette
Semantic colors
Neutral colors
Components
Reusable interface patterns combine clear hierarchy, practical interaction states, and a touch of personality.
Buttons
Cards
A little context
A recognizable visual cue makes information easier to scan.
Room to think
Generous spacing makes content feel calm and considered.
Ready to move
A clear action helps people confidently take the next step.
Input fields
Accordion
Value proposition card
Design with confidence.
Create polished interfaces with a flexible set of foundations and components that feel unmistakably yours.
Badges
Spacing system
A flexible scale based on 4px increments creates consistent rhythm between elements, sections, and layouts.
Icon system
A consistent icon language supports navigation, actions, and status without competing with the content.
Border radius
Soft, consistent corner treatments create a welcoming feel while preserving a crisp, editorial foundation.
Shadow system
Subtle elevation provides a sense of depth while keeping surfaces light and easy to read.
Data visualization
Metrics, charts, and tables pair clear labels with restrained color so the data remains the focus.
Monthly revenue
Active users
Traffic sources
Performance overview
| Product | Revenue | Growth | Status |
|---|---|---|---|
| Design System Pro | $45,200 | +15.2% | Active |
| Component Library | $32,450 | +8.7% | Active |
| UI Kit Bundle | $28,900 | −3.2% | Active |
| Templates Pack | $18,750 | +22.1% | Inactive |
| Icon Collection | $12,300 | 0% | Active |
Feedback components
Helpful feedback is timely, specific, and easy to understand. These patterns cover common communication needs.
Modal dialog
Use a focused dialog for important confirmations and decisions.
Tooltips
Alerts
Toast notifications
Choose a notification type to preview a brief, non-blocking message.