Design System
Base tokens, components, and compositional blocks from @proper/ds
Base
Colors
Background
--bg-base#0e0e0e--bg-surface-1#131313--bg-surface-2#1e2020--bg-surface-3#1f2020Accent
--accent-lavender#c3c3ef--accent-lavender-muted#b5b5e1--accent-gold#c0a67c--accent-gold-secondary#b49a71Text
--text-primary#ffffff--text-secondary#9d9e9e--text-muted#737373--text-dimmed#525252--text-on-accent#1e2021Border
--border-subtle#48484803--border-default#4848480a--border-strong#48484817Semantic
--success#22c55e--warning#f59e0b--error#ef4444--info#3b82f6Typography
Newsreader — editorial headings
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Inter — UI body
Regular 14 — The quick brown fox jumps over the lazy dog
Medium 14 — The quick brown fox jumps over the lazy dog
Bold 14 — The quick brown fox jumps over the lazy dog
Regular 12 — The quick brown fox jumps over the lazy dog
Medium 12 — The quick brown fox jumps over the lazy dog
System mono — code & IDs
13px — const x = await fetch("/api");
11px — const x = await fetch("/api");
Spacing
xs4pxsm8pxmd16pxlg24pxxl32px2xl48pxRadius
sm2pxtoggle-track4pxfullfullComponents
Brand
Logo
Wordmark
Icon
Actions
Forms
Input
Default
With value
Disabled
Disabled with value
Switch
Variants
Disabled
Data Display
Badge
badgeVariantsStatus
Style
Table
TableHeaderTableBodyTableRowTableHeadTableCell| Name | Status | Role |
|---|---|---|
| Alice Chen | Active | Admin |
| Bob Diaz | Pending | Editor |
| Carol Kim | Inactive | Viewer |
Avatar
AvatarFallbackInitials fallback
Layout
Card
CardHeaderCardTitleCardDescriptionCardContentCardFooterCard Title
A short description of the card content.
Card body. Any content goes here.
Tabs
TabsListTabsTriggerTabsContentDefault
Overview content.
ScrollArea
Overlays
Dialog
DialogTriggerDialogCloseDialogContentDialogTitleDialogDescriptionSheet
SheetTriggerSheetCloseSheetContentSheetTitleTooltip
TooltipTriggerTooltipContentDropdownMenu
DropdownMenuTriggerDropdownMenuContentDropdownMenuItemDropdownMenuSeparatorBlocks
Editorial Header + Section
Page Title
Subtitle text goes here
First Section
Metric Row
Ledger Table
Recent Activity
| Resource | Timestamp | Status |
|---|---|---|
evt_9a3f1b | Processed | |
evt_8b2e0c | Pending | |
evt_7c1d9a | Failed |
Settings Card
Notifications
Manage how you receive alerts.
Profile Card
Jane Doe
jane@example.com
Overlay Patterns