AK Brand OS — Design System

I defined the brand premise and the five governing principles behind the system, sourced from my own Artefact Standards spec sheet, and supplied every source document the tokens were extracted from. Claude Design and Claude Code handled extraction, token generation, and the applied UI kits; I reviewed every token, component, and substitution against the original spec and directed scope — what shipped in V4, what stayed flagged open, and what comes next.

• ▸Supplied real working documents — a BRD template, strategy memo, research report, presentation deck, and learning-notes system — as raw material, rather than designing tokens from a blank slate
• ▸Used Claude Design to extract a shared token and component language from those documents, cross-checked against a pre-existing "Artefact Standards" spec sheet
• ▸Defined five governing principles — Structured Diagnosis, Show Thinking, One Insight Per Block, Metadata Always Visible, Consistency in Elements — as the design intent behind every token decision
• ▸Constrained the palette deliberately: one signal colour (orange), one serif (Fraunces), one sans (Geist), one mono (JetBrains Mono), a warm paper canvas, and a 4px spacing grid
• ▸Packaged the system as a portable Claude Code Skill (SKILL.md), kept in sync via a custom /design-sync workflow — incremental updates, never a wholesale replace
• ▸Generated an oxlint adherence config that blocks raw hex/px values and unauthorized fonts in downstream code, enforcing the tokens at the linting level
• ▸Reviewed every extracted token, component, and substitution — including catching an IBM Plex Mono → Serif swap — against the original spec sheet before sign-off

• ▸Full design token reference — colour, type, spacing, radii, shadows, and motion — documented in the system's design-tokens spec
• ▸Six applied UI kits built on the same token set: resume, BRD/strategy-memo ("Universal Document"), dashboard, portfolio, social carousel, and slides
• ▸A portable Claude Code Skill (SKILL.md) plus a /design-sync workflow for keeping downstream implementations incrementally aligned with the source system
• ▸An auto-generated oxlint adherence config enforcing token usage in code
• ▸This portfolio site itself runs on AK Brand OS as its applied production example
• ▸V4 shipped as the current version, with open items logged rather than silently resolved

• ▸A design system is more credible when extracted from real working documents than invented from a moodboard — it starts already proven in practice
• ▸Narrow, disciplined constraints (one accent colour, three type families, one spacing unit) produce more consistency than an open palette ever would
• ▸Flagging open issues explicitly — like this live site's theme not yet reconciled with the V4 paper-canvas spec, or the icon library being a best-guess substitution — is more useful than quietly shipping unresolved decisions
• ▸Versioning discipline matters: informal labels ("V4" externally, "alpha" internally) create confusion a single consistent identifier would avoid
• ▸Directing an AI collaborator still requires the human to own the spec, review every substitution, and decide scope — the system reflects editorial judgement, not automation alone