Design System Remix
Compose a new visual language from proven parts.
A flexible interface system for teams to shape, ship, and refine product experiences with consistent decisions.
Color Palette33 tokens
background#08090a
background-deep#010102
surface#0f1011
surface-elevated#191a1b
surface-hover#28282c
ink#f7f8f8
ink-secondary#d0d6e0
ink-tertiary#8a8f98
ink-quaternary#62666d
ink-muted#e2e4e7
primary#5e6ad2
accent#7170ff
accent-hover#828fff
security-lavender#7a7fad
success#27a644
emerald#10b981
border#23252a
border-secondary#34343a
border-tertiary#3e3e44
line-tint#141516
line-tertiary#18191a
border-subtle#1a1c1e
border-standard#212224
surface-tint-1#0d0e10
surface-tint-2#131416
surface-tint-3#16181a
background-light#f7f8f8
surface-light#f3f4f5
surface-light-alt#f5f6f7
border-light#d0d6e0
border-light-alt#e6e6e6
surface-pure#ffffff
on-primary#ffffff
Buttons
TypographyGoogle Font
Hanken Groteskbrand uses sohne-var
display-hero
The quick brown fox
56px · 300 · -1.4px
display-large
A system for focused product work
48px · 300 · -0.96px
heading-section
A flexible interface system for teams to shape, ship, and refine product experiences with consistent decisions.
32px · 300 · -0.64px
sub-heading-large
Reusable patterns for real screens.
26px · 300 · -0.26px
sub-heading
A flexible interface system for teams to shape, ship, and refine product experiences with consistent decisions.
22px · 300 · -0.22px
IconsLucide
Set: Lucide · brand-matched
Formfocus ring
Email
you@company.com
Password
••••••••
Card · Shapes
A system for focused product work
A flexible interface system for teams to shape, ship, and refine product experiences with consistent decisions.
Design Systemnone
near
pill
Elevation
RING
CARD
ELEVATED
Controls
On
Off
✓Checked
Unchecked
Selected
Option
Alerts
Heads up — a new version of the design system is available.
Saved. Your changes are live across all surfaces.
Some tokens are missing a contrast-safe pairing.
Couldn’t reach the server. Retry in a moment.
Badges
SolidSoftOutlineNewv2.0
FAQ
A system for focused product work
A flexible interface system for teams to shape, ship, and refine product experiences with consistent decisions.
How does it integrate with my stack?
Is there a free tier?
Tabs
OverviewActivitySettings
DayWeekMonth
Stats
48.2k
Active users
+12.4%
$12.8k
MRR
+3.1%
99.9%
Uptime
−0.02%
Table
| Member | Plan | Status |
|---|---|---|
| AQAvery Quinn | Pro | Active |
| JLJordan Lee | Team | Pending |
| SRSam Rivera | Free | Active |
Avatars
AQJLSR+5
AQ
Avery Quinn
Online · Owner
Tooltip · Popover
Brand-styled tooltipHover target
Keyboard shortcuts
Press ⌘K to open the command menu, ? for help.
Navigation bar
Banner
Pricing
Pro
$24 /mo
- Unlimited projects
- Priority support
- Custom domains
Stepper
CartDetails3Payment4Review
Breadcrumb
HomeDesign SystemCustom Remix
Menu
Toast
You have 3 new updates
Activity
Avery created a new project
2h ago
Jordan left a comment
5h ago
Sam shipped v2.0
1d ago
Notifications
AQAvery Quinn invited you to Custom Remix.
2 minutes ago
JLJordan Lee approved your design tokens.
1 hour ago
SRSam Rivera mentioned you in a thread.
Yesterday
Code
theme.ts
// Custom Remix tokens export const theme = { primary: "#5e6ad2", radius: "8px", }
Calendar
March 2026
SMTWTFS28291234567891011121314151617181920212223242526272829303112
Loading
Pagination
‹123…12›
Brand moment
Use the remix as a starting point, then tune the language around the product you are actually designing.