Brand Context System

A working, public-safe brand context bundle for design-system extraction and front-end handoff.

This repo is no longer just a folder scaffold. It contains a complete demo context system for a fictional brand, including structured JSON, source notes, selected front-end files, asset manifests, Figma extraction guidance, review rules, prompts, an example extraction output, and a validation script.

What this repo proves

Good AI-assisted design work starts before the prompt. It starts with source-of-truth discipline.

This repo shows how to package scattered brand, design, code, asset, and review context so a designer, engineer, or AI assistant can produce a reviewable design-system extraction without a long verbal download.

Demo brand

The included demo brand is Northstar Growth Studio, a fictional public-safe B2B brand. It is used only to demonstrate the workflow.

The demo includes company context, brand notes, voice rules, structured JSON, extraction targets, sample HTML and CSS, an asset manifest, Figma extraction guidance, design-system requirements, an extraction prompt, an example output, and validation logic.

How this connects to Brand Design System Starter

brand-context-system is the intake layer. It gathers brand rules, voice, code references, Figma direction, assets, examples, and review rules.

brand-design-system-starter is the implementation layer. It turns that context into tokens, foundations, component guidance, CSS variables, and front-end handoff.

Together, the two repos show the full tactic: collect the right brand context, then convert it into reusable design-system structure.

Context flow

flowchart LR
    SourceDocs[Source notes] --> Context[Structured context JSON]
    Company[Company and voice files] --> Context
    Code[Sample HTML and CSS] --> Context
    Figma[Figma extraction brief] --> Context
    Assets[Asset manifest] --> Context
    Context --> Prompt[Extraction prompt]
    Prompt --> Output[Example design-system extraction]
    Output --> Starter[Brand Design System Starter]
    Output --> Review[Human review]

Loading

Validation

The repo includes package metadata and a validation script. The validation flow checks that the working context bundle exists, JSON files are parseable, the asset manifest has rows, every manifest row points to a committed file, and text files do not contain unresolved scaffold language.

Run validation with npm run check and npm run validate:manifest when Node and npm are available. If npm is unavailable but Node is available, run the underlying scripts directly: node scripts/check-context-bundle.js and node scripts/check-manifest-status.js.

Working files

Path	Purpose
package.json	Package metadata and validation script wiring
context/brand-context.json	Structured brand, audience, voice, visual, asset, code, Figma, and review context
context/extraction-targets.json	Defines what the design-system extraction should produce
schemas/brand-context.schema.json	JSON schema for the structured context bundle
source-docs/sample-brand-brief.md	Public-safe source brief used as raw input evidence
source-docs/README.md	Source document index and processing rules
company/company-name-and-blurb.md	Human-readable company and positioning context
company/brand-notes.md	Visual system and brand rules
company/voice-and-tone.md	Writing rules, vocabulary, and examples
claude-notes/design-system-requirements.md	Canonical design-system extraction requirements
claude-notes/other-notes-for-claude.md	Agent constraints, decisions, open questions, and gotchas
github-code/frontend-file-inventory.json	Inventory of selected sample front-end files
github-code/selected-frontend-files-manifest.md	Human-readable selected file manifest
github-code/code-review-checklist.md	Review checklist for extracting code-based design evidence
selected-frontend-subfolder/README.md	Index of selected front-end files
selected-frontend-subfolder/sample-landing-page.html	Sample page structure for extraction
selected-frontend-subfolder/sample-styles.css	Sample CSS values for token extraction
figma/figma-link.md	Public-safe Figma source metadata
figma/figma-extraction-brief.json	Figma review expectations and extraction scope
figma/fig-file-instructions.md	Figma extraction instructions and confidence labels
fonts-logos-assets/manifest.csv	Asset index and license/status notes
fonts-logos-assets/	Demo asset shelf matching the manifest
web-examples/reference-sites.json	Pattern reference manifest
claude-prompts/build-design-system-from-context.md	Ready-to-run extraction prompt
claude-prompts/inspect-figma-and-code.md	Navigation note pointing to the active extraction prompt
examples/example-output.md	Concrete example design-system extraction output
scripts/check-context-bundle.js	Active validation script

Review workflow

1. Read claude-notes/design-system-requirements.md first.
2. Review context/brand-context.json and context/extraction-targets.json.
3. Inspect company, voice, visual, asset, Figma, and code references.
4. Use claude-prompts/build-design-system-from-context.md to produce an extraction draft.
5. Compare the draft against examples/example-output.md.
6. Move reviewed outputs into brand-design-system-starter only after gaps are resolved.

What good looks like

A strong extraction should identify source-backed token candidates, component candidates, voice rules, asset availability, accessibility requirements, missing states, source conflicts, and human review steps.

It should not invent logos, fonts, customer names, metrics, or outcomes.

Related repos

This repo is part of a connected public system. See the GitHub Ecosystem Map for how the repos relate.

Shared terminology: Common Language.

Usage and rights: see USAGE.md.

• growth-architecture-os
• brand-design-system-starter

What this demonstrates

This repo shows the intake side of a design-system workflow: how to make brand, design, code, asset, and prompt context structured enough for consistent extraction and review.

It is not just storage. It is a working context layer with source files, validation, and an example output.