Brand Kit · Version 2
The site-wide direction locked in the Week 2 sprint: four named blues, one gold accent, a display serif used with restraint, and a set of signature motifs — ticker, kanji rail, ghost numerals — that make the site unmistakably Zen Noggin's own.
Section 01
Week 1 shipped a brand kit built on Zen Noggin's original logo palette. In Week 2, the homepage direction pivoted to a new system built around four named Japanese blues and a single gold accent — since extended to every page in the marketing site. This kit documents that current, locked direction.
Retired — v1 logo palette
Blue, teal, orange, purple, green — pulled from the original logo marks. Read as consumer-facing, wellness-adjacent. No longer in use on the live site.
Current — Japanese Precision
Ao, ai, kon, mizu, plus gold as the single warm accent. Reads as disciplined and precise, restrained rather than decorative. This is the palette in production today.
Section 02
The three approved single-color marks, shown in the context each actually appears in — the ivory base, the dark kon ground, and the gold ticker at the top of the page.
On ivory base
primary usage · primary-blue.png
On kon ground
dark sections, footer · light-blue.png
On gold ticker
nav overlap moment · black.png
Assignment logic: primary-blue is the flagship mark, so it carries the main ivory usage. light-blue is reserved for dark grounds, since it's the only version pale enough to read against kon. black is reserved for the gold ticker, where it's the only version with enough contrast against a mid-value warm background. Confirm with Nicole before these lock as final.
Section 03
Four named blues, read left to right from deepest to palest, plus gold as the only warm color anywhere in the system. Named for what they are, not for a marketing label.
Near-black navy
#2B3050
Deep statement grounds — cover sections, footer, dark panels
Clear mid-blue
#2E62A6
Mid-value tile ground, eyebrow labels, links
Deep teal-blue
#1F5568
Second mid-value tile ground, body copy on light
Pale sky-blue
#B9D3E4
Pale tile ground, light contrast against kon
Single warm accent
#fdc872
CTAs, hairline accents, and a translucent tint in the frosted ticker — the only place gold reads as a background, and only at low opacity
Base
#eff6ff
Page background, light-mode ground
Base
#2c2c2c
Body text on light backgrounds
Section 04
A characterful display serif used only for headlines, paired with the same Archivo sans that already runs through the RFP system — so the RFP documents and the website read as one firm.
Display — headlines only
Fraunces
Body & UI — everything else
Archivo
| Role | Face / weight | Sample |
|---|---|---|
| H1 — hero headline | Fraunces 300, clamp(44–76px) | Clarity, precision. |
| H2 — section title | Fraunces 300, clamp(30–44px) | What changed, and why |
| Eyebrow / label | Archivo 700, 11px, wide tracking | Section 04 |
| Body copy | Archivo 400, 15px | Fractional financial operations, built to be owned. |
| Button / UI label | Archivo 700, 13px | Begin a conversation |
Section 05
The five recurring devices that make the site recognizable at a glance, live site-wide, not just on the homepage.
Ticker bar
Top of every page
A thin frosted-glass strip, static — no motion, no scroll. Translucent gold over a blurred backdrop with a soft white highlight along the top edge. Plain text only, no kanji: Clarity, Precision, Calm, spaced well apart with small dot dividers.
Precision · Calm · Clarity rail
Fixed vertical, right edge
精密
Seimitsu
Precision
静寂
Seijaku
Calm
明晰
Meiseki
Clarity
Three romanized Japanese terms, always in this order, always paired with their English translation directly beneath. Never shown as kanji alone.
Ghost kanji watermark
Per-page background numeral
A single oversized, low-opacity kanji character sits behind the page content — different per page, always decorative and marked aria-hidden.
Never load-bearing for meaning, purely atmospheric. Opacity stays low enough that body text always passes contrast checks over it.
Meta strip
Version / time / numbered nav
Numbered nav only where the content is genuinely sequential — the four-phase process, the site sections. Treated as a design element in gold-on-kon, not tucked away as a footnote.
Scroll cue
Bottom of hero, every page
Next page
A single pulsing gold dot with a short label. The only animated element on the page — kept quiet so it reads as a cue, not decoration.
Kanji reference
Every kanji used anywhere in the system, with its reading and its real meaning, so nothing gets used, copied, or resized without knowing what it says.
| Kanji | Reading | Meaning | Where it's used |
|---|---|---|---|
| 精密 | seimitsu | precision, exactness | Precision · Calm · Clarity rail |
| 静寂 | seijaku | stillness, silence | Precision · Calm · Clarity rail |
| 明晰 | meiseki | clarity, lucidity | Precision · Calm · Clarity rail |
| 青 | ao | blue | Palette — Ao swatch |
| 藍 | ai | indigo (a deep blue-violet dye color) | Palette — Ai swatch |
| 紺 | kon | dark navy blue | Palette — Kon swatch |
| 水 | mizu | water — shorthand for the pale-blue swatch; the formal color name is 水色 (mizuiro) | Palette — Mizu swatch |
| 明 | mei | bright, clear — a single-character fragment of 明晰, used decoratively, not as a literal word for "clarity" on its own | Cover watermark, ghost-numeral demo |
Two open items: 水 reads as "water," not as a color name, on its own — worth confirming whether to switch to 水色 (mizuiro) for accuracy. And the per-page ghost watermark on the live site may actually use kanji numerals (一, 二, 三...) rather than the thematic characters shown here — that needs verifying against the deployed site or repo directly.
Section 06
Five traditional patterns (wagara), each assigned to a specific piece of material based on what it actually means, not picked for decoration. Used as a low-opacity background texture only, never as a loud foreground print.
Blue ocean waves
Overlapping concentric arcs representing calm seas. One of the oldest wagara, historically a symbol of peace and good fortune.
General & calm-toned sections, blogSeven treasures
Interlocking circles forming a continuous lattice. Represents harmony and interconnectedness — one system supporting the next.
SOP Vault, systems & infrastructure contentScales
Alternating triangles resembling fish or dragon scales. Historically worn by warriors as a protective motif.
Logistics & Transportation verticalRising steam
Paired vertical lines that widen and narrow in rhythm, evoking rising steam. Symbolizes upward movement and rising above circumstance.
High-Growth Startups verticalTortoiseshell
A hexagonal lattice named for the tortoise shell. Represents intellect, structure, and longevity.
General & Government vertical, footerLeft out on purpose: Sayagata, the interlocking key-fret pattern, is built from the manji (卍) — an ancient Buddhist symbol for eternity with no connection to its 20th-century misuse in the West, but close enough in silhouette that it risks misreading in client-facing US financial material. Excluded rather than footnoted every time it appears.
Section 07
Core building blocks shared across the homepage and the interior tile-based pages.
Buttons
Navigation bar
Interior tile card
02
Map
We audit what exists — what works, what is missing, what is broken.
Section 08
The visual system changed. The locked editorial rules from the Positioning Language Guide have not, and apply exactly the same to every page in this new direction.
Do
Write company-first. Zen Noggin reads as an established firm with a full team.
Don't
Use em dashes anywhere. Use commas, colons, or restructure the sentence.
Do
Frame government as a bid channel, never as a third vertical alongside logistics and startups.
Don't
Publish a statistic, hero number, or metric that has not been confirmed by Nicole.
Do
Feature the SOP Vault prominently — it remains the strongest differentiator across every page.
Don't
Include a founder photo or personal bio anywhere on the public site.
Section 09
How to keep the system disciplined as it extends across more pages and more deliverables.