Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Oko°
Oko° is a cinematic, motion-first studio site built almost entirely in black and white, letting color-graded photography do the talking. Every section opens on pure obsidian — looping hero video, full-bleed work thumbnails, sticky scroll-pinned type — so that the teals, burnt oranges, electric purples, and crimson reds of the imagery read as jolts of color against total darkness. Typography is confident and oversized, with a single sans-serif family carrying everything from micro-labels to a hero title that scales to nearly a quarter of the viewport width. The brand voice is intimate despite its scale: team members are introduced by first name only, rotated sticker-style name tags in saturated hues puncture the monochrome grid, and CTAs read like invitations ('Let's Connect', 'Join forces') rather than sales pitches. Structurally the site is generous — 150px+ section padding, a 95%-width container that lets images nearly touch the edges, and thin underline buttons that swap text on hover instead of relying on filled shapes. It is a template for labs that think in motion, not brochures.
Colors
Canvas
Obsidian Black
#000000
Primary canvas & ink. Page background, nav, footer, and the base against which every accent pops.
Off-White Mist
#f5f5f5
Secondary light surface. Rare light-mode contrast panels and form field hints.
Graphite Shadow
#222222
Lifted card surface. Work-card backgrounds, accordion buttons, info-text chips.
Ink
Pure White
#ffffff
Primary text & logotype. Headlines, nav links, and button fills on dark surfaces.
Faded Steam
#ffffffb3
Secondary / muted text. Subheads, lighter work-title captions, de-emphasized copy.
Accent
Burnt Ember
#ff7700
Accent sticker. Rotated team name-tag badges and hover-glow highlights.
Deep Lagoon
#00a0a3
Accent sticker. Teal badge color pulled from the cinematic gradient photography.
Signal Crimson
#ff0051
Accent sticker. Warm-red team-tag badge, echoes the tennis-court red in hero imagery.
Electric Cobalt
#0059ff
Accent sticker. Alternate team-tag color, used singly per card.
Ultraviolet Pulse
#9000ff
Accent sticker. High-energy team-tag badge color for standout profiles.
Typography
The quick brown fox jumps
Primary workhorse family — nav, body copy, oversized display headlines, buttons.
The quick brown fox jumps
Reserved editorial accent for quote marks and rare serif flourishes — not used for primary headlines.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
150pxCard padding
20pxElement gap
15pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-60
60px--spacing-70
70px--spacing-80
80px--spacing-90
90px--spacing-100
100px--spacing-150
150px--spacing-200
200pxBorder radius
cards10pxpills160pxsmall3pxmedium7pxbuttons48pxSurfaces
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 Black
Level 2Graphite Shadow
Level 3Floating Badge White
Do's and don'ts
- Use pure black (#000000) backgrounds with pure white type for maximum, unapologetic contrast across every section.
- Let the sticky, scroll-pinned hero video and oversized wordmark (up to 24vw) breathe before any supporting copy appears.
- Reserve saturated accent colors (ember, cobalt, violet, crimson, lagoon) strictly for rotated team name-tag stickers — one hue per badge, never blended.
- Keep CTAs as thin underline 'button-with-line' links with two-line hover-swap text animation instead of solid filled buttons.
- Pair full-bleed, color-graded photography with generous negative space so the imagery itself carries the emotional weight.
- Label team members by first name only to preserve the studio's close, human voice.
- Hold the container to 95% width so imagery nearly floats edge-to-edge while a slim gutter remains.
- Apply 150px+ vertical section padding consistently to maintain the spacious, editorial rhythm.
- Don't add soft drop shadows or skeuomorphic depth — surfaces stay flat black or flat graphite (#222222).
- Don't introduce light or pastel backgrounds outside the single floating white info badge; the template is dark-only.
- Don't set Playfair Display at large display sizes — it is reserved for small editorial accents, never headlines.
- Don't crowd the hero section; the oversized title and single contact CTA need uninterrupted vertical space.
- Don't apply box-shadows to buttons — rely on opacity shifts (hover: 0.76 opacity) and underline-swap motion instead.
- Don't normalize the rotated team-tag stickers to one angle — the varied ±3° to ±12° rotation is part of the brand's playful energy.
- Don't combine more than one accent hue inside a single card or component.
Example prompts
New hero section
Work grid card
Team section
Footer CTA
# 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