Josh Bairstow — Brand System

A quiet-luxury personal brand system for joshbairstow.com. Warm browns and ink; contemporary Nordic, "modern James Bond"; built on restraint, with a contained street-art / calligraffiti "hand" that surfaces as an accent so returning visitors notice craft the first visit never gave away.

The governing idea. There is one base aesthetic and one accent, and they are not equal partners. Base (~90% of the surface): quiet luxury — muted warm-brown inks, generous negative space, chiaroscuro, precise typography, near-silent texture. Accent (contained, occasional): a gestural ink stroke / signature mark on dividers, hover states, transitions and the watermark only. It is the signature in the corner of the painting, never the painting.

Litmus test for every decision: Would a visitor barely register this on visit one, but feel a small delight noticing it on visit three? Too loud on visit one → cut it. Invisible forever → not worth building.

Sources

This system was built from a written brand & styling brief, not from an existing codebase or Figma file. There is no upstream design source to link. All palette hex, type pairings, marks, and templates in this folder are proposals authored against the brief and are meant to be tuned with the owner.

Context — what this brand is

Josh Bairstow is an individual: software engineer, runner/marathoner, ocean person (freediving / surfing, Manly + WA roots), coffee, AFL — and, centrally to the aesthetic, a follower of street art / calligraffiti (123Klan lineage), manga and typography. The interests inform flavour, not content. Only the art/design interest directly shapes the look (the accent layer + the signature hand). Everything else stays as faint, optional nods on individual subdomain pages later — never literal motifs in the core system.

The site is a launchpad. Home is a minimal hub that links out to a growing, uneven set of subdomains:

Subdomain	Purpose	Status
`blog`	Written content — home features its latest post as one line	live
`signage`	Chalk-on-easel signage side hustle (mechanical jotter)	side-project
`keycaps`	Custom keycaps for mechanical keyboards	side-project
`code`	Personal & public software experiments and utilities	live
`art`	Generative and physical art display	live
`social`	Links out — no presence yet	coming online later

The navigation pattern must read as an index (not a button farm), tolerate a growing/uneven number of items, and let a "not yet live" item exist without looking broken.

Content fundamentals — how copy is written

The voice is editorial, sparse, and confident — a gallery wall label, not a marketing site. Restraint in words mirrors restraint in the visuals.

Person: First person, understated ("I make things." / "Currently: running, reading, shipping."). Never hype-y "we"-speak; this is one person.
Casing: Sentence case for prose. Small caps / uppercase tracking for eyebrows, labels and the subdomain index (e.g. BLOG, CODE, ART). The wordmark is set in the display serif, title-styled.
Length: Short. A latest-writing line is one line — title + a hairline link, no panel, no thumbnail. Bait, not a billboard.
Punctuation: The em-dash carries rhythm — used as a considered pause. True small caps and old-style figures are deliberate "visit-three" details.
Emoji: None. Not part of the brand. No exclamation-heavy energy.
Tone examples:
- Eyebrow: SELECTED WRITING
- Latest line: Notes on warm light and cold water — Mar 2026 →
- Subdomain index item: CODE — experiments & small tools
- Coming-soon item: SOCIAL — soon (quiet, not "🚧 Under construction")
- Footer: © Josh Bairstow — Sydney

What to avoid in copy: exclamation marks, growth-marketing verbs ("Unlock", "Supercharge"), feature lists, anything that shouts. If a line doesn't pass the visit-one/visit-three test, cut it.

Visual foundations

Color. Warm browns + cream, ink-forward, muted — tobacco, sepia, bone, espresso. The whole system rides a single warm tonal ramp (--bone-50 → --ink-900) plus one muted ochre accent used rarely. Chiaroscuro is achieved through value, not cool grey — shadows stay warm. No more than three tones at once on any view. Saturated color is essentially banned in chrome/navigation; if color appears, it's a deliberate, rare event. See colors_and_type.css for the full ramp + roles.

Typography. Editorial precision carries most of the "quiet luxury."

Display / name — Bodoni Moda. High-contrast didone; fashion-editorial, "modern Bond." Used large, sparing, confident. (Optical-size axis on; tight negative tracking at display sizes.)
Body / UI — Hanken Grotesk. Clean humanist grotesque, generous line-height (1.62), comfortable measure (~66ch). Old-style figures enabled.
Mono — JetBrains Mono. Reserved for the code subdomain nod / metadata.
The accent marks — assets/accent-*.svg. Simple, crisp geometric glyphs (ring-and-dots, a pipe cluster, a dot row, concentric rings) sprinkled with loose, non-rigid placement throughout a view. Quiet but present — less formal than the type, never a brush or a blob. Never a body typeface.
Visit-three type details: true small caps (--feat-smallcaps), old-style figures (--feat-oldstyle), refined wordmark kerning, em-dash rhythm.

Default theme is the dark / ink ground (--ground-dark #17130E) — deep, warm, moody ("modern Bond"), light bone text. The bone ground is the alternate, not the default. Same ramp, same rules either way.

Backgrounds & texture (greebling). Grounds are warm (ink or bone), never flat. Fine, near-invisible surface detail rewards close/repeat inspection — film grain plus simple, crisp accent marks (rings, dots, pipes) placed with loose, non-rigid positioning throughout the view. There is no repeating/tiled pattern — the marks are scattered and informal, not a fashion-house tessellation, and not brushy blobs. Hard guardrails (enforced): texture renders at 3–8% opacity, watermarks at 4–10%; greebling sits 2–6% luminance from its background; no hard edges in the base layer — texture bleeds, it doesn't outline. The delight version lifts on interaction (e.g. a pattern 4% → 8% on hover). Movement is felt, not seen. Apply to: large empty grounds, dividers, card/panel backgrounds, footer. Keep greebling out of text areas — legibility wins. Assets: texture-grain.svg, accent-ringdots.svg, accent-pipes.svg, accent-dots.svg, accent-concentric.svg (sprinkled, never tiled).

Imagery. Strong directional light, deep warm shadow — the black-and-white architecture/fashion/automotive Instagram aesthetic, but warm-toned (sepia / duotone toward espresso, not cold). Images are clipped to a rounded, asymmetric cut-out (--radius-cutout — one big soft corner), never a plain rectangle, and may carry the rings watermark per the opacity rules.

Motion. Slow, eased, short-travel — nothing bouncy or fast. Transitions 200–400ms with generous easing (--ease-out). One signature motion moment max per view. Examples: the greebling lift on hover, a hairline that draws in along a divider, the ink stroke settling. Respect prefers-reduced-motion — degrade to static (tokens collapse to 0ms).

Interaction states.

Hover: texture/watermark lifts (4%→8%); a hairline draws/extends; link gets a thin ochre tick or underline that grows from the start. No color floods.
Press: a small value shift (text → --ink-900, surface → --bone-200); a ~1px nudge, never a bounce or scale-pop.
Focus: warm 2px ochre outline at low opacity, offset — visible but quiet.

Borders, radii, elevation. Corners barely soften (--radius-sm 4px to --radius-lg 14px); much of the chrome is square-edged with hairline rules. Shadows are warm (espresso-tinted, low): --shadow-1/2/3. Cards are bone panels with a hairline + a faint greeble, not heavy drop-shadow boxes. Avoid rounded-corner + colored-left-border cards entirely.

Layout. Negative space is a feature. Editorial grid, generous margins, a narrow measure for prose. The home page fuses its three jobs (hero + latest-writing line + subdomain index) into one composition rather than stacking three sections.

Iconography

This brand is near-iconless by design — quiet luxury favors type and space over UI furniture. The few marks that exist are brand glyphs, not a UI icon set:

The brand marks (assets/mark-rings.svg, accent-ringdots.svg, accent-pipes.svg, accent-dots.svg, accent-concentric.svg) — authored for this system; see § Brand marks below. None are initials; all are rings, circles, dots and pipes.
Affordances (links, "latest" line, nav) use typographic cues: a trailing → (U+2192), a hairline underline that grows on hover, a thin ochre tick. No filled UI icons, no icon font in the base brand.
Emoji / unicode: emoji are not used. The em-dash (—), arrow (→), and middot (·) are the only unicode "icons", used sparingly as typographic glue.
If a subdomain genuinely needs a UI icon set (e.g. the code/tools pages), use Lucide (https://lucide.dev) via CDN — 1.5px stroke, rounded caps, set in --fg-2 — as the closest match to the system's thin, warm, unobtrusive line language. This is a documented substitution, not part of the core brand. Keep icons out of the home page and marketing surfaces.

Brand marks (not locked)

No initials. The watermark is a rings-and-circles constellation in the same rounded language as the cut-out — circles of varied size at varied heights, not a rigid row. The accents are simple geometric marks (rings, dots, pipes) sprinkled with loose placement at a visit-three whisper. Three watermark constellations are offered (not locked); the share template lets you switch live.

Orbit (mark-rings.svg) — primary watermark. A larger open ring with small circles orbiting at varied radii and heights (off the shared midline).
Drift (mark-rings-drift.svg) / Cascade (mark-rings-cascade.svg) — alternates: a loose ring-plus-satellites scatter, and graduated descending circles anchored by a ring. All three are constellations, not a straight row.
Concentric (accent-concentric.svg) — two concentric rings + a center dot.
Rounded cut-out — imagery is clipped with --radius-cutout (6px 92px 6px 6px: one big soft corner), never a plain rectangle.
Accent marks — accent-ringdots.svg (· ○ ·), accent-pipes.svg (a small pipe cluster), accent-dots.svg (a dot row). Crisp shapes, loose/informal placement, kept at a true visit-three whisper (~10–18% in a muted tone) so they read as craft, not grid-fill.

Index — what's in this folder

Path	What it is
`colors_and_type.css`	Start here. Color ramp, semantic roles, type families + scale, greebling/motion/spacing/elevation tokens, semantic type classes.
`assets/mark-rings.svg`	Primary watermark — "Orbit" ring constellation.
`assets/mark-rings-drift.svg`	Alternate watermark — "Drift".
`assets/mark-rings-cascade.svg`	Alternate watermark — "Cascade".
`assets/accent-concentric.svg`	Concentric-rings accent / alternate watermark.
`assets/accent-ringdots.svg`	Accent mark — ring with flanking dots.
`assets/accent-pipes.svg`	Accent mark — pipe cluster.
`assets/accent-dots.svg`	Accent mark — dot row.
`assets/texture-grain.svg`	Warm film-grain greebling tile.
`preview/`	Design-system cards (color, type, texture, marks, components) shown in the Design System tab.
`ui_kits/home/`	UI kit — the home page: fused hero + latest-writing line + subdomain index, with greebling in situ.
`Posted Graphic.html`	Reusable share/post template — image clipped to the cut-out + watermark + type system. Drop a photo into the slot. (At project root so the image-slot's drop persists.)
`templates/image-slot.js`	Drag-and-drop image component used by the posted-graphic template.
`SKILL.md`	Agent-Skill manifest for using this system in Claude Code / as a downloadable skill.

Caveats

Fonts are loaded from Google Fonts CDN, not bundled into fonts/. Bodoni Moda + Hanken Grotesk + JetBrains Mono are all Google-hosted. If you need an offline/self-hosted build, drop the .woff2 files into fonts/ and swap the @import for @font-face. (No font substitution was needed — these are the intended families, not stand-ins.)
The brand marks are authored proposals. Per the brief, the watermark is deliberately not locked — the rings glyph is my recommended primary; pick it or the concentric variant (or commission a refined draw) with the owner.

13 KiB Raw Permalink Blame History Unescape Escape