One look for every product
Every FormaBase surface, from this site to each product in the catalog, is built from one design system. Creators bring the features; the system makes them look and feel like FormaBase.
| Principle | In practice |
|---|---|
| Technical, precise, understated | Inter throughout, tight headings, generous whitespace, no decoration for its own sake |
| Tokens, not values | Colors, type sizes, spacing, radii and shadows come only from tokens; checks reject hard-coded values |
| Spring physics | Everything that moves uses springs, tuned to settle smoothly, and respects reduce-motion settings |
| Accessible by default | Readable contrast, visible focus, labels on every field, full keyboard support |
| Versioned forward | Products pin a version; updates apply to new work and never break a live product |
Thirteen color roles. Components use roles, never raw colors, and hover, subtle and focus shades are derived automatically.
Page background
canvas
Alternate background
canvas-subtle
Card surface
surface
Border
border
Primary text
ink
Secondary text
ink-muted
Brand accent
accent
Text on accent
on-accent
Dark band
inverse
Text on dark band
on-inverse
Success
success
Warning
warning
Danger
danger
text-display
Home page hero only
Software, formed.
text-h1
Page titles
Build products, not companies
text-h2
Section titles
Everything around the code
text-h3
Sub-sections, large cards
Payouts, handled
text-h4
Card titles, form sections
Revenue share
text-lead
Intro paragraph under a title
FormaBase runs billing, attribution and payouts so Creators can focus on the product.
text-body
Default body copy
Every product is a Stripe Product tagged with its product ID.
text-sm
UI text, labels, buttons, tables
Last payout: Oct 1, 2026
text-xs
Captions, badges, fine print
Amounts shown in USD
shadow-xs
Inputs
shadow-card
Cards, secondary buttons
shadow-raised
Hovered cards, dropdowns
shadow-overlay
Dialogs, product screenshots
rounded-sm
4px · badges, checkboxes
rounded-md
6px · buttons, inputs
rounded-lg
10px · cards
rounded-xl
16px · large media
rounded-full
Pills, avatars
We only use this to reply to you.
Enter a full address, like https://example.com.
FormaBase's visual signature: engineering-drawing marks used as a faint texture. Graph paper and an isometric grid, registration marks around product visuals, dimension lines with meaningful labels, numbered sections and a title block in every footer. One motif per section, never behind body text.