Fudu Design System

Get DESIGN.md Download View template Works with

Fudu is a dark, technical studio template set entirely in capitals. It feels like a design-studio spec sheet: a charcoal page, white Archivo in uppercase for every headline, link, label and even paragraph, thin white lines, and square dark-grey buttons. Colour comes only from the photography (yellow binder clips, a cobalt Neptune poster, pink backdrops). The live preview is a demo landing page: a centred all-caps headline, one BUY FUDU TODAY button, then two-column grids of page thumbnails grouped under HOME DEMO, WORK DEMO, BLOG DEMO and OTHER PAGES.

Four signatures make it recognisable:

Everything is uppercase. The base h1–h6 and p rules all set text-transform: uppercase. Nothing on the page is sentence case except the input text.
The outlined pill nav. A full-width 1px white border with a 40px radius, the round F logo tucked into the left end and five uppercase links on the right. Other nav variants (minimal, boxed grid, full screen) keep the same capitals.
Outline and solid word pairs. Hero lines pair an outlined (stroked) word with a solid one (ALWAYS / CODING, OUR WORK), or stagger words across rows separated by thin rules (DIGITAL / DESIGN / STUDIO, WE ARE / FUDÚ).
A circular cursor over projects. On project images the system cursor is hidden and a 124px circle with a 17px label follows the mouse.

Colors

Surfaces

canvas#181818

Page background (--black-2), sections and thumbnail cards

surface-1#111111

The deeper band behind the demo grid (.section.other-color)

inverse-canvas#FFFFFF

Small white pills on dark: the SHOW REEL 2023© marquee and the active cell of the boxed nav

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

Text on secondary

ink#FFFFFF

Headlines, nav links, labels, buttons

ink-muted#A1A1A1

Paragraphs (p colour, --dark-grey), always uppercase

ink-faint#6E6E6E

Input text and placeholders only

inverse-ink#181818

Text on inverse-canvas

Action

primary#313131

Filled buttons (BUY FUDU TODAY, BOOK A CALL, LAUNCH PROJECT)

primary-hover#313131

secondary#333333

The form submit (Send Message), a hair lighter than primary

Lines & effects

line#FFFFFF

The 1px nav pill border, 2px title rules, 1px link underlines, block-quote rule

tint-blue#F0F5FF

Declared in the Webflow variables; not seen on the published pages

tint-rose#FBE7E3

Declared in the Webflow variables; not seen on the published pages

Typography

Archivo · display-xl

The quick brown fox jumps

.hero-title on the homepages (WE ARE FUDÚ, DIGITAL DESIGN STUDIO). 86px · 400 · 0.95

Archivo · headline-lg

The quick brown fox jumps

Base h1 on inner pages. 46px · 500 · 0.96

Archivo · title-lg

The quick brown fox jumps

Card titles under thumbnails (HOME 1, WORK 3). 27px · 500 · 1.0

Archivo · quote

The quick brown fox jumps

Block quotes, with a 1px white left rule. 25px · 400 · 1.3

Archivo · logo

The quick brown fox jumps

The FUDÚ wordmark in text navs. 18px · 400 · 1.0 · 3px

Archivo · label-cursor

The quick brown fox jumps

The label inside the circle cursor. 17px · 500 · 1.18

Spacing & shape

Purpose	Value
Container	max 1200px, centred (.container), inside sections padded 100px 5%
Section rhythm	100px top and bottom, 80px at ≤991, 50px at ≤767
Breakpoints	991px, 767px and 479px, plus min-width: 768px and min-width: 1280px rules

Spacing scale

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

Layout spacing

Token	Value	Preview
`nav-y`	20px
`section-demo-top`	50px
`section`	100px

Border radius

pill40px

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

Text reveal	y 20% → 0% and skewX 30° → 0° with opacity 0 → 1, 400ms outCubic (set up over 500ms)
Text roll on hover	Nav and button labels move y 0 → −100% while a copy follows, 300ms ease
Line grow	Width changes on title rules and link underlines, 500ms (also 300ms and 200ms ease)
Cursor circle	Follows the mouse over projects; scales 0 → 1 in 500ms on enter
Parallax	Images move y ±100px (up to −220px) while scrolling in view
Fade	opacity → 1, 300ms easeIn or ease; slow page fade 1000ms outQuart
Icon rotate	400ms ease (menu and arrow icons)
Border and background	Border change 300ms ease; background colour 500ms inOutQuart on nav states
CSS transitions	transition: all 300ms on most elements; transform 0.2s on .button-3d

Do’s and don’ts

Set every heading, link, label and paragraph in Archivo uppercase.
Keep the page #181818 with white #FFFFFF headlines and #A1A1A1 body copy.
Use the 1px white outlined pill nav (40px radius) with the round logo at the left end.
Pair an outlined display word with a solid one, or stagger display words across rows split by 1px white rules.
Use square #313131 buttons with 13px/700 labels and 1px tracking.
Put a 2px white rule under card titles and let it grow in on hover.
Replace the cursor with the 124px circle over project images.
Round buttons, inputs or photos; only the nav, tags and circles are round.
Use sentence case or a second font (the declared Switzer is not used).
Use bold display type; display stays at weight 400.
Add colour to buttons or links, or add shadows and gradients.
Use ink-faint #6E6E6E for anything but 18px input text and placeholders; it is only 3.5:1 on #181818.
Animate text longer than 500ms, except the 1000ms page fade.

Example prompt

Any page in the Fudu style

Prompt

Build your page in the Fudu style. Use a #181818 background and Archivo, with every heading, link, label and paragraph uppercase. Headlines are white, weight 400: 86px with line height 0.95 on hero pages, 60px/1.1 for centred statements. Body copy is 16px/400/1.3 in #A1A1A1. The nav is fixed: a 1200px pill with a 1px white border, 40px radius and padding 5px 40px 5px 7px, a 56px round logo at the left and 16px/500 uppercase links on the right, each rolling up to a copy on hover (300ms ease). Sections have 100px vertical padding, 5% side padding and a 1200px container; grids are 2 columns with 50px gaps or 3 columns with 40px gaps. Buttons are square #313131 blocks with white 13px/700 labels, 1px tracking, padding 16px 26px. Card titles are 27px/500 with a 2px white rule below. Pair outlined and solid display words (1px white stroke, no fill). Photos are square-cornered, bright flat-colour product shots. No shadows, no accent colour. Text reveals: y 20% and skewX 30° to 0 over 400ms outCubic.

# Fudu Design System

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

## Overview

Fudu is a dark, technical studio template set entirely
in capitals. It feels like a design-studio spec sheet: a
charcoal page, white Archivo in uppercase for every
headline, link, label and even paragraph, thin white
lines, and square dark-grey buttons. Colour comes only

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #181818     | Page background (--blac… |
| surface-1    | #111111     | The deeper band behind … |
| field        | #000000 0%  | Inputs have no fill, on… |
| inverse-can… | #FFFFFF     | Small white pills on da… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| ink          | #FFFFFF     | Headlines, nav links, l… |
| ink-muted    | #A1A1A1     | Paragraphs (p colour, -… |
| ink-faint    | #6E6E6E     | Input text and placehol… |
| inverse-ink  | #181818     | Text on inverse-canvas   |
| primary      | #313131     | Filled buttons (BUY FUD… |
| primary-hov… | #313131     |                          |
| secondary    | #333333     | The form submit (Send M… |
| line         | #FFFFFF     | The 1px nav pill border… |

## Typography

- display-xl: Archivo 86px / 400
- display-hero: Archivo 60px / 400
- headline-lg: Archivo 46px / 500
- headline-md: Archivo 36px / 500

{
  "$description": "Fudu design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#313131",
      "$description": "Filled buttons (BUY FUDU TODAY, BOOK A CALL, LAUNCH PROJECT)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#313131"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#333333",
      "$description": "The form submit (Send Message), a hair lighter than primary"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#181818",
      "$description": "Page background (--black-2), sections and thumbnail cards"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#111111",
      "$description": "The deeper band behind the demo grid (.section.other-color)"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, nav links, labels, buttons"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#A1A1A1",
      "$description": "Paragraphs (p colour, --dark-grey), always uppercase"

/* Fudu 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-pill, p-lg */

@theme {
  /* Colors */
  --color-primary: #313131;
  --color-primary-hover: #313131;
  --color-on-primary: #FFFFFF;
  --color-secondary: #333333;
  --color-on-secondary: #FFFFFF;
  --color-canvas: #181818;
  --color-surface-1: #111111;
  --color-ink: #FFFFFF;
  --color-ink-muted: #A1A1A1;
  --color-ink-faint: #6E6E6E;
  --color-line: #FFFFFF;
  --color-field: #00000000;
  --color-inverse-canvas: #FFFFFF;
  --color-inverse-ink: #181818;
  --color-tint-blue: #F0F5FF;
  --color-tint-rose: #FBE7E3;

  /* Fonts */
  --font-sans: "Archivo", sans-serif;
  --font-archivo: "Archivo", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-xl: 86px;
  --text-display-xl--line-height: 0.95;
  --text-display-xl--letter-spacing: 0px;
  --text-display-xl--font-weight: 400;
  --text-display-hero: 60px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 400;
  --text-headline-lg: 46px;
  --text-headline-lg--line-height: 0.96;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 500;
  --text-headline-md: 36px;
  --text-headline-md--line-height: 1.2;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 500;
  --text-headline-sm: 32px;
  --text-headline-sm--line-height: 1.13;

/* Fudu 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: #313131; /* Filled buttons (BUY FUDU TODAY, BOOK A CALL, LAUNCH PROJECT) */
  --color-primary-hover: #313131;
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #333333; /* The form submit (Send Message), a hair lighter than primary */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-canvas: #181818; /* Page background (--black-2), sections and thumbnail cards */
  --color-surface-1: #111111; /* The deeper band behind the demo grid (.section.other-color) */
  --color-ink: #FFFFFF; /* Headlines, nav links, labels, buttons */
  --color-ink-muted: #A1A1A1; /* Paragraphs (p colour, --dark-grey), always uppercase */
  --color-ink-faint: #6E6E6E; /* Input text and placeholders only */
  --color-line: #FFFFFF; /* The 1px nav pill border, 2px title rules, 1px link underlines, block-quote rule */
  --color-field: #00000000; /* Inputs have no fill, only a bottom line */
  --color-inverse-canvas: #FFFFFF; /* Small white pills on dark: the SHOW REEL 2023© marquee and the active cell of the boxed nav */
  --color-inverse-ink: #181818; /* Text on inverse-canvas */
  --color-tint-blue: #F0F5FF; /* Declared in the Webflow variables; not seen on the published pages */
  --color-tint-rose: #FBE7E3; /* Declared in the Webflow variables; not seen on the published pages */

  /* Fonts */
  --font-archivo: "Archivo", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-xl: 86px;
  --text-display-xl-font: var(--font-archivo);
  --text-display-xl-weight: 400;
  --text-display-xl-line-height: 0.95;
  --text-display-xl-tracking: 0px;
  --text-display-hero: 60px;
  --text-display-hero-font: var(--font-archivo);
  --text-display-hero-weight: 400;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 46px;
  --text-headline-lg-font: var(--font-archivo);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 0.96;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 36px;
  --text-headline-md-font: var(--font-archivo);
  --text-headline-md-weight: 500;
  --text-headline-md-line-height: 1.2;
  --text-headline-md-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

Archivo · display-xl

Archivo · headline-lg

Archivo · title-lg

Archivo · quote

Archivo · logo

Archivo · label-cursor

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Fudu style

More design systems like this

Valtero

Vantix

Raster

Agenci

Bring any of them to your AI tool