Design systems, extracted.
Search curated design systems pulled from premium templates or create one from URL. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
UBI
UBI is a warm, optimistic finance template that pairs the editorial elegance of Playfair Display headlines with the calm geometry of Satoshi body copy. The page rests on soft cream and cool grey canvases, then bursts into a saturated marigold accent that signals every primary action and feature surface — a single, confident hue that does the work of a whole palette. The overall mood is friendly fintech: rounded-rectangle cards at 24–32px radii, generous 120px section padding, and pill-shaped tab navigation. Headlines feel literary and human, while charts and dashboards stay quiet beneath them. Dark ink and light cream provide the only contrast partners the marigold needs.
Sections from UBI
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Features Tiles Slider
View section
Logos
View section
Pricing table
View section
Combo
View section
Features Tiles
View section
Services
View section
Navbar
View section
Hero with Overflow Gallery
View section
Contact Form
View section
Hero Stats with Image
View section
CTA Section
View section
Hero with Stats Grid
View section
Colors
Canvas
Stone Mist
#f6f7f7
Cool neutral surface. FAQ panels, alternating section backgrounds.
Paper White
#ffffff
Default page canvas. Body background, navbar, primary tiles.
Morning Cream
#fffcf2
Light canvas. Tinted page sections, lifted tiles inside dark surfaces.
Ink
Muted Ink
#282c3299
Secondary text. Captions, meta info, sticky-nav inactive links.
Ink Shadow
#191c20
Deep ink hover. Pressed state for dark buttons.
Midnight Ink
#282c32
Primary text & dark surface. Headlines, body copy, dark sections, secondary buttons.
Accent
Honey Glow
#ffdc6c
Accent hover. Lifted state for primary buttons.
Marigold Accent
#f2ca4b
Brand accent. Primary CTAs, feature blocks, hero panels, highlight spans.
Typography
The quick brown fox jumps
Body, UI, navigation, buttons.
The quick brown fox jumps
Display & headings. Sets the literary, optimistic tone.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
120pxCard padding
56pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-48
48px--spacing-56
56px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-148
148px--spacing-180
180px--spacing-200
200px--spacing-220
220pxBorder radius
pill90pxcards24pxsmall8pxcircle9999pxpanels16pxbuttons8pxtab-link80pxhero-panel32pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Paper White
Level 2Morning Cream
Level 2Stone Mist
Level 3Marigold Accent
Level 4Midnight Ink
Do's and don'ts
- Set headlines and display copy in Playfair Display at 56–72px with line-height 1.1–1.2 to keep the editorial fintech voice.
- Use Marigold Accent (#f2ca4b) only as the single brand color — for primary CTAs, hero panels, accent spans, and feature tiles.
- Pair every accent button with a Midnight Ink companion button (e.g. 'Get started' + 'All features') with 8px gap.
- Round cards and tiles at 24px, hero panels at 32px, and shape buttons at 8px — never mix arbitrary radii.
- Reserve 120px of vertical padding (top and bottom) on standard sections; expand to 180–220px for marquee CTA and feature sections.
- Use Morning Cream (#fffcf2) and Stone Mist (#f6f7f7) to alternate sections — they create rhythm without competing with the marigold.
- Constrain text content to a 1170–1400px container with 24px side padding to preserve the airy editorial feel.
- Don't introduce additional saturated brand colors — the palette lives or dies by the single Marigold Accent against ink and cream.
- Don't set headlines in Satoshi; the contrast between Playfair serifs and Satoshi sans is what gives the brand its voice.
- Don't tighten section padding below 80px on desktop — UBI's calm rhythm depends on spacious 120px gaps.
- Don't use drop shadows on cards or buttons; surfaces are differentiated by tint and radius, not elevation.
- Don't stretch buttons full-width outside of pricing/cart contexts — keep them at fixed 52px height with 32px horizontal padding.
- Don't pair marigold backgrounds with white text; always set text on accent surfaces in Midnight Ink for legibility.
- Don't apply the pill (90px) radius to anything other than tab navigation containers and tab links.
Example prompts
Hero section
Feature panel
Pricing tile
Testimonials grid
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide