Quirky Design System

Get DESIGN.md Download View template Works with

Quirky website template preview detail 2

Quirky website template preview detail 3

Quirky looks like a typewritten poster on manila paper. A warm burlywood canvas (#ECC886) carries near-black IBM Plex Mono, all in capitals, from a 120px hero down to 14px nav numbers. Stacks of black rules that get thicker as they go down act as dividers and decoration, and dark #151414 cards and bands flip the two colours. Photography is warm, grainy and cinematic.

Four signatures make it recognisable:

Stepped rules. Groups of horizontal black lines of increasing weight: four under the hero (about 2px, 4px, 6px and 10px), two under each section title (thin then thick), three on project panels with the last one shortened to make room for a tag (ART DIRECTION, DESIGN).
Monospace everything, all caps. One family, IBM Plex Mono weight 500, text-transform: uppercase on the body, no tracking except the 2px on nav numbers.
Numbered nav. 01 ABOUT, 02 WORK, 03 JOURNAL, 04 CONTACT, each number rotated −90° and set beside an underlined label.
Half-and-half project rows. Each project is a full-width row: a full-bleed photo on one half and a burlywood panel on the other, alternating sides.

The hero is sticky, so the next sections slide up over it.

Colors

Surfaces

canvas#ECC886

Page background (--burlywood)

surface-1#ECC886

Quirky has no raised surfaces; panels are the canvas framed by rules

inverse-canvas#151414

Expertise cards, the testimonials band and its text

field#ECC886

Inputs are transparent on the canvas

Ink

on-primary#ECC886

Text on primary

ink#151414

All text, rules, icons (--black)

ink-muted#151414

Body text is full ink; there is no grey text tone

inverse-ink#ECC886

Text on inverse-canvas

on-media#151414

Action

primary#151414

The only filled button, the contact form's Send Message

primary-hover#151414

Lines & effects

line#151414

The stepped rules and the 2px footer column lines

line-faint#151414 · 35%

The resting 1px underline under text links (.button-line-first)

inverse-line#ECC886

Rules and the 2px row borders inside the dark band

Typography

IBM Plex Mono · display-hero

The quick brown fox jumps

VIBRANT ✦ DESIGN APPROACH, centred (.hero-display). 120px · 500 · 1.20

IBM Plex Mono · headline-lg

The quick brown fox jumps

Section titles KNOW–HOW and project titles DUIS VELAT. 55px · 500 · 1.30

IBM Plex Mono · title-lg

The quick brown fox jumps

Blog titles (.blog-title, burlywood on dark). 29px · 500 · 1.30

IBM Plex Mono · quote

The quick brown fox jumps

Testimonial quotes. 24px · 500 · 1.30

IBM Plex Mono · label-nav

The quick brown fox jumps

Nav links. 19px · 500 · 1.26

IBM Plex Mono · body

The quick brown fox jumps

Paragraphs (p default). 16px · 500 · 1.30

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Breakpoints	991px, 767px and 479px, plus a min-width step at 768px

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	20px
`md`	25px
`lg`	30px
`xl`	40px
`2xl`	50px
`3xl`	80px

Layout spacing

Token	Value	Preview
`nav-y`	30px
`section`	100px

Border radius

button4px

full9999px

Motion

Text roll (nav, links)	Label copies move y 0 → −100% and back, 300ms ease
Underline grow	.button-line-overlay width 0 → 100%, 300ms ease
Scroll-in rise	y 50px → 0 with opacity 0 → 1, 500ms
Rule and image reveal	Width or height changes, 500ms ease, on scroll into view
Icon pop	scale 1 → 1.1, 100ms ease
Star and arrow rotate	Rotation, 200–400ms ease
Card colour swap	Background and text colour, 400ms ease
Blog title	opacity 1 → 0.6, 300ms
Sticky hero	The hero stays at top: 0 while the next sections scroll over it

Do’s and don’ts

Use only #ECC886 and #151414, swapping them for dark cards and bands.
Set everything in IBM Plex Mono 500, uppercase, with no tracking except 2px on nav numbers.
Divide with stacked ink rules that get heavier downward, and end a shortened rule with a tag.
Use underlined text links (1px line at 35% ink, solid line growing on hover) as the main call to action.
Build project rows as two full-bleed halves with no gap, alternating photo sides.
Keep photos square-cornered, warm and grainy.
Add shadows, rounded cards or a third UI colour.
Use filled buttons outside forms; the home page has none.
Use Playfair Display, Roboto or Ranade, which are loaded or declared but unused.
Use grey text; #8F8F8F in the CSS is overridden on the live page.
Write in lowercase or sentence case.
Use cold, bright or stock-office photos; they break the warm two-tone palette.

Example prompt

Any page in the Quirky style

Prompt

Build your page in the Quirky style. Use a #ECC886 background and #151414 for all text and lines. Set everything in IBM Plex Mono weight 500, uppercase, no letter spacing. The hero title is 120px, line height 1.2, centred, followed by four full-width black rules of increasing thickness (about 2, 4, 6 and 10px). Section titles are 55px, left-aligned, followed by a thin and a thicker rule. Paragraphs are 16px, line height 1.3. Calls to action are underlined text links (1px line at 35% black; a solid line grows across on hover in 300ms), not buttons. Use #151414 cards and bands with #ECC886 text for contrast blocks. Project rows are two full-bleed halves with no gap. Sections pad 100px vertically in a 1200px container with 5% sides. No shadows, no rounded corners except circular avatars.

# Quirky Design System

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

## Overview

Quirky looks like a typewritten poster on manila paper.
A warm burlywood canvas (#ECC886) carries near-black IBM
Plex Mono, all in capitals, from a 120px hero down to
14px nav numbers. Stacks of black rules that get thicker
as they go down act as dividers and decoration, and dark

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #ECC886     | Page background (--burl… |
| surface-1    | #ECC886     | Quirky has no raised su… |
| inverse-can… | #151414     | Expertise cards, the te… |
| field        | #ECC886     | Inputs are transparent … |
| on-primary   | #ECC886     | Text on primary          |
| ink          | #151414     | All text, rules, icons … |
| ink-muted    | #151414     | Body text is full ink; … |
| inverse-ink  | #ECC886     | Text on inverse-canvas   |
| on-media     | #151414     |                          |
| primary      | #151414     | The only filled button,… |
| primary-hov… | #151414     |                          |
| line         | #151414     | The stepped rules and t… |
| line-faint   | #151414 35% | The resting 1px underli… |
| inverse-line | #ECC886     | Rules and the 2px row b… |

## Typography

- display-hero: IBM Plex Mono 120px / 500
- headline-lg: IBM Plex Mono 55px / 500
- headline-md: IBM Plex Mono 36px / 500
- title-lg: IBM Plex Mono 29px / 500

{
  "$description": "Quirky design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#151414",
      "$description": "The only filled button, the contact form's Send Message"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#151414"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#ECC886",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#ECC886",
      "$description": "Page background (--burlywood)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#ECC886",
      "$description": "Quirky has no raised surfaces; panels are the canvas framed by rules"
    },
    "ink": {
      "$type": "color",
      "$value": "#151414",
      "$description": "All text, rules, icons (--black)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#151414",
      "$description": "Body text is full ink; there is no grey text tone"
    },
    "line": {
      "$type": "color",
      "$value": "#151414",
      "$description": "The stepped rules and the 2px footer column lines"
    },
    "line-faint": {
      "$type": "color",
      "$value": "#15141459",
      "$description": "The resting 1px underline under text links (.button-line-first)"

/* Quirky 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-button, p-lg */

@theme {
  /* Colors */
  --color-primary: #151414;
  --color-primary-hover: #151414;
  --color-on-primary: #ECC886;
  --color-canvas: #ECC886;
  --color-surface-1: #ECC886;
  --color-ink: #151414;
  --color-ink-muted: #151414;
  --color-line: #151414;
  --color-line-faint: #15141459;
  --color-inverse-canvas: #151414;
  --color-inverse-ink: #ECC886;
  --color-inverse-line: #ECC886;
  --color-field: #ECC886;
  --color-on-media: #151414;

  /* Fonts */
  --font-sans: "IBM Plex Mono", monospace;
  --font-ibm-plex-mono: "IBM Plex Mono", monospace;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 120px;
  --text-display-hero--line-height: 1.20;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 500;
  --text-headline-lg: 55px;
  --text-headline-lg--line-height: 1.30;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 500;
  --text-headline-md: 36px;
  --text-headline-md--line-height: 1.30;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 500;
  --text-title-lg: 29px;
  --text-title-lg--line-height: 1.30;
  --text-title-lg--letter-spacing: 0px;
  --text-title-lg--font-weight: 500;
  --text-quote: 24px;
  --text-quote--line-height: 1.30;
  --text-quote--letter-spacing: 0px;
  --text-quote--font-weight: 500;

/* Quirky 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: #151414; /* The only filled button, the contact form's Send Message */
  --color-primary-hover: #151414;
  --color-on-primary: #ECC886; /* Text on primary */
  --color-canvas: #ECC886; /* Page background (--burlywood) */
  --color-surface-1: #ECC886; /* Quirky has no raised surfaces; panels are the canvas framed by rules */
  --color-ink: #151414; /* All text, rules, icons (--black) */
  --color-ink-muted: #151414; /* Body text is full ink; there is no grey text tone */
  --color-line: #151414; /* The stepped rules and the 2px footer column lines */
  --color-line-faint: #15141459; /* The resting 1px underline under text links (.button-line-first) */
  --color-inverse-canvas: #151414; /* Expertise cards, the testimonials band and its text */
  --color-inverse-ink: #ECC886; /* Text on inverse-canvas */
  --color-inverse-line: #ECC886; /* Rules and the 2px row borders inside the dark band */
  --color-field: #ECC886; /* Inputs are transparent on the canvas */
  --color-on-media: #151414;

  /* Fonts */
  --font-ibm-plex-mono: "IBM Plex Mono", monospace;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 120px;
  --text-display-hero-font: var(--font-ibm-plex-mono);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.20;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 55px;
  --text-headline-lg-font: var(--font-ibm-plex-mono);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 1.30;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 36px;
  --text-headline-md-font: var(--font-ibm-plex-mono);
  --text-headline-md-weight: 500;
  --text-headline-md-line-height: 1.30;
  --text-headline-md-tracking: 0px;
  --text-title-lg: 29px;
  --text-title-lg-font: var(--font-ibm-plex-mono);
  --text-title-lg-weight: 500;
  --text-title-lg-line-height: 1.30;
  --text-title-lg-tracking: 0px;
  --text-quote: 24px;
  --text-quote-font: var(--font-ibm-plex-mono);

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

IBM Plex Mono · display-hero

IBM Plex Mono · headline-lg

IBM Plex Mono · title-lg

IBM Plex Mono · quote

IBM Plex Mono · label-nav

IBM Plex Mono · body

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Quirky style

More design systems like this

Fabrik

Oko

Nord

Fitex

Bring any of them to your AI tool