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.
Good Biz
Good Biz is a warm, optimistic business identity built around a single vivid indigo accent and a deep navy ink. The brand reads as approachable and modern: rounded pill buttons, generously rounded photo cards, and confident sans-serif typography that softens corporate convention with a touch of personality. Hero compositions pair full-bleed editorial photography with cheerful inline emoji-style avatars and gradient pill ornaments, signalling a studio that takes the work seriously without taking itself too seriously. The palette is restrained — almost monochromatic — letting the indigo do the heavy lifting on every CTA, link highlight, and statistic. Surfaces alternate between a warm off-white canvas and a soft pearl grey, with ghost-blue used as a friendly secondary chip and white cards floating on subtle shadows. Layouts breathe at 120px section rhythm, and 32px–160px corner radii give every photographic asset a tactile, sculpted feel.
Sections from Good Biz
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
FAQ Section with Accordion
View section
CTA Section with Image
View section
Checkout Header with Logo
View section
Team Grid with Icons
View section
Pricing Comparison Table
View section
Hero with Background Video
View section
Office Gallery Grid with Lightbox
View section
FAQ Expandable Section
View section
Hero with Dynamic Text Animation
View section
Blog Grid with Hover
View section
Logo Strip Section
View section
Feature Bento Grid
View section
Colors
Canvas
Fog Grey
#f3f3f3
Tertiary depth tone. Dropdown menu sheets and circular slider arrow buttons.
Pearl Mist
#f9f9f9
Lifted neutral surface. Alternating section backgrounds and pricing card fills.
Polar White
#fffeff
Primary canvas. Page background, hero panels, and white CTA fill on the indigo block.
Ink
Ink Veil
#282943cc
Photographic overlay. Left-to-right gradient mask over hero imagery for legible white text.
Midnight Ink
#282943
Primary text & ink. Headlines, body copy, dark overlays on hero photography.
Accent
Iris Indigo
#545cd6
Signature accent. Primary buttons, link highlights, footer social chips, and stat numbers.
Ghost Lavender
#ddddf7
Soft secondary accent. Ghost button fills, cart pills, and subtle indigo wash.
Typography
The quick brown fox jumps
Statistic and big-number display family — used for percentage and figure callouts in indigo.
The quick brown fox jumps
Primary family for headings, body, navigation, and UI controls.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
120pxCard padding
48pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120pxBorder radius
cards12pxpills80pxsmall8pxcircle9999pxbuttons12pxsculpted160pxhero-panels32pxmedia-tiles24pxnavigation-pills70pxSurfaces
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 1Polar White
Level 2Pearl Mist
Level 3Fog Grey
Level 4Ghost Lavender
Level 5Iris Indigo
Level 6Midnight Ink
Do's and don'ts
- Use Iris Indigo (#545cd6) as the single brand accent — apply it to primary CTAs, stat numbers, and inline highlight spans inside testimonial headlines.
- Pair every solid indigo button with a Ghost Lavender (#ddddf7) ghost variant when offering a secondary action, mirroring the Buy template / Cart pairing in the navbar.
- Round photographic hero panels to 32px and sculpted feature corners to 160px on a single side to echo the brand's signature asymmetric softness.
- Maintain 120px top and bottom padding on full sections, collapsing to 64px for medium-density blocks and 24px for hero containers.
- Layer hero photography under a left-to-right Midnight Ink gradient (rgba(40,41,67,0.8) → 0.3 → 0) so white headlines stay legible on busy imagery.
- Set body copy at 18px / 145% line-height in Satoshi 400 — this is the rhythm everything else aligns to.
- Render large statistics in Outfit (400 at 48px or 700 at 80px) colored Iris Indigo against pearl or white backgrounds.
- Float white content tiles on Pearl Mist sections with the soft 0 2px 30px rgba(144,144,150,0.10) card shadow.
- Don't introduce additional saturated brand colors — Iris Indigo is the only chromatic note; everything else is greyscale or ink.
- Avoid sharp corners on cards, tiles, or photo crops — the brand reads soft and friendly, never angular.
- Don't use Midnight Ink as a section background; reserve #282943 for type and gradient overlays only.
- Never set primary buttons below 46px tall — pill CTAs are 46px in the navbar and 54px in hero blocks at 12px radius.
- Don't mix Outfit with body copy — Outfit is reserved for numerical display only; everything else stays in Satoshi.
- Avoid stacking pure white tiles on Polar White sections without the soft card shadow — they need lift to register.
- Don't crowd CTAs together — use 8px gaps between primary and ghost buttons, never less.
- Never apply Ghost Lavender to text — it's a surface-only color; text on lavender uses Iris Indigo.
Example prompts
Hero section
Pricing grid
CTA banner
Bento USP 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