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.
Mio Kain
Mio Kain is a monochrome creative portfolio built for a solo designer who treats self-presentation like client work. A warm greige canvas holds sharp black type and Japanese character accents, creating cultural texture without visual noise — the palette never strays from near-neutrals, letting typography, negative space, and full-bleed imagery carry all the weight. Oversized uppercase display type, condensed letter-spacing, and a scrolling hero ticker set an editorial, confident tone, while pill-shaped buttons and soft 7px card corners keep the interface approachable rather than severe. Everything is engineered around credibility through restraint: an 8-project work grid, an awards table, and a client roster sit beside a disarmingly human footer reading "Let's talk ☺." The system rewards generous whitespace, 150px section padding, and a single sans display face pushed to extremes — this is a template for designers who let scale and rhythm do the talking instead of color.
Colors
Canvas
Paper White
#ffffff
Button text, card highlights, inverted surfaces
Footer Stone
#c9c7c2
Footer and sticky work-page backdrop
Greige Canvas
#d7d6d2
Primary page background
Ink
True Black
#000000
Secondary ink, high-contrast accents
Midnight Ink
#20201f
Primary text, dark surfaces, button fills
Accent
Veil White
#ffffffb3
Translucent overlay on dark imagery
Platform Blue
#0a66c2
Social icon brand color
Caution Yellow
#ffff00
CTA circle accent, luminosity-blend highlight
State — utility only
Signal Blue
#4353ff
Hover state circle on badges and interactive dots
Typography
The quick brown fox jumps
Decorative handwritten accent, rarely used
The quick brown fox jumps
Primary UI, body copy, nav, buttons
The quick brown fox jumps
Occasional display accent, rarely used headline flourish
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1300pxSection gap
150pxCard padding
16pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-10
10px--spacing-20
20px--spacing-30
30px--spacing-50
50px--spacing-60
60px--spacing-80
80px--spacing-100
100px--spacing-150
150pxBorder radius
cards7pxsmall3pxbuttons40pxcontainer9.6pxSurfaces
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 1Greige Canvas
Level 2Footer Stone
Level 3Midnight Ink
Level 4Paper White
Do's and don'ts
- Keep the palette near-monochrome — greige, black, and white carry the entire brand; use color only as rare functional accent.
- Push display type to extreme scale (96px–240px) with tight negative letter-spacing for hero statements.
- Use uppercase for navigation, labels, and badges to reinforce the editorial, confident tone.
- Apply 7px radius to dark project cards and 40px+ pill radius to buttons for the soft-meets-sharp contrast.
- Give sections generous 150px top/bottom padding so imagery and type breathe.
- Pair small Japanese character accents or dash-line (——) marks with English labels for cultural texture.
- Close every page with a warm, human CTA line such as 'Let's talk ☺' rather than a generic button.
- Don't introduce saturated brand colors outside of social-icon badges and the single yellow CTA circle.
- Don't shrink the hero display type below editorial scale — it should dominate the viewport.
- Don't use rounded, soft fonts; keep the grotesk sans sharp and condensed for structural contrast.
- Don't add drop shadows to flat project cards — rely on image overlays and bg-overlay darkening instead.
- Don't crowd sections — spacing is intentionally spacious, not compact.
- Don't mix in the serif or script fonts for body copy; reserve them for rare decorative flourishes only.
- Don't replace the uppercase navigation labels with sentence case — capitalization is a core brand signal.
Example prompts
Hero section
Project card
CTA footer
Navigation
# 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