Nord Design System

Get DESIGN.md Download View template Works with

Nord is a confident, Swiss-modern agency site built on one typeface, Instrument Sans at weight 600. It opens on a black intro where Nord® Creative Agency fills the screen at 13vw next to a single orange portrait, then the page turns white for big plain statements, a right-aligned list of service words, wide project images and a slider of testimonials. It feels clean, editorial and quietly bold: big type, plenty of air, and colour coming only from the photography and one orange-red link.

Four signatures make it recognisable:

Viewport-sized black intro. Nord® / Creative / Agency stacked in white at 13vw (187px at 1440), line height 0.9, with the ® as a superscript and Instagram / Behance links underneath. The intro is sticky and the white page scrolls up over it.
Dot-bulleted nav. Every nav link is preceded by a small white dot (● Home ● Studio ● Work), with the Nord® wordmark centred and Cart | 0 on the right.
Fading service list. Right-aligned 7vw words (Strategy, Branding, Design, Growth, Technology) that step from black to light grey down the list as you scroll.
Three-part work captions. Under each 20px-radius project image: title in black on the left, award in the middle and categories on the right, both in pale grey.

Colors

Surfaces

canvas#FFFFFF

Main page background (--white)

surface-1#F1F3F8

--second-color; default link colour on black, light panels on inner pages

surface-2#DFDBE6

--third-color; blockquote left border

inverse-canvas#000000

The sticky intro, the nav over it, and the footer

Ink

on-primary#000000

on-secondary#FFFFFF

Text on secondary

ink#000000

Headlines, titles, work titles (--main-color)

ink-muted#000000 · 70%

Paragraphs: p has opacity: .7

ink-subtle#000000 · 30%

Work card meta (Awwwards, Logo, User Interface), 12 uses

inverse-ink#FFFFFF

Text on inverse-canvas

on-media#FFFFFF

Action

primary#FFFFFF

Set to the canvas: the home page has no filled buttons

primary-hover#FFFFFF

secondary#222222

The form submit button (.button), hover #444444

secondary-hover#444444

accent#FF4800

The big CTA text link and its arrow (the CSS var is named --yellow)

Lines & effects

placeholder#000000 · 55%

Input placeholders

line#CCCCCC

Input border / divider rules

divider#D8DFE0

Input border / divider rules

inverse-muted#FFFFFF · 63%

Small uppercase meta on black (.figma-text)

inverse-line#FFFFFF · 15%

Borders in the dark cart panel

Typography

Instrument Sans · display-hero

The quick brown fox jumps

.hero-title, font-size: 13vw: Nord® Creative Agency. 187px · 600 · 0.9

Instrument Sans · headline-lg

The quick brown fox jumps

Statement paragraphs as h2 (Collaboration that drives innovation and business growth.), 54.72px at 1440. 55px · 600 · 1.05

Instrument Sans · body-lg

The quick brown fox jumps

Base p, at 70%. 21px · 500 · 1.3

Instrument Sans · label-social

The quick brown fox jumps

Instagram, Behance under the hero title. 21.6px · 400 · 0.93

Instrument Sans · title-name

The quick brown fox jumps

Testimonial author (David Harrison, BrightFutures). 18px · 600 · 1.2

Instrument Sans · caption

The quick brown fox jumps

Inputs. 15px · 500 · 1.3

Spacing & shape

Purpose	Value
Container	.container max 1440px, so content runs almost edge to edge
Section rhythm	.section is 150px top and bottom
Breakpoints	991px, 767px and 479px, plus min-width sets at 768px and 1280px

Spacing scale

Token	Value	Preview
`xs`	6px
`sm`	15px
`md`	20px
`lg`	25px
`xl`	30px
`2xl`	60px
`3xl`	100px

Layout spacing

Token	Value	Preview
`column-gap`	25px
`nav-padding`	32px
`section-side`	43px
`section`	150px
`section-work`	250px

Border radius

field6px

xs7px

sm10px

md15px

lg20px

xl25px

2xl30px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-1

Level 3surface-2

Motion

Intro scroll	Images move from offsets to x 0vw, y 0vh (500ms smoothing) as the white page scrolls over the sticky intro
Headline reveal	Lines rise y 120% → 0% with skewY 15° → 0°, 1000ms outExpo; the hero title rises over 1400ms outExpo on page start
Service fade	Words step down in opacity as the list scrolls through view
Link slide	Text moves x −30px → 0 (500ms outQuart) or x 30px → 0 (800ms outExpo) on hover
Arrow rotate	rotate, 500ms, or 600ms outExpo on the CTA arrow
Image hover	scale 1 → 1.1, 500ms
Fade-in	opacity 0 → 1, 1000ms outQuart, with a move to 0px
Drop-in	y −100% → 0, 800ms swingFrom (menu and cart)
Nav colours	CSS background-color .1s, color .1s

Do’s and don’ts

Use Instrument Sans only, at 600 for headlines and titles and 500 for paragraphs.
Open with a black #000000 intro and run the rest of the page on #FFFFFF, with a black footer.
Size display type in vw (13vw hero, 7vw service words) with line height 0.9–1.0.
Give photos a 20px radius.
Put a small white dot before every nav link.
Keep #FF4800 for the one main text CTA and its arrow.
Add filled buttons for marketing CTAs; use the orange 48px text link. The #222222 button is for forms only.
Use ink-subtle (black at 30%) for anything under 17px or for important text; it is pale meta only and fails contrast at small sizes.
Add shadows, gradients or blurs.
Use the declared Coolvetica fonts; they are not loaded.
Add letter spacing or uppercase headlines.
Use more than one accent colour, or the accent as a background.

Example prompt

Any page in the Nord style

Prompt

Build your page in the Nord style. Use Instrument Sans only, weight 600 for headlines, no letter spacing. Start with a sticky black #000000 intro: the name at 13vw, line height 0.9, white, with a superscript ®, and one square photo with a 20px radius top right. Nav: 17px 600 white links, each after a small white dot, the logo centred. The rest of the page is white #FFFFFF with 150px section padding, 3% side padding and a 1440px container. Statements are 55px 600, line height 1.05, black. Paragraphs are 21px 500, line height 1.3, black at 70%. Project images have a 20px radius with a caption row below: 17px 600 black title, then award and categories in black at 30%. The main CTA is an orange #FF4800 text link at 48px 600 with an arrow that rotates on hover. Reveal headlines by rising y 120% → 0 with a 15° skew that settles over 1000ms outExpo. No shadows or gradients.

# Nord Design System

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

## Overview

Nord is a confident, Swiss-modern agency site built on
one typeface, Instrument Sans at weight 600. It opens on
a black intro where Nord® Creative Agency fills the
screen at 13vw next to a single orange portrait, then
the page turns white for big plain statements, a

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Main page background (-… |
| surface-1    | #F1F3F8     | --second-color; default… |
| surface-2    | #DFDBE6     | --third-color; blockquo… |
| inverse-can… | #000000     | The sticky intro, the n… |
| on-primary   | #000000     |                          |
| on-secondary | #FFFFFF     | Text on secondary        |
| ink          | #000000     | Headlines, titles, work… |
| ink-muted    | #000000 70% | Paragraphs: p has opaci… |
| ink-subtle   | #000000 30% | Work card meta (Awwward… |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| on-media     | #FFFFFF     |                          |
| primary      | #FFFFFF     | Set to the canvas: the … |
| primary-hov… | #FFFFFF     |                          |
| secondary    | #222222     | The form submit button … |

## Typography

- display-hero: Instrument Sans 187px / 600
- display-service: Instrument Sans 101px / 600
- headline-lg: Instrument Sans 55px / 600
- headline-cta: Instrument Sans 48px / 600

{
  "$description": "Nord 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": "Set to the canvas: the home page has no filled buttons"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000"
    },
    "secondary": {
      "$type": "color",
      "$value": "#222222",
      "$description": "The form submit button (.button), hover #444444"
    },
    "secondary-hover": {
      "$type": "color",
      "$value": "#444444"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Main page background (--white)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F1F3F8",
      "$description": "--second-color; default link colour on black, light panels on inner pages"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#DFDBE6",
      "$description": "--third-color; blockquote left border"
    },
    "ink": {

/* Nord 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: #FFFFFF;
  --color-on-primary: #000000;
  --color-secondary: #222222;
  --color-secondary-hover: #444444;
  --color-on-secondary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F1F3F8;
  --color-surface-2: #DFDBE6;
  --color-ink: #000000;
  --color-ink-muted: #000000B3;
  --color-ink-subtle: #0000004D;
  --color-placeholder: #0000008C;
  --color-line: #CCCCCC;
  --color-divider: #D8DFE0;
  --color-accent: #FF4800;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-muted: #FFFFFFA1;
  --color-inverse-line: #FFFFFF26;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Instrument Sans", sans-serif;
  --font-instrument-sans: "Instrument Sans", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 187px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-display-service: 101px;
  --text-display-service--line-height: 1.0;
  --text-display-service--letter-spacing: 0px;
  --text-display-service--font-weight: 600;
  --text-headline-lg: 55px;
  --text-headline-lg--line-height: 1.05;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 600;
  --text-headline-cta: 48px;

/* Nord 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; /* Set to the canvas: the home page has no filled buttons */
  --color-primary-hover: #FFFFFF;
  --color-on-primary: #000000;
  --color-secondary: #222222; /* The form submit button (.button), hover #444444 */
  --color-secondary-hover: #444444;
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Main page background (--white) */
  --color-surface-1: #F1F3F8; /* --second-color; default link colour on black, light panels on inner pages */
  --color-surface-2: #DFDBE6; /* --third-color; blockquote left border */
  --color-ink: #000000; /* Headlines, titles, work titles (--main-color) */
  --color-ink-muted: #000000B3; /* Paragraphs: p has opacity: .7 */
  --color-ink-subtle: #0000004D; /* Work card meta (Awwwards, Logo, User Interface), 12 uses */
  --color-placeholder: #0000008C; /* Input placeholders */
  --color-line: #CCCCCC; /* Input border / divider rules */
  --color-divider: #D8DFE0; /* Input border / divider rules */
  --color-accent: #FF4800; /* The big CTA text link and its arrow (the CSS var is named --yellow) */
  --color-inverse-canvas: #000000; /* The sticky intro, the nav over it, and the footer */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-muted: #FFFFFFA1; /* Small uppercase meta on black (.figma-text) */
  --color-inverse-line: #FFFFFF26; /* Borders in the dark cart panel */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-instrument-sans: "Instrument Sans", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 187px;
  --text-display-hero-font: var(--font-instrument-sans);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 0px;
  --text-display-service: 101px;
  --text-display-service-font: var(--font-instrument-sans);
  --text-display-service-weight: 600;
  --text-display-service-line-height: 1.0;
  --text-display-service-tracking: 0px;
  --text-headline-lg: 55px;
  --text-headline-lg-font: var(--font-instrument-sans);
  --text-headline-lg-weight: 600;
  --text-headline-lg-line-height: 1.05;
  --text-headline-lg-tracking: 0px;

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

Instrument Sans · display-hero

Instrument Sans · headline-lg

Instrument Sans · body-lg

Instrument Sans · label-social

Instrument Sans · title-name

Instrument Sans · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Nord style

More design systems like this

Fabrik

Oko

Fitex

Katix

Bring any of them to your AI tool