Proof style guide
The parts that make Proof feel like Proof. These are live components from the site, with the same shared styles. Use the theme control above to compare light and dark mode.
01
Colors
Colors come directly from the site's CSS variables. Each swatch changes with the active theme. Status colors also have soft surface colors.
Page
--backgroundMain text
--foregroundCards
--cardPrimary action
--primarySecondary action
--secondaryQuiet surface
--mutedSupporting text
--muted-foregroundHover / selection
--accentBorders
--borderInput border
--inputFocus ring
--ringDestructive action
--destructiveEditorial surface
--paperEditorial text
--inkSuccess
--proof-successSuccess surface
--proof-success-softNeeds attention
--proof-warningAttention surface
--proof-warning-softDenied / failure
--proof-deniedFailure surface
--proof-denied-soft02
Typography
Nunito gives display and shared headings rounded edges. Geist Sans stays clear in controls and body text; Geist Mono labels code.
Nunito · display · semibold
Know what still works.
Nunito · heading · semibold
An important customer outcome
text-base · regular
Customers can finish checkout and keep their cart after sign-in.
text-sm · muted-foreground
Supporting text explains what happened and what to do next.
Geist Mono · test_001 · 0123456789
03
Spacing
Spacing uses Tailwind's shared scale. Small gaps group controls. Larger gaps separate content. Corner samples use Proof's radius variables.
1 · 4px2 · 8px3 · 12px4 · 16px6 · 24px8 · 32px12 · 48px16 · 64pxradius-smradius-mdradius-lgradius-xl05
Inputs
Shared fields include labels, help text, disabled controls, and errors. The invalid example stays invalid so its appearance is easy to inspect.
Give the project a clear name.
06
Dropdowns & checkboxes
Select chooses one value. The menu includes actions and checkbox items. Standalone checkbox examples appear in the Checkboxes & switches section.
Choose the consequence of a failure.
These checkboxes change the table below.
07
Tables
Shared table headers, rows, cells, and badges. Change the visible columns in View options above. Sample data only.
| Test | Importance | Status |
|---|---|---|
| Complete checkout | Critical | Passed |
| Keep cart after sign-in | Important | Needs review |
| Update profile | Supporting | Not run |
08
Cards & boxes
Cards group related content with a title, description, body, and optional footer. Both sizes below use the shared Card component without visual overrides.
10
Checkboxes & switches
Checkboxes select independent options. Switches turn a setting on or off. These controls only change this example.
Example preference. No tests will run.
11
Radio groups & toggles
Radio buttons choose one option from a list. Toggle groups offer compact choices, such as a view or filter.
Selected view: list
A standalone toggle selects one independent display option.
12
Sliders & progress
Sliders select a numeric value. Progress shows completion. Move the slider or use its arrow keys to update both examples.
Use Left and Right to change by five percent.
13
Avatars
Avatars identify people and teams. Initials remain visible when an image is missing. Three shared sizes and a group are shown here.
smdefaultlg15
Tooltips & popovers
Tooltips explain a control on hover or keyboard focus. Popovers hold a small amount of interactive content.
16
Sheets
A sheet opens a side panel while keeping the current page in context. Try it with a keyboard, and press Escape to close it.
17
Empty states
An empty state explains what is missing and offers a useful next action. This example can switch between empty and populated states.