---
name: josh-bairstow-design
description: Use this skill to generate well-branded interfaces and assets for Josh Bairstow (joshbairstow.com), either for production or throwaway prototypes/mocks/etc. A quiet-luxury personal brand in warm browns and ink — contemporary Nordic, "modern Bond" — with a contained calligraffiti accent. Contains essential design guidelines, colors, type, fonts, signature marks, the greebling/texture spec, motion tokens, a home-page UI kit, and a posted-graphic template.
user-invocable: true
---

# Josh Bairstow — Brand System

Read **`README.md`** first — it carries the governing idea, the content
fundamentals, the full visual foundations, the iconography approach, and an
index of every file. Then explore the other files.

## The one rule to internalize
There is **one base aesthetic and one accent, and they are not equal partners.**
The **default theme is the dark / ink ground** (deep, warm, moody — "modern
Bond", light bone text; bone is the alternate). Base (~90%): quiet luxury — warm-brown inks, negative space, chiaroscuro through
*value*, precise type, near-silent texture. Accent (contained, rare): a gestural
ink stroke / signature mark on dividers, hover, transitions, and the watermark
only. Litmus test for every detail: *barely registered on visit one, a small
delight on visit three.* If it shouts on visit one, cut it.

## Foundations live in code
- `colors_and_type.css` — the warm tonal ramp, semantic color roles, type
  families (Bodoni Moda / Hanken Grotesk / JetBrains Mono) + scale, and the
  greebling / motion / spacing / elevation tokens. Import it; use the vars.
- `assets/` — the **rings & circles** watermark (`mark-rings.svg` primary,
  `accent-concentric.svg` alt), the simple **accent marks** (`accent-ringdots`,
  `accent-pipes`, `accent-dots`) sprinkled with loose placement, and
  `texture-grain.svg`. No initials; rounded, calm geometry. Imagery is clipped
  with `--radius-cutout` (one big soft corner), never a plain rectangle.
- `preview/` — design-system specimen cards (reference, not for shipping).

## Hard numbers — do not soften or skip
- **Greebling:** texture at **3–8%** opacity, watermarks at **4–10%**; sits
  **2–6% luminance** from its background; no hard edges; lifts on hover
  (e.g. 4%→8%). **Simple crisp marks (rings/dots/pipes), sprinkled with loose,
  non-rigid placement — never a tiled pattern, never brushy blobs.** Keep them
  out of text areas.
- **Color:** ≤ 3 tones per view; saturated color essentially banned in chrome;
  the ochre accent is a rare, deliberate event.
- **Motion:** 200–400ms, gentle ease, short-travel, one signature moment per
  view; respect `prefers-reduced-motion`.
- **Imagery:** clipped to the **rounded cut-out** (`--radius-cutout`, one big
  soft corner), never a plain rectangle; warm chiaroscuro (sepia/duotone toward
  espresso), never cold.

## Working patterns
- **Home / launchpad layouts** → start from `ui_kits/home/` (fused hero +
  one-line latest-writing + refined subdomain index, light/dark).
- **Share / post graphics** → start from `Posted Graphic.html` (image cut-out +
  watermark + type system; drop a photo into the slot).

## How to deliver
If creating **visual artifacts** (slides, mocks, throwaway prototypes), copy the
assets out and produce static HTML files for the user to view. If working on
**production code**, copy the assets and read the rules here to design as an
expert in this brand. If invoked with no other guidance, ask what they want to
build, ask a few focused questions, then act as the brand's designer — output
HTML artifacts or production code as the need dictates.