Fabrik Design System

Get DESIGN.md Download View template Works with

Fabrik website template preview detail 2

Fabrik website template preview detail 3

Fabrik is a calm, premium agency site on a soft #F5F5F5 grey. Content sits in big rounded panels, white or near-black (#020108), stacked with 10px gutters so the page feels like a set of cards laid on a table. One hot colour, signal orange #F65600, marks the main actions and the handwritten accent words.

Four signatures make it recognisable:

The tight wordmark. Fabrik in Switzer 500 at about 248–256px with −12px tracking and line height 0.8, followed by a grey superscript ™, set at the bottom of a white hero card with a 34px radius.
Script plus grotesk. Single words in a handwritten script (The Patience) sit inside Switzer headlines and titles: *Art* Direction, *Projects*, We let the *Art* speak for itself. The script is orange or soft grey.
The floating control pill. A black pill fixed top-centre holds a round hamburger on the left and a round scroll-progress counter (0%, 22%, 45%) on the right. Top-right, an orange Let's Talk pill carries two avatars and 3 Slots Open — June.
Mono meta. Small labels are monospaced and uppercase: • SERVICES, PLAN FEATURES :, JAMES CARTER | CEO, ACME CORP, a vertical EST. 2021 — MILANO, IT.

A soft blur band sits at the bottom of the viewport, so content fades and blurs as it scrolls off the bottom edge.

Colors

Surfaces

canvas#F5F5F5

Page background (whitesmoke) and pills or tiles that sit inside white panels

surface-1#FFFFFF

White panels, the hero card, testimonial and plan cards

surface-2#E9E9E9

The opened menu panel (with 30px blur)

surface-3#F0F0F0

Light fills

inverse-canvas#020108

Dark panels: services, the work video grid, the dark plan card, the nav pill

field-placeholder#020108 · 40%

Input placeholder

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

Text on secondary

ink#020108

Headlines and text on light (142 uses)

ink-muted#020108

Same as ink: body copy on light panels is set in full ink

ink-subtle#808083

Grey text: the second half of leads, service pills, the ™, logo-tile labels (107 uses)

inverse-ink#FFFFFF

Text on dark (198 uses)

inverse-ink-muted#FFFFFF · 70%

Secondary text on dark

inverse-ink-faint#FFFFFF · 40%

Secondary text on dark

on-media#FFFFFF

Action

primary#F65600

Every main button, the Let's Talk pill, the service cards (33 fills)

primary-hover#F65600

secondary#020108

The dark pill button (Our Work)

accent#F65600

Script words, + list markers, the dot before • SERVICES, the testimonial progress ring

Lines & effects

line#020108 · 12%

Dividers on light panels

inverse-surface#383436

The progress circle and the menu button inside the nav pill

inverse-surface-2#333333

With inverse-surface: The progress circle and the menu button inside the nav pill

inverse-line#FFFFFF · 15%

The rule above the metric grid

glass#FFFFFF · 30%

Frosted chips; metric cards (with a #FFFFFF38 border)

glass-dark#FFFFFF · 10%

With glass: Frosted chips; metric cards (with a #FFFFFF38 border)

Typography

Switzer · display-hero

The quick brown fox jumps

Fabrik (--hero-title: 15.5rem; the live Framer build renders 256px). 248px · 500 · 0.8 · -12px

Switzer · headline-lg

The quick brown fox jumps

We design brands, experiences, and systems built to last. 46.4px · 700 · 1.15 · -1px

Switzer · title-lg

The quick brown fox jumps

Hero lead, Studio Partnership©, Fixed Project©, testimonial quotes (h3, 1.7rem). 27.2px · 600 · 1.15 · -1.36px

Switzer · body-lg

The quick brown fox jumps

Nav links and list text (110 uses, .navigation-text 1.2rem). 19.2px · 500 · 1.15 · -0.8px

Switzer · label

The quick brown fox jumps

Button labels Get Started, Our Work. 16px · 600 · 1.2 · -0.3px

IBM Plex Mono · eyebrow

The quick brown fox jumps

• SERVICES, JAMES CARTER (84 uses). 14.4px · 600 · 1.15 · -0.3px

Spacing & shape

Purpose	Value
Container	1400px for content, 750px for centred text, 1600px for wide strips
Section rhythm	--section--padding-top-bottom is 250px, 100px at ≤991 and 60px at ≤767
Breakpoints	991, 767 and 479px, plus a 1920px+ step

Spacing scale

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

Layout spacing

Token	Value	Preview
`gutter`	10px
`column-gap`	16px
`section`	20px
`panel`	100px

Border radius

xs8px

sm10px

md12px

input14px

lg20px

card-hero34px

xl50px

image-xl70px

Surfaces

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

Level 1canvas

Level 2surface-3

Level 3surface-1

Level 4surface-2

Motion

Button spring	transform 0.65s linear(0, 0.42 8%, 0.72 14%, 0.9 20%, 1.02 26%, 1.08 32%, 1.1 36%, 1.08 42%, 1.04 …)
Back-out pop	transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)
Smooth expand	flex 0.55s cubic-bezier(0.16, 1, 0.3, 1) for expanding cards and accordions
Text swap	color 0.4s, font-size 0.4s cubic-bezier(0.16, 1, 0.3, 1)
Card hover	background 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); transform 0.4s same curve
Fill change	background-color 0.3s
HTML build hover	.button:hover { opacity: 0.76 }, transition: all 0.2s
Scroll	Lead text turns from grey to ink as it scrolls in; the work grid scales inside a 400vh sticky section; the nav counter shows scroll percent

Do’s and don’ts

Put content in rounded panels (20px) on the #F5F5F5 page, alternating white #FFFFFF and black #020108.
Use #F65600 for every primary action, as a pill with 16px weight 600 white text and a springy press.
Add one handwritten script word (The Patience) per big headline, in orange or grey.
Set display Switzer tight: −12px at 248px, −3px at 96px.
Use uppercase IBM Plex Mono for eyebrows and meta, with an orange dot before section names.
Keep ink-subtle #808083 for 16px+ text (pills, the end of leads, ™); at smaller sizes it is too light on #F5F5F5.
Use orange for paragraphs or big background areas outside service cards and product photos.
Put white text on orange smaller than 14px or lighter than weight 500; #FFFFFF on #F65600 is only about 3.4:1.
Use sharp corners on panels, buttons or work images.
Set a whole line in the script face.
Add heavy drop shadows; depth comes from panel contrast and blur.

Example prompt

Any page in the Fabrik style

Prompt

Build your page in the Fabrik style. Page background #F5F5F5. Group content in rounded panels (20px radius, 10px from the viewport edge, padding 100px 2%), alternating white #FFFFFF and near-black #020108. Text: Switzer 500, ink #020108, grey #808083 for secondary phrases. Display: Switzer 500 at 248px, line height 0.8, tracking −12px, followed by a grey ™. Headlines: Switzer 46.4px weight 700, tracking −1px, with one handwritten script word (The Patience) in #F65600. Eyebrows: IBM Plex Mono 14.4px weight 600 uppercase with an orange dot ("• SERVICES"). Primary button: #F65600 pill, white Switzer 16px weight 600, 47px tall, padding 14px 28px, springy press (transform 0.65s, overshoot to 1.1). Secondary: the same pill in #020108. Fixed black pill nav top-centre with a 50px hamburger circle and a scroll-percent counter. Warm editorial photography with orange accents, large images at 70px radius on black.

# Fabrik Design System

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

## Overview

Fabrik is a calm, premium agency site on a soft #F5F5F5
grey. Content sits in big rounded panels, white or
near-black (#020108), stacked with 10px gutters so the
page feels like a set of cards laid on a table. One hot
colour, signal orange #F65600, marks the main actions

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #F5F5F5     | Page background (whites… |
| surface-1    | #FFFFFF     | White panels, the hero … |
| surface-2    | #E9E9E9     | The opened menu panel (… |
| surface-3    | #F0F0F0     | Light fills              |
| inverse-can… | #020108     | Dark panels: services, … |
| field-place… | #020108 40% | Input placeholder        |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| ink          | #020108     | Headlines and text on l… |
| ink-muted    | #020108     | Same as ink: body copy … |
| ink-subtle   | #808083     | Grey text: the second h… |
| inverse-ink  | #FFFFFF     | Text on dark (198 uses)  |
| inverse-ink… | #FFFFFF 70% | Secondary text on dark   |
| inverse-ink… | #FFFFFF 40% | Secondary text on dark   |

## Typography

- display-hero: Switzer 248px / 500
- display-xl: Switzer 110px / 500
- display-lg: Switzer 96px / 600
- display-price: Switzer 96px / 600

{
  "$description": "Fabrik design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#F65600",
      "$description": "Every main button, the Let's Talk pill, the service cards (33 fills)"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#F65600"
    },
    "secondary": {
      "$type": "color",
      "$value": "#020108",
      "$description": "The dark pill button (Our Work)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "accent": {
      "$type": "color",
      "$value": "#F65600",
      "$description": "Script words, + list markers, the dot before • SERVICES, the testimonial progress ring"
    },
    "canvas": {
      "$type": "color",
      "$value": "#F5F5F5",
      "$description": "Page background (whitesmoke) and pills or tiles that sit inside white panels"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "White panels, the hero card, testimonial and plan cards"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#E9E9E9",
      "$description": "The opened menu panel (with 30px blur)"

/* Fabrik 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: #F65600;
  --color-on-primary: #FFFFFF;
  --color-primary-hover: #F65600;
  --color-secondary: #020108;
  --color-on-secondary: #FFFFFF;
  --color-accent: #F65600;
  --color-canvas: #F5F5F5;
  --color-surface-1: #FFFFFF;
  --color-surface-2: #E9E9E9;
  --color-surface-3: #F0F0F0;
  --color-ink: #020108;
  --color-ink-muted: #020108;
  --color-ink-subtle: #808083;
  --color-line: #0201081F;
  --color-inverse-canvas: #020108;
  --color-inverse-surface: #383436;
  --color-inverse-surface-2: #333333;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFFB3;
  --color-inverse-ink-faint: #FFFFFF66;
  --color-inverse-line: #FFFFFF26;
  --color-glass: #FFFFFF4D;
  --color-glass-dark: #FFFFFF1A;
  --color-field-placeholder: #02010866;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Switzer", "Inter", sans-serif;
  --font-switzer: "Switzer", "Inter", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-ibm-plex-mono: "IBM Plex Mono", monospace;
  --font-the-patience: "The Patience", "Caveat", cursive;
  --font-fragment-mono: "Fragment Mono", monospace;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 248px;
  --text-display-hero--line-height: 0.8;
  --text-display-hero--letter-spacing: -12px;
  --text-display-hero--font-weight: 500;
  --text-display-xl: 110px;

/* Fabrik 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: #F65600; /* Every main button, the Let's Talk pill, the service cards (33 fills) */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-primary-hover: #F65600;
  --color-secondary: #020108; /* The dark pill button (Our Work) */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-accent: #F65600; /* Script words, + list markers, the dot before • SERVICES, the testimonial progress ring */
  --color-canvas: #F5F5F5; /* Page background (whitesmoke) and pills or tiles that sit inside white panels */
  --color-surface-1: #FFFFFF; /* White panels, the hero card, testimonial and plan cards */
  --color-surface-2: #E9E9E9; /* The opened menu panel (with 30px blur) */
  --color-surface-3: #F0F0F0; /* Light fills */
  --color-ink: #020108; /* Headlines and text on light (142 uses) */
  --color-ink-muted: #020108; /* Same as ink: body copy on light panels is set in full ink */
  --color-ink-subtle: #808083; /* Grey text: the second half of leads, service pills, the ™, logo-tile labels (107 uses) */
  --color-line: #0201081F; /* Dividers on light panels */
  --color-inverse-canvas: #020108; /* Dark panels: services, the work video grid, the dark plan card, the nav pill */
  --color-inverse-surface: #383436; /* The progress circle and the menu button inside the nav pill */
  --color-inverse-surface-2: #333333; /* With inverse-surface: The progress circle and the menu button inside the nav pill */
  --color-inverse-ink: #FFFFFF; /* Text on dark (198 uses) */
  --color-inverse-ink-muted: #FFFFFFB3; /* Secondary text on dark */
  --color-inverse-ink-faint: #FFFFFF66; /* Secondary text on dark */
  --color-inverse-line: #FFFFFF26; /* The rule above the metric grid */
  --color-glass: #FFFFFF4D; /* Frosted chips; metric cards (with a #FFFFFF38 border) */
  --color-glass-dark: #FFFFFF1A; /* With glass: Frosted chips; metric cards (with a #FFFFFF38 border) */
  --color-field-placeholder: #02010866; /* Input placeholder */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-switzer: "Switzer", "Inter", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-ibm-plex-mono: "IBM Plex Mono", monospace;
  --font-the-patience: "The Patience", "Caveat", cursive;
  --font-fragment-mono: "Fragment Mono", monospace;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 248px;
  --text-display-hero-font: var(--font-switzer);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 0.8;
  --text-display-hero-tracking: -12px;
  --text-display-xl: 110px;
  --text-display-xl-font: var(--font-switzer);

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

Free

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

Switzer · display-hero

Switzer · headline-lg

Switzer · title-lg

Switzer · body-lg

Switzer · label

IBM Plex Mono · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Fabrik style

More design systems like this

Oko

Nord

Fitex

Katix

Bring any of them to your AI tool