Moka Design System

Get DESIGN.md Download View template Works with

Moka is a stripped-back studio portfolio. It is black Inter on white and pale grey, with no rules, no borders, no shadows and almost no UI. The type is large and tight, the spacing is enormous (250–350px between sections), and the colour comes only from the project images.

Four signatures make it recognisable:

One italic serif glyph. Headlines are Inter 500, but one character is swapped for Playfair Display italic: the & in brands & experiences, the O in the giant WORK.
The giant white wordmark. A full-width WORK set at 46vw in Inter 300 with −2.8rem tracking, white on the #F5F5F5 band, cut off at the bottom by the next section. It is texture, not text to read.
Faded meta after titles. Project captions put the title in black, then the categories and year at 25% black on the same line: Bold Moves, Web Design, Marketing, 2025. Counts sit after titles in a lighter weight: Selected Work (17).
Offset hero. The hero headline sits bottom-left with its first line indented, and a single portrait image floats bottom-right. The top of the screen is empty except for a small address.

Moka is light-only and nearly monochrome.

Colors

Surfaces

canvas#FFFFFF

Page background and work section

surface-1#F5F5F5

The about band behind the giant wordmark, the services panel, the footer

inverse-canvas#000000

Ink

on-primary#000000

Text on primary

ink#000000

All headlines, nav, titles

ink-muted#000000

Body copy

ink-faint#000000 · 40%

Service names in the services strip

ink-ghost#000000 · 25%

Categories and years after project titles (.category-title, opacity .25)

on-media#FFFFFF

The giant wordmark and text over images

on-media-muted#FFFFFF · 70%

Secondary white text (--third-color)

inverse-ink#FFFFFF

Action

primary#FFFFFF

The button style in the CSS variables: a white pill with black 14px text

primary-hover#000000

Lines & effects

line#000000

Only the 1px solid blockquote rule; there are no other borders

glass#F8F8F3 · 10%

Blur tint with 15–40px backdrop blur

Typography

Inter · display-giant

The quick brown fox jumps

The WORK wordmark, white, margin-left −5vw. 662px · 300 · 0.50 · -44.8px

Inter · headline-xl

The quick brown fox jumps

Large repeated lines (20 uses). 80px · 500 · 1.20 · -0.15px

Inter · body-lg

The quick brown fox jumps

The most-used text style (102 uses): longer copy and lists. 24px · 400 · 1.20 · -0.15px

Inter · label-caps

The quick brown fox jumps

Short uppercase labels. 24px · 500 · 1.10 · -0.96px

Inter · title

The quick brown fox jumps

Nav links and project titles (One Step, Bold Moves). 19.2px · 500 · 1.20

Inter · caption

The quick brown fox jumps

Base body size and button text (--button--font-size: 14px). 14px · 400 · 1.43

Spacing & shape

Purpose	Value
Container	width 100% with max-width: 95% (1368px at 1440), centred
Grid	a 12-column grid with a 15px column gap and a 50px row gap, items aligned to the bottom (place-items: end stretch)
Section rhythm	250px top and bottom (--section--padding-top-bottom); the first band after the hero opens with 350px
Breakpoints	991px, 767px and 479px, plus a 1920px+ step and a min-width: 768px rule set

Spacing scale

Token	Value	Preview
`xxs`	5px
`xs`	10px
`sm`	15px
`md`	20px
`lg`	30px
`xl`	50px
`2xl`	60px
`3xl`	100px
`4xl`	150px
`5xl`	200px

Layout spacing

Token	Value	Preview
`column-gap`	15px
`row-gap`	50px
`section`	250px

Border radius

sm6.4px

md9.6px

pill48px

circle160px

Surfaces

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

Level 1canvas

Level 2surface-1

Motion

Text roll (nav and links)	Split characters move y 0% → −100% while a duplicate rolls in from below; power1.in, staggered over 0.25–1.0s depending on word length (0.25, 0.34, 0.37, 0.43, 0.46, 0.49, 0.52, 0.58, 0.64, 1.0s)
Service strip	A continuous horizontal run of service names, faded at both ends
CSS transitions	transition: all with Webflow defaults; no custom durations or easings

Do’s and don’ts

Keep the interface to #000000, #FFFFFF and #F5F5F5, and let images bring the colour.
Set headlines in Inter 500 with tight tracking (−2.4px at 64–80px).
Swap one glyph per display line (&, O) for Playfair Display italic at the same size.
Leave huge vertical space: 250px between sections, 350px to open the first band.
Caption work with the title in black and the categories and year at 25% black on the same line.
Use 4:3 images with square corners in a 2-column grid with a 30px gap.
Add borders, divider lines, drop shadows or gradients.
Grey the body copy. Paragraphs are pure #000000 at weight 500.
Use #00000040 or #00000066 text on its own; it only works as meta beside a black title.
Round images, or use radii other than 6.4px panels and the 48px pill.
Set full words or paragraphs in Playfair Display.
Add scroll animations, parallax or fades beyond the text roll.
Put the white pill button on the white canvas, where it disappears.

Example prompt

Any page in the Moka style

Prompt

Build your page in the Moka style. White #FFFFFF background and black #000000 Inter weight 500 everywhere, no borders, no shadows, no accent colour. Headlines are 64px, line height 1.1, tracking −2.4px (hero 80px), with one character such as "&" swapped for Playfair Display italic at the same size. Body text is 16px, line height 1.3, pure black. Sections have 250px top and bottom padding inside a 95%-wide container; alternate white with #F5F5F5 bands. Show projects as 4:3 square-cornered images in a 2-column grid with a 30px gap, captioned "Title, Category, Category, 2025" where everything after the title is at 25% opacity. Add a full-width white wordmark at 46vw, weight 300, tracking −2.8rem, line height 0.5, on a #F5F5F5 band. Links roll their text upward on hover (SplitText chars, y 0% → −100%, power1.in, staggered).

# Moka Design System

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

## Overview

Moka is a stripped-back studio portfolio. It is black
Inter on white and pale grey, with no rules, no borders,
no shadows and almost no UI. The type is large and
tight, the spacing is enormous (250–350px between
sections), and the colour comes only from the project

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background and wor… |
| surface-1    | #F5F5F5     | The about band behind t… |
| inverse-can… | #000000     |                          |
| on-primary   | #000000     | Text on primary          |
| ink          | #000000     | All headlines, nav, tit… |
| ink-muted    | #000000     | Body copy                |
| ink-faint    | #000000 40% | Service names in the se… |
| ink-ghost    | #000000 25% | Categories and years af… |
| on-media     | #FFFFFF     | The giant wordmark and … |
| on-media-mu… | #FFFFFF 70% | Secondary white text (-… |
| inverse-ink  | #FFFFFF     |                          |
| primary      | #FFFFFF     | The button style in the… |
| primary-hov… | #000000     |                          |
| line         | #000000     | Only the 1px solid bloc… |

## Typography

- display-giant: Inter 662px / 300
- display-giant-italic: Playfair Display 677px / 400
- display-numeral: Inter 336px / 500
- display-hero: Inter 80px / 500

{
  "$description": "Moka design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The button style in the CSS variables: a white pill with black 14px text"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#000000"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background and work section"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F5F5F5",
      "$description": "The about band behind the giant wordmark, the services panel, the footer"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "All headlines, nav, titles"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Body copy"
    },
    "ink-faint": {
      "$type": "color",
      "$value": "#00000066",
      "$description": "Service names in the services strip"
    },
    "ink-ghost": {
      "$type": "color",
      "$value": "#00000040",
      "$description": "Categories and years after project titles (.category-title, opacity .25)"

/* Moka 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: #FFFFFF;
  --color-primary-hover: #000000;
  --color-on-primary: #000000;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F5F5F5;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-faint: #00000066;
  --color-ink-ghost: #00000040;
  --color-line: #000000;
  --color-on-media: #FFFFFF;
  --color-on-media-muted: #FFFFFFB3;
  --color-glass: #F8F8F31A;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;

  /* Fonts */
  --font-sans: "Inter", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-giant: 662px;
  --text-display-giant--line-height: 0.50;
  --text-display-giant--letter-spacing: -44.8px;
  --text-display-giant--font-weight: 300;
  --text-display-giant-italic: 677px;
  --text-display-giant-italic--line-height: 0.30;
  --text-display-giant-italic--letter-spacing: -1px;
  --text-display-giant-italic--font-weight: 400;
  --text-display-numeral: 336px;
  --text-display-numeral--line-height: 0.80;
  --text-display-numeral--letter-spacing: 0px;
  --text-display-numeral--font-weight: 500;
  --text-display-hero: 80px;
  --text-display-hero--line-height: 1.10;
  --text-display-hero--letter-spacing: -2.4px;
  --text-display-hero--font-weight: 500;
  --text-display-italic: 80px;
  --text-display-italic--line-height: 0.30;

/* Moka 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: #FFFFFF; /* The button style in the CSS variables: a white pill with black 14px text */
  --color-primary-hover: #000000;
  --color-on-primary: #000000; /* Text on primary */
  --color-canvas: #FFFFFF; /* Page background and work section */
  --color-surface-1: #F5F5F5; /* The about band behind the giant wordmark, the services panel, the footer */
  --color-ink: #000000; /* All headlines, nav, titles */
  --color-ink-muted: #000000; /* Body copy */
  --color-ink-faint: #00000066; /* Service names in the services strip */
  --color-ink-ghost: #00000040; /* Categories and years after project titles (.category-title, opacity .25) */
  --color-line: #000000; /* Only the 1px solid blockquote rule; there are no other borders */
  --color-on-media: #FFFFFF; /* The giant wordmark and text over images */
  --color-on-media-muted: #FFFFFFB3; /* Secondary white text (--third-color) */
  --color-glass: #F8F8F31A; /* Blur tint with 15–40px backdrop blur */
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;

  /* Fonts */
  --font-inter: "Inter", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-giant: 662px;
  --text-display-giant-font: var(--font-inter);
  --text-display-giant-weight: 300;
  --text-display-giant-line-height: 0.50;
  --text-display-giant-tracking: -44.8px;
  --text-display-giant-italic: 677px;
  --text-display-giant-italic-font: var(--font-playfair-display);
  --text-display-giant-italic-weight: 400;
  --text-display-giant-italic-line-height: 0.30;
  --text-display-giant-italic-tracking: -1px;
  --text-display-numeral: 336px;
  --text-display-numeral-font: var(--font-inter);
  --text-display-numeral-weight: 500;
  --text-display-numeral-line-height: 0.80;
  --text-display-numeral-tracking: 0px;
  --text-display-hero: 80px;
  --text-display-hero-font: var(--font-inter);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.10;
  --text-display-hero-tracking: -2.4px;

Free with a Flowmance accountSign up freeAlready have an account? Log in

Download DESIGN.md

More design systems like this

Portfolio design systems, the same colors first.

Browse all 398

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-giant

Inter · headline-xl

Inter · body-lg

Inter · label-caps

Inter · title

Inter · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Moka style

More design systems like this

Mio Kain

Fifi

Portfolyo

Ken

Bring any of them to your AI tool