Proper AI

Design System

Base tokens, components, and compositional blocks from @proper/ds

01.

Base

Colors

Background

--bg-base#0e0e0e
--bg-surface-1#131313
--bg-surface-2#1e2020
--bg-surface-3#1f2020

Accent

--accent-lavender#c3c3ef
--accent-lavender-muted#b5b5e1
--accent-gold#c0a67c
--accent-gold-secondary#b49a71

Text

--text-primary#ffffff
--text-secondary#9d9e9e
--text-muted#737373
--text-dimmed#525252
--text-on-accent#1e2021

Border

--border-subtle#48484803
--border-default#4848480a
--border-strong#48484817

Semantic

--success#22c55e
--warning#f59e0b
--error#ef4444
--info#3b82f6

Typography

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

xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px

Radius

sm2px
toggle-track4px
fullfull
02.

Components

Brand

Actions

Button

buttonVariants
default
secondary
outline
ghost
destructive
Rest
Hover
Focus
Disabled

Sizes

Forms

Input

Default

With value

Disabled

Disabled with value

Switch

Variants

Disabled

Data Display

Badge

badgeVariants

Status

SuccessWarningDestructiveInfo

Style

DefaultSecondaryOutlineDestructive

Table

TableHeaderTableBodyTableRowTableHeadTableCell
NameStatusRole
Alice ChenActiveAdmin
Bob DiazPendingEditor
Carol KimInactiveViewer

Avatar

AvatarFallback

Initials fallback

ABCDEF

Layout

Card

CardHeaderCardTitleCardDescriptionCardContentCardFooter

Card Title

A short description of the card content.

Card body. Any content goes here.

Tabs

TabsListTabsTriggerTabsContent

Default

Overview content.

ScrollArea

Scrollable item 1

Scrollable item 2

Scrollable item 3

Scrollable item 4

Scrollable item 5

Scrollable item 6

Scrollable item 7

Scrollable item 8

Scrollable item 9

Scrollable item 10

Scrollable item 11

Scrollable item 12

Overlays

Dialog

DialogTriggerDialogCloseDialogContentDialogTitleDialogDescription

Sheet

SheetTriggerSheetCloseSheetContentSheetTitle

Tooltip

TooltipTriggerTooltipContent

DropdownMenu

DropdownMenuTriggerDropdownMenuContentDropdownMenuItemDropdownMenuSeparator
03.

Blocks

Editorial Header + Section

Page Title

Subtitle text goes here

01.

First Section

Metric Row

2,847
Total Events
99.7%
Uptime
42ms
Avg Latency

Ledger Table

Recent Activity

ResourceTimestampStatus
evt_9a3f1bProcessed
evt_8b2e0cPending
evt_7c1d9aFailed

Settings Card

Notifications

Manage how you receive alerts.

Profile Card

JD

Jane Doe

jane@example.com

Overlay Patterns