initial commit

docs/design-system/SKILL.md

@@ -0,0 +1,59 @@
+---
+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.