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.
Studio Frame®
Studio Frame® is a creative agency template built for studios that let the work speak first. The palette stays uncompromisingly dark — near-black canvases layered with soft charcoal surfaces — so that colour-blocked project photography and oversized type can detonate against it without competition. Typography does the heavy lifting: a single confident grotesk scales from whisper-quiet captions to room-filling display headlines that wrap edge to edge, while a cycling italic script adds a handwritten wink to an otherwise severe system. Everything is engineered for kinetic motion — marquee text rotators, parallax imagery, animated name-lists — but the underlying grid is disciplined and quiet: generous black space, thin dividers, and uppercase labels keep the experience feeling considered rather than chaotic. It reads as a studio that has earned its confidence and isn't afraid to let darkness do the framing.
Colors
Canvas
Coal Depth
#19191d
Depth surface. Hover states and block headers set slightly deeper than base.
Void Black
#0f0f11
Primary canvas. Base background for every section, nav, and footer.
Graphite Veil
#27272e
Lifted surface. Button fills, pricing cards, and panel backgrounds.
Ink
Mist Gray
#d9dae2
Secondary text & ink. Body copy, footer paragraphs, and muted captions.
Paper White
#ffffff
Primary ink. Headlines, logo mark, and button text on dark surfaces.
Accent
Dusk Blue
#3b5f73
Tertiary accent. Astronaut and portrait imagery tones in featured works.
Studio Red
#8c1f1a
Secondary accent. Alternating project tiles and award-badge backgrounds.
Signal Orange
#e8541c
Primary accent. Hero product imagery and the color-blocked project grid.
State — utility only
Focus Azure
#3898ec
Interactive state. Form focus rings, checkbox fills, and link hover cues.
Divider Haze
#d8dfe0
Border & divider utility. Hairlines separating team cards and pricing rows.
Typography
The quick brown fox jumps
Primary typeface for all headings, body copy, UI labels, and the oversized hero display.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
150pxCard padding
40pxElement gap
25pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-25
25px--spacing-30
30px--spacing-40
40px--spacing-60
60px--spacing-80
80px--spacing-100
100px--spacing-150
150pxBorder radius
cards0pxpills30pxsmall2pxbadges7pxavatars9999pxbuttons0pxSurfaces
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 1Void Black
Level 2Graphite Veil
Level 3Coal Depth
Do's and don'ts
- Keep the page canvas deep black (#0f0f11) and let color-blocked project photography — orange, red, blue — provide the only saturated contrast.
- Set hero and section headlines in uppercase, tight-leading Instrument Sans at extreme sizes (12vw–30vw) so type itself becomes a graphic element.
- Use the animated name-list / text-rotator pattern for services and footer CTAs to keep the page feeling kinetic rather than static.
- Pair every project tile with small uppercase metadata (category left, award label right) overlaid directly on the image.
- Keep buttons flat, rectangular, with no border-radius, and rely on a simple background color swap (Graphite Veil → Coal Depth) for hover.
- Reserve the italic script accent (e.g. 'solution') for a single word per headline to add warmth without breaking the grid.
- Maintain generous 100–150px section padding so large type and imagery never feel cramped against the black field.
- Don't introduce light or white page backgrounds — the system is built as a dark-only experience end to end.
- Don't round corners on buttons, cards, or project tiles; only avatars and pill-shaped badges may be fully rounded.
- Don't add more than one accent hue per project tile — each card should read as a single bold color block.
- Don't shrink the hero display type below roughly 10vw; the oversized scale is core to the brand's confidence.
- Don't use serif or decorative display fonts outside the single cursive accent word — Instrument Sans carries the whole system.
- Don't clutter the footer marquee with more than one repeating phrase; it should feel like a single kinetic statement.
- Don't apply heavy shadows or glows — depth comes from surface-color steps (Void Black → Graphite Veil → Coal Depth), not blur.
Example prompts
Hero section
Project grid
About stats block
Footer marquee
# 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