Dusk Design System for AI Agents
DarkSansGradientWhat components ship in the Dusk design system?
Every card below renders with this system's own tokens. Try buttons, forms, tables, and composed flows before you commit the files to your repo.
At a glance
Twilight purple canvas with frosted surfaces, warm orange actions and Poppins throughout.
- Mode
- dark
- Type
- Poppins
- Radius
- 12px
- Primary
- #ff8a4c
Typefaces
This system uses the following font families. Every sample below is rendered live — not a screenshot.
Headings, hero titles, stat numbers
Body copy, buttons, form fields
Eyebrows, badges, metadata
Color palette
Display and lead type
Base body copy at large size for lead paragraphs and introductory content blocks.
Body and label type
Standard body text for descriptions, helper copy, and long-form content within cards and panels.
Captions, timestamps, and supplementary metadata rendered at reduced size.
Badge
Variants
Use cases
Avatar
Sizes & shapes
Demo PhotoFallback InitialsStatus dots
Use cases
Profile header — large avatar + status
Card
Default card
Static container, no interaction.
Clickable card
Click me — fires a real handler.
Dusk highlights
Card with badge header for featured content.
Engineer · Online
Avatar + meta composition for people cards and directory rows.
Actions footer
Card that ends with a real action row.
Input
Textarea
Divider
This page uses SectionLabel to open every section
Checkbox
Radio
Plan
Billing cycle
Switch
Tooltip
Select
MultiSelect
DatePicker
TimePicker
Modal
Toast
Pagination
Paired with table dataset
Drives the “With data” table above.
Mid-range (page 3 of 8)
Near the end (page 5 of 5)
Table
With data — sortable + selection
| Status | |||
|---|---|---|---|
| Ada Lovelace | Design Lead | Active | |
| Grace Hopper | Engineer | Active | |
| Alan Turing | Researcher | Pending | |
| Margaret Hamilton | Engineer | Active | |
| Katherine Johnson | Analyst | Idle | |
| Radia Perlman | Architect | Active |
Showing page 1 of 2 from 12 rows — use Pagination below.
Loading
| Status | |||
|---|---|---|---|
Empty
| Status | |||
|---|---|---|---|
| No rows to show. | |||
Skeleton: text and cards
Avatar + lines
Card block
Button row placeholders
Skeleton: rows and forms
Table row placeholders
Form field stack
Skeleton: lists and media
List items
Media / thumb row
Graph
Sample dataset for Dusk — values scale relative to the highest bar in the series.
Tabs
Horizontal
Overview panel — summary copy for Dusk. Use arrow keys to move between tabs.
Vertical
Vertical tabs keep navigation beside the panel.
Composed Flow — Register a Record
A realistic product moment: open the modal, fill fields with validation, submit, and see a toast plus a new table row. Secondary paths prove confirm and info modals stay reachable from the same section.