Brand guide · v2

Ink on paper, and one red seal.

The design system behind this site. Every colour, size and duration below is read from brand/tokens.css when the page is built, and every contrast ratio is measured here rather than quoted — so this document cannot quietly fall out of step with the site it describes.

The story

Sumi-e, not minimalism.

Traditional Japanese ink painting is three things: white paper, black sumi ink, and one red hanko stamp pressed at the end. That is the whole system, and it suits a signature-led identity, because a signature is a brush stroke and a personal seal at once.

It sits adjacent to wabi-sabi rather than inside it. The two agree on negative space, asymmetry, restraint and natural imperfection, and we follow both there. They part on colour: wabi-sabi is earth-derived and desaturated, and a saturated red would break it. Sumi-e permits exactly one, used sparingly.

The productive tension is that sumi-e wants emptiness while a firm deciding who to trust wants evidence. The resolution runs through every page: the opening is sparse and considered, and the sections behind it carry the proof. Restraint at the front, substance behind it.

Positioning & voice

An experienced operator, not a salesperson.

Digital marketing specialist for law firms. Marketing judgment leads; the engineering underneath is the reason to believe it, never the headline. Audience decides the order: to a law firm, AI is how the work happens and never the product. To an agency, the engineering is the product, because it is the thing they cannot hire.

  • Direct

    Say what you believe, without padding.

  • Experienced

    Authority from depth and clarity, not exaggeration.

  • Analytical

    Diagnose first. Recommend second.

  • Hands-on

    Not a presentation and a disappearance.

  • Sceptical

    Question vanity metrics, hype and agency theatre.

  • Practical

    The question is always: does this help the firm?

Sounds like this

If your SEO agency cannot explain what they did last month, you have a problem.
AI isn’t a marketing strategy. It’s a tool. The strategy still has to make sense.

Never this

Your agency is stealing your money.

Direct is not hostile, and the brand is not anti-agency. Avoid corporate, motivational, hype-driven and buzzword-heavy registers — and avoid sounding machine-written: no em-dash cadence, no “it’s not just X, it’s Y”.

Colour

Two grounds, one ramp, one seal.

The ground is never pure white, and the near-black is blue-black rather than neutral grey — real sumi ink has a cool cast, and the whole ramp inherits it. That single bias is why the neutrals read as chosen rather than inherited.

Grounds

--ca-paper

Page ground. Washi-toned, never pure white.

Light
#F6F5F2
Dark
#111318
--ca-paper-2

Raised surface: panels, form fields, quiet cards.

Light
#EFEEEA
Dark
#17181D
--ca-paper-3

Banded section, for alternating rhythm.

Light
#EAE8E3
Dark
#1E2026
--ca-rule

Hairlines and borders. The only separator we use.

Light
#DFDDD7
Dark
#2A2C33

Ink ramp

--ca-ink

Headings and primary. Blue-black, not neutral grey.

Light
#111318
Dark
#F1F0EC
On ground
17.04:1 / 16.29:1
--ca-ink-2

Body text, and any copy on a tinted surface.

Light
#3D3F47
Dark
#C2C1BD
On ground
9.63:1 / 10.31:1
--ca-ink-3

Secondary text — on the base ground only.

Light
#6E7078
Dark
#8C8D93
On ground
4.53:1 / 5.62:1
--ca-ink-4

Decorative and disabled only. Never meaningful text.

Light
#9A9CA3
Dark
#5E606A
On ground
2.52:1 / 2.97:1

Seal

--ca-seal

Red TEXT and marks. Lifts on dark so it doesn't muddy.

Light
#D0342C
Dark
#E8564A
On ground
4.58:1 / 5.19:1
--ca-seal-solid

Red FILLED surfaces. Pinned in both themes.

Light
#D0342C
Dark
#D0342C
On ground
4.58:1 / 3.72:1

Ratios are computed at build time against each theme’s own ground. --ca-ink-4 is decorative and disabled use only — the number above is exactly why it must never carry meaningful text. And --ca-ink-3 is rated against the base ground; on a tinted band it falls below the threshold, so body copy there uses --ca-ink-2.

The seal rule

Red is a seal, not a colour.

Red always has a job. Only one element in a view may compete to be it. If two things are fighting to be the red thing, one of them is wrong — and that single discipline is what keeps this reading as Japanese minimalism rather than a startup page with a red button.

Permitted

  • The seal mark and logo lozenge
  • Primary CTAs and filled numbered marks, in --ca-seal-solid
  • The brush underline, on one focal phrase per view
  • Section eyebrows on dark grounds, and the eyebrow rule anywhere
  • A single active state, and hairline accents

Not permitted

  • Headlines or body copy
  • Large filled bands or page backgrounds
  • Two elements competing to be the red in one view
  • Small text on a tinted light ground
  • A filled surface painted in --ca-seal rather than the solid

Type

Three faces, one 1.333 scale.

Fraunces for display and headings, Inter for body and UI, JetBrains Mono for eyebrows and meta. Wide intervals suit sparse layouts. Running text caps at 62ch, and headings balance.

--ca-s8 Display · serif · 4.209rem

Marketing judgment first

--ca-s7 Page title · serif · 3.157rem

Marketing judgment first

--ca-s6 Section heading · serif · 2.369rem

Marketing judgment first

--ca-s5 Sub-heading · serif · 1.777rem

Marketing judgment first

--ca-s4 Lede, pull-quote · sans · 1.333rem

Marketing judgment first

--ca-s3 Body · sans · 1rem

Marketing judgment first

--ca-s2 Small, captions, UI · sans · 0.875rem

Marketing judgment first

--ca-s1 Eyebrow, meta, date · mono · 0.75rem

Marketing judgment first

Form, motion & imagery

The rules that do the quiet work.

Form

Near-square 2px radius — nothing is rounded. Separation is always a hairline rule, never a shadow: there is no elevation anywhere in this system. Placement is asymmetric and off-grid; centring everything is the fastest way to make it look like a template.

Motion

Slow, and never asking to be watched. Nothing bounces, pulses or loops. The house reveal is a soft fade with a slight rise, and reduced motion is always honoured.

  • --ca-dur-quick 180ms
  • --ca-dur-base 280ms
  • --ca-dur-slow 620ms
  • --ca-dur-ink 1500ms

Imagery

Generated imagery is fine for texture, environment and project visuals. Never for portraits — on a site selling AI expertise, a detectably synthetic photo of the person is the one credibility hit that is hard to recover from. Portraits are real photography, graded to the palette.

Avoid: glowing circuitry, neural-network motifs, holographic UI, saturated gradients, lens flares, glossy chrome, high-key studio lighting, symmetrical centred compositions, or more than one accent colour.

In one table

Do, and don’t.

One red element per view

Two things competing to be the red

Seal-filled CTAs in --ca-seal-solid

Filled red using --ca-seal

Washi ground

Pure #FFFFFF

Near-square radius, 2px

Rounded cards

Asymmetric, off-grid placement

Centring everything

Hairline rules for separation

Drop shadows and elevation

Real photography for portraits

Generated portraits

Reuse the tokens and shared classes

One-off styles and new hex values

Source of truth: brand/tokens.css for values, brand/BRAND.md for the reasoning. This page is generated from the first of those. If something here disagrees with the site, the tokens win.