16 Files8 Industries8 HTML TemplatesWCAG Contrast Data

Stop spending thousands on agencies. Build your brand guidelines in 60 minutes..

8 complete industry brand systems with real colors, fonts, voice, and editable HTML templates. Replace the logo and you're done — your brand looks like it was designed by an agency.

Build My Brand — $29 See Industry Examples
One-time purchase All future updates included Commercial use Notion-ready
Brand Design System Kit - Professional brand guidelines template
Free Tool AI-Powered

Need brand colors first? Try ChromaShift →

Generate a complete 9-color brand system in seconds — with WCAG contrast data, industry recommendations, image color picker, and AI mockup previews. 100% free to start.

Try ChromaShift Free
6
Complete Files
Scroll ↑
3,500+
Lines of Content
Scroll ↑
8
Industry Examples
View ↓
5
Color Schemes
Explore ↓
5
Font Pairings
Explore ↓
5
Voice Archetypes
Explore ↓

What You'll Have in 60 Minutes

Everything Between You and a Professional Brand

Each piece solves a specific problem. Click any card to see what you'll achieve.

📐

Brand Design System Kit

1,655 lines · 8 modules

Create agency-quality brand guidelines in minutes: logo specs, WCAG-compliant colors, typography scale, voice, and application templates.

Jump to color system
🎨

Color Presets Quick Reference

576 lines · 5 schemes

Pick from 5 ready-to-use color schemes — HEX, RGB, HSL, CMYK, Pantone included. Each matches specific industries and moods.

Jump to color system
🔤

Font Pairing Quick Reference

502 lines · 5 pairings

5 designer-curated font pairings with Google Fonts links, CSS code, and specimens — no more guessing which fonts work together.

Jump to typography
🏢

Industry Brand Examples

407 lines · 8 industries

8 complete brand systems you can customize: Restaurant, Travel, Beauty, Tech, Fashion, Education, Healthcare, Finance. Swap the logo and it's yours.

Jump to industries
✍️

Brand Voice & Writing Templates

361 lines · 5 archetypes

5 brand voice archetypes with ready-to-use templates for social media, email, and websites — including EN/CN/JP/KR typography guidance.

Jump to voice
📚

How-To-Use Guide

252 lines · Complete tutorial

Step-by-step tutorial: import to Notion, customize, and export as PDF/CSS. Includes legal usage guidelines so you stay compliant.

Jump to guide

Visual Preview

8 Brand Systems, Real Visual Results

See exactly what you'll create. Click any card to open the full interactive template with real mockups.

Restaurant & Food
Ember Kitchen
"Where fire meets flavor"
Playfair DisplayDM Sans
View Full Template
Travel & Hospitality
Drift Collective
"Wander without direction"
SoraKarla
View Full Template
Beauty & Wellness
Velvet Ritual
"Your skin deserves ceremony"
Cormorant GaramondKarla
View Full Template
Technology & Startup
NovaPulse
"Build faster. Ship smarter."
Space GroteskInter
View Full Template
Fashion & Luxury
Maison Noire
"Redefine elegance"
Playfair DisplayKarla
View Full Template
Education & Learning
Spark Academy
"Ignite your potential"
OutfitSource Sans 3
View Full Template
Healthcare & Medical
Pulse Health
"Health made human"
DM SansInter
View Full Template
Finance & Fintech
Vault Finance
"Your money, your rules"
Space GroteskInter
View Full Template

Color System

Colors That Work — Everywhere, Every Time

Stop guessing if colors match. Every palette is WCAG-validated with contrast ratios. Need custom colors? Generate yours with ChromaShift →

Primary — Cyber Blue
+
HEX#00d4ff
RGB0, 212, 255
HSL189°, 100%, 50%
CMYK100, 17, 0, 0
PantoneProcess Cyan C
On Dark: 9.2:1 AAA ✓ On Light: 3.8:1 AA ✓
Application Examples (on dark background)
Primary Button
Outline Button
Badge Text
Used for: CTAs, links, highlights, key metrics, active states
Secondary — Cyber Purple
+
HEX#7c3aed
RGB124, 58, 237
HSL262°, 83%, 58%
CMYK73, 90, 0, 0
PantoneViolet U
On Dark: 7.1:1 AAA ✓ On Light: 4.8:1 AA ✓
Application Examples (on dark background)
Primary Button
Outline Button
Badge Text
Used for: Headings, accents, gradients, premium features
Accent — Cyan
+
HEX#06b6d4
RGB6, 182, 212
HSL188°, 95%, 43%
CMYK97, 14, 0, 17
Pantone3145 C
On White: 3.94:1 AA ✓ On Dark: 7.3:1 AAA ✓
Application Examples (on dark background)
Accent Button
Outline Button
Badge Text
Used for: Secondary actions, icons, data visualization, tooltips

11-Step Neutral Scale

PreviewNameHEXRGBHSLUsage
White#ffffff255, 255, 2550°, 0%, 100%Primary backgrounds in light mode
Gray 50#f9fafb249, 250, 251210°, 40%, 98%Secondary backgrounds, cards
Gray 100#f3f4f6243, 244, 246220°, 14%, 96%Borders, dividers
Gray 200#e5e7eb229, 231, 235220°, 13%, 91%Disabled states
Gray 300#d1d5db209, 213, 219215°, 14%, 84%Placeholders
Gray 400#9ca3af156, 163, 175215°, 11%, 65%Muted text
Gray 500#6b7280107, 114, 128220°, 9%, 46%Secondary text
Gray 600#4b556375, 85, 99220°, 13%, 34%Body text on light
Gray 700#37415155, 65, 81220°, 18%, 27%Dark mode secondary
Gray 800#1f293731, 41, 55220°, 22%, 17%Dark mode cards
Gray 900#11182717, 24, 39222°, 47%, 11%Dark mode backgrounds

5 Ready-to-Use Color Schemes

SaaS Tech
+
Trust, innovation, clarity
B2B SaaS, Developer tools
CSS Variables:
--primary: #6366f1;
--secondary: #8b5cf6;
--accent: #06b6d4;
--neutral-900: #0f172a;
--neutral-50: #f8fafc;
Best for: SaaS products, developer tools, API platforms, B2B apps
Warm Startup
+
Energy, passion, approachability
Consumer apps, EdTech
CSS Variables:
--primary: #f97316;
--secondary: #ef4444;
--accent: #fbbf24;
--neutral-900: #1c1917;
--neutral-50: #fffbeb;
Best for: Consumer apps, food & lifestyle brands, education platforms
Luxury Minimal
+
Sophistication, elegance, premium
Luxury brands, Fashion
CSS Variables:
--primary: #1e1e1e;
--secondary: #c9a96e;
--accent: #8b7355;
--neutral-900: #0a0a0a;
--neutral-50: #faf9f6;
Best for: High-end fashion, jewelry, premium hospitality, art galleries
Nature Green
+
Growth, stability, sustainability
Eco brands, Finance
CSS Variables:
--primary: #059669;
--secondary: #34d399;
--accent: #f59e0b;
--neutral-900: #064e3b;
--neutral-50: #f0fdf4;
Best for: Sustainability brands, organic products, fintech, wellness
Creative Pink
+
Creativity, boldness, playfulness
Creative agencies, Social
CSS Variables:
--primary: #ec4899;
--secondary: #a855f7;
--accent: #06b6d4;
--neutral-900: #1e1b4b;
--neutral-50: #fdf4ff;
Best for: Creative agencies, social apps, design tools, entertainment
Live Preview — See your colors in action
Get Started
Learn More
Feature Title
This is how your brand looks with these colors.
Your Brand Name
The quick brown fox jumps over the lazy dog. Clean, modern, and perfectly readable.
Brand Mockup Studio

Live preview of your brand across real-world applications

Brand Kit - Professional brand guidelines system with business card, letterhead, social post and website mockups
Business Card
Professional business card mockup with brand colors - front and back design
Letterhead
Professional letterhead mockup with branded header and footer
Social Post
Social media post mockup on smartphone with brand gradient design
Website Hero
Website hero section mockup on desktop monitor with brand colors
Mobile App
Mobile app mockup on iPhone with brand dashboard interface

Real-World Applications

Your Brand, Everywhere Your Customers Are

Website, social media, business cards, pitch decks — one brand system, every format covered.

Restaurant Promotional Poster

Promotional Poster

Restaurant · Print

Beauty Product Packaging

Product Packaging

Beauty · Print

SaaS Dashboard Interface

SaaS Dashboard

Tech · Digital

Fashion Lookbook

Fashion Lookbook

Fashion · Print

Travel Social Media Posts

Social Media Posts

Travel · Digital

Education Certificate

Course Certificate

Education · Print

Healthcare Mobile App

Mobile App

Healthcare · Digital

Finance Annual Report

Annual Report

Finance · Print

See these colors applied in real brands ↓

Typography System

Fonts That Look Like a Designer Chose Them

Every pairing is tested for readability and style. Click to preview and copy the code.

Tech / SaaS — Recommended
Space Grotesk + Inter +
Display / Headings
Build products people love
Body / UI
The quick brown fox jumps over the lazy dog. Clean, modern, and highly legible.
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* CSS Variables */
--font-heading: 'Space Grotesk', -apple-system, sans-serif;
--font-body: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* Type Scale */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */
--text-5xl: 3rem;      /* 48px */
Luxury / Editorial
Playfair Display + Source Sans 3 +
Display / Headings
Redefine elegance
Body / UI
The quick brown fox jumps over the lazy dog. Refined and professional.
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* CSS Variables */
--font-heading: 'Playfair Display', Georgia, serif;
--font-body: 'Source Sans 3', system-ui, sans-serif;

/* Type Scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
Creative / Lifestyle
Playfair Display + DM Sans +
Display / Headings
Where fire meets flavor
Body / UI
The quick brown fox jumps over the lazy dog. Warm and approachable.
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

/* CSS Variables */
--font-heading: 'Playfair Display', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
Health / Wellness
Cormorant Garamond + Karla +
Display / Headings
Health made human
Body / UI
The quick brown fox jumps over the lazy dog. Calm and reassuring.
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Karla:wght@400;500;600;700&display=swap');

/* CSS Variables */
--font-heading: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Karla', system-ui, sans-serif;
Education / EdTech
Outfit + Source Sans 3 +
Display / Headings
Ignite your potential
Body / UI
The quick brown fox jumps over the lazy dog. Encouraging and clear.
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* CSS Variables */
--font-heading: 'Outfit', system-ui, sans-serif;
--font-body: 'Source Sans 3', system-ui, sans-serif;

Brand Voice

Sound Like a Real Brand — Not a Robot

Choose your personality → get taglines, bios, email templates. Your brand writes itself.

🔥
+

The Passionate Chef

Warm, sensory, storytelling

"Every flame tells a story. We don't just cook — we transform."

Sensory languageStorytelling
Hero Copy Example:

"Where fire meets flavor. We source from local farmers, cook over open flame, and serve food that tells the story of our land."

Email Template:

"Subject: The story behind your table tonight

Every ingredient has a name. Every dish has a history. This week, we're celebrating the farmers who wake before dawn — the ones whose hands planted what you're about to taste..."

Best for: Restaurants, specialty food brands, culinary schools, farm-to-table concepts
✦
+

The Wandering Poet

Evocative, poetic, minimalist

"The best journeys are the ones that don't announce themselves."

WanderlustMinimalist
Hero Copy Example:

"No itinerary. No agenda. Just the road and the sky. We help you find the places that aren't in the guidebooks."

Email Template:

"Subject: A corner of the world you'll have to yourself

There's a village in southern Portugal where the only sound is wind through olive trees. We found it. You can too."

Best for: Travel agencies, boutique hotels, outdoor gear, travel publications
⚡
+

The Confident Builder

Direct, outcome-oriented, technical

"Your team ships code, not processes. We eliminate the coordination overhead."

Outcome-focusedTechnical
Hero Copy Example:

"Ship faster. Break less. Sleep better. We handle the infrastructure so your team can focus on what matters."

Email Template:

"Subject: Your deploy time just dropped by 80%

Here's what changed: 3 AM wake-ups are now 3 AM deployments that succeed. No hype. Just results."

Best for: Developer tools, SaaS platforms, API services, devops tools
💎
+

The Understated Aristocrat

Sophisticated, mysterious, quiet

"Elegance is not seen. It is felt. In the weight of fabric. In the silence between cuts."

Short sentencesRefined
Hero Copy Example:

"In the confidence that needs no explanation. Our pieces don't shout. They simply are."

Email Template:

"Subject: A letter from our atelier

Not everyone will understand. That's precisely the point. Our autumn collection is now available — by appointment only."

Best for: Luxury fashion, jewelry, premium hospitality, private clubs
🩺
+

The Trusted Guide

Warm, reassuring, human

"Healthcare shouldn't feel clinical. We're here to listen first, act second."

Human-firstAccessible
Hero Copy Example:

"We treat you like a person — not a patient. Your health journey starts with a conversation, not a form."

Email Template:

"Subject: Your health check-in

Hey [Name], just checking in. How are you feeling after last week's appointment? Questions are welcome — that's what we're here for."

Best for: Healthcare providers, wellness apps, mental health services, pharmacies
📈
+

The Honest Advocate

Bold, transparent, empowering

"Your money should work for you — not the other way around."

TransparentBold
Hero Copy Example:

"No hidden fees. No fine print. Just the tools you need to make your money work harder than you do."

Email Template:

"Subject: The fee we removed

Starting next month, we're eliminating account fees. Here's exactly why, how much you'll save, and what we're doing instead. Full transparency."

Best for: Fintech, personal finance apps, investment platforms, neobanks

Getting Started

From Download to Launch in 60 Minutes

Three steps from download to a complete brand system. Click each step for detailed instructions.

1

Import into Notion

Download the 6 Markdown files from your Creem download link. In Notion, click Import in the sidebar and select each .md file. Each file becomes a full Notion page with complete structure.

// Files you'll receive:
1. Brand Design System Kit.md
2. Color Presets Quick Reference.md
3. Font Pairing Quick Reference.md
4. Industry Brand Examples.md
5. Brand Voice & Writing Templates.md
6. How-To-Use Guide.md

// Import steps:
1. Open Notion → + New page
2. Click "Import" in the left panel
3. Select "Markdown & CSV"
4. Upload the .md files
5. Rearrange in your sidebar
2

Customize with Your Brand

Use Notion's Find & Replace (Cmd/Ctrl+F) to swap example brand names (Aura Tech, Ember Kitchen, etc.) with your own. The guidelines, specifications, and layout stay — fill in your details.

// Example replacements:
"Aura Tech"         →  "Your Brand Name"
"#3B82F6"          →  "Your Primary Color"
"Space Grotesk"     →  "Your Heading Font"
"Build products"    →  "Your Brand Message"

// What to customize per file:
Brand Design System    →  Colors, fonts, logo guidelines
Color Presets          →  Swap with your brand palette
Font Pairings          →  Update to your font choices
Industry Examples      →  Use existing or add your industry
Voice Templates        →  Rewrite in your brand's voice
How-To-Use Guide       →  Keep as-is (optional)
3

Export or Share

Export your completed brand guidelines as PDF for client presentations, share via Notion's public link for team access, or use the CSS variables directly in your codebase.

// Export Options:
1. PDF (Cmd/Ctrl+P → Save as PDF) — for clients
2. Notion Public Link — for team access
3. Export as Markdown — for other tools

// Use CSS variables directly:
Copy color codes from the Color Presets file
Paste into your CSS custom properties
Apply to your design system or website

FROM THE CREATOR

Why I Built This

I'm a brand designer who spent years building brand guidelines from scratch for every client. Every project started the same way: create the color system, pick the fonts, define the voice, build the templates. Over and over.

This kit is the system I wish I had on day one. Every color value you need, every font pairing tested in production, every industry example drawn from real projects. I use this exact framework for my own clients — and now you can too.

— Hongkun Zong, Brand Designer & Founder

═══ -->

EVERYTHING INCLUDED

What You'll Have in 60 Minutes

16 Files Included

📄Brand Design System Kit.md1,655 lines
📄Color Presets Quick Reference.md576 lines
📄Font Pairing Quick Reference.md502 lines
📄Industry Brand Examples.md407 lines
📄Brand Voice & Writing Templates.md361 lines
📄How-To-Use Guide.md252 lines
🚀START-HERE.mdQuick start
🎯BRAND-KIT-IN-ACTION.mdReal examples
🌐+ 8 Live Brand Templates.html

All .md files Notion-import ready. All .html files open directly in browser.

Your Rights & Benefits

One-time purchase
Pay once, own it forever
Commercial use license
Use for yourself or clients
All future updates included
Updates included at no extra cost
All fonts free for commercial use
Google Fonts — no licensing fees
Instant download
Get files immediately after payment
Build My Brand — $29
Complete Kit Best Value

Stop building from scratch.

8 files, 4,000+ lines, 8 industry examples, 5 font pairings, 5 color schemes, 5 voice archetypes — all yours, forever.

$29

One-time purchase · No subscription · Instant download · No refunds (digital product)

8 complete brand template files
8 real industry brand examples
WCAG accessibility data
Complete how-to-use guide
Commercial use license included
All future updates included
Get Instant Access — $29

Secure payment via Creem · Instant download after purchase · No refunds (digital product)

Want the full brand workflow?

Step 1: Generate Colors (Free) → Step 2: Build Full Guidelines ($29)

FAQ

Common Questions

What format is the kit?

8 files (6 Markdown + 2 guides) you can import into Notion, Obsidian, or any note-taking app. Plus 8 live HTML templates showing each brand system.

Can I use this for client work?

Yes. The commercial use license allows you to use the kit for your own brand or for client projects. You may not resell the template itself as a competing product.

How do I customize it?

Replace the example data (Aura Tech, Ember Kitchen, etc.) with your brand's information using Notion's find & replace. The structure, guidelines, and best practices stay — you just fill in your details.

Do I need to credit you?

No, credit is appreciated but not required. Use the kit freely for any purpose within the license terms.

Is there a refund policy?

Since this is a digital product with instant download, we cannot offer refunds after purchase. Please review this page carefully before buying.

Will it be updated?

Yes. All future updates are included. As we add new modules, industry examples, color schemes, or improve existing content, you'll get access at no extra cost.

Custom preview active