A portable starter system for translating brand context into usable design tokens, foundations, components, and AI-assisted front-end handoff.
Brand systems are execution infrastructure: consistent tokens reduce creative iteration time, design-to-development handoff errors, and campaign asset production overhead. This starter turns approved brand direction into reusable implementation rules so landing pages and campaign experiences do not restart from zero. It supports the broader growth architecture by making brand-consistent execution faster and easier to govern. Part of the Jared Silverman growth portfolio.
This repo is a standalone starter system. It is not a migration of the older brand-design-system/ folder that still exists inside the profile README repo. That older folder is retained as an archived reference. This repo uses its own starter palette and structure so the public source of truth is explicit rather than implied.
This is not a full production design system. It is a lightweight, portable starter kit for building one.
It gives a team or AI agent enough structure to move from brand direction to repeatable front-end implementation without starting from a blank page.
The goal is simple: make brand execution more consistent, reusable, and reviewable.
For this repo, the canonical source of truth is:
design-tokens/tokens.jsonfor token values and token metadatadesign-tokens/tokens.cssfor generated CSS custom propertiesfoundations/for usage guidancecomponents/for component-level implementation guidance
The navy, amber, and teal palette in this repo is an example starter palette aligned to an editorial/operator identity. It should not be treated as the canonical token set for every Jared Silverman web property or for the older embedded profile-repo design-system folder.
flowchart TD
Brand[Brand strategy and voice] --> Tokens[Design tokens]
Tokens --> Foundations[Foundations: color, type, spacing]
Foundations --> Components[Reusable component specs]
Components --> CSS[Generated CSS variables]
Components --> Handoff[AI and front-end handoff]
Assets[Logos, fonts, icons] --> Handoff
Handoff --> Review[Human review]
Review --> Implementation[Consistent branded front-end work]
AI-assisted design and front-end work fails when the context is vague.
A good prompt is not enough. The system needs:
- brand rules
- design tokens
- component expectations
- front-end conventions
- asset manifests
- review criteria
- reusable handoff notes
This repo packages those pieces into one place so collaborators and AI tools can produce more consistent work.
brand-context-system is the intake layer: it organizes raw brand inputs, Figma references, assets, web examples, and working notes.
brand-design-system-starter is the implementation layer: it turns that context into tokens, foundations, component guidance, CSS variables, and AI-ready front-end handoff.
Together, they show a repeatable tactic: convert scattered brand and design material into an operating system that humans and AI tools can use consistently.
| Path | Purpose |
|---|---|
design-tokens/ |
Source tokens and generated CSS variables |
foundations/ |
Brand foundations for color, type, spacing, accessibility, and layout |
components/ |
Component-level specs for common UI patterns |
assets/ |
Placeholder structure for logos, fonts, icons, and image assets |
scripts/ |
Utility scripts for token generation and structure validation |
examples/ |
Minimal token sample and component-spec pattern |
docs/ |
Wiki copy, release notes, metadata, and implementation guidance |
CLAUDE.md |
AI handoff instructions for Claude or similar tools |
SECURITY.md |
Public-safe reporting and data-handling policy |
The repo can be used directly by reading the Markdown files and copying the token JSON/CSS patterns into another project. Local helper scripts are available for regenerating CSS variables from source tokens and validating the expected repo structure.
Use npm run check for read-only structure and token-drift validation. Use npm run tokens:css only when you intend to rewrite design-tokens/tokens.css from design-tokens/tokens.json.
flowchart LR
Source[design-tokens/tokens.json] --> Build[scripts/build-css-tokens.js]
Build --> CSS[design-tokens/tokens.css]
CSS --> Frontend[Frontend implementation]
Source --> Review[Design review]
Review --> Source
design-tokens/tokens.cssis the canonical generated CSS output.examples/example-token-output.cssis a minimal illustrative sample, not a duplicate of the generated file.examples/example-component-spec.mdshows how component guidance should be written.
A strong implementation should make it easy to answer:
- What colors, spacing, typography, and radius values should be used?
- Which tokens are semantic versus raw values?
- What does a button, card, hero, or form need to look and feel like?
- Which assets are approved?
- What should Claude or another AI tool inspect before generating code?
- What should a human reviewer check before shipping?
This repo is useful for:
- growth leaders building landing-page systems
- designers translating brand direction into reusable UI language
- marketers using AI tools for design and front-end acceleration
- engineers needing lightweight brand implementation rules
- consultants packaging a client brand into a repeatable build system
This repo is part of a connected public system. See the GitHub Ecosystem Map for how the repos relate.
This repository turns approved brand direction into reusable implementation rules. The private-to-public-release-gate governs a different handoff: turning private canonical work into a reviewed public derivative through privacy scanning, explicit exclusions, and drift checks. Together they show that both design handoff and publication handoff need controlled boundaries; this repository is not claimed to be generated from private source.
Shared terminology: Common Language.
This repo is public for professional review and portfolio context. The package is intentionally marked private and UNLICENSED, which means it is not published as a package and is not offered as open-source software for reuse without permission.
Usage and rights: see USAGE.md.
This repo shows a practical tactic I use often: turn scattered brand, design, and front-end context into a structured operating layer that can be reused by humans and AI tools.
It is not just storage. It is a system for making brand-consistent execution easier.
Part of the Jared Silverman growth portfolio — see also Brand Context System for the intake layer.