Export
Export Everything
Configure your brand (heading font, body font, palette, type scale) and download all 7 design system files at once. Every file is generated in your browser from your configuration. No server, no upload, no dependencies.
My Brand
The quick brown fox jumps over the lazy dog. 0123456789
Export everything
Download all 7 files at once. Each file is generated in your browser from the configuration above. No server, no upload.
DESIGN.md
Markdown design system document
3.0 KB
tokens.json
Structured design tokens
0.7 KB
tokens.css
CSS custom properties
0.8 KB
tokens.scss
SCSS variables and maps
0.6 KB
tailwind.config.js
Tailwind theme tokens
0.8 KB
fonts.css
Google Fonts link and @font-face
0.6 KB
brand-board.svg
SVG palette swatches
2.0 KB
The "Download all files" button downloads each file individually in sequence (300ms apart) because this tool runs without any npm dependencies and cannot bundle a ZIP. If your browser blocks multiple downloads, click "Allow" when prompted, or download files individually. The files are: DESIGN.md (a Markdown design system document), tokens.json (structured design tokens), tokens.css (CSS custom properties), tokens.scss (SCSS variables and maps), tailwind.config.js (Tailwind theme tokens), fonts.css (Google Fonts link and @font-face declarations), and brand-board.svg (an SVG palette swatch board).
The 7 Files You Get
DESIGN.md
A Markdown design system document with typography, type scale, colors, spacing, and implementation notes. Ready for your repo.
tokens.json
Structured design tokens following the W3C Design Tokens Format. Importable into any token pipeline.
tokens.css
CSS custom properties for colors, fonts, and type scale. Drop into your stylesheet and reference with var().
tokens.scss
SCSS variables and maps for colors and type scale. For projects that use SCSS preprocessing.
tailwind.config.js
Tailwind theme tokens. Adapt to your Tailwind version (v3 theme.extend or v4 @theme).
fonts.css
Google Fonts link tag with preconnect and @font-face declarations for self-hosting. Choose your loading strategy.
brand-board.svg
An SVG palette swatch board. Drop into a presentation, a Figma file, or print as a brand reference.
How the Export Works
The export runs entirely in your browser. When you click "Download all files", the tool generates each of the 7 files from your current configuration, creates a Blob for each, and triggers a download. The files download in sequence (300 milliseconds apart) so the browser does not block them as popups.
The tool does not use a ZIP library because that would add a dependency and increase the page weight. If you need a single ZIP file, download the files individually and zip them yourself, or use the brand kit builder which exports the same files in a single panel.
Every file is plain text or SVG, so you can open it in any editor. The Markdown and JSON files are structured for machine consumption. The CSS, SCSS, and Tailwind files are ready to drop into a project. The SVG is ready for any vector editor.