Bork Design System

Get DESIGN.md Download View template Works with

Bork is a playful, warm creative-agency site. It feels like a design studio's sketchbook: a soft lavender (#DDCDED) page, big bold black Cabinet Grotesk headlines, and electric magenta (#E34AFF) used both for pill buttons and for hand-drawn doodles that circle and underline words. Photography is bright product still life on solid colour (a mango on orange, a gold coin on red, a cereal box on yellow), which keeps the page cheerful.

The published preview opens on a presentation page (Meet Bork, What is included in Bork template, Template Overview, thumbnails of every page). The template's own home is at /pages/home. This file describes the template's design as both show it.

Four signatures make it recognisable:

Magenta doodles. Key words in headlines get a hand-drawn magenta mark: an oval around ui/ux, a squiggle under team and your, and a small smiling sun with rays in the corner of most template heroes.
Lavender everywhere. The page, the hero bands and the full-screen menu are all thistle #DDCDED, with a slightly deeper #D3B8EE band and white #FFFFFF sections for contrast.
Bold black type, bold body. Cabinet Grotesk 700 for headlines and for paragraphs too (p is 17px weight 700), so even small copy reads heavy and confident.
Magenta pill + underlined link. View on Designer as a #E34AFF pill with white text, next to Buy Bork Today as a black underlined link.

Colors

Surfaces

canvas#DDCDED

Page background, hero bands, the menu overlay (--thistle)

surface-1#FFFFFF

Cards, white sections (.section.white), inputs

surface-2#D3B8EE

A deeper lavender band (.section.gray)

surface-3#CFAAF3

The mid swatch in the style card; light purple accents

field#FFFFFF

field-line#000000

inverse-canvas#1A1B1F

Dark service-card variant (.service-card-wrapper)

Ink

on-primary#FFFFFF

Text on primary

on-primary-hover#151619

Text on primary-hover

ink#000000

Headlines, links, icons

ink-muted#151619

Body text

on-accent#FFFFFF

inverse-ink#FFFFFF

Text on inverse-canvas

on-media#FFFFFF

Action

primary#E34AFF

Pill buttons (--magenta)

primary-hover#FFFFFF

Button on hover: white pill, dark text

accent#E34AFF

Doodles, the 2px menu underline, link hover, blockquote rule

Lines & effects

line#E9E0F1

1px borders on white cards

line-strong#000000

2px rule above the footer bottom; 1px input borders

line-link#666666

1px underline on text links

Typography

Cabinet Grotesk · display-hero

The quick brown fox jumps

Meet Bork (.title-1, 6.5vw). 93.6px · 700 · 1.1

Cabinet Grotesk · headline-social

The quick brown fox jumps

Big footer social words (dribbble, facebook). 50px · 700 · 0.9

Cabinet Grotesk · title-section

The quick brown fox jumps

Section titles (What is included in Bork template, Template Overview). 28px · 700 · 1.3

Cabinet Grotesk · body-lg

The quick brown fox jumps

Hero lead (form inputs use 18px / 400, no token). 20px · 700 · 1.3

Cabinet Grotesk · label-menu

The quick brown fox jumps

The Menu label beside the plus. 19px · 900 · 1.05

Cabinet Grotesk · footer

The quick brown fox jumps

Footer bottom line. 18px · 500 · 1.3

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Section rhythm	80px top and bottom, 60px at ≤479
Breakpoints	991px, 767px and 479px (max-width), plus a min-width 768px step

Spacing scale

Token	Value	Preview
`hair`	2px
`xs`	10px
`sm`	16px
`md`	20px
`lg`	25px
`xl`	30px
`2xl`	50px
`3xl`	67px

Layout spacing

Token	Value	Preview
`column-gap`	30px
`section-side`	72px
`section`	80px
`nav-min`	80px
`hero-top`	150px

Border radius

xs4px

md10px

pill30px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-2

Level 3surface-3

Level 4surface-1

Motion

Page-load rise	y 40px → 0 and opacity 0 → 1, 1000ms outQuart
Scroll-in fade	opacity 0 → 1, 300ms ease
Menu underline	The 2px magenta line moves x −30% → 0% (and back), 300ms ease
Mouse parallax	Elements follow the cursor by ±5px on x and y, 500ms
Scroll parallax	Elements drift y −50px while in view
Image settle	scale 1.5 → 1, 500ms
Menu open	Overlay display toggle, opacity 300ms ease; the plus rotates 300ms ease; Menu rolls to Close
Button and link hover	Colour swap, all .3s
Footer logo hover	scale 0.97, transform .3s

Do’s and don’ts

Use the #DDCDED lavender canvas with #D3B8EE and white #FFFFFF bands at 80px padding.
Set headlines and paragraphs in Cabinet Grotesk 700, black, sentence case.
Mark one or two words per headline with a hand-drawn #E34AFF oval or squiggle, and add the sun doodle to heroes.
Use the #E34AFF pill (30px radius, 54px tall) for the main action and a black underlined link beside it.
Keep cards white with a 10px radius, a 1px #E9E0F1 border and the faint 5% shadow.
Use bright single-colour-background product photos with square corners.
Shrink button labels below 17px weight 700; white on #E34AFF is only about 3.1:1.
Set text in magenta on lavender; use magenta for fills, doodles and hover lines only.
Add a second accent colour or use the unused yellow, orange-red or blue variables.
Use uppercase, letter spacing or light weights.
Use heavy shadows; the strongest is 15% and only under floating screenshots.
Doodle more than two words in a headline.

Example prompt

Any page in the Bork style

Prompt

Build your page in the Bork agency style. Use a #DDCDED lavender page with alternating #D3B8EE and white #FFFFFF sections, 80px vertical padding, 5% side padding and a 1200px container. Typeface: Cabinet Grotesk. Headlines are weight 700, black, sentence case, short statements with a full stop broken over 2–4 lines (hero 93.6px, line height 1.1; section titles 28px). Paragraphs are 17px weight 700, line height 1.3, #151619. Circle or underline one key word per headline with a hand-drawn #E34AFF stroke and put a small magenta sun doodle in the hero corner. The main button is a #E34AFF pill (30px radius, 54px tall, padding 17px 30px) with 17px weight 700 white text that turns white with #151619 text on hover over 300ms; pair it with a black underlined text link. Cards are white, 10px radius, 1px #E9E0F1 border, shadow 7px 7px 15px rgba(0,0,0,0.05). The nav is transparent: a heavy black wordmark left and "Menu +" (19px weight 900) right, opening a full-screen lavender menu of 80px links with a 2px magenta underline that slides in. Use bright product photography on solid orange, red and yellow backgrounds. Motion: rise 40px and fade over 1000ms outQuart.

# Bork Design System

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

## Overview

Bork is a playful, warm creative-agency site. It feels
like a design studio's sketchbook: a soft lavender
(#DDCDED) page, big bold black Cabinet Grotesk
headlines, and electric magenta (#E34AFF) used both for
pill buttons and for hand-drawn doodles that circle and

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #DDCDED     | Page background, hero b… |
| surface-1    | #FFFFFF     | Cards, white sections (… |
| surface-2    | #D3B8EE     | A deeper lavender band … |
| surface-3    | #CFAAF3     | The mid swatch in the s… |
| field        | #FFFFFF     |                          |
| field-line   | #000000     |                          |
| inverse-can… | #1A1B1F     | Dark service-card varia… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-primary-… | #151619     | Text on primary-hover    |
| ink          | #000000     | Headlines, links, icons  |
| ink-muted    | #151619     | Body text                |
| on-accent    | #FFFFFF     |                          |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| on-media     | #FFFFFF     |                          |

## Typography

- display-hero: Cabinet Grotesk 93.6px / 700
- display-menu: Cabinet Grotesk 80px / 700
- headline-social: Cabinet Grotesk 50px / 700
- headline-md: Cabinet Grotesk 38px / 700

{
  "$description": "Bork design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#E34AFF",
      "$description": "Pill buttons (--magenta)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Button on hover: white pill, dark text"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#151619",
      "$description": "Text on primary-hover"
    },
    "canvas": {
      "$type": "color",
      "$value": "#DDCDED",
      "$description": "Page background, hero bands, the menu overlay (--thistle)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Cards, white sections (.section.white), inputs"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#D3B8EE",
      "$description": "A deeper lavender band (.section.gray)"
    },
    "surface-3": {
      "$type": "color",
      "$value": "#CFAAF3",
      "$description": "The mid swatch in the style card; light purple accents"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",

/* Bork 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-body, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #E34AFF;
  --color-primary-hover: #FFFFFF;
  --color-on-primary: #FFFFFF;
  --color-on-primary-hover: #151619;
  --color-canvas: #DDCDED;
  --color-surface-1: #FFFFFF;
  --color-surface-2: #D3B8EE;
  --color-surface-3: #CFAAF3;
  --color-ink: #000000;
  --color-ink-muted: #151619;
  --color-line: #E9E0F1;
  --color-line-strong: #000000;
  --color-line-link: #666666;
  --color-accent: #E34AFF;
  --color-on-accent: #FFFFFF;
  --color-field: #FFFFFF;
  --color-field-line: #000000;
  --color-inverse-canvas: #1A1B1F;
  --color-inverse-ink: #FFFFFF;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Cabinet Grotesk", "Outfit", sans-serif;
  --font-cabinet-grotesk: "Cabinet Grotesk", "Outfit", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 93.6px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-display-menu: 80px;
  --text-display-menu--line-height: 0.9;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 700;
  --text-headline-social: 50px;
  --text-headline-social--line-height: 0.9;
  --text-headline-social--letter-spacing: 0px;
  --text-headline-social--font-weight: 700;
  --text-headline-md: 38px;
  --text-headline-md--line-height: 1.16;

/* Bork 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: #E34AFF; /* Pill buttons (--magenta) */
  --color-primary-hover: #FFFFFF; /* Button on hover: white pill, dark text */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-on-primary-hover: #151619; /* Text on primary-hover */
  --color-canvas: #DDCDED; /* Page background, hero bands, the menu overlay (--thistle) */
  --color-surface-1: #FFFFFF; /* Cards, white sections (.section.white), inputs */
  --color-surface-2: #D3B8EE; /* A deeper lavender band (.section.gray) */
  --color-surface-3: #CFAAF3; /* The mid swatch in the style card; light purple accents */
  --color-ink: #000000; /* Headlines, links, icons */
  --color-ink-muted: #151619; /* Body text */
  --color-line: #E9E0F1; /* 1px borders on white cards */
  --color-line-strong: #000000; /* 2px rule above the footer bottom; 1px input borders */
  --color-line-link: #666666; /* 1px underline on text links */
  --color-accent: #E34AFF; /* Doodles, the 2px menu underline, link hover, blockquote rule */
  --color-on-accent: #FFFFFF;
  --color-field: #FFFFFF;
  --color-field-line: #000000;
  --color-inverse-canvas: #1A1B1F; /* Dark service-card variant (.service-card-wrapper) */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-cabinet-grotesk: "Cabinet Grotesk", "Outfit", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 93.6px;
  --text-display-hero-font: var(--font-cabinet-grotesk);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: 0px;
  --text-display-menu: 80px;
  --text-display-menu-font: var(--font-cabinet-grotesk);
  --text-display-menu-weight: 700;
  --text-display-menu-line-height: 0.9;
  --text-display-menu-tracking: 0px;
  --text-headline-social: 50px;
  --text-headline-social-font: var(--font-cabinet-grotesk);
  --text-headline-social-weight: 700;
  --text-headline-social-line-height: 0.9;
  --text-headline-social-tracking: 0px;
  --text-headline-md: 38px;

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

Cabinet Grotesk · display-hero

Cabinet Grotesk · headline-social

Cabinet Grotesk · title-section

Cabinet Grotesk · body-lg

Cabinet Grotesk · label-menu

Cabinet Grotesk · footer

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Bork style

More design systems like this

Twin Studio

Agencium

AGNCY

AgencZ

Bring any of them to your AI tool