Fitus Design System

Get DESIGN.md Download View template Works with

Fitus is a black creative-agency template that feels like a framed gallery wall. White hairlines draw a fixed 100px rail down the left edge and a 100px bar across the top, so every page sits inside a frame. Inside it, headlines are huge but light (Rubik 400), short and punctuated: Create. / Launch. / Evaluate. The interface is black and white; colour comes only from the work photography.

Four signatures make it recognisable:

The hairline frame. A 100px-wide left rail (social icons at the bottom) and a 100px-tall top bar, both bordered with 1px white at 20%. The logo sits in the 100×100 corner square; the hamburger sits in its own bordered cell at the top right.
The circular wordmark. FITUS * AGENCY * set around a circle in the corner square. It rotates as you scroll (each screenshot shows it at a different angle).
Big light headlines with full stops. Create., Launch., Evaluate. at 144px (10vw), weight 400, line height 0.9. Section titles like Our Work follow at 70px, still weight 400.
White circles. A 130px PLAY SHOWREEL badge with circular text and a play icon, a 120px CTA circle, and a 65px UP button fixed bottom-right. All white with black text.

Fitus is a dark-only design.

Colors

Surfaces

canvas#000000

Page, hero and menu background

surface-1#111111

Measured on two dark panels; not visible in the screenshots

field#000000

inverse-canvas#FFFFFF

Showreel badge, CTA circle, UP button

Ink

on-primary#000000

Text on primary

on-secondary#FFFFFF

Text on secondary

ink#FFFFFF

Headlines, service lists, award totals, testimonial quotes

ink-muted#FFFFFF · 60%

Paragraphs (base p), the hero lead, award rows, testimonial roles

ink-subtle#FFFFFF · 50%

Section labels (What We Do, You get results, we get awards, What they think)

ink-footer#FFFFFF · 57%

Footer links

ink-link#FFFFFF · 90%

Default a colour

ink-quote#696969

.quote-text, 40px quote glyphs; display sizes only

ink-price#8A8A8A

.price-tag on pricing

inverse-ink#000000

Text on inverse-canvas

Action

primary#FFFFFF

The white square button

primary-hover#151515

Button background on hover (text turns white)

secondary#141414

The dark button (ALL WORK, form submit)

Lines & effects

line#FFFFFF · 20%

The rail and top-bar borders, award dividers, tag and form borders

line-faint#FFFFFF · 15%

Cart borders and the hero scroll-hint track

line-grid#222222

Testimonial grid cell borders

Typography

Rubik · display-hero

The quick brown fox jumps

.hero-display (font-size: 10vw): Create. 144px · 400 · 0.9

Rubik · headline-lg

The quick brown fox jumps

Section titles (Our Work). 70px · 400 · 1.0

Rubik · title-lg

The quick brown fox jumps

.blog-title. 29px · 400 · 1.2

Rubik · body-lg

The quick brown fox jumps

Paragraphs, service lists, testimonial quotes. 20px · 400 · 1.3

Rubik · caption

The quick brown fox jumps

Category text and the uppercase work captions. 16px · 400 · 1.25

Rubik · label

The quick brown fox jumps

Buttons (VIEW ONE WEBFLOW, SAY HELLO, ALL WORK). 15px · 600 · 1.4

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Section rhythm	.section is 120px top and bottom, 5% sides

Spacing scale

Token	Value	Preview
`hair`	5px
`xs`	15px
`sm`	16px
`md`	30px
`lg`	40px
`xl`	50px
`2xl`	60px
`3xl`	100px

Layout spacing

Token	Value	Preview
`section-cta`	80px
`hero-bottom`	95px
`rail`	100px
`section`	120px
`hero-top`	140px

Border radius

field3px

sm4px

form15px

tag20px

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

Fade-up on scroll	opacity 0 → 1 and y 30px → 0px, 500ms outExpo
Slow fade	opacity 0 → 1, 1000ms outQuart
Menu line	y 110% → 0%, 500ms ease, under each menu link
Logo rotation	The circular wordmark rotates with page scroll
Hamburger	Line widths change (300ms ease) and rotate into a cross (500ms)
Icon hover	scale 1 → 1.1 and back, 100ms ease
Subscribe arrow	Background position 50% → 75%, 300ms
Hover colour	Buttons and footer links, 200ms; blog title opacity to 0.53, 300ms

Do’s and don’ts

Draw the frame: a 100px left rail and a 100px top bar with 1px line (#FFFFFF at 20%) borders on canvas #000000.
Set headlines in Rubik weight 400, large, sentence case, and end hero words with a full stop.
Put a muted section-label (#FFFFFF at 50%) in the left third and the content on the right.
Use the white button-primary (4px radius, 51px tall, uppercase 15px 600) for the main action and #141414 button-secondary for the next one.
Use white circles (65, 120, 130px) for badges and round actions.
Keep paragraphs at ink-muted (#FFFFFF at 60%) and 20px.
Use bold headlines. Weight 600 is only for button labels and prices.
Round images or cards; only buttons (4px), tags (20px), the subscribe bar (15px) and circles are rounded.
Add shadows, gradients on UI, or blur.
Use the unused --red #FE0000 as an accent.
Use ink-quote #696969 or ink-price #8A8A8A below 24px; they are low contrast on black.
Leave form text at #333333; use ink.

Example prompt

Any page in the Fitus style

Prompt

Build your page in the Fitus style. Use a #000000 background and Rubik everywhere. Frame the page with a fixed 100px-wide left rail and a 100px-tall top bar, both with 1px rgba(255,255,255,0.2) borders; put a circular rotating wordmark in the 100×100 corner and a hamburger in a bordered cell at the top right. Headlines are Rubik 400, sentence case: the hero is 10vw (144px at 1440), line height 0.9, one word per line ending in a full stop; section titles 70px. Paragraphs are 20px, line height 1.3, white at 60%. Put a muted label (20px, white at 50%) in the left third of each section and the content on the right. Sections are 120px top and bottom, 5% sides, inside 1200px. The main button is white with black uppercase 15px weight 600 text, 4px radius, 51px tall, padding 15px 18px, turning #151515 with white text on hover in 200ms. Use white circles for badges and round actions. Images have no radius. Fade content up 30px in 500ms outExpo on scroll.

# Fitus Design System

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

## Overview

Fitus is a black creative-agency template that feels
like a framed gallery wall. White hairlines draw a fixed
100px rail down the left edge and a 100px bar across the
top, so every page sits inside a frame. Inside it,
headlines are huge but light (Rubik 400), short and

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Page, hero and menu bac… |
| surface-1    | #111111     | Measured on two dark pa… |
| field        | #000000     |                          |
| inverse-can… | #FFFFFF     | Showreel badge, CTA cir… |
| on-primary   | #000000     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| ink          | #FFFFFF     | Headlines, service list… |
| ink-muted    | #FFFFFF 60% | Paragraphs (base p), th… |
| ink-subtle   | #FFFFFF 50% | Section labels (What We… |
| ink-footer   | #FFFFFF 57% | Footer links             |
| ink-link     | #FFFFFF 90% | Default a colour         |
| ink-quote    | #696969     | .quote-text, 40px quote… |
| ink-price    | #8A8A8A     | .price-tag on pricing    |
| inverse-ink  | #000000     | Text on inverse-canvas   |

## Typography

- display-hero: Rubik 144px / 400
- display-cta: Rubik 130px / 400
- headline-lg: Rubik 70px / 400
- headline-menu: Rubik 55px / 400

{
  "$description": "Fitus 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 white square button"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#151515",
      "$description": "Button background on hover (text turns white)"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#141414",
      "$description": "The dark button (ALL WORK, form submit)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Page, hero and menu background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#111111",
      "$description": "Measured on two dark panels; not visible in the screenshots"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, service lists, award totals, testimonial quotes"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#FFFFFF99",

/* Fitus 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: #FFFFFF;
  --color-primary-hover: #151515;
  --color-on-primary: #000000;
  --color-secondary: #141414;
  --color-on-secondary: #FFFFFF;
  --color-canvas: #000000;
  --color-surface-1: #111111;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFF99;
  --color-ink-subtle: #FFFFFF80;
  --color-ink-footer: #FFFFFF91;
  --color-ink-link: #FFFFFFE6;
  --color-ink-quote: #696969;
  --color-ink-price: #8A8A8A;
  --color-line: #FFFFFF33;
  --color-line-faint: #FFFFFF26;
  --color-line-grid: #222222;
  --color-field: #000000;
  --color-inverse-canvas: #FFFFFF;
  --color-inverse-ink: #000000;

  /* Fonts */
  --font-sans: "Rubik", sans-serif;
  --font-rubik: "Rubik", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 144px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 400;
  --text-display-cta: 130px;
  --text-display-cta--line-height: 1.1;
  --text-display-cta--letter-spacing: 0px;
  --text-display-cta--font-weight: 400;
  --text-headline-lg: 70px;
  --text-headline-lg--line-height: 1.0;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 400;
  --text-headline-menu: 55px;
  --text-headline-menu--line-height: 1.0;

/* Fitus 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 white square button */
  --color-primary-hover: #151515; /* Button background on hover (text turns white) */
  --color-on-primary: #000000; /* Text on primary */
  --color-secondary: #141414; /* The dark button (ALL WORK, form submit) */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-canvas: #000000; /* Page, hero and menu background */
  --color-surface-1: #111111; /* Measured on two dark panels; not visible in the screenshots */
  --color-ink: #FFFFFF; /* Headlines, service lists, award totals, testimonial quotes */
  --color-ink-muted: #FFFFFF99; /* Paragraphs (base p), the hero lead, award rows, testimonial roles */
  --color-ink-subtle: #FFFFFF80; /* Section labels (What We Do, You get results, we get awards, What they think) */
  --color-ink-footer: #FFFFFF91; /* Footer links */
  --color-ink-link: #FFFFFFE6; /* Default a colour */
  --color-ink-quote: #696969; /* .quote-text, 40px quote glyphs; display sizes only */
  --color-ink-price: #8A8A8A; /* .price-tag on pricing */
  --color-line: #FFFFFF33; /* The rail and top-bar borders, award dividers, tag and form borders */
  --color-line-faint: #FFFFFF26; /* Cart borders and the hero scroll-hint track */
  --color-line-grid: #222222; /* Testimonial grid cell borders */
  --color-field: #000000;
  --color-inverse-canvas: #FFFFFF; /* Showreel badge, CTA circle, UP button */
  --color-inverse-ink: #000000; /* Text on inverse-canvas */

  /* Fonts */
  --font-rubik: "Rubik", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 144px;
  --text-display-hero-font: var(--font-rubik);
  --text-display-hero-weight: 400;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 0px;
  --text-display-cta: 130px;
  --text-display-cta-font: var(--font-rubik);
  --text-display-cta-weight: 400;
  --text-display-cta-line-height: 1.1;
  --text-display-cta-tracking: 0px;
  --text-headline-lg: 70px;
  --text-headline-lg-font: var(--font-rubik);
  --text-headline-lg-weight: 400;
  --text-headline-lg-line-height: 1.0;
  --text-headline-lg-tracking: 0px;
  --text-headline-menu: 55px;

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

Rubik · display-hero

Rubik · headline-lg

Rubik · title-lg

Rubik · body-lg

Rubik · caption

Rubik · label

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Fitus style

More design systems like this

Valtero

Vantix

Raster

Agenci

Bring any of them to your AI tool