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.
Uni© Studio
Uni© Studio is an editorial-grade agency template built on a stark white canvas, where oversized sans-serif type and high-contrast black-and-white photography do the talking. It borrows its confidence from fashion magazines rather than corporate agency sites — tight kerning, massive headlines, and cursor-free minimalism create a sense of discipline and intent. Crimson red punctuates the composition sparingly but dramatically, appearing in full-bleed news heroes and accent moments that break the monochrome without diluting it. Every section is engineered around contrast: black type on white canvas, white type on black inverted sections, and organic blob-masked portraits that soften the otherwise rigid grid. The system rewards restraint — one accent color, two typefaces, and a tight spacing rhythm that lets the imagery and copy carry the weight.
Colors
Canvas
Soft Fog
#ebebeb
Secondary surface & dividers
Footer Mist
#f1f1f1
Footer & lifted panel surface
Paper White
#ffffff
Base page canvas
Ghost Outline
#cfcfcf
Hairline dividers & borders
Ink
Pure Ink
#000000
Primary text & structure
Muted Graphite
#494949
Secondary text & captions
Accent
Mint Wash
#cdfff3
Playful card accent
Deep Crimson
#fc6b6b
Signature accent
State — utility only
Error Flare
#e14b4b
Form error state
Typography
The quick brown fox jumps
Counters, loader numerals, small labels
The quick brown fox jumps
Body copy, navigation, UI text
The quick brown fox jumps
Hero display, oversized headlines, menu
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1600pxSection gap
250pxCard padding
30pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-10
10px--spacing-20
20px--spacing-30
30px--spacing-50
50px--spacing-60
60px--spacing-100
100px--spacing-120
120px--spacing-150
150px--spacing-250
250pxBorder radius
cards10pxsmall6pxcircle160pxbuttons19pxcontainer10pxSurfaces
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 2Soft Fog
Level 3Footer Mist
Level 4Pure Ink
Do's and don'ts
- Keep the base canvas pure white (#ffffff) and let black-and-white photography and oversized type carry visual weight.
- Reserve Deep Crimson and Mint Wash accents for singular, deliberate moments — a news hero, a testimonial card — never as a pervasive palette.
- Pair the Humane Display face at extreme sizes (96px–256px) with tight negative letter-spacing for hero statements and page titles.
- Use hairline 0.5px dividers (Ghost Outline) to separate dense content blocks instead of heavy borders or shadows.
- Invert sections fully to black with white text when breaking rhythm (news, CTA, footer) rather than using gray transitional tones.
- Apply the consistent button radius across primary CTAs; reserve the large circular radius for icon-only circular buttons.
- Mask portrait imagery into organic blob shapes to soften the otherwise rigid editorial grid.
- Keep spacing generous — 100–250px section padding — to let the minimal palette breathe.
- Don't introduce additional saturated accent colors beyond crimson and mint; the palette must stay disciplined.
- Don't use drop shadows or soft gradients on cards — this system relies on flat color and hairline borders only.
- Don't shrink the display headline type below 48px for hero or section titles; impact depends on scale.
- Don't round corners beyond the defined radius tokens — no large 24px+ card radii that soften the brand's sharp edge.
- Don't use default cursor styling; the custom cursor-none behavior is part of the brand's tactile feel.
- Don't pair body copy with wide letter-spacing — Inter is set tight (-0.5px to -0.7px) throughout.
- Don't overcrowd the white sections with more than one accent color per view.
Example prompts
Hero headline
Service description
CTA section
News/editorial intro
# 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