Personal Brand System

Chan Meng

Building at the intersection of AI, cultural technology, and women's health.

Read the spec Explore the system

v2.1.1 · 2026-06-07 · Caldera clone

Halftone gradient hero panel — Digital Orange to Cyber Violet
70+
Open-source projects
1,103
Newsletter subscribers
5,594
LinkedIn followers
210
GitHub followers

Identity

Philosophy: Subtraction for life, addition for thought.

Voice in one breath: Architecture-grade vocabulary, evidence-first claims, restraint in life and boldness in expression. Cross-cultural fluency without translation.

Color · raw palette

Eight Caldera swatches. Templates never reference these directly — they reference semantic tokens, which point here. One loud orange accent; violet and glare are decorative-only.

basalt-canvas #E2E2DF
Page background
ash-white #F7F6F2
Card / button surface
pure-white #FFFFFF
On dark / orange fills
abyssal-ink #070607
Text, headings, borders
pure-black #000000
Icon strokes, dense borders
digital-orange #FC5000
Primary accent
cyber-violet #524AE9
Decorative only
pixel-glare #F5F28E
Highlight accent

Color · semantic tokens

The API surface. Templates consume --color-* tokens; this layer points back into the raw palette.

--color-canvas-page #E2E2DF
Default canvas — never pure white
--color-canvas-surface #F7F6F2
Cards, buttons, lifted blocks
--color-surface-accent #FC5000
Feature / stat cards, button fill
--color-surface-decor #524AE9
Decorative graphic blocks ONLY
--color-surface-glare #F5F28E
Highlight overlay / graphic accent
--color-surface-tag #F5F28E
Category-tag / chip background
--color-ink-primary #070607
Body text
--color-ink-strong #070607
Name, section headers
--color-ink-muted #070607
Secondary text, meta
--color-ink-subtle #070607
Captions, low emphasis
--color-on-accent #FFFFFF
Text on orange / dark fills
--color-accent-primary #FC5000
Primary action, accent rules
--color-accent-editorial #FC5000
Eyebrow rules, section marks
--color-surface-pill #F7F6F2
Skill pill background
--color-surface-quote #F7F6F2
Pull-quote background
--color-edge-pill #070607
Pill / ghost-button border
--color-rule-hairline #070607
Divider rules, strong borders

Typography

Display is a heavy compact grotesque (Anton — the OFL stand-in for PP Neue Corp Compact Ultrabold) for the name, headings, and stat numbers, set in MIXED case. DM Sans 500 is the body workhorse. Mono is reserved for data signatures.

--text-display-xl · Anton · 189px / 0.02em · mixed case
More Is More.
--text-display · Anton · 96px / 0.02em
Subtraction for life,
addition for thought.
--text-display-lg · Anton · 64px mixed case
Building at the intersection of AI, cultural tech & women's health
--text-body · DM Sans 500 · 16px / 9pt
I architect AI agents, ship full-stack platforms end-to-end, and teach others to do the same. Featured in multiple media interviews for the minimalist lifestyle philosophy — subtraction for life, addition for thought.
--text-eyebrow · DM Sans 700 uppercase · 0.08em tracking
Editorial eyebrow — the only uppercased label
--text-mono · JetBrains Mono 400 · 13px / 8pt
last updated · 2026-06-07 · build N · data/brand.yaml v2.1.1

Components

Flat, friendly geometry: pill buttons at 800px, cards at 40px, tags at 20px, no shadows. Orange fills carry the primary action; everything else is ash on basalt.

Buttons

Variants — hierarchy by fill: orange primary, ink-hairline secondary, dotted tertiary, ash quiet, and a circular icon button.

Primary action Secondary Tertiary Quiet

Sizes — small · medium (default) · large.

Small Medium Large

With icons — leading or trailing, inheriting the label colour.

View the repo Read the spec

States — default · hover · active · focus · disabled (a colour shift + a 1px press; flat, never a shadow).

Default Hover Active Focus
Expanded

Solid ash card — the open accordion panel.

Collapsed
Collapsed
Announcement

Shipping agentic workflows in production

2026-06-07
Open Source

Free tools I built for the community

2026-06-07
FemTech

Cultural technology and women's health

2026-06-07
gradient-svg-generator
github-visitor-counter
github-readme-suno-cards
echook
SunoStats
typst-claude-skill

AI & RAG systems

The expanded item is a solid cream card with its description shown; siblings collapse to dotted-outline ghost rows.

Accessibility & inclusive design
Developer tooling
Carousel controls

Spacing · 8px base

Named scale with a 10px element gap and an 80px section rhythm (--rhythm-section-large).

--space-0 0px
--space-1 8px
--space-2 16px
--space-3 24px
--space-4 32px
--space-5 40px
--space-6 48px
--space-7 56px
--space-8 64px
--space-10 80px
--space-0-5 4px
--space-1-25 10px
--space-1-5 12px
--space-2-5 20px

Decorative signatures

All built on assets Chan owns: the risograph halftone panels (public/brand/), gradient-svg-generator banners + pills, the monogram, and the datestamp. External services (shields.io, trophies, wakatime, streaks) are forbidden.

1. Halftone panel — halftone

Halftone hero panel

Colors: Digital Orange → Cyber Violet

Use: Hero decorative panel; blog / project card thumbnails.

Don't: Behind body text. As a button fill. More than one hero panel per surface.

2. Hero band — heroBand

Template: brand-heroHeight: 200pxDuration: 8s

Hero band preview

Use: Top of any long-form surface.

3. Accent eyebrow — goldEyebrow

Featured Work

Sample display heading

Rule: eyebrow scale + ink text + a short orange pixelArt rule above a display heading

Use: Above any section that opens with display type. Above the hero subhead.

4. Mono datestamp — monoDatestamp

last updated · 2026-06-07 · build 47

Use: Footer of every long-form surface (README, CV, brand-system, future webpages).

5. Monogram divider — monogramDivider

Use: Between major narrative shifts (e.g. between 'Featured work' and 'Open source').

6. Pill rotation — pillRotation

Recoloured to the Caldera palette (14 configured)

Use: CTAs, social badges, action pills.

Voice principles

Architecture-grade vocabulary
Prefer engineering nouns (orchestration, dispatch, hub-and-spoke) over marketing adjectives (powerful, robust, world-class).
— Chan's existing CV uses precise nouns; recruiters who matter recognise them.
Evidence-first
Every claim links to one proof point (PR, repo, live URL, paper). Adjectives without links get cut.
— Established by the README redesign spec; carry forward.
Subtraction for life, addition for thought
At most one orange accent per visual unit; remove decoration until what is left is the idea.
— Chan's stated personal philosophy; the brand must enact it even while the surface is bold.
Cross-cultural fluency without translation
Te reo Māori, 中文, English appear in their own forms — italicised once, then treated as first-class vocabulary. No parenthetical glosses unless the audience demonstrably needs them.
— Existing CV does this with 'Te Whare Tapa Whā'; codify.
Pace by white space
Visual rhythm beats density. The 61.8/38.2 ratio in the CV is canonical; default to it elsewhere too.
— Existing theme.typ already chose this; promote it from CV-only to system-wide.
Never apologise for restraint
No 'sorry it's plain', no 'minimal-but-' qualifiers. The confidence is the statement.
— Restraint loses its meaning the moment it is hedged.

Voice in practice · Do vs Don't

Do
  • Recruited by Anthropic for the Claude residency programme.
  • 86.6% solo-built; AI mentor matching and membership-flow automation in production.
  • Replaces click-through workflows with agentic ones: natural-language intent drives downstream orchestration.
Don't
  • Leveraged cutting-edge AI to deliver robust, world-class solutions.
  • I'm a passionate, results-driven full-stack rockstar.
  • Minimal-but-powerful design that just works.