Mōno™ Design System

Get DESIGN.md Download View template Works with

Mōno™ is a strict black-and-white agency site with Swiss manners. It is mostly empty white space, held together by a visible grid: rows of small black dots mark the column starts, tiny bracketed labels name each section, and huge Inter headlines with very tight tracking anchor the bottom of the screen. Colour arrives only through photography (a red hat on red, a white horse on deep blue) and the iridescent purple-blue orb used for the logo and the product mockups.

Four signatures make it recognisable:

The dot grid. A row of 8px black dots sits on the column lines of a 4-column grid in the hero and above each content block, like registration marks.
Bracketed labels. Each section is named in small bold text in brackets: (Who we are), (Team of experts), (Live collaboration), (Our Vision), (Performance Boost).
The tight wordmark. Mōno™ and Studio in Inter 600 at 176px with −8px tracking and 0.85 line height, pinned to the bottom of the first screen and split to the two edges. The macron on the ō and the superscript ™ are part of the name.
The floating nav bar. After the hero, a white bar (10px radius, soft shadow) floats at the bottom centre of the viewport: Home, Work (4), the orb logo with Mōno™, Studio, Contact. The cursor is a custom black dot (cursor: none on the body).

Mōno™ is a light design with full black bands.

Colors

Surfaces

canvas#FFFFFF

Page background

surface-1#F5F5F5

The work band (whitesmoke), light cards; the light card fades from #FFFFFF to #F5F5F5 at 30%

inverse-canvas#000000

Dark bands: the scroll text section, the data section, the contact band; the hero area reads as #111111 behind its content

field#000000

Dark contact inputs (transparent on black); focus turns the border solid white

field-focus#000000

With field: Dark contact inputs (transparent on black); focus turns the border solid white

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

Text on secondary

ink#000000

Headlines, labels, nav, dots

ink-muted#000000 · 70%

Paragraphs (p { opacity: .7 })

ink-subtle#000000 · 42%

inverse-ink#FFFFFF

Text on dark bands

inverse-ink-muted#F5F5F5

Text on dark bands

on-media#FFFFFF

Action

primary#000000

Black pill buttons (View all work, Let's talk)

secondary#222222

A softer black pill used for Let's talk in some sections

Lines & effects

line#000000 · 12%

Hairline dividers

line-strong#000000

2px menu dividers

inverse-surface#1C1C1F

Dark cards, as a gradient from #1C1C1F to #0F0F12

inverse-surface-2#141414

The back face of flipping stat cards

inverse-line#FFFFFF · 24%

Borders of dark inputs; white at 30% under large text links

glass#333333 · 55%

Small arrow buttons on images

glass-light#FFFFFF · 88%

Chat bubbles in the collaboration mockup

Typography

Inter · display-hero

The quick brown fox jumps

Mōno™ and Studio (--work-title, 11rem). 176px · 600 · 0.85 · -8px

Inter · headline-lg

The quick brown fox jumps

We shape brands with focus, intention, and impact., Work(4) (4rem). 64px · 600 · 1.1 · -1.3px

Inter · title-lg

The quick brown fox jumps

Card titles: Pricing with complete transparency, team members across the World. 27px · 600 · 1.1 · -1px

Inter · logo

The quick brown fox jumps

Mōno™ beside the orb. 19px · 600 · 1.1 · -0.7px

Inter · body

The quick brown fox jumps

Paragraphs at 70%. 16px · 500 · 1.3 · -0.5px

Inter · label

The quick brown fox jumps

Compact labels and menu items. 16px · 600 · 1.1 · -0.7px

Spacing & shape

Purpose	Value
Container	100% wide, max 1400px, centred
Grid	4 columns with a 10px gap (.bottom-grid, 10 uses) carries the hero, the dot rows and the section heads
Section rhythm	most sections are 2% all round; sections with a headline start 144px down
Breakpoints	991, 767 and 479px, plus a 1920px+ step

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	20px
`md`	30px
`lg`	50px
`xl`	60px
`2xl`	120px

Layout spacing

Token	Value	Preview
`grid-gap`	16px
`section-x`	29px
`card-pad`	35px
`logo-card-y`	70px
`section-top`	144px
`section`	250px

Border radius

xs4px

field6px

photo7px

md10px

card12px

bubble20px

submit30px

pill100px

Surfaces

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

Level 1canvas

Level 2surface-1

Level 3field

Motion

Smooth scroll	Lenis on the whole page
Button and nav text roll	yPercent 0 → 100 and a copy 100 → 0, 600ms, power2.inOut, staggered
Line reveal	y 100% → 0%, 300ms, power3.inOut, triggered at top bottom → top center
Fade-roll	yPercent 100 → 0 with opacity 0 → 1, 500ms, power2.inOut; exits yPercent → −100
Number roll	Digits y → −100% / −200% / −300%, 600ms, power2.inOut
Skew reveal	skewX 30° → 0°, y 20% → 0%, opacity → 1, 400ms outCubic
Split wordmark	The two halves move x ±50vw, 500ms, tied to scroll
Image settle	scale 1.15 → 1, 300ms, sine.inOut
Showreel expand	Video grows 0 → 30vw × 50vh (270ms) then → 100vw × 100vh (230ms), sine.inOut
Testimonial scatter	Cards move x ±60–100%, y −120…140%, rotation 17–20°, rotationX 180°, 1000ms sine.inOut, scrubbed
Marquee	Rows move x ±100%, 1000ms linear steps, looping
Logo flip	RotateY 0 → 180° → 360°, 1000ms swingTo
Scrubbed scenes	ScrollTrigger scrub 0.8 on the pinned bands
Hover fades	Opacity and size 300ms ease; buttons 200ms; one 450ms cubic-bezier(0.22, 0.61, 0.36, 1)

Do’s and don’ts

Keep the page black #000000 on white #FFFFFF, with #F5F5F5 for the one grey band and light cards.
Name every section with a bracketed body-strong label and mark the grid with 8px black dots.
Use negative tracking at every size: −0.5px for body, −1.3px at 64px, −8px at 176px.
Use black 51px pills (100px radius) for actions and the white floating nav bar with its soft shadow.
Put colour only in photography and the iridescent orb.
Stack work as sticky 80vh cards with a 12px radius.
Add an accent colour or tint UI elements with the orb's purple and blue.
Use a second typeface, uppercase or italics.
Use ink-subtle (black at 42%) under 14px or for anything but meta lines; it is below 4.5:1 on white.
Add drop shadows to cards; only the floating nav and the pill buttons have shadows.
Loosen the display tracking or line height; the wordmark depends on 0.85 and −8px.
Round cards beyond 12px, except pills and the 20px bubbles.

Example prompt

Any page in the Mōno™ style

Prompt

Build your page in the Mōno™ style. Use a white #FFFFFF page and black #000000 Inter everywhere, with negative tracking at every size (−0.5px body, −1.3px at 64px, −8px at 176px). Lay content on a 4-column grid with a 10px gap and 2% page padding in a 1400px container. Mark the column starts with a row of 8px black dots, and name each section with a small bold label in brackets like "(Who we are)". Headlines are Inter 600 at 64px, line height 1.1. Paragraphs are 16px at 70% black. Buttons are black pills, 51px tall, 100px radius, white 16px text, with a 600ms power2.inOut text roll on hover. Use #F5F5F5 for light cards (10px radius) and full black bands with white text for contrast. Keep a white floating nav bar (10px radius, shadow 0 12px 30px black 10%) at the bottom centre. Colour comes only from saturated fashion photos and an iridescent purple-blue orb.

# Mōno™ Design System

> Measured from the Mōno™ template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Mōno™ is a strict black-and-white agency site with Swiss
manners. It is mostly empty white space, held together
by a visible grid: rows of small black dots mark the
column starts, tiny bracketed labels name each section,
and huge Inter headlines with very tight tracking anchor

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background          |
| surface-1    | #F5F5F5     | The work band (whitesmo… |
| inverse-can… | #000000     | Dark bands: the scroll … |
| field        | #000000     | Dark contact inputs (tr… |
| field-focus  | #000000     | With field: Dark contac… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| ink          | #000000     | Headlines, labels, nav,… |
| ink-muted    | #000000 70% | Paragraphs (p { opacity… |
| ink-subtle   | #000000 42% | Meta like © 2026 Mōno™ … |
| inverse-ink  | #FFFFFF     | Text on dark bands       |
| inverse-ink… | #F5F5F5     | Text on dark bands       |
| on-media     | #FFFFFF     |                          |
| primary      | #000000     | Black pill buttons (Vie… |

## Typography

- display-hero: Inter 176px / 600
- display-lg: Inter 96px / 500
- display-md: Inter 96px / 600
- headline-lg: Inter 64px / 600

{
  "$description": "Mōno™ 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": "Black pill buttons (View all work, Let's talk)"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#222222",
      "$description": "A softer black pill used for Let's talk in some sections"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F5F5F5",
      "$description": "The work band (whitesmoke), light cards; the light card fades from #FFFFFF to #F5F5F5 at 30%"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, labels, nav, dots"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000B3",
      "$description": "Paragraphs (p { opacity: .7 })"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#0000006B",

/* Mōno™ 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-on-primary: #FFFFFF;
  --color-secondary: #222222;
  --color-on-secondary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F5F5F5;
  --color-ink: #000000;
  --color-ink-muted: #000000B3;
  --color-ink-subtle: #0000006B;
  --color-line: #0000001F;
  --color-line-strong: #000000;
  --color-inverse-canvas: #000000;
  --color-inverse-surface: #1C1C1F;
  --color-inverse-surface-2: #141414;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #F5F5F5;
  --color-inverse-line: #FFFFFF3D;
  --color-on-media: #FFFFFF;
  --color-glass: #3333338C;
  --color-glass-light: #FFFFFFE0;
  --color-field: #000000;
  --color-field-focus: #000000;

  /* 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: 176px;
  --text-display-hero--line-height: 0.85;
  --text-display-hero--letter-spacing: -8px;
  --text-display-hero--font-weight: 600;
  --text-display-lg: 96px;
  --text-display-lg--line-height: 1.3;
  --text-display-lg--letter-spacing: -3px;
  --text-display-lg--font-weight: 500;
  --text-display-md: 96px;
  --text-display-md--line-height: 1.1;
  --text-display-md--letter-spacing: -1px;
  --text-display-md--font-weight: 600;

/* Mōno™ 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; /* Black pill buttons (View all work, Let's talk) */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #222222; /* A softer black pill used for Let's talk in some sections */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Page background */
  --color-surface-1: #F5F5F5; /* The work band (whitesmoke), light cards; the light card fades from #FFFFFF to #F5F5F5 at 30% */
  --color-ink: #000000; /* Headlines, labels, nav, dots */
  --color-ink-muted: #000000B3; /* Paragraphs (p { opacity: .7 }) */
  --color-ink-subtle: #0000006B; /* Meta like © 2026 Mōno™ Studio (.lighter-text) */
  --color-line: #0000001F; /* Hairline dividers */
  --color-line-strong: #000000; /* 2px menu dividers */
  --color-inverse-canvas: #000000; /* Dark bands: the scroll text section, the data section, the contact band; the hero area reads as #111111 behind its content */
  --color-inverse-surface: #1C1C1F; /* Dark cards, as a gradient from #1C1C1F to #0F0F12 */
  --color-inverse-surface-2: #141414; /* The back face of flipping stat cards */
  --color-inverse-ink: #FFFFFF; /* Text on dark bands */
  --color-inverse-ink-muted: #F5F5F5; /* Text on dark bands */
  --color-inverse-line: #FFFFFF3D; /* Borders of dark inputs; white at 30% under large text links */
  --color-on-media: #FFFFFF;
  --color-glass: #3333338C; /* Small arrow buttons on images */
  --color-glass-light: #FFFFFFE0; /* Chat bubbles in the collaboration mockup */
  --color-field: #000000; /* Dark contact inputs (transparent on black); focus turns the border solid white */
  --color-field-focus: #000000; /* With field: Dark contact inputs (transparent on black); focus turns the border solid white */

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

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 176px;
  --text-display-hero-font: var(--font-inter);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 0.85;
  --text-display-hero-tracking: -8px;
  --text-display-lg: 96px;
  --text-display-lg-font: var(--font-inter);
  --text-display-lg-weight: 500;
  --text-display-lg-line-height: 1.3;
  --text-display-lg-tracking: -3px;
  --text-display-md: 96px;
  --text-display-md-font: var(--font-inter);
  --text-display-md-weight: 600;
  --text-display-md-line-height: 1.1;

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

Inter · display-hero

Inter · headline-lg

Inter · title-lg

Inter · logo

Inter · body

Inter · label

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Mōno™ style

More design systems like this

Omnera

Nuvin

Moon Studio

Solvo

Bring any of them to your AI tool