How to Customize DesignSaver Output for Your Brand
DesignSaver extracts a complete design context package from any URL. But the extracted system is a starting point, not a final product. Your brand has specific colors, fonts, and visual rules that a reference site cannot fully capture. Here is how to customize the output to match your exact brand.
Step 1: Review and edit tokens.json
The tokens.json file contains all extracted values in structured JSON format. This is the first file to customize because all other files (CSS, Tailwind config) are derived from these tokens.
What to edit:
- Brand colors — replace extracted hex values with your actual brand colors. Ensure primary, accent, and surface colors match your brand guidelines.
- Font families — replace extracted fonts with your brand fonts. Include proper fallback stacks.
- Spacing scale — adjust the base unit if your design uses a different rhythm (e.g., 4px base vs 8px base).
- Component values — tune button radius, card padding, and shadow intensity to match your component library.
{
"color": {
"primary": "#YOUR_BRAND_HEX", // was: #6c5ce7
"surface": "#YOUR_BG_HEX", // was: #0c0e14
}
}Step 2: Rewrite DESIGN.md for your brand voice
DESIGN.md is the natural-language guide your AI agent reads first. The extracted version describes the reference site's design. Rewrite it to describe your brand's design.
Key sections to customize:
- Design philosophy — describe your brand's visual personality: minimal, bold, playful, enterprise-grade, etc.
- Color roles — specify which colors are used for what purposes. "Primary is for CTAs. Accent is for hover states."
- Typography rules — add your brand's specific heading/body rules, including any decorative font usage.
- Constraints — add brand-specific do-nots: "Never use rounded corners larger than 8px," "Do not use drop shadows."
Step 3: Regenerate derived files
After editing tokens.json and DESIGN.md, regenerate the derived files:
- style.css — update CSS custom properties to match the new token values. This is usually a find-and-replace of hex values.
- tailwind.config.json — update Tailwind theme extensions to match the new tokens.
- codex-prompt.md — update the prompt to reference your edited DESIGN.md and tokens.json.
DesignSaver lets you re-export with overrides, so you can start from your customized tokens rather than re-editing every time.
Step 4: Version-control your design context
Once customized, commit your design context files to your repository. This gives every team member and every AI agent session the same design baseline. When your brand evolves, update the files in one place and all future AI output updates automatically.
Common customization scenarios
Switching from light to dark theme
If DesignSaver extracted a light-themed reference but your product uses a dark theme, swap the surface and text colors, adjust contrast ratios, and update shadow colors for dark-mode elevation.
Adding missing design tokens
DesignSaver extracts what it can detect from the reference site. If your brand uses tokens that were not present in the reference (e.g., specific animation easing curves, z-index layers), add them manually to tokens.json and reference them in DESIGN.md.
Merging multiple references
You might want colors from one site, typography from another, and spacing from a third. Extract each reference separately, then merge the best parts into a single design context package. DesignSaver makes it easy to extract multiple references and combine them.
Start with a template, end with your brand
The fastest way to create a branded design context package is to start with DesignSaver output and customize. You get 90% of the structure for free — the right file formats, the right token categories, the right AI-ready formatting. The remaining 10% is tuning the values to your brand, which takes minutes.