Free · No sign-up · Commercial use OK

Your brand kit, done right in under a minute.

Coordinated colors, expert font pairings, accessibility checks and a print-ready brand guide, generated with real color science.

Brand name Tagline Industry

Start from a color

Mood

Harmony

Press Space to generate · lock colors you love and they stay put

Color palette

Built in OKLCH, a perceptual color space, so every shade steps evenly. Click any chip to copy.

Primary

Logo, headlines, primary buttons

Secondary

Supporting surfaces, illustrations

Accent

Highlights, badges, calls to attention

Neutral

Text, borders, backgrounds

Status colors · harmonized to your primary

Typography

Scale

Curated pairings 67 typefaces · OFL licensed

Browse by personality 42 pairings

Instrument Serif Headings · 400

Fern & Light

Instrument Sans Body · 400 / 500 / 600

Moments, honestly kept. Good typography is invisible until it’s missing: it sets the tone before a single word is read, and makes every page feel like it came from the same place.

A condensed contemporary serif with its native sans. Studio-grade restraint.

Display Fern & Light 48.8px · 3.052rem
Heading 1 Fern & Light 39.1px · 2.441rem
Heading 2 Fern & Light 31.3px · 1.953rem
Heading 3 Fern & Light 25px · 1.563rem
Heading 4 Fern & Light 20px · 1.25rem
Body The quick brown fox jumps over the lazy dog 16px · 1rem
Small The quick brown fox jumps over the lazy dog 12.8px · 0.8rem
Caption The quick brown fox jumps over the lazy dog 10.2px · 0.64rem

Live preview

Vision

fern-light.com

New season

Moments, honestly kept.

Everything you need, nothing you don’t. Crafted with care and built to last for years, not seasons.

Explore the collection Our story

Thoughtfully made

Every detail considered, from first sketch to final stitch.

Fair & transparent

Honest pricing and partners we’re proud to name.

Here for the long run

Free repairs for life. Because things should last.

Wordmark

Your name, set in your brand typeface. Pick a treatment, then download it for every background.

On lightTransparent PNG · brand color

On primaryPNG · brand background

On darkPNG · ink background

Wordmark pack Color, reversed and one-color black & white versions at 2400px, for web, documents, stamps and embroidery.

Readable for everyone, including the 1 in 20 people with color-vision deficiency.

Text-safe shades · the exact shade to use when a brand color is too light or dark for text

Primary 14.68 on white

Secondary 4.35 on white

Accent 2.38 on white

Neutral 4.65 on white

Color-vision check · how your palette reads for the 1 in 20 people with color-vision deficiency

Your brand colors stay distinguishable

Primary, secondary and accent remain clearly different in all four simulations. Your status colors (like green success and red error) merge for some viewers, as most red/green pairs do. Always pair them with an icon or text label.

ProtanRed-weak · ≈2% of men

All distinguishable

DeutanGreen-weak · ≈6% of men

Success and Danger states look alike

TritanBlue-weak · Rare

All distinguishable

MonochromeNo color · Very rare

Success and Danger states look alike

Simulated at full severity (dichromacy) using the Machado 2009 model, the worst case. Preview your designs the same way with the Vision control in Live preview.

Contrast matrix · text color (rows) on background (columns)

Text on background	White	Surface	Ink	Primary	Secondary	Accent
White	—	Aa 1.07 Fail	Aa 17.66 AAA	Aa 14.68 AAA	Aa 4.35 AA Large	Aa 2.38 Fail
Surface	Aa 1.07 Fail	—	Aa 16.44 AAA	Aa 13.67 AAA	Aa 4.05 AA Large	Aa 2.21 Fail
Ink	Aa 17.66 AAA	Aa 16.44 AAA	—	Aa 1.20 Fail	Aa 4.05 AA Large	Aa 7.41 AAA
Primary	Aa 14.68 AAA	Aa 13.67 AAA	Aa 1.20 Fail	—	Aa 3.36 AA Large	Aa 6.15 AA
Secondary	Aa 4.35 AA Large	Aa 4.05 AA Large	Aa 4.05 AA Large	Aa 3.36 AA Large	—	Aa 1.82 Fail
Accent	Aa 2.38 Fail	Aa 2.21 Fail	Aa 7.41 AAA	Aa 6.15 AA	Aa 1.82 Fail	—

“Fix” shifts only lightness in OKLCH, keeping hue and saturation, then replaces the brand color. Undo with ⌘/Ctrl+Z. Prefer the text-safe shade above when you want to keep the original color for fills.

Download your kit

Everything a designer, developer or printer will ask you for.

Brand guide8-page guide · print or save as PDF Complete kit.zip · guide, SVG, CSS, Tailwind, tokens Palette SVGFor Figma, Canva, Illustrator

/* Fern & Light brand tokens · generated 2026-11-02 · My Brand Kit Generator */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400&family=Instrument+Sans:wght@400;500;600&display=swap');

:root {
  --brand-primary: #202B22;
  --brand-on-primary: #FFFFFF;
  --brand-primary-50: #F6F7F6;
  --brand-primary-100: #EBEEEB;
  --brand-primary-200: #D7DDD7;
  --brand-primary-300: #BAC4BC;
  --brand-primary-400: #9BA79D;
  --brand-primary-500: #7E8C80;
  --brand-primary-600: #647166;
  --brand-primary-700: #4D594F;
  --brand-primary-800: #39433B;
  --brand-primary-900: #202B22;
  --brand-primary-950: #151A15;
  --brand-secondary: #737B75;
  --brand-on-secondary: #FFFFFF;
  --brand-secondary-50: #F6F7F6;
  --brand-secondary-100: #EBEDEC;
  --brand-secondary-200: #D8DCD9;
  --brand-secondary-300: #BDC3BE;
  --brand-secondary-400: #9EA5A0;
  --brand-secondary-500: #828A84;
  --brand-secondary-600: #737B75;
  --brand-secondary-700: #505752;
  --brand-secondary-800: #3B423D;
  --brand-secondary-900: #282D29;
  --brand-secondary-950: #161917;
  --brand-accent: #00C163;
  --brand-on-accent: #171918;
  --brand-accent-50: #EEFBF0;
  --brand-accent-100: #DAF5E0;
  --brand-accent-200: #B4EAC2;
  --brand-accent-300: #7DD998;
  --brand-accent-400: #00C163;
  --brand-accent-500: #00A252;
  --brand-accent-600: #008341;
  --brand-accent-700: #006732;
  --brand-accent-800: #004E24;
  --brand-accent-900: #003616;
  --brand-accent-950: #001F0A;
  --brand-neutral: #727573;
  --brand-on-neutral: #FFFFFF;
  --brand-neutral-50: #F6F7F6;
  --brand-neutral-100: #ECEDEC;
  --brand-neutral-200: #DADBDA;
  --brand-neutral-300: #BFC1C0;
  --brand-neutral-400: #A1A4A2;
  --brand-neutral-500: #858886;
  --brand-neutral-600: #727573;
  --brand-neutral-700: #535654;
  --brand-neutral-800: #3E403F;
  --brand-neutral-900: #2A2C2B;
  --brand-neutral-950: #171918;
  --brand-success: #3E8651;
  --brand-on-success: #FFFFFF;
  --brand-warning: #D0AC59;
  --brand-on-warning: #171918;
  --brand-danger: #B65329;
  --brand-on-danger: #FFFFFF;
  --brand-info: #177EAB;
  --brand-on-info: #FFFFFF;
  --brand-ink: #171918;
  --brand-surface: #F6F7F6;
  --brand-text-primary: #647166;
  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading-weight: 400;
  --text-display: 3.052rem;
  --text-h1: 2.441rem;
  --text-h2: 1.953rem;
  --text-h3: 1.563rem;
  --text-h4: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.8rem;
  --text-caption: 0.64rem;
}

/* Fern & Light brand tokens · generated 2026-11-02 · My Brand Kit Generator */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400&family=Instrument+Sans:wght@400;500;600&display=swap');
@import "tailwindcss";

@theme {
  --color-primary: #202B22;
  --color-primary-50: #F6F7F6;
  --color-primary-100: #EBEEEB;
  --color-primary-200: #D7DDD7;
  --color-primary-300: #BAC4BC;
  --color-primary-400: #9BA79D;
  --color-primary-500: #7E8C80;
  --color-primary-600: #647166;
  --color-primary-700: #4D594F;
  --color-primary-800: #39433B;
  --color-primary-900: #202B22;
  --color-primary-950: #151A15;
  --color-on-primary: #FFFFFF;

  --color-secondary: #737B75;
  --color-secondary-50: #F6F7F6;
  --color-secondary-100: #EBEDEC;
  --color-secondary-200: #D8DCD9;
  --color-secondary-300: #BDC3BE;
  --color-secondary-400: #9EA5A0;
  --color-secondary-500: #828A84;
  --color-secondary-600: #737B75;
  --color-secondary-700: #505752;
  --color-secondary-800: #3B423D;
  --color-secondary-900: #282D29;
  --color-secondary-950: #161917;
  --color-on-secondary: #FFFFFF;

  --color-accent: #00C163;
  --color-accent-50: #EEFBF0;
  --color-accent-100: #DAF5E0;
  --color-accent-200: #B4EAC2;
  --color-accent-300: #7DD998;
  --color-accent-400: #00C163;
  --color-accent-500: #00A252;
  --color-accent-600: #008341;
  --color-accent-700: #006732;
  --color-accent-800: #004E24;
  --color-accent-900: #003616;
  --color-accent-950: #001F0A;
  --color-on-accent: #171918;

  --color-neutral: #727573;
  --color-neutral-50: #F6F7F6;
  --color-neutral-100: #ECEDEC;
  --color-neutral-200: #DADBDA;
  --color-neutral-300: #BFC1C0;
  --color-neutral-400: #A1A4A2;
  --color-neutral-500: #858886;
  --color-neutral-600: #727573;
  --color-neutral-700: #535654;
  --color-neutral-800: #3E403F;
  --color-neutral-900: #2A2C2B;
  --color-neutral-950: #171918;
  --color-on-neutral: #FFFFFF;

  --color-success: #3E8651;
  --color-warning: #D0AC59;
  --color-danger: #B65329;
  --color-info: #177EAB;

  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-display: 3.052rem;
  --text-display--line-height: 1.05;
  --text-h1: 2.441rem;
  --text-h1--line-height: 1.1;
  --text-h2: 1.953rem;
  --text-h2--line-height: 1.15;
  --text-h3: 1.563rem;
  --text-h3--line-height: 1.25;
  --text-h4: 1.25rem;
  --text-h4--line-height: 1.3;
  --text-body: 1rem;
  --text-body--line-height: 1.6;
  --text-small: 0.8rem;
  --text-small--line-height: 1.5;
  --text-caption: 0.64rem;
  --text-caption--line-height: 1.4;
}

// Fern & Light brand tokens · generated 2026-11-02 · My Brand Kit Generator
// Fonts: https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400&family=Instrument+Sans:wght@400;500;600&display=swap

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend:{
        "colors": {
            "primary": {
                "DEFAULT": "#202B22",
                "50": "#F6F7F6",
                "100": "#EBEEEB",
                "200": "#D7DDD7",
                "300": "#BAC4BC",
                "400": "#9BA79D",
                "500": "#7E8C80",
                "600": "#647166",
                "700": "#4D594F",
                "800": "#39433B",
                "900": "#202B22",
                "950": "#151A15"
            },
            "on-primary": "#FFFFFF",
            "secondary": {
                "DEFAULT": "#737B75",
                "50": "#F6F7F6",
                "100": "#EBEDEC",
                "200": "#D8DCD9",
                "300": "#BDC3BE",
                "400": "#9EA5A0",
                "500": "#828A84",
                "600": "#737B75",
                "700": "#505752",
                "800": "#3B423D",
                "900": "#282D29",
                "950": "#161917"
            },
            "on-secondary": "#FFFFFF",
            "accent": {
                "DEFAULT": "#00C163",
                "50": "#EEFBF0",
                "100": "#DAF5E0",
                "200": "#B4EAC2",
                "300": "#7DD998",
                "400": "#00C163",
                "500": "#00A252",
                "600": "#008341",
                "700": "#006732",
                "800": "#004E24",
                "900": "#003616",
                "950": "#001F0A"
            },
            "on-accent": "#171918",
            "neutral": {
                "DEFAULT": "#727573",
                "50": "#F6F7F6",
                "100": "#ECEDEC",
                "200": "#DADBDA",
                "300": "#BFC1C0",
                "400": "#A1A4A2",
                "500": "#858886",
                "600": "#727573",
                "700": "#535654",
                "800": "#3E403F",
                "900": "#2A2C2B",
                "950": "#171918"
            },
            "on-neutral": "#FFFFFF",
            "success": "#3E8651",
            "warning": "#D0AC59",
            "danger": "#B65329",
            "info": "#177EAB"
        },
        "fontFamily": {
            "heading": [
                "Instrument Serif",
                "Georgia",
                "serif"
            ],
            "body": [
                "Instrument Sans",
                "system-ui",
                "-apple-system",
                "Segoe UI",
                "sans-serif"
            ]
        },
        "fontSize": {
            "display": [
                "3.052rem",
                {
                    "lineHeight": "1.05"
                }
            ],
            "h1": [
                "2.441rem",
                {
                    "lineHeight": "1.1"
                }
            ],
            "h2": [
                "1.953rem",
                {
                    "lineHeight": "1.15"
                }
            ],
            "h3": [
                "1.563rem",
                {
                    "lineHeight": "1.25"
                }
            ],
            "h4": [
                "1.25rem",
                {
                    "lineHeight": "1.3"
                }
            ],
            "body": [
                "1rem",
                {
                    "lineHeight": "1.6"
                }
            ],
            "small": [
                "0.8rem",
                {
                    "lineHeight": "1.5"
                }
            ],
            "caption": [
                "0.64rem",
                {
                    "lineHeight": "1.4"
                }
            ]
        }
    }
  }
};

{
    "$description": "Fern & Light brand tokens",
    "color": {
        "primary": {
            "$type": "color",
            "$value": "#202B22"
        },
        "primary-50": {
            "$type": "color",
            "$value": "#F6F7F6"
        },
        "primary-100": {
            "$type": "color",
            "$value": "#EBEEEB"
        },
        "primary-200": {
            "$type": "color",
            "$value": "#D7DDD7"
        },
        "primary-300": {
            "$type": "color",
            "$value": "#BAC4BC"
        },
        "primary-400": {
            "$type": "color",
            "$value": "#9BA79D"
        },
        "primary-500": {
            "$type": "color",
            "$value": "#7E8C80"
        },
        "primary-600": {
            "$type": "color",
            "$value": "#647166"
        },
        "primary-700": {
            "$type": "color",
            "$value": "#4D594F"
        },
        "primary-800": {
            "$type": "color",
            "$value": "#39433B"
        },
        "primary-900": {
            "$type": "color",
            "$value": "#202B22"
        },
        "primary-950": {
            "$type": "color",
            "$value": "#151A15"
        },
        "on-primary": {
            "$type": "color",
            "$value": "#FFFFFF"
        },
        "secondary": {
            "$type": "color",
            "$value": "#737B75"
        },
        "secondary-50": {
            "$type": "color",
            "$value": "#F6F7F6"
        },
        "secondary-100": {
            "$type": "color",
            "$value": "#EBEDEC"
        },
        "secondary-200": {
            "$type": "color",
            "$value": "#D8DCD9"
        },
        "secondary-300": {
            "$type": "color",
            "$value": "#BDC3BE"
        },
        "secondary-400": {
            "$type": "color",
            "$value": "#9EA5A0"
        },
        "secondary-500": {
            "$type": "color",
            "$value": "#828A84"
        },
        "secondary-600": {
            "$type": "color",
            "$value": "#737B75"
        },
        "secondary-700": {
            "$type": "color",
            "$value": "#505752"
        },
        "secondary-800": {
            "$type": "color",
            "$value": "#3B423D"
        },
        "secondary-900": {
            "$type": "color",
            "$value": "#282D29"
        },
        "secondary-950": {
            "$type": "color",
            "$value": "#161917"
        },
        "on-secondary": {
            "$type": "color",
            "$value": "#FFFFFF"
        },
        "accent": {
            "$type": "color",
            "$value": "#00C163"
        },
        "accent-50": {
            "$type": "color",
            "$value": "#EEFBF0"
        },
        "accent-100": {
            "$type": "color",
            "$value": "#DAF5E0"
        },
        "accent-200": {
            "$type": "color",
            "$value": "#B4EAC2"
        },
        "accent-300": {
            "$type": "color",
            "$value": "#7DD998"
        },
        "accent-400": {
            "$type": "color",
            "$value": "#00C163"
        },
        "accent-500": {
            "$type": "color",
            "$value": "#00A252"
        },
        "accent-600": {
            "$type": "color",
            "$value": "#008341"
        },
        "accent-700": {
            "$type": "color",
            "$value": "#006732"
        },
        "accent-800": {
            "$type": "color",
            "$value": "#004E24"
        },
        "accent-900": {
            "$type": "color",
            "$value": "#003616"
        },
        "accent-950": {
            "$type": "color",
            "$value": "#001F0A"
        },
        "on-accent": {
            "$type": "color",
            "$value": "#171918"
        },
        "neutral": {
            "$type": "color",
            "$value": "#727573"
        },
        "neutral-50": {
            "$type": "color",
            "$value": "#F6F7F6"
        },
        "neutral-100": {
            "$type": "color",
            "$value": "#ECEDEC"
        },
        "neutral-200": {
            "$type": "color",
            "$value": "#DADBDA"
        },
        "neutral-300": {
            "$type": "color",
            "$value": "#BFC1C0"
        },
        "neutral-400": {
            "$type": "color",
            "$value": "#A1A4A2"
        },
        "neutral-500": {
            "$type": "color",
            "$value": "#858886"
        },
        "neutral-600": {
            "$type": "color",
            "$value": "#727573"
        },
        "neutral-700": {
            "$type": "color",
            "$value": "#535654"
        },
        "neutral-800": {
            "$type": "color",
            "$value": "#3E403F"
        },
        "neutral-900": {
            "$type": "color",
            "$value": "#2A2C2B"
        },
        "neutral-950": {
            "$type": "color",
            "$value": "#171918"
        },
        "on-neutral": {
            "$type": "color",
            "$value": "#FFFFFF"
        },
        "success": {
            "$type": "color",
            "$value": "#3E8651"
        },
        "warning": {
            "$type": "color",
            "$value": "#D0AC59"
        },
        "danger": {
            "$type": "color",
            "$value": "#B65329"
        },
        "info": {
            "$type": "color",
            "$value": "#177EAB"
        }
    },
    "font": {
        "heading": {
            "$type": "fontFamily",
            "$value": [
                "Instrument Serif",
                "serif"
            ]
        },
        "body": {
            "$type": "fontFamily",
            "$value": [
                "Instrument Sans",
                "sans-serif"
            ]
        },
        "heading-weight": {
            "$type": "fontWeight",
            "$value": 400
        }
    },
    "fontSize": {
        "display": {
            "$type": "dimension",
            "$value": "3.052rem"
        },
        "h1": {
            "$type": "dimension",
            "$value": "2.441rem"
        },
        "h2": {
            "$type": "dimension",
            "$value": "1.953rem"
        },
        "h3": {
            "$type": "dimension",
            "$value": "1.563rem"
        },
        "h4": {
            "$type": "dimension",
            "$value": "1.25rem"
        },
        "body": {
            "$type": "dimension",
            "$value": "1rem"
        },
        "small": {
            "$type": "dimension",
            "$value": "0.8rem"
        },
        "caption": {
            "$type": "dimension",
            "$value": "0.64rem"
        }
    }
}

Start from your industry

All 25 industries →

How it works

Set the tone. Choose a mood and harmony, or start from a color you already own. The generator picks hue, lightness and saturation to match.
Refine. Lock what you love, regenerate the rest. Edit any hex directly. Pick from 42 hand-curated font pairings.
Check. Every combination is tested against WCAG 2.2. Failing pairs get a one-click fix and a text-safe alternative.
Ship. Download a print-ready brand guide, SVG palette, CSS variables, Tailwind theme and design tokens.

Read the guide to choosing brand colors & fonts →

Questions

Is the Brand Kit Generator really free?

Yes. Every palette, font pairing, brand guide and code export is free with no sign-up and no watermark. The site is supported by unobtrusive ads.

Can I use the colors and fonts commercially?

Yes. Colors cannot be owned, and every font pairing uses Google Fonts released under the SIL Open Font License, which allows commercial use in logos, websites, print and products.

What makes a color combination accessible?

WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text and icons. The generator checks every combination in your kit and suggests the nearest passing shade when one fails.

How do I get my brand guide as a PDF?

Open the brand guide, click “Save as PDF”, then choose “Save as PDF” as the destination in the print dialog. The guide is laid out as print-ready US Letter pages.

Can I start from my existing brand color?

Yes. Enter your hex code in “Start from a color”, or type it into any swatch. Lock it, and the generator builds a harmonious palette around it every time you regenerate.

How do I share or come back to a kit?

Every kit lives in its URL. Use “Share link” to copy it. Anyone who opens it sees the exact same kit and can keep editing. No account needed.