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.
Harbor
Harbor is an editorial consulting brand built on the tension between quiet warmth and confident authority. Cream and bone-white canvases hold space for serif headlines that lean into italic flourishes, while a single electric indigo cuts through the calm to mark every action. The system reads like a considered print magazine: generous margins, oversized Source Serif display type, restrained Inter UI, and deep midnight panels that bring weight to hero moments. It feels human, premium, and precise — never decorative for its own sake.
Sections from Harbor
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Intro with Partner Logos
View section
Process Accordion with Image
View section
Footer Newsletter Signup Form
View section
Features Grid with Icons
View section
Multi-Level Navigation with Cart
View section
Expanding Service Cards Grid
View section
Hero Section with Video Background
View section
Hero CTA with Background
View section
Team Member Grid Cards
View section
Hero with Background Video
View section
Company Stats with Intro
View section
Hero with Video Cards
View section
Colors
Canvas
Warm Linen
#ede8e2
Secondary warm canvas. Editorial backdrops with a parchment cast.
Paper White
#ffffff
Pure page surface. Default body background and elevated cards.
Moonlit Veil
#ffffff29
Light border and overlay tint. Frosted edges over dark or imagery.
Porcelain Bone
#f3f4f2
Primary lifted canvas. Section backgrounds, cards, and pricing surfaces.
Ink
Harbor Mist
#07171f29
Dark border and divider tint. Quiet structural lines on light surfaces.
Obsidian Black
#0e0e0e
Deepest neutral. Reserved for stark accents and high-contrast moments.
Midnight Harbor
#07171f
Primary ink and dark canvas. Body text on light, hero/footer surfaces on dark.
Accent
Deep Cobalt
#164ac3
Secondary indigo. Hover and pressed states for primary actions.
Voltaic Indigo
#4140f4
Signature accent. Primary CTAs, links, and active iconography.
Typography
The quick brown fox jumps
Body, UI, and labels. Clean modernist counterpoint to the serif headlines.
The quick brown fox jumps
Display and editorial headings. Carries the brand voice with subtle italic emphasis.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
32pxElement 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-64
64px--spacing-80
80px--spacing-120
120px--spacing-160
160pxBorder radius
big40pxpill9999pxsmall16pxmedium24pxxsmall12pxregular32pxxxsmall8pxSurfaces
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 2Porcelain Bone
Level 3Warm Linen
Level 4Midnight Harbor
Do's and don'ts
- Lead headlines with Source Serif at 48–80px and italicize the emphasis phrase to echo the editorial voice (e.g. 'business solutions').
- Reserve Voltaic Indigo (#4140f4) exclusively for primary CTAs, links, and active state icons — never as a decorative fill.
- Pair Midnight Harbor hero sections with 8px outer padding so the dark panel reads as an inset card with rounded corners.
- Use the 8px (xxsmall) radius for buttons, inputs, and image masks to keep the geometry consistent and quietly modern.
- Set 120px vertical padding on full-bleed editorial sections and 80px on simpler content blocks to maintain breathing room.
- Use the label style — Inter 12px, uppercase, +0.02em tracking — to introduce every section before its serif heading.
- Keep body copy in Inter at 16px with -0.01em tracking and 150% line-height for the calm, magazine-like rhythm.
- Don't introduce additional accent hues; the palette lives or dies on the contrast between indigo and the warm neutrals.
- Don't apply the serif to body text or UI labels — Source Serif is reserved for headings, pull quotes, and stat figures.
- Don't use heavy shadows on cards; lean on background tone shifts (Porcelain Bone, Warm Linen, Midnight) for elevation.
- Don't tighten section padding below 80px — Harbor reads as spacious and unhurried; cramped sections break the brand.
- Don't mix radii within a single component; pick one (8/16/24/32/40) and apply it consistently to nested elements.
- Don't overlay pure black on imagery — use the semi-transparent Midnight Harbor (#07171f99) for legibility veils.
- Don't bold serif headings beyond weight 500; the medium weight is the brand's heaviest typographic voice.
Example prompts
Hero section
Feature card grid
Testimonial
Pricing tier
# 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