Design kit

The parts

Everything the site is made of, rendering live. Not a description of the components — the components. If something here looks wrong, it's wrong on the site too.

The rule about green

Colour

Every value was measured against the two backgrounds it can sit on, not picked by eye. The previous light theme failed WCAG AA on links (3.59:1), kickers (2.14:1) and the wish quotes (1.41:1) — which is why the quotes were unreadable. Small text needs 4.5:1.

• Accent --accent
#ff7a1f dark#9c3f06 light

  Orange as TEXT and as a border — links, kickers, hovers. Theme-aware because #ff7a1f is 2.14:1 on light, which you cannot read.

• Accent soft --accent-soft
#ffb765 dark#8a5320 light

  Secondary warm text: the wish quotes, inline code, a definition line.

• Orange --orange
#ff7a1f dark#ff7a1f light

  Orange as a SURFACE — button fills, the logo, the skip link. Same in both themes because it always has dark text on top.

• Green (text) --green-text
#6bd97d dark#1f7038 light

  The Z, live, granted — when it is text.

• Green --green
#6bd97d dark#2e9d54 light

  Green as a fill and in the mark. Never small text on light.

• Deep --deep
#0c0a07 dark#f6f1e6 light

  The page background.

• Ink 2 --ink2
#1d160f dark#eae1cf light

  Panels and cards — the harder background to pass contrast against.

• Paper --paper
#f3ecdd dark#211a11 light

  Primary text.

• Prose --prose
#d8cdb9 dark#3b342c light

  Body copy.

• Muted --muted
#9c9080 dark#6b6151 light

  Secondary text and captions. 4.6:1 on the panel.

• Line --line
#2c2218 dark#dccfb6 light

  Hairlines and card borders.

The mark and the wordmark

Wish busterZ

Full set of twenty candidates, colours and usage rules: the brand kit.

Type

Monospace means this is literally code — commands, prompts, file paths. Never decoration: setting UI labels in a code face makes a site written for non-developers look like a developer tool, which is the opposite of the point.

The icon library

56 shapes, hand-drawn on a 24×24 grid for a 2px stroke, round caps and joins, all on the same optical weight — so any two sit together without one looking bolder. They inherit currentColor. Every one ships in the media kit as a standalone SVG, emitted from this same source, so the kit cannot contain an icon the site doesn't.

Components

Buttons

Tags

• files
• a script
• no repo needed

Card

Code block, with its copy button

Every code block in rendered content gets one. The prompt is the single thing a visitor has to get out of a project page intact, and selecting thirty lines in a scrolling box on a phone is genuinely awful. It turns green on success — a granted wish.

echo "the copy button is added at runtime, to every block"

Artwork

Abstract oil paintings, generated against a fixed brief: orange dominant, green at five to eight per cent, meeting along a seam where the two fight. The ratio is the brand rule restated in paint — which is why none of them is half green. Regenerate with node scripts/art/generate.mjs; the concepts live in scripts/art/concepts.json.

Every page

All 14 of them, live. These are iframes of the real pages, not screenshots — a screenshot is a picture of the site as it was the day someone last remembered to retake it. Click any one to open it properly.