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.
Code House
Code House is a confident, modern identity for technology and SaaS teams — a system built on deep midnight surfaces, generous rounded geometry, and a single electric indigo accent that punches through the dark. The mood is engineered yet human: tightly-tracked Satoshi headlines do the heavy lifting while soft 18px-radius cards and cinematic editorial photography give the layout warmth. The palette leans almost entirely into shades of near-black and indigo, with a single warm orange held in reserve for moments that need a different kind of energy. Everything feels purposeful, spacious, and ready to ship — a developer studio that knows how to dress for the boardroom.
Sections from Code House
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Pricing Comparison Table
View section
Product Development Roadmap Timeline
View section
Hero Section with Logo Bar
View section
Customer Testimonial Slider
View section
Services Process Cards
View section
Hero Stats Showcase
View section
Mega Menu Navigation Bar
View section
Hero with Animated Gallery
View section
FAQ Accordion Section
View section
Hero with Scrolling Gallery
View section
Business Solutions Bento Grid
View section
Contact Card with Support Info
View section
Colors
Canvas
Paper Mist
#f9f9f9
Light section canvas. Used for inverted blocks, footer, and feature backgrounds.
Pure White
#ffffff
Card surface & button fills. Primary lifted surface against dark sections.
Obsidian Base
#131313
Page canvas. The deep near-black that anchors every section and lets accents glow.
Ink
Smoke Veil
#ebebeb
Soft contrast text on dark surfaces and quiet UI fills.
Midnight Ink
#282943
Primary text & lifted dark surface. Headlines, dark CTAs, and contrast tabs.
Whisper Grey
#8e8e8f
Muted metadata. Dates, captions, and de-emphasized helper text.
Hairline Grey
#e4e4e4
Dividers and rules. The 1px line between fields, table rows, and pricing tiers.
Twilight Slate
#414370
Secondary ink. Supporting text and hover states paired with Midnight Ink.
Accent
Ember Orange
#ec612a
Secondary accent. Reserved for tags, badges, and rare contrast moments.
Voltage Indigo
#424bd1
Primary brand accent. Buttons, links, highlighted spans, and focus rings.
Typography
The quick brown fox jumps
Single-family system. Carries display, heading, body, and UI in a tightly tracked geometric grotesk.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1348pxSection gap
120pxCard padding
40pxElement 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-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-160
160pxBorder radius
pill90pxcards18pxsmall10pxfields8pxbuttons12pxcontainers30pxSurfaces
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 1Obsidian Base
Level 2Midnight Ink
Level 3Paper Mist
Level 4Pure White
Do's and don'ts
- Pair Obsidian Base sections with white or Paper Mist cards at 18px radius — this contrast is the system's signature.
- Use Voltage Indigo sparingly: primary CTAs, single-word highlights inside headlines (wrapped in span-accent-1), and hover states only.
- Set display headlines in Satoshi at 72–96px with -0.02em tracking and a unitless 1.0–1.1 line-height for a tight, engineered feel.
- Apply 12px radius pill-style buttons at 52px height with 700-weight labels — never square or thinner.
- Lean into generous vertical rhythm: 80–160px section padding and 120px between major blocks.
- Use the symbol mark inline as a glyph mid-headline (between words) to add brand texture to hero typography.
- Reserve Ember Orange for utility and rare contrast — never as a second brand color in marketing CTAs.
- Layer cinematic team and lifestyle photography in 18px-rounded portrait crops, often as multi-column marquees.
- Don't stack accent colors — Voltage Indigo and Ember Orange should never share a single component.
- Don't use sharp corners; the entire system is built on 8/12/18/30px radii, not 0–4px.
- Don't introduce additional sans-serif families — Satoshi carries the full hierarchy from caption to display.
- Don't use pure black (#000) for text on dark surfaces; use Smoke Veil or Pure White and reserve Obsidian Base for canvas only.
- Don't crowd hero sections — the design depends on negative space; keep marquee imagery to the right rail and text to the left.
- Don't apply drop shadows liberally; only floating purchase tiles and inputs use shadow — cards rely on radius and surface tone alone.
- Don't set body copy below 16px or above 18px in marketing sections; reserve 14px strictly for metadata and pricing fine print.
- Don't tighten section padding below 80px on desktop — the spacious rhythm is part of the brand's authority.
Example prompts
Hero section
Pricing tier
Contact panel
Feature bento
# 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