Noah Turner Design System

Get DESIGN.md Download View template Works with

Noah Turner website template preview detail 2

Noah Turner website template preview detail 3

Noah Turner is a stark black-and-white portfolio for a motion and visual designer. The front page reads like a product sheet: a pale grey band with a three-line Mona Sans headline set huge and centred, one black pill button, then a wall of page previews on grey tiles. The inner pages (visible inside the previews) and the footer switch to a tall, condensed, all-caps display face on black, so the site swings between a clean grotesk and a poster-like condensed voice.

Four signatures make it recognisable:

The hand-drawn oval. One word of the hero headline (design) is circled by a thin black, open-ended ellipse drawn as a single stroke, like a marker loop on a printout.
Two type voices. Mona Sans 600 for the hero and UI; Big Shoulders Display, condensed and uppercase, for display titles (LET'S WORK TOGETHER, SELECTED WORK©, NOAH TURNER®).
The difference-blend nav. The logo NT® and the round menu button sit in a sticky bar with mix-blend-mode: difference, so they turn black on light sections and white on black ones.
The smiley glyph. A thin outline smiley sits inline with display words (WORK ☺ SELECTED, ☺ TOGETHER) as a recurring mark.

The interface is strictly monochrome. The only colours come from photography and two optional tints in the variables (purple #883EFF, pink #FFCDD9).

Colors

Surfaces

canvas#FFFFFF

Page background (--white)

surface-1#E7E7E7

The hero band and the preview tiles behind each page thumbnail

inverse-canvas#000000

The full-height footer and the black inner-page heroes

Ink

on-primary#FFFFFF

Text on primary

ink#000000

All text on light backgrounds (--dark)

ink-muted#000000

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

on-accent-soft#000000

Text on accent-soft

inverse-ink#FFFFFF

Text on inverse-canvas

Action

primary#000000

The black pill button Buy Noah — $79

primary-hover#000000

accent#883EFF

--hero-color: blockquote left border (5px) and purple artwork on inner pages

accent-soft#FFCDD9

--text-color: the pale pink cards holding icons and portraits on inner pages

Lines & effects

line#E1E1E1

1px border on the white Home 1 / About 2 labels

line-inverse#FFFFFF · 50%

0.5px border of the round arrow icon on dark images

Typography

Mona Sans · display-hero

The quick brown fox jumps

Hero headline. 130px · 600 · 0.9

Big Shoulders Display · headline-lg

The quick brown fox jumps

Base h1 (Big Shoulders Display). 46px · 400 · 0.96

Mona Sans · title-lg

The quick brown fox jumps

Menu links inside the dropdown (.nav-text, Mona Sans). 26px · 600 · 0.8

Mona Sans · body-lg

The quick brown fox jumps

Paragraphs (p uses Mona Sans). 24px · 500 · 1.4

Mona Sans · label

The quick brown fox jumps

Page labels on preview tiles (Home 1, Work Page). 14px · 600 · 1.43 · -0.2px

Mona Sans · caption

The quick brown fox jumps

Footer row: © … — By Webflow, Style guide, licensing. 12px · 400 · 1.4

Spacing & shape

Purpose	Value
Container	full width (.container is width: 100%, max-width: 100%)
Section rhythm	150px top and bottom (.section), 100px at ≤479px
Breakpoints	991px, 767px and 479px, plus min-width steps at 768, 1280, 1440 and 1920px

Spacing scale

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

Layout spacing

Token	Value	Preview
`column-gap`	10px
`gutter`	29px
`section`	150px

Border radius

tag3px

sm10px

pill30px

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

Scroll fade-in	opacity 0 → 1, 1000ms outQuart, with move 0px over 1000ms outQuart
Card flip	rotateY 0° ↔ ±180°, 3000ms easeOut, on hover and scroll
Button text roll	Label and copy swap; the copy moves y 160% → 0%, 500ms
Menu open	Size grows the dropdown, 500ms; links slide x −50% → 0% and fade 0 → 1, 500ms
Background change	background-color change, 500ms outQuart
Spin	rotate 0 → 360°, 1000ms outSine; slow loops at 5000ms on icons
Mouse follow	Mouse move drives image movement in 19 places (x/y in vw/vh, 500ms)
Button hover	opacity 1 → 0.82, 300ms

Do’s and don’ts

Keep the UI to #000000, #FFFFFF and #E7E7E7; let photography carry colour.
Set the hero in Mona Sans 600 at 9vw with line height 0.9, centred, with one word circled by a thin oval stroke.
Use the black pill (button-primary, 30px radius, 53px tall) for the main action, and the white outline pill only on black.
Run sections at 150px vertical padding and keep the 10px gap in grids.
Keep the nav background-free with mix-blend-mode: difference.
Add grey body text; paragraphs are #000000 on light and #FFFFFF on dark.
Use #883EFF or #FFCDD9 for buttons, links or text.
Add drop shadows, gradients or blur.
Round images on the front page; previews are square-cornered inside grey tiles.
Use Inter Tight or Outfit even though they are loaded; they appear nowhere.
Track the condensed display type; it runs at 0px letter spacing.

Example prompt

Any page in the Noah Turner style

Prompt

Build your page in the Noah Turner style. White #FFFFFF page, black #000000 text, one grey #E7E7E7 for the hero band and tiles. Hero: a centred Mona Sans 600 headline at 9vw (130px at 1440), line height 0.9, first-line indent 9%, one word circled by a thin hand-drawn oval, then a black pill button (30px radius, padding 17px 30px, 53px tall, white Mona Sans 16/500). Poster titles use Big Shoulders Display uppercase, weight 500, line height 1, ending in © or ®. Sections have 150px vertical padding; grids use 3 columns with a 10px gap. Nav: an "NT®" monogram left and a 70px round menu button right, sticky with mix-blend-mode: difference. Footer: full-height black band with a 146px uppercase "LET'S WORK ☺ TOGETHER" and a white outline pill. No shadows, no gradients, no grey text. Motion: fades of 1000ms outQuart on scroll, hover opacity 0.82 over 300ms.

# Noah Turner Design System

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

## Overview

Noah Turner is a stark black-and-white portfolio for a
motion and visual designer. The front page reads like a
product sheet: a pale grey band with a three-line Mona
Sans headline set huge and centred, one black pill
button, then a wall of page previews on grey tiles. The

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background (--whit… |
| surface-1    | #E7E7E7     | The hero band and the p… |
| inverse-can… | #000000     | The full-height footer … |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #000000     | All text on light backg… |
| ink-muted    | #000000     | Body text is full ink; … |
| on-accent-s… | #000000     | Text on accent-soft      |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| primary      | #000000     | The black pill button B… |
| primary-hov… | #000000     |                          |
| accent       | #883EFF     | --hero-color: blockquot… |
| accent-soft  | #FFCDD9     | --text-color: the pale … |
| line         | #E1E1E1     | 1px border on the white… |
| line-inverse | #FFFFFF 50% | 0.5px border of the rou… |

## Typography

- display-hero: Mona Sans 130px / 600
- display-cta: Big Shoulders Display 146px / 500
- headline-lg: Big Shoulders Display 46px / 400
- headline-md: Big Shoulders Display 32px / 400

{
  "$description": "Noah Turner 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 black pill button Buy Noah — $79"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#000000"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background (--white)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#E7E7E7",
      "$description": "The hero band and the preview tiles behind each page thumbnail"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "All text on light backgrounds (--dark)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Body text is full ink; there is no grey text tone"
    },
    "line": {
      "$type": "color",
      "$value": "#E1E1E1",
      "$description": "1px border on the white Home 1 / About 2 labels"
    },
    "line-inverse": {
      "$type": "color",
      "$value": "#FFFFFF80",
      "$description": "0.5px border of the round arrow icon on dark images"

/* Noah Turner 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-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-primary-hover: #000000;
  --color-on-primary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #E7E7E7;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-line: #E1E1E1;
  --color-line-inverse: #FFFFFF80;
  --color-accent: #883EFF;
  --color-accent-soft: #FFCDD9;
  --color-on-accent-soft: #000000;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;

  /* Fonts */
  --font-sans: "Mona Sans", sans-serif;
  --font-mona-sans: "Mona Sans", sans-serif;
  --font-big-shoulders-display: "Big Shoulders Display", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 130px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-display-cta: 146px;
  --text-display-cta--line-height: 1;
  --text-display-cta--letter-spacing: 0px;
  --text-display-cta--font-weight: 500;
  --text-headline-lg: 46px;
  --text-headline-lg--line-height: 0.96;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 400;
  --text-headline-md: 32px;
  --text-headline-md--line-height: 1.13;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 400;
  --text-headline-sm: 24px;
  --text-headline-sm--line-height: 1.25;
  --text-headline-sm--letter-spacing: 0px;

/* Noah Turner 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 black pill button Buy Noah — $79 */
  --color-primary-hover: #000000;
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #FFFFFF; /* Page background (--white) */
  --color-surface-1: #E7E7E7; /* The hero band and the preview tiles behind each page thumbnail */
  --color-ink: #000000; /* All text on light backgrounds (--dark) */
  --color-ink-muted: #000000; /* Body text is full ink; there is no grey text tone */
  --color-line: #E1E1E1; /* 1px border on the white Home 1 / About 2 labels */
  --color-line-inverse: #FFFFFF80; /* 0.5px border of the round arrow icon on dark images */
  --color-accent: #883EFF; /* --hero-color: blockquote left border (5px) and purple artwork on inner pages */
  --color-accent-soft: #FFCDD9; /* --text-color: the pale pink cards holding icons and portraits on inner pages */
  --color-on-accent-soft: #000000; /* Text on accent-soft */
  --color-inverse-canvas: #000000; /* The full-height footer and the black inner-page heroes */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */

  /* Fonts */
  --font-mona-sans: "Mona Sans", sans-serif;
  --font-big-shoulders-display: "Big Shoulders Display", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 130px;
  --text-display-hero-font: var(--font-mona-sans);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 0px;
  --text-display-cta: 146px;
  --text-display-cta-font: var(--font-big-shoulders-display);
  --text-display-cta-weight: 500;
  --text-display-cta-line-height: 1;
  --text-display-cta-tracking: 0px;
  --text-headline-lg: 46px;
  --text-headline-lg-font: var(--font-big-shoulders-display);
  --text-headline-lg-weight: 400;
  --text-headline-lg-line-height: 0.96;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 32px;
  --text-headline-md-font: var(--font-big-shoulders-display);
  --text-headline-md-weight: 400;
  --text-headline-md-line-height: 1.13;
  --text-headline-md-tracking: 0px;
  --text-headline-sm: 24px;

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

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

Mona Sans · display-hero

Big Shoulders Display · headline-lg

Mona Sans · title-lg

Mona Sans · body-lg

Mona Sans · label

Mona Sans · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Noah Turner style

More design systems like this

John X

Marlin

PORTFOLIŌ

Kai's

Bring any of them to your AI tool