Mofi Design System

Get DESIGN.md Download View template Works with

Mofi is a black, loud, all-caps agency template. Every headline is uppercase Rubik 500, set huge and close to the edges, and the page has almost no colour of its own: white type on pure black, white pill buttons and thin white frames. Colour arrives only through the work photography (a white car on yellow, a cosmetic bottle on lavender, a teal product shot).

The published preview opens on a presentation page (INTRODUCING / MOFI TEMPLATE, then framed thumbnails of HOME 1–3, WORK 1–3, WORK PAGE, ABOUT, BLOG 1–3, BLOG PAGE, CONTACT, PRICING, LEGAL). Those thumbnails, the CSS and the presentation page together define the system below.

Four signatures make it recognisable:

Solid word, outlined word. Headlines pair a solid white word with a hollow one: black fill and a thin white stroke. INTRODUCING solid over MOFI TEMPLATE outlined; OUR solid, WORK outlined; CONTACT solid, US outlined; WE CRAFT / AWESOME / WEBSITES with the middle line hollow.
Everything uppercase. All h1–h6 are text-transform: uppercase in the base styles, as are buttons, labels, footer links and menu links. Only paragraphs stay in sentence case.
Hamburger-only navigation. The bar holds just the MOFI wordmark (left) and a three-line hamburger with uneven line lengths (right). It opens a full-screen black menu of 65px uppercase links, each with a 17px caption under it.
White pills on black. The only filled button is a white 30px-radius pill with black uppercase text. Secondary actions are the same pill outlined with a 2px white border.

Mofi is a dark-only design.

Colors

Surfaces

canvas#000000

Page, hero, menu overlay and cart drawer background

surface-1#000000

Same as canvas: Mofi has no raised panels

field#000000

Input background

inverse-canvas#FFFFFF

Only inside the white button and the white cart-remove dot

Ink

on-primary#000000

Text on primary

ink#FFFFFF

Headlines, labels, buttons on black, the stroke of outlined words

ink-muted#FFFFFF · 70%

Paragraphs (base p), the hero lead, the footer address and copyright

ink-subtle#FFFFFF · 60%

Eyebrows (MORE WEBFLOW TEMPLATE), footer links, list items, paragraph links

ink-link#FFFFFF · 90%

Default a colour

ink-price#FFFFFF · 65%

Price lines in the cart sidebar

inverse-ink#000000

Text on inverse-canvas

Action

primary#FFFFFF

The white pill button

primary-hover#333333

Button background on hover (text turns white)

Lines & effects

line#FFFFFF · 25%

The 1px frame around every preview thumbnail

line-soft#FFFFFF · 20%

Footer divider and input borders

Typography

Rubik · display-hero

The quick brown fox jumps

.hero-display: INTRODUCING, MOFI TEMPLATE. 140px · 500 · 1.0 · 2px

Rubik · headline-lg

The quick brown fox jumps

Base h1 on inner pages (LEGAL, post titles). 38px · 500 · 1.16

Rubik · title-sm

The quick brown fox jumps

.footer-title (SITEMAP). 18px · 500 · 1.67 · 1px

Rubik · body-lg

The quick brown fox jumps

Hero lead. 20px · 400 · 1.2

Rubik · label

The quick brown fox jumps

.pres-text: HOME 1, WORK PAGE. 16px · 500 · 1.25 · 1px

Rubik · eyebrow

The quick brown fox jumps

.sub-text above section titles. 15px · 400 · 2.0 · 1px

Spacing & shape

Purpose	Value
Container	max 1200px, centred (.container)
Section rhythm	.section and .section-presanation use 100px top and bottom, 5% left and right
Breakpoints	991px (tablet), 767px (landscape phone) and 479px (phone), plus a min-width: 768px rule set

Spacing scale

Token	Value	Preview
`hair`	5px
`xs`	10px
`sm`	15px
`md`	16px
`lg`	20px
`xl`	30px
`2xl`	40px
`3xl`	70px

Layout spacing

Token	Value	Preview
`nav-height`	80px
`hero-bottom`	95px
`section`	100px
`hero-top`	140px

Border radius

field5px

icon14px

pill30px

full9999px

Motion

Line reveal	Text moves y 100% → 0% inside an overflow-hidden wrapper, 500ms (ease on some)
Fade-in	opacity 0 → 1, 500ms outExpo; slower block fades 1000ms outQuart
Slide-in from left	x −30px → 0px, 500ms outExpo, paired with the fade
Icon hover pop	scale 1 → 1.1 on hover and back, 100ms ease
Hamburger lines	Line widths change, 300–500ms ease
Nav on scroll	Moves y −80px on scroll down and back on scroll up, 500ms
Long slide	y → −400% / −700% over 2500ms cubic-bezier(0.784, 0.325, 0.222, 0.98); used on page load
Button hover	Background and colour, 200ms
Preview card hover	opacity → 0.6, 300ms
Footer link hover	Colour to white, 200ms

Do’s and don’ts

Use canvas #000000 everywhere and ink #FFFFFF for headlines.
Set every heading, button and label in uppercase Rubik 500.
Pair a solid headline line with an outlined one (#000000 fill, thin #FFFFFF stroke) at display-hero 140px.
Use the white pill (button-primary, #FFFFFF on #000000, 30px radius) for the main action, and the 2px white outline pill for the rest.
Set paragraphs in ink-muted (#FFFFFF at 70%) at 18px, line height 1.3.
Separate content with 1px white-at-20–25% frames and rules, not fills.
Add an accent colour or use the unused grey variables (#8F8F8F, #747474, #F1F1F7).
Round images or cards. Only buttons (30px), fields (5px) and circles are rounded.
Add shadows, gradients or blur.
Use weights above 500 or sentence-case headings.
Leave form text at #333333 on black. Use ink for typed text.
Put a visible nav bar with links on the page. Navigation lives in the full-screen hamburger menu.

Example prompt

Any page in the Mofi style

Prompt

Build your page in the Mofi style. Use a #000000 background and Rubik everywhere. Headings are uppercase, weight 500: the hero is 140px, line height 1.0, letter spacing 2px, split into two lines where the second line is outlined (black fill, thin white stroke). Paragraphs are Rubik 400, 18px, line height 1.3, white at 70%. Sections have 100px top and bottom padding and 5% sides, inside a 1200px container. The main button is a white pill (30px radius, 55px tall, padding 17px 30px, black uppercase 15px weight 500 text) that turns #333333 with white text on hover in 200ms; secondary buttons are the same pill with a 2px white border and no fill. Frame cards and images with 1px white-at-25% borders and no radius. The nav is only a logo and a hamburger that opens a full-screen black menu of 65px uppercase links. Reveal text on scroll by sliding lines up from 100% in 500ms.

# Mofi Design System

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

## Overview

Mofi is a black, loud, all-caps agency template. Every
headline is uppercase Rubik 500, set huge and close to
the edges, and the page has almost no colour of its own:
white type on pure black, white pill buttons and thin
white frames. Colour arrives only through the work

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Page, hero, menu overla… |
| surface-1    | #000000     | Same as canvas: Mofi ha… |
| field        | #000000     | Input background         |
| inverse-can… | #FFFFFF     | Only inside the white b… |
| on-primary   | #000000     | Text on primary          |
| ink          | #FFFFFF     | Headlines, labels, butt… |
| ink-muted    | #FFFFFF 70% | Paragraphs (base p), th… |
| ink-subtle   | #FFFFFF 60% | Eyebrows (MORE WEBFLOW … |
| ink-link     | #FFFFFF 90% | Default a colour         |
| ink-price    | #FFFFFF 65% | Price lines in the cart… |
| inverse-ink  | #000000     | Text on inverse-canvas   |
| primary      | #FFFFFF     | The white pill button    |
| primary-hov… | #333333     | Button background on ho… |
| line         | #FFFFFF 25% | The 1px frame around ev… |

## Typography

- display-hero: Rubik 140px / 500
- display-cta: Rubik 130px / 500
- display-menu: Rubik 65px / 500
- headline-lg: Rubik 38px / 500

{
  "$description": "Mofi 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 white pill button"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#333333",
      "$description": "Button background on hover (text turns white)"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Page, hero, menu overlay and cart drawer background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Same as canvas: Mofi has no raised panels"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, labels, buttons on black, the stroke of outlined words"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#FFFFFFB3",
      "$description": "Paragraphs (base p), the hero lead, the footer address and copyright"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#FFFFFF99",
      "$description": "Eyebrows (MORE WEBFLOW TEMPLATE), footer links, list items, paragraph links"
    },
    "ink-link": {
      "$type": "color",
      "$value": "#FFFFFFE6",

/* Mofi 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-field, p-lg */

@theme {
  /* Colors */
  --color-primary: #FFFFFF;
  --color-primary-hover: #333333;
  --color-on-primary: #000000;
  --color-canvas: #000000;
  --color-surface-1: #000000;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFFB3;
  --color-ink-subtle: #FFFFFF99;
  --color-ink-link: #FFFFFFE6;
  --color-ink-price: #FFFFFFA6;
  --color-line: #FFFFFF40;
  --color-line-soft: #FFFFFF33;
  --color-field: #000000;
  --color-inverse-canvas: #FFFFFF;
  --color-inverse-ink: #000000;

  /* Fonts */
  --font-sans: "Rubik", sans-serif;
  --font-rubik: "Rubik", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 140px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 2px;
  --text-display-hero--font-weight: 500;
  --text-display-cta: 130px;
  --text-display-cta--line-height: 1.1;
  --text-display-cta--letter-spacing: 0px;
  --text-display-cta--font-weight: 500;
  --text-display-menu: 65px;
  --text-display-menu--line-height: 1.0;
  --text-display-menu--letter-spacing: 2px;
  --text-display-menu--font-weight: 500;
  --text-headline-lg: 38px;
  --text-headline-lg--line-height: 1.16;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 500;
  --text-headline-md: 31px;
  --text-headline-md--line-height: 1.16;
  --text-headline-md--letter-spacing: 0px;

/* Mofi 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 white pill button */
  --color-primary-hover: #333333; /* Button background on hover (text turns white) */
  --color-on-primary: #000000; /* Text on primary */
  --color-canvas: #000000; /* Page, hero, menu overlay and cart drawer background */
  --color-surface-1: #000000; /* Same as canvas: Mofi has no raised panels */
  --color-ink: #FFFFFF; /* Headlines, labels, buttons on black, the stroke of outlined words */
  --color-ink-muted: #FFFFFFB3; /* Paragraphs (base p), the hero lead, the footer address and copyright */
  --color-ink-subtle: #FFFFFF99; /* Eyebrows (MORE WEBFLOW TEMPLATE), footer links, list items, paragraph links */
  --color-ink-link: #FFFFFFE6; /* Default a colour */
  --color-ink-price: #FFFFFFA6; /* Price lines in the cart sidebar */
  --color-line: #FFFFFF40; /* The 1px frame around every preview thumbnail */
  --color-line-soft: #FFFFFF33; /* Footer divider and input borders */
  --color-field: #000000; /* Input background */
  --color-inverse-canvas: #FFFFFF; /* Only inside the white button and the white cart-remove dot */
  --color-inverse-ink: #000000; /* Text on inverse-canvas */

  /* Fonts */
  --font-rubik: "Rubik", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 140px;
  --text-display-hero-font: var(--font-rubik);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 2px;
  --text-display-cta: 130px;
  --text-display-cta-font: var(--font-rubik);
  --text-display-cta-weight: 500;
  --text-display-cta-line-height: 1.1;
  --text-display-cta-tracking: 0px;
  --text-display-menu: 65px;
  --text-display-menu-font: var(--font-rubik);
  --text-display-menu-weight: 500;
  --text-display-menu-line-height: 1.0;
  --text-display-menu-tracking: 2px;
  --text-headline-lg: 38px;
  --text-headline-lg-font: var(--font-rubik);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 1.16;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 31px;

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

Agency 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

Rubik · display-hero

Rubik · headline-lg

Rubik · title-sm

Rubik · body-lg

Rubik · label

Rubik · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Mofi style

More design systems like this

Valtero

Vantix

Raster

Agenci

Bring any of them to your AI tool