jb-website/docs/design-system/SKILL.md

name	description	user-invocable
josh-bairstow-design	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.	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.