Bjørn Design System

Get DESIGN.md Download View template Works with

Bjørn is a bold, playful creative-studio site on a flat cool-grey page. Huge black Satoshi words sit next to the same words drawn only as a thin white outline, and saturated studio photography (cobalt, violet, burnt orange, candy pink) supplies all the colour. The interface itself is black, white and one silver grey.

Four signatures make it recognisable:

Solid word, outlined word. Display lines alternate a solid black word with a hollow one: Creative black, Digital outlined, Agency black; We black, Are outlined; Testimonials fully outlined. The outline is the silver page colour with a 1px white edge.
The silver page. The whole site sits on #B7BABE, never white. White is reserved for buttons, cards and the tilted ribbon.
A hero line wider than the screen. Creative Digital Agency is set at 12vw with white-space: nowrap, so it runs off both edges and slides sideways.
White pills and round badges. Buttons are 30px-radius pills; the hero has a white scroll-mouse circle and the about section a white PLAY VIDEO badge with circular, rotating text.

Bjørn is a light-only design.

Colors

Surfaces

canvas#B7BABE

Page background everywhere (--silver), and the fill of outlined text

surface-1#FFFFFF

Service cards, the tilted text ribbon, round badges

field#B7BABE

Inputs are transparent on the silver page with a 1px black border

Ink

on-primary#000000

Text on primary

on-secondary#FFFFFF

Text on secondary

ink#000000

All text: headlines, nav, paragraphs, quotes

ink-muted#000000

Body copy is full black, the same as ink

Action

primary#FFFFFF

The main pill button (Get in touch, View All Work)

primary-hover#1E1E1E

Every button's hover background (--black-2), with white text

secondary#000000

Dark pill (Learn More) on white service cards

Lines & effects

line#FFFFFF

The 1px white nav underline and blockquote rule

outline-stroke#FFFFFF

The 1px edge of outlined display words (.shadow-white)

Typography

Satoshi · display-hero

The quick brown fox jumps

.display-1, 12vw: Creative Digital Agency, Who We Are, Testimonials. 172.8px · 700 · 1

Satoshi · headline-sm

The quick brown fox jumps

Blog card titles. 29px · 700 · 1.17

Satoshi · title-lg

The quick brown fox jumps

Hero eyebrow Hello there, we're a. 24px · 700 · 1.25

Satoshi · body-xl

The quick brown fox jumps

Lead paragraph (.subhead, max 40% wide, centred). 24px · 500 · 1.1

Satoshi · label-nav

The quick brown fox jumps

Nav links. 18px · 700 · 1.11

Satoshi · caption

The quick brown fox jumps

Testimonial names (— Loha Simson, Snowflake). 17px · 700 · 1.41

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Breakpoints	991px, 767px and 479px (Webflow defaults)

Spacing scale

Token	Value	Preview
`hair`	3px
`sm`	16px
`md`	30px
`lg`	40px
`xl`	50px
`2xl`	70px

Layout spacing

Token	Value	Preview
`gutter`	72px
`nav-height`	85px
`section`	100px
`section-hero-gap`	220px

Border radius

mouse9px

cart10px

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

Button hover	Background to #1E1E1E and text to white, 200ms (transition: all .2s)
Hover colour and filter	Text, background and filter changes, 200ms ease
Icon pop	scale 1 → 1.1 on hover, 100ms ease, and back
Scroll reveal	opacity 0 → 1 and move to y 0, 1000ms outQuart
Scale-in	scale 0 → 1, 500–1000ms outExpo
Play badge	Continuous rotation, 8000ms per turn
Hero line	Sideways moves of ±50vw, 500ms
Custom cursor	cursor: none on cards, links and the ribbon; a follower tracks the mouse (mouse-move interaction)

Do’s and don’ts

Put every page on canvas #B7BABE and keep all text solid #000000.
Set headlines in Satoshi 700 at 1.0–1.1 line height, centred.
Pair a solid black display word with an outlined one (silver fill, 1px white edge).
Use white pills (30px radius, padding 10px 18px) for actions, turning #1E1E1E with white text on hover in 200ms.
Use white square cards with 3px gaps for grouped content.
Use saturated studio product shots on seamless coloured backdrops.
Use a white page background or grey text.
Outline small text: outlines only work at 62px and up.
Add an accent colour; the colour comes from photos.
Round photos or cards. Only buttons, badges and avatars are round.
Add shadows beyond the single ribbon shadow (#0000001A).
Use light weights for headlines or letter spacing beyond +1px.

Example prompt

Any page in the Bjørn style

Prompt

Build your page in the Bjørn style. Use a flat #B7BABE silver background and Satoshi 700 for almost all text in solid #000000; paragraphs 18px bold, line height 1.2. Fixed transparent 85px nav: wordmark left, centred 18px bold links with a 1px white underline, a white pill "Get in touch" right. Headlines are centred, 100px (line height 1.1) for sections and 12vw for the hero, one line wide; set one word of each title as an outline: #B7BABE fill with a 1px white text-shadow on all four sides. Buttons: white pills, 30px radius, padding 10px 18px, 15px bold black text, hover to #1E1E1E with white text in 200ms; dark pills (#000000, white text) on white cards. Group services in white square cards (padding 40px 25px 30px) with 3px gaps. Sections pad 100px top and bottom, 5% sides, container 1200px. Use saturated studio product photos on coloured backdrops, square corners, no shadows. Reveal on scroll with opacity and a small move, 1000ms ease-out.

# Bjørn Design System

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

## Overview

Bjørn is a bold, playful creative-studio site on a flat
cool-grey page. Huge black Satoshi words sit next to the
same words drawn only as a thin white outline, and
saturated studio photography (cobalt, violet, burnt
orange, candy pink) supplies all the colour. The

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #B7BABE     | Page background everywh… |
| surface-1    | #FFFFFF     | Service cards, the tilt… |
| field        | #B7BABE     | Inputs are transparent … |
| on-primary   | #000000     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| ink          | #000000     | All text: headlines, na… |
| ink-muted    | #000000     | Body copy is full black… |
| primary      | #FFFFFF     | The main pill button (G… |
| primary-hov… | #1E1E1E     | Every button's hover ba… |
| secondary    | #000000     | Dark pill (Learn More) … |
| line         | #FFFFFF     | The 1px white nav under… |
| outline-str… | #FFFFFF     | The 1px edge of outline… |

## Typography

- display-hero: Satoshi 172.8px / 700
- display-xl: Satoshi 100px / 700
- display-lg: Satoshi 80px / 700
- display-metric: Satoshi 62px / 700

{
  "$description": "Bjørn 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 main pill button (Get in touch, View All Work)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#1E1E1E",
      "$description": "Every button's hover background (--black-2), with white text"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Dark pill (Learn More) on white service cards"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#B7BABE",
      "$description": "Page background everywhere (--silver), and the fill of outlined text"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Service cards, the tilted text ribbon, round badges"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "All text: headlines, nav, paragraphs, quotes"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",

/* Bjørn 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-title-lg, rounded-mouse, p-lg */

@theme {
  /* Colors */
  --color-primary: #FFFFFF;
  --color-primary-hover: #1E1E1E;
  --color-on-primary: #000000;
  --color-secondary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-canvas: #B7BABE;
  --color-surface-1: #FFFFFF;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-line: #FFFFFF;
  --color-outline-stroke: #FFFFFF;
  --color-field: #B7BABE;

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

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 172.8px;
  --text-display-hero--line-height: 1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-display-xl: 100px;
  --text-display-xl--line-height: 1.1;
  --text-display-xl--letter-spacing: 0px;
  --text-display-xl--font-weight: 700;
  --text-display-lg: 80px;
  --text-display-lg--line-height: 1.1;
  --text-display-lg--letter-spacing: 1px;
  --text-display-lg--font-weight: 700;
  --text-display-metric: 62px;
  --text-display-metric--line-height: 1;
  --text-display-metric--letter-spacing: 0px;
  --text-display-metric--font-weight: 700;
  --text-headline-sm: 29px;
  --text-headline-sm--line-height: 1.17;
  --text-headline-sm--letter-spacing: 0px;
  --text-headline-sm--font-weight: 700;
  --text-title-lg: 24px;
  --text-title-lg--line-height: 1.25;

/* Bjørn 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 main pill button (Get in touch, View All Work) */
  --color-primary-hover: #1E1E1E; /* Every button's hover background (--black-2), with white text */
  --color-on-primary: #000000; /* Text on primary */
  --color-secondary: #000000; /* Dark pill (Learn More) on white service cards */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-canvas: #B7BABE; /* Page background everywhere (--silver), and the fill of outlined text */
  --color-surface-1: #FFFFFF; /* Service cards, the tilted text ribbon, round badges */
  --color-ink: #000000; /* All text: headlines, nav, paragraphs, quotes */
  --color-ink-muted: #000000; /* Body copy is full black, the same as ink */
  --color-line: #FFFFFF; /* The 1px white nav underline and blockquote rule */
  --color-outline-stroke: #FFFFFF; /* The 1px edge of outlined display words (.shadow-white) */
  --color-field: #B7BABE; /* Inputs are transparent on the silver page with a 1px black border */

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

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 172.8px;
  --text-display-hero-font: var(--font-satoshi);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1;
  --text-display-hero-tracking: 0px;
  --text-display-xl: 100px;
  --text-display-xl-font: var(--font-satoshi);
  --text-display-xl-weight: 700;
  --text-display-xl-line-height: 1.1;
  --text-display-xl-tracking: 0px;
  --text-display-lg: 80px;
  --text-display-lg-font: var(--font-satoshi);
  --text-display-lg-weight: 700;
  --text-display-lg-line-height: 1.1;
  --text-display-lg-tracking: 1px;
  --text-display-metric: 62px;
  --text-display-metric-font: var(--font-satoshi);
  --text-display-metric-weight: 700;
  --text-display-metric-line-height: 1;
  --text-display-metric-tracking: 0px;
  --text-headline-sm: 29px;
  --text-headline-sm-font: var(--font-satoshi);
  --text-headline-sm-weight: 700;
  --text-headline-sm-line-height: 1.17;

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

Satoshi · display-hero

Satoshi · headline-sm

Satoshi · title-lg

Satoshi · body-xl

Satoshi · label-nav

Satoshi · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Bjørn style

More design systems like this

Mōno™

Omnera

Nuvin

Moon Studio

Bring any of them to your AI tool