Zork Design System

Get DESIGN.md Download View template Works with

Zork is a bold, high-contrast construction site. It feels like a job-site sign at night: a pure black page, charcoal cards, white uppercase headlines in General Sans and a single hi-vis yellow (#E5DE00) that marks icons, short underlines and the full-screen menu. Photography is bright and sunny (cranes against a cyan sky, workers in hard hats), so it pops hard against the black.

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

Four signatures make it recognisable:

Two floating white circles. A 70px white logo disc with a black Z, ringed by a 2px white outline 5px out, fixed top-left; an 80px white hamburger disc fixed top-right. Both stay on screen over everything.
Hi-vis yellow, used sparingly. #E5DE00 appears as small square icon tiles, a short yellow rule under each section label, and the full-screen yellow menu with huge black uppercase links. Beyond that it only fills whole blocks: the right half of the presentation hero, some feature-card media panels and full-width bands on inner pages.
Uppercase, stacked statements. Headlines are uppercase General Sans 600 and often stack short sentences: BUILD. / INVEST. / INNOVATE., WE GUIDE / LEADERS / WITH BIG / IDEAS.
Charcoal pill on black. The one button is a #1A1B1F pill with 12px uppercase tracked text, often paired with an underlined uppercase text link (VIEW ON DESIGNER + BUY ZORK TODAY).

Colors

Surfaces

canvas#000000

Page background (body)

surface-1#101013

The grey band (.section.gray) and the page-preview cards on it

surface-2#1A1B1F

Buttons and feature cards (--black-2)

surface-3#2F313A

The middle swatch in the style card; a lighter charcoal for chips

inverse-canvas#D0D2D8

Light grey media panels inside the "included" cards

field-ink#FFFFFF · 60%

Text typed into inputs

Ink

on-primary#FFFFFF

Text on primary

on-primary-hover#151619

Text on primary-hover

ink#FFFFFF

Headlines, labels, button text

ink-muted#FFFFFF · 45%

Paragraphs (p is #ffffff73), the hero lead

ink-soft#BBBBBB

Underlined uppercase text links (.read-more-link)

ink-dark#151619

Text and icons on white and yellow (--black)

on-accent#151619

Text on accent

inverse-ink#151619

Text on inverse-canvas

on-media#FFFFFF

Action

primary#1A1B1F

The charcoal pill button

primary-hover#FFFFFF · 70%

Button on hover: light grey with dark text

accent#E5DE00

Menu overlay, icon tiles, short section underlines (--yellow)

accent-line#FFC527

The underline of a text link on hover

Lines & effects

line#FFFFFF · 20%

1px borders on the page-preview cards

line-strong#FFFFFF · 40%

Blockquote left rule

line-ledge#252525

A hard 4px ledge shadow under preview cards

badge#FFFFFF

The logo and menu discs

Typography

General Sans · display-menu

The quick brown fox jumps

Overlay menu links (.navlinks, 7vw) in #151619 on yellow. 100.8px · 600 · 0.9

General Sans · headline-quote

The quick brown fox jumps

Blockquotes (28px from 767px down). 36px · 400 · 1.06

General Sans · title-lg

The quick brown fox jumps

h3 base. 24px · 600 · 1.25

General Sans · eyebrow

The quick brown fox jumps

Section labels (WHAT IS INCLUDED IN ZORK TEMPLATE, TEMPLATE OVERVIEW). 16px · 600 · 1.2 · 1px

General Sans · body-lg

The quick brown fox jumps

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

General Sans · caption

The quick brown fox jumps

Base body size. 14px · 500 · 1.43

Spacing & shape

Purpose	Value
Container	max 1200px, centred (.container); a narrower 1100px (.medium-container) for the footer
Section rhythm	.section is 100px top and bottom with 5% side padding (72px at 1440px); 80px at ≤991 and 60px at ≤479
Section label	a 16px uppercase eyebrow, then a short yellow rule (about 40px × 2px) about 15px below, then about 60px to the content
Breakpoints	991px, 767px and 479px (max-width), plus a min-width 768px step

Spacing scale

Token	Value	Preview
`hair`	2px
`xs`	10px
`sm`	15px
`md`	20px
`lg`	30px
`xl`	40px
`2xl`	67px
`3xl`	100px

Layout spacing

Token	Value	Preview
`badge-inset`	30px
`column-gap`	30px
`section-side`	72px
`section`	100px

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-1

Level 3surface-2

Level 4surface-3

Motion

Scroll-in reveal	opacity 0 → 1 and y 30px → 0, 500ms outExpo
Page-load fade	opacity 0 → 1, 1000ms outQuart
Mouse parallax	Images follow the cursor by ±5px on x and y, 500ms
Scroll parallax	Elements drift y −100px ↔ 100px and −50px ↔ 50px while in view
Menu open	Overlay display: flex, opacity 0 → 1 over 300ms ease; the hamburger rotates (300ms ease) into a close icon
Scale-in	scale 0 → 1, 500ms (badges and small elements)
Menu link hover	Letter spacing to 5px, 300ms
Button and link hover	Colour swap, all .3s

Do’s and don’ts

Keep the page pure black #000000 with #101013 bands and #1A1B1F cards.
Use #E5DE00 only for icon tiles, the short label underline, the full-screen menu and whole yellow blocks (hero half, full-width bands).
Set headlines and controls uppercase in General Sans 600; give labels and buttons 1px tracking.
Use the single charcoal pill (#1A1B1F, 30px radius, 48px tall) with an underlined uppercase text link beside it.
Keep the white 70px logo disc and 80px menu disc fixed in the top corners on every page.
Open each section with a 16px uppercase label and a short yellow rule instead of a large title.
Put body text in #FFFFFF73 below 17px; at about 4.4:1 on black it is already at the edge of readable.
Add the unused #FF4D00 orange or red variables, or any second accent.
Use soft glows or blurred shadows on cards; use the hard 0 4px 0 #252525 ledge or nothing.
Round images on content pages; only cards (10px), pills (30px) and the discs are rounded.
Set headlines in sentence case or paragraphs in uppercase.
Animate longer than 500ms except the 1000ms page-load fade.

Example prompt

Any page in the Zork style

Prompt

Build your page in the Zork construction style. Use a pure black #000000 page with alternating #101013 bands, 100px vertical padding, 5% side padding and a 1200px container. Fix a 70px white circular logo badge 30px from the top-left and an 80px white circular hamburger 30px from the top-right; the menu opens a full-screen #E5DE00 overlay with black uppercase links at 7vw, weight 600, line height 0.9. Typeface: General Sans. Headlines are uppercase weight 600 (hero about 79px, line height 1.2, 1px tracking; page titles 38–50px), often stacked short statements with full stops. Paragraphs are 17px weight 500, line height 1.3, white at 45%. Open each section with a 16px uppercase label (1px tracking) and a short 2px yellow underline. Buttons are #1A1B1F pills (30px radius, 48px tall, padding 17px 30px) with 12px uppercase white text and 1px tracking, turning white-70% with #151619 text on hover over 300ms. Text links are 13px uppercase #BBBBBB with a 1px underline, yellow on hover. Cards are #1A1B1F or #101013 with a 10px radius, a 1px white-20% border and a hard 0 4px 0 #252525 ledge. Use yellow square icon tiles with black construction pictograms and bright, sunny construction photography. Motion: fade up 30px over 500ms outExpo on scroll.

# Zork Design System

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

## Overview

Zork is a bold, high-contrast construction site. It
feels like a job-site sign at night: a pure black page,
charcoal cards, white uppercase headlines in General
Sans and a single hi-vis yellow (#E5DE00) that marks
icons, short underlines and the full-screen menu.

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Page background (body)   |
| surface-1    | #101013     | The grey band (.section… |
| surface-2    | #1A1B1F     | Buttons and feature car… |
| surface-3    | #2F313A     | The middle swatch in th… |
| inverse-can… | #D0D2D8     | Light grey media panels… |
| field        | #000000 0%  |                          |
| field-ink    | #FFFFFF 60% | Text typed into inputs   |
| on-primary   | #FFFFFF     | Text on primary          |
| on-primary-… | #151619     | Text on primary-hover    |
| ink          | #FFFFFF     | Headlines, labels, butt… |
| ink-muted    | #FFFFFF 45% | Paragraphs (p is #fffff… |
| ink-soft     | #BBBBBB     | Underlined uppercase te… |
| ink-dark     | #151619     | Text and icons on white… |
| on-accent    | #151619     | Text on accent           |

## Typography

- display-menu: General Sans 100.8px / 600
- display-hero: General Sans 79.2px / 600
- headline-quote: General Sans 36px / 400
- headline-lg: General Sans 50px / 600

{
  "$description": "Zork design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#1A1B1F",
      "$description": "The charcoal pill button"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFFFFFB3",
      "$description": "Button on hover: light grey with 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": "#000000",
      "$description": "Page background (body)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#101013",
      "$description": "The grey band (.section.gray) and the page-preview cards on it"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#1A1B1F",
      "$description": "Buttons and feature cards (--black-2)"
    },
    "surface-3": {
      "$type": "color",
      "$value": "#2F313A",
      "$description": "The middle swatch in the style card; a lighter charcoal for chips"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",

/* Zork 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: #1A1B1F;
  --color-primary-hover: #FFFFFFB3;
  --color-on-primary: #FFFFFF;
  --color-on-primary-hover: #151619;
  --color-canvas: #000000;
  --color-surface-1: #101013;
  --color-surface-2: #1A1B1F;
  --color-surface-3: #2F313A;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFF73;
  --color-ink-soft: #BBBBBB;
  --color-ink-dark: #151619;
  --color-line: #FFFFFF33;
  --color-line-strong: #FFFFFF66;
  --color-line-ledge: #252525;
  --color-accent: #E5DE00;
  --color-on-accent: #151619;
  --color-accent-line: #FFC527;
  --color-inverse-canvas: #D0D2D8;
  --color-inverse-ink: #151619;
  --color-badge: #FFFFFF;
  --color-field: #00000000;
  --color-field-ink: #FFFFFF99;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "General Sans", "Inter", sans-serif;
  --font-general-sans: "General Sans", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-menu: 100.8px;
  --text-display-menu--line-height: 0.9;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 600;
  --text-display-hero: 79.2px;
  --text-display-hero--line-height: 1.2;
  --text-display-hero--letter-spacing: 1px;
  --text-display-hero--font-weight: 600;
  --text-headline-quote: 36px;
  --text-headline-quote--line-height: 1.06;

/* Zork 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: #1A1B1F; /* The charcoal pill button */
  --color-primary-hover: #FFFFFFB3; /* Button on hover: light grey with dark text */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-on-primary-hover: #151619; /* Text on primary-hover */
  --color-canvas: #000000; /* Page background (body) */
  --color-surface-1: #101013; /* The grey band (.section.gray) and the page-preview cards on it */
  --color-surface-2: #1A1B1F; /* Buttons and feature cards (--black-2) */
  --color-surface-3: #2F313A; /* The middle swatch in the style card; a lighter charcoal for chips */
  --color-ink: #FFFFFF; /* Headlines, labels, button text */
  --color-ink-muted: #FFFFFF73; /* Paragraphs (p is #ffffff73), the hero lead */
  --color-ink-soft: #BBBBBB; /* Underlined uppercase text links (.read-more-link) */
  --color-ink-dark: #151619; /* Text and icons on white and yellow (--black) */
  --color-line: #FFFFFF33; /* 1px borders on the page-preview cards */
  --color-line-strong: #FFFFFF66; /* Blockquote left rule */
  --color-line-ledge: #252525; /* A hard 4px ledge shadow under preview cards */
  --color-accent: #E5DE00; /* Menu overlay, icon tiles, short section underlines (--yellow) */
  --color-on-accent: #151619; /* Text on accent */
  --color-accent-line: #FFC527; /* The underline of a text link on hover */
  --color-inverse-canvas: #D0D2D8; /* Light grey media panels inside the "included" cards */
  --color-inverse-ink: #151619; /* Text on inverse-canvas */
  --color-badge: #FFFFFF; /* The logo and menu discs */
  --color-field: #00000000;
  --color-field-ink: #FFFFFF99; /* Text typed into inputs */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-general-sans: "General Sans", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-menu: 100.8px;
  --text-display-menu-font: var(--font-general-sans);
  --text-display-menu-weight: 600;
  --text-display-menu-line-height: 0.9;
  --text-display-menu-tracking: 0px;
  --text-display-hero: 79.2px;
  --text-display-hero-font: var(--font-general-sans);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 1.2;
  --text-display-hero-tracking: 1px;
  --text-headline-quote: 36px;
  --text-headline-quote-font: var(--font-general-sans);

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

Construction 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

General Sans · display-menu

General Sans · headline-quote

General Sans · title-lg

General Sans · eyebrow

General Sans · body-lg

General Sans · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Zork style

More design systems like this

Build X

Cōnstruc

Tower

LunaArc

Bring any of them to your AI tool