Mio Kain Design System

Get DESIGN.md Download View template Works with

Mio Kain website template preview detail 2

Mio Kain website template preview detail 3

Mio Kain is a calm, gallery-like portfolio for one designer. The page is a warm stone grey (#D7D6D2) with near-black text, almost no decoration and lots of empty space. A huge uppercase name opens it, a grid of saturated project images zooms out under it, and the about section reads like an exhibition label: a dash, a small uppercase title, then text that fills in letter by letter as you scroll.

Four signatures make it recognisable:

The 240px name. MI KAIN — set in Inter 400, uppercase, −5px tracking, with a wide gap between the words and a long dash that runs off the right edge.
Dash-led labels. Small uppercase labels are led or joined by a long rule: —— CERTIFIED PARTNER, AMSTERDAM —— NL, —— AWARD HIGHLIGHTS, SHOWREEL —— ©25. Katakana appears as decoration: —— クリエイティブデザイナー, client names ナイキ, フィグマ.
Ink fill on scroll. Statements and client names start at black 20% and fill to full ink one letter at a time as you scroll, so a half-read line is part dark, part ghost.
The zooming work grid. A full-width 3-column grid of 7px-radius image cards with 8px gaps starts zoomed in (one card fills the screen) and settles to the full grid as you scroll.

Colors

Surfaces

canvas#D7D6D2

Page background (warm stone grey)

surface-1#C9C7C2

The footer and image placeholders, one step darker

Ink

on-primary#D7D6D2

Text on primary

on-primary-hover#FFFFFF

Text on primary-hover

ink#20201F

All text, rules, icons

ink-muted#20201F

Body text is full ink; there is no grey text colour

ink-faint#000000 · 20%

Letters not yet revealed by the scroll fill (display sizes, temporary state)

on-media#FFFFFF

Labels on project images

Action

primary#000000

The BOOK A CALL pill: black with canvas-coloured text

primary-hover#2B2B2B

The fill that slides up inside the pill on hover

Lines & effects

line#20201F · 20%

1px rules under award rows and link baselines

Typography

Inter · display-hero

The quick brown fox jumps

The name MI KAIN — (.hero-title, --font--h1: 15rem). 240px · 400 · 1.1 · -5px

Inter · headline-xl

The quick brown fox jumps

Client names in the clients list (Webflow, Quantive, ナイキ). 64px · 500 · 1.1

Inter · body-lg

The quick brown fox jumps

Paragraphs and the hero intro (p, --font--h5). 19.2px · 500 · 1.3 · -0.2px

Inter · label

The quick brown fox jumps

Dash labels and hero meta (.top-text). 15px · 500 · 1.3 · -0.5px

Inter · caption-media

The quick brown fox jumps

White labels on project cards (.work-text). 15px · 400 · 0.85

Spacing & shape

Purpose	Value
Container	max 1300px, centred
Section rhythm	.section is 150px top and bottom
Breakpoints	991px, 767px and 479px, plus a 1920px+ step

Spacing scale

Token	Value	Preview
`hair`	4px
`xs`	8px
`sm`	10px
`md`	16px
`lg`	20px
`xl`	30px
`2xl`	40px
`3xl`	50px
`4xl`	60px
`5xl`	80px

Layout spacing

Token	Value	Preview
`work-gap`	8px
`grid-gap`	16px
`gutter`	29px
`6xl`	100px
`section`	150px

Border radius

sm7px

md9px

pill700px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Motion

Ink fill on scroll	SplitText letters go from black 20% to full ink, scrubbed (top bottom → bottom 60px, scrub 0.8)
Headline split	GSAP expo, 0.8s
Entrance with skew	y 20% → 0, skewX 30° → 0, opacity → 1, 400ms outCubic
Text roll on hover	y 0 → −100%, 300ms ease
Link line	Width 0 → 100%, 300ms ease
Hover dim	Siblings to opacity 0.6, 300ms easeIn
Scale in	scale 0 → 1, 500ms; rotate 600ms outExpo
Fades	opacity 0 ↔ 1, 500ms
Filter	200ms ease
Loops	Continuous power1.in loops at 4–15s, plus two long ones (106s, 153s); treat them as slow ambient motion only

Do’s and don’ts

Keep the page on canvas #D7D6D2 with all text in ink #20201F.
Open with the name in Inter 240px, weight 400, −5px tracking, uppercase, with a long dash after it.
Lead or join labels with a long rule (——) and keep them uppercase 15px.
Use 7px-radius cards with 8px gaps for project images, labelled in white 15px uppercase over a bottom fade.
Fill big statements from black 20% to full ink letter by letter on scroll.
Use the black pill (primary #000000, #D7D6D2 text, 43px) once, for booking a call.
Use grey text for body copy; hierarchy is size, not colour.
Leave text in ink-faint (black 20%) at rest, or use it below 27px.
Add shadows, borders on cards or coloured accents.
Use Caveat, Caveat Brush or Playfair Display, even though they are loaded.
Use weights above 500 for headings; the name is 400.
Round images beyond 7px or turn buttons into anything other than the one pill.

Example prompt

Any page in the Mio Kain style

Prompt

Build your page in the Mio Kain style. Background #D7D6D2, all text #20201F in Inter. Open with the person's name at 240px, weight 400, line height 1.1, letter spacing −5px, uppercase, followed by a long dash. Body text is 19.2px weight 500 line height 1.3; labels are 15px uppercase weight 500 with −0.5px tracking, each starting with a long rule ("—— AWARD HIGHLIGHTS"). Show work in a full-width 3-column grid with 8px gaps: black cards with a 7px radius, a bottom fade to black, and a white 15px uppercase label. Lists are 15px rows with a 1px #20201F33 rule under each and a number on the right. The only button is a black pill (#000000, #D7D6D2 text, 14px uppercase, 43px tall). Sections are 150px top and bottom, container 1300px, 2% side padding. Motion: statements fill letter by letter from black 20% to full ink as you scroll (scrub 0.8); hovers 300ms ease.

# Mio Kain Design System

> Measured from the Mio Kain template. Drop it into
> Claude, ChatGPT, Gemini, Cursor or v0.

## Overview

Mio Kain is a calm, gallery-like portfolio for one
designer. The page is a warm stone grey (#D7D6D2) with
near-black text, almost no decoration and lots of empty
space. A huge uppercase name opens it, a grid of
saturated project images zooms out under it, and the

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #D7D6D2     | Page background (warm s… |
| surface-1    | #C9C7C2     | The footer and image pl… |
| on-primary   | #D7D6D2     | Text on primary          |
| on-primary-… | #FFFFFF     | Text on primary-hover    |
| ink          | #20201F     | All text, rules, icons   |
| ink-muted    | #20201F     | Body text is full ink; … |
| ink-faint    | #000000 20% | Letters not yet reveale… |
| on-media     | #FFFFFF     | Labels on project images |
| primary      | #000000     | The BOOK A CALL pill: b… |
| primary-hov… | #2B2B2B     | The fill that slides up… |
| line         | #20201F 20% | 1px rules under award r… |

## Typography

- display-hero: Inter 240px / 400
- headline-xl: Inter 64px / 500
- headline-lg: Inter 44.8px / 500
- headline-sm: Inter 27.2px / 500

{
  "$description": "Mio Kain design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "The BOOK A CALL pill: black with canvas-coloured text"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#2B2B2B",
      "$description": "The fill that slides up inside the pill on hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#D7D6D2",
      "$description": "Text on primary"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary-hover"
    },
    "canvas": {
      "$type": "color",
      "$value": "#D7D6D2",
      "$description": "Page background (warm stone grey)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#C9C7C2",
      "$description": "The footer and image placeholders, one step darker"
    },
    "ink": {
      "$type": "color",
      "$value": "#20201F",
      "$description": "All text, rules, icons"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#20201F",
      "$description": "Body text is full ink; there is no grey text colour"
    },
    "ink-faint": {
      "$type": "color",
      "$value": "#00000033",

/* Mio Kain theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-primary-hover: #2B2B2B;
  --color-on-primary: #D7D6D2;
  --color-on-primary-hover: #FFFFFF;
  --color-canvas: #D7D6D2;
  --color-surface-1: #C9C7C2;
  --color-ink: #20201F;
  --color-ink-muted: #20201F;
  --color-ink-faint: #00000033;
  --color-line: #20201F33;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Inter", sans-serif;
  --font-inter: "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 240px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: -5px;
  --text-display-hero--font-weight: 400;
  --text-headline-xl: 64px;
  --text-headline-xl--line-height: 1.1;
  --text-headline-xl--letter-spacing: 0px;
  --text-headline-xl--font-weight: 500;
  --text-headline-lg: 44.8px;
  --text-headline-lg--line-height: 1.1;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 500;
  --text-headline-sm: 27.2px;
  --text-headline-sm--line-height: 1.1;
  --text-headline-sm--letter-spacing: 0px;
  --text-headline-sm--font-weight: 500;
  --text-body-lg: 19.2px;
  --text-body-lg--line-height: 1.3;
  --text-body-lg--letter-spacing: -0.2px;
  --text-body-lg--font-weight: 500;
  --text-body-row: 15px;
  --text-body-row--line-height: 2.0;
  --text-body-row--letter-spacing: -0.8px;

/* Mio Kain design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #000000; /* The BOOK A CALL pill: black with canvas-coloured text */
  --color-primary-hover: #2B2B2B; /* The fill that slides up inside the pill on hover */
  --color-on-primary: #D7D6D2; /* Text on primary */
  --color-on-primary-hover: #FFFFFF; /* Text on primary-hover */
  --color-canvas: #D7D6D2; /* Page background (warm stone grey) */
  --color-surface-1: #C9C7C2; /* The footer and image placeholders, one step darker */
  --color-ink: #20201F; /* All text, rules, icons */
  --color-ink-muted: #20201F; /* Body text is full ink; there is no grey text colour */
  --color-ink-faint: #00000033; /* Letters not yet revealed by the scroll fill (display sizes, temporary state) */
  --color-line: #20201F33; /* 1px rules under award rows and link baselines */
  --color-on-media: #FFFFFF; /* Labels on project images */

  /* Fonts */
  --font-inter: "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 240px;
  --text-display-hero-font: var(--font-inter);
  --text-display-hero-weight: 400;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: -5px;
  --text-headline-xl: 64px;
  --text-headline-xl-font: var(--font-inter);
  --text-headline-xl-weight: 500;
  --text-headline-xl-line-height: 1.1;
  --text-headline-xl-tracking: 0px;
  --text-headline-lg: 44.8px;
  --text-headline-lg-font: var(--font-inter);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 1.1;
  --text-headline-lg-tracking: 0px;
  --text-headline-sm: 27.2px;
  --text-headline-sm-font: var(--font-inter);
  --text-headline-sm-weight: 500;
  --text-headline-sm-line-height: 1.1;
  --text-headline-sm-tracking: 0px;
  --text-body-lg: 19.2px;
  --text-body-lg-font: var(--font-inter);
  --text-body-lg-weight: 500;
  --text-body-lg-line-height: 1.3;
  --text-body-lg-tracking: -0.2px;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Portfolio design systems, the same colors first.

Browse all 398

Free

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Inter · display-hero

Inter · headline-xl

Inter · body-lg

Inter · label

Inter · caption-media

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Mio Kain style

More design systems like this

Moka

Fifi

Portfolyo

Ken

Bring any of them to your AI tool