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.
Koda Studio
Koda Studio is a high-contrast editorial system built around oversized Satoshi display type, generous whitespace, and a single decisive ink — pure black on warm white. The aesthetic is confident and gallery-like: monumental headlines anchor each page while cinematic photography and abstract blue-toned imagery do the emotional work. The brand reads as a contemporary design studio with the discipline of print typography and the swagger of a fashion lookbook. The palette is deliberately monochrome at the chrome layer — black ink, soft elevation grey, hairline divider, off-white canvas — leaving all chromatic energy to art-directed imagery. Layouts are wide (1600px max), spacious (120px section rhythm), and quiet, letting type and image carry the voice. The result is editorial, restrained, and slightly cinematic.
Sections from Koda
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Footer with Navigation Links
View section
Values Accordion Section
View section
Blog Post Hero Layout
View section
Blog Grid Layout
View section
Testimonial Carousel with Navigation
View section
Hero with Dual Images
View section
Multi-Column Navigation Bar
View section
Horizontal Scrolling Image Gallery
View section
Projects Grid with Hover
View section
About Section Two Column
View section
Hero with Scrolling Gallery
View section
Interactive Services List Section
View section
Colors
Canvas
Hairline Fog
#cccccc
Hairline divider. Single-pixel rules between sections, contact rows, and form fields.
Studio Canvas
#ffffff
Page canvas. Default background for every section and the foundation of the editorial whitespace.
Gallery Elevation
#f4f4f4
Lifted surface. Testimonial tiles, menu chips, arrow controls, and quiet utility panels.
Ink
Obsidian Ink
#000000
Primary ink & UI black. Headlines, body copy, primary buttons, dividers, and brand wordmark.
Midnight Hover
#242424
Button hover ink. Subtle warm-up of the primary CTA on interaction — never used statically.
Graphite Whisper
#333333
Secondary ink. Captions, supporting metadata, team positions, and muted detail labels.
State — utility only
Cyanotype Blue
#3898ec
Webflow utility focus. Form focus rings and commerce defaults only — not part of the brand language.
Typography
The quick brown fox jumps
Universal typeface — display headlines, subtitles, body copy, captions, and UI labels.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1600pxSection gap
120pxCard padding
52pxElement 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-44
44px--spacing-52
52px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120px--spacing-160
160pxBorder radius
pill9999pxcards12pxsmall4pxbuttons6pxhairline1pxSurfaces
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 1Studio Canvas
Level 2Gallery Elevation
Level 3Obsidian Ink
Do's and don'ts
- Lead every page with a monumental Satoshi headline at 166px (display) or larger — let it consume the canvas and overhang gracefully on the right.
- Pair tight negative letter-spacing (-1.66px on display, -0.3px on heading) with 110% line-height to keep oversized type feeling sculpted, not loose.
- Anchor sections with 120px vertical padding and an 1600px max container — the brand reads through whitespace as much as through ink.
- Use the © symbol or parenthetical labels like (testimonials), (our story) as quiet editorial wayfinding next to the wordmark.
- Reserve all color expression for photography and abstract imagery; keep every UI surface, button, and label in pure black-on-white.
- Build CTAs as 52px-tall pure-black pills with 6px radius, 32px horizontal padding, and a subtle warm-to-#242424 hover.
- Separate content with a single 1px hairline-fog rule rather than boxes or cards — let air do the dividing work.
- Lean into 1.6:1 to 2:1 image ratios with full-width crops; imagery should feel cinematic and shot, not stock.
- Don't introduce a second brand color or accent hue — the chromatic life of Koda lives entirely inside its photography.
- Don't add drop shadows, gradients, or glows to UI surfaces; the only permitted shadow is on overlay modals.
- Don't use a secondary typeface — Satoshi at multiple weights (400/500/700) handles every role, from 13px caption to 260px display.
- Don't shrink the display headline below 88px on desktop; the editorial impact depends on its scale.
- Don't center body copy or constrain it tightly — left-align text in narrow columns (max ~426–970px) and let the right side breathe.
- Don't reuse Webflow's default Cyanotype Blue (#3898ec) anywhere in the brand surface; restrict it to checkout focus rings only.
- Don't crowd sections — anything tighter than 80px of section padding will collapse the cinematic pacing.
- Don't decorate with icons inside body copy; reserve iconography to large outlined arrows on contact rows and slider controls.
Example prompts
Hero section
Contact list row
Testimonial card
Editorial section break
# 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