Design System
Prospect
Maximum restraint. Monochrome at rest, color through action. Sage appears only on interaction.
Foundation
Colors
Black, white, grayscale. Accent reveals itself on hover and focus.
Foundation
Typography
Light weights, generous spacing. Let the words breathe.
Heading One
Heading Two
Heading Three
Heading Four
Body text in near-black for maximum contrast. Links are underlined in gray until hovered, when they reveal the accent color.
Muted text for secondary information.
Small, subtle text for metadata.
Components
Forms
Minimal inputs. Focus reveals the accent.
We'll never share your email.
Components
Cards
Containers that recede. Content comes forward.
Basic Card
Subtle border, no shadow.
Cards provide structure without demanding attention.
Elevated Card
Slight shadow, no border.
For content that needs to lift slightly.
Components
Badges
Status indicators, tags, and labels.
Components
Alerts
Contextual messages for user feedback.
Neutral
A standard message without emphasis.
Success
Your changes have been saved.
Warning
Please review before continuing.
Error
Something went wrong. Try again.
Info
Here's something you should know.
Components
Tables
Clean data presentation. Hover reveals accent.
| Name | Role | Status |
|---|---|---|
| Alice Chen | Engineer | Active |
| Bob Martinez | Designer | Active |
| Carol Johnson | Product | Away |
Components
Checkboxes & Radios
Selection controls with visible focus states.
Checkboxes
Radio buttons
Components
Code
Inline and block code with monospace styling.
Inline code
Use npm install prospect to add the package, or reference --color-accent directly.
Code block
// Design tokens as CSS custom properties
:root {
--color-accent: #7C9A82;
--color-background: #FAFAFA;
--radius-sm: 2px;
}Components
Loading States
Spinners and skeleton placeholders for async content.
Spinners
Small
Default
Large
Skeleton placeholders