Home

Brand Design System Wiki

Welcome to the Brand Design System wiki.

This repo is a structured context bundle for AI-assisted design and front-end work. It packages the information an AI agent, designer, engineer, or collaborator needs to understand a brand, replicate its design language, and build or review front-end work consistently.

The simple version:

This repo is the brand handoff system.

Instead of explaining the brand verbally every time, this repo gives Claude, a designer, an engineer, or a collaborator the context they need in one organized place.

What this repo is for

This repo helps turn brand context into usable design and front-end execution.

It brings together:

• company and brand definition
• voice and tone guidance
• selected production code
• front-end file references
• Figma links and extraction notes
• fonts, logos, and assets
• website examples and inspiration
• Claude prompts
• working requirements
• raw source documents

The goal is to reduce ambiguity and make on-brand work easier to produce, review, and improve.

Who should use this repo

Use this repo if you are:

• creating or refining a brand design system
• preparing an AI agent to review or generate front-end work
• handing context to Claude, ChatGPT, Cursor, or another AI coding/design tool
• onboarding a designer or front-end engineer
• translating brand rules into reusable UI direction
• auditing whether digital work matches brand standards
• collecting scattered design inputs into one usable structure

Core idea

A design system is only useful if people and tools can actually use it.

This repo is built around that idea.

It does not just store files. It organizes the context needed to make design decisions:

• what the company is
• how the brand should sound
• what the interface should look and feel like
• which files matter
• which assets are canonical
• which examples should guide direction
• which prompts should be used to inspect or generate work

How the repo is organized

company/

Brand identity, company description, voice, tone, audience, and positioning.

This is the foundation. Everything else should reference this context.

github-code/

Links and notes for production repositories and front-end files.

Use this when the design system needs to understand how the current product or website is actually built.

selected-frontend-subfolder/

A focused copy of the front-end files that are most useful for review.

This keeps the AI or collaborator from having to inspect an entire codebase.

figma/

Figma links and extraction instructions.

Use this to document what should be pulled from design files, such as colors, typography, components, spacing, layouts, and interaction patterns.

fonts-logos-assets/

Fonts, logos, images, icons, and other brand assets.

Use the manifest file as the source of truth so assets are not understood only by folder browsing.

web-examples/

Reference websites, landing pages, competitors, or best-in-class examples.

Use this to clarify visual direction, interaction patterns, layout inspiration, and market expectations.

claude-prompts/

Reusable prompts for AI-assisted inspection, design-system extraction, front-end review, and build guidance.

These prompts turn the repo from storage into an operating system for AI-assisted design work.

clad-notes/

Working requirements, decisions, constraints, and design-system notes.

Treat the requirements file here as the current working spec when there is disagreement between rough notes and other inputs.

source-docs/

Raw source material that has not yet been processed into the structured folders.

Use this as a staging area, not the final source of truth.

Recommended workflow

1. Fill in the company and brand context.
2. Link the production repo and identify the front-end files worth reviewing.
3. Add a focused front-end subfolder rather than the entire codebase.
4. Add Figma links and extraction instructions.
5. Load fonts, logos, images, and assets.
6. Add reference websites and examples.
7. Use the Claude prompts to analyze the system.
8. Capture working requirements and decisions.
9. Convert useful findings into reusable design-system guidance.

What good looks like

A strong version of this repo should let someone quickly answer:

• What company or brand is this for?
• What should the brand sound like?
• What should the interface feel like?
• Which files should an AI agent inspect?
• Which assets are official?
• Which Figma file should be referenced?
• Which design patterns matter?
• Which prompts should be run?
• What requirements or constraints are currently active?

If those answers are clear, the repo is doing its job.

Editing standard

Keep every file front-loaded.

The most important context should appear in the first few lines of each Markdown file.

Use manifests for assets. Use links for external files. Use TODOs for known gaps. Keep raw material separate from processed guidance.

Bottom line

This repo exists to make brand execution easier.

It gives AI tools and human collaborators enough structured context to produce better, more consistent design and front-end work without starting from scratch every time.