59 lines
3.6 KiB
Markdown
59 lines
3.6 KiB
Markdown
---
|
||
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.
|