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

Big Shoulders Display Headings · 700 / 800

Granite Line Builders

Barlow Body · 400 / 500 / 600

Built right. Built to last. 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.

Condensed industrial strength. Breweries, trades and sports.

Display Granite Line Builders 48.8px · 3.052rem
Heading 1 Granite Line Builders 39.1px · 2.441rem
Heading 2 Granite Line Builders 31.3px · 1.953rem
Heading 3 Granite Line Builders 25px · 1.563rem
Heading 4 Granite Line Builders 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

granite-line-builders.com

New season

Built right. Built to last.

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 6.97 on white

Secondary 2.67 on white

Accent 2.81 on white

Neutral 4.64 on white

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

Some brand colors may be confused

The brand roles flagged below look alike for some viewers. Separate them with a clear lightness difference, or never rely on color alone to tell them apart. 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

Secondary and Accent look alike
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.70 AAA	Aa 6.97 AA	Aa 2.67 Fail	Aa 2.81 Fail
Surface	Aa 1.07 Fail	—	Aa 16.49 AAA	Aa 6.50 AA	Aa 2.49 Fail	Aa 2.62 Fail
Ink	Aa 17.70 AAA	Aa 16.49 AAA	—	Aa 2.53 Fail	Aa 6.62 AA	Aa 6.28 AA
Primary	Aa 6.97 AA	Aa 6.50 AA	Aa 2.53 Fail	—	Aa 2.61 Fail	Aa 2.47 Fail
Secondary	Aa 2.67 Fail	Aa 2.49 Fail	Aa 6.62 AA	Aa 2.61 Fail	—	Aa 1.05 Fail
Accent	Aa 2.81 Fail	Aa 2.62 Fail	Aa 6.28 AA	Aa 2.47 Fail	Aa 1.05 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

/* Granite Line Builders brand tokens · generated 2026-11-02 · My Brand Kit Generator */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Barlow:wght@400;500;600&display=swap');

:root {
  --brand-primary: #006276;
  --brand-on-primary: #FFFFFF;
  --brand-primary-50: #F1F8FB;
  --brand-primary-100: #E1F0F5;
  --brand-primary-200: #C2E1EA;
  --brand-primary-300: #98CAD9;
  --brand-primary-400: #6CAFC2;
  --brand-primary-500: #4194AA;
  --brand-primary-600: #20798F;
  --brand-primary-700: #006276;
  --brand-primary-800: #004857;
  --brand-primary-900: #00313D;
  --brand-primary-950: #001C24;
  --brand-secondary: #81A2BF;
  --brand-on-secondary: #15191A;
  --brand-secondary-50: #F4F7FB;
  --brand-secondary-100: #E7EEF4;
  --brand-secondary-200: #CEDDEA;
  --brand-secondary-300: #ADC4D9;
  --brand-secondary-400: #81A2BF;
  --brand-secondary-500: #6A8CA9;
  --brand-secondary-600: #50718E;
  --brand-secondary-700: #3B5972;
  --brand-secondary-800: #2A4257;
  --brand-secondary-900: #1A2D3D;
  --brand-secondary-950: #0C1A25;
  --brand-accent: #D48673;
  --brand-on-accent: #15191A;
  --brand-accent-50: #FEF4F2;
  --brand-accent-100: #FBE8E4;
  --brand-accent-200: #F5D1C8;
  --brand-accent-300: #EAB2A4;
  --brand-accent-400: #D48673;
  --brand-accent-500: #BE6F5C;
  --brand-accent-600: #A15442;
  --brand-accent-700: #823F2F;
  --brand-accent-800: #652D1F;
  --brand-accent-900: #471C12;
  --brand-accent-950: #2C0D07;
  --brand-neutral: #6D7679;
  --brand-on-neutral: #FFFFFF;
  --brand-neutral-50: #F6F7F7;
  --brand-neutral-100: #EBEDEE;
  --brand-neutral-200: #D7DBDD;
  --brand-neutral-300: #BBC2C4;
  --brand-neutral-400: #9CA5A8;
  --brand-neutral-500: #808A8D;
  --brand-neutral-600: #6D7679;
  --brand-neutral-700: #4F575A;
  --brand-neutral-800: #3A4143;
  --brand-neutral-900: #272C2E;
  --brand-neutral-950: #15191A;
  --brand-success: #2D885B;
  --brand-on-success: #FFFFFF;
  --brand-warning: #C7B05A;
  --brand-on-warning: #15191A;
  --brand-danger: #B64B67;
  --brand-on-danger: #FFFFFF;
  --brand-info: #2D7BAF;
  --brand-on-info: #FFFFFF;
  --brand-ink: #15191A;
  --brand-surface: #F6F7F7;
  --brand-text-primary: #20798F;
  --font-heading: 'Big Shoulders Display', Impact, system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading-weight: 800;
  --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;
}

/* Granite Line Builders brand tokens · generated 2026-11-02 · My Brand Kit Generator */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Barlow:wght@400;500;600&display=swap');
@import "tailwindcss";

@theme {
  --color-primary: #006276;
  --color-primary-50: #F1F8FB;
  --color-primary-100: #E1F0F5;
  --color-primary-200: #C2E1EA;
  --color-primary-300: #98CAD9;
  --color-primary-400: #6CAFC2;
  --color-primary-500: #4194AA;
  --color-primary-600: #20798F;
  --color-primary-700: #006276;
  --color-primary-800: #004857;
  --color-primary-900: #00313D;
  --color-primary-950: #001C24;
  --color-on-primary: #FFFFFF;

  --color-secondary: #81A2BF;
  --color-secondary-50: #F4F7FB;
  --color-secondary-100: #E7EEF4;
  --color-secondary-200: #CEDDEA;
  --color-secondary-300: #ADC4D9;
  --color-secondary-400: #81A2BF;
  --color-secondary-500: #6A8CA9;
  --color-secondary-600: #50718E;
  --color-secondary-700: #3B5972;
  --color-secondary-800: #2A4257;
  --color-secondary-900: #1A2D3D;
  --color-secondary-950: #0C1A25;
  --color-on-secondary: #15191A;

  --color-accent: #D48673;
  --color-accent-50: #FEF4F2;
  --color-accent-100: #FBE8E4;
  --color-accent-200: #F5D1C8;
  --color-accent-300: #EAB2A4;
  --color-accent-400: #D48673;
  --color-accent-500: #BE6F5C;
  --color-accent-600: #A15442;
  --color-accent-700: #823F2F;
  --color-accent-800: #652D1F;
  --color-accent-900: #471C12;
  --color-accent-950: #2C0D07;
  --color-on-accent: #15191A;

  --color-neutral: #6D7679;
  --color-neutral-50: #F6F7F7;
  --color-neutral-100: #EBEDEE;
  --color-neutral-200: #D7DBDD;
  --color-neutral-300: #BBC2C4;
  --color-neutral-400: #9CA5A8;
  --color-neutral-500: #808A8D;
  --color-neutral-600: #6D7679;
  --color-neutral-700: #4F575A;
  --color-neutral-800: #3A4143;
  --color-neutral-900: #272C2E;
  --color-neutral-950: #15191A;
  --color-on-neutral: #FFFFFF;

  --color-success: #2D885B;
  --color-warning: #C7B05A;
  --color-danger: #B64B67;
  --color-info: #2D7BAF;

  --font-heading: 'Big Shoulders Display', Impact, system-ui, sans-serif;
  --font-body: 'Barlow', 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;
}

// Granite Line Builders brand tokens · generated 2026-11-02 · My Brand Kit Generator
// Fonts: https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Barlow:wght@400;500;600&display=swap

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend:{
        "colors": {
            "primary": {
                "DEFAULT": "#006276",
                "50": "#F1F8FB",
                "100": "#E1F0F5",
                "200": "#C2E1EA",
                "300": "#98CAD9",
                "400": "#6CAFC2",
                "500": "#4194AA",
                "600": "#20798F",
                "700": "#006276",
                "800": "#004857",
                "900": "#00313D",
                "950": "#001C24"
            },
            "on-primary": "#FFFFFF",
            "secondary": {
                "DEFAULT": "#81A2BF",
                "50": "#F4F7FB",
                "100": "#E7EEF4",
                "200": "#CEDDEA",
                "300": "#ADC4D9",
                "400": "#81A2BF",
                "500": "#6A8CA9",
                "600": "#50718E",
                "700": "#3B5972",
                "800": "#2A4257",
                "900": "#1A2D3D",
                "950": "#0C1A25"
            },
            "on-secondary": "#15191A",
            "accent": {
                "DEFAULT": "#D48673",
                "50": "#FEF4F2",
                "100": "#FBE8E4",
                "200": "#F5D1C8",
                "300": "#EAB2A4",
                "400": "#D48673",
                "500": "#BE6F5C",
                "600": "#A15442",
                "700": "#823F2F",
                "800": "#652D1F",
                "900": "#471C12",
                "950": "#2C0D07"
            },
            "on-accent": "#15191A",
            "neutral": {
                "DEFAULT": "#6D7679",
                "50": "#F6F7F7",
                "100": "#EBEDEE",
                "200": "#D7DBDD",
                "300": "#BBC2C4",
                "400": "#9CA5A8",
                "500": "#808A8D",
                "600": "#6D7679",
                "700": "#4F575A",
                "800": "#3A4143",
                "900": "#272C2E",
                "950": "#15191A"
            },
            "on-neutral": "#FFFFFF",
            "success": "#2D885B",
            "warning": "#C7B05A",
            "danger": "#B64B67",
            "info": "#2D7BAF"
        },
        "fontFamily": {
            "heading": [
                "Big Shoulders Display",
                "Impact",
                "system-ui",
                "sans-serif"
            ],
            "body": [
                "Barlow",
                "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": "Granite Line Builders brand tokens",
    "color": {
        "primary": {
            "$type": "color",
            "$value": "#006276"
        },
        "primary-50": {
            "$type": "color",
            "$value": "#F1F8FB"
        },
        "primary-100": {
            "$type": "color",
            "$value": "#E1F0F5"
        },
        "primary-200": {
            "$type": "color",
            "$value": "#C2E1EA"
        },
        "primary-300": {
            "$type": "color",
            "$value": "#98CAD9"
        },
        "primary-400": {
            "$type": "color",
            "$value": "#6CAFC2"
        },
        "primary-500": {
            "$type": "color",
            "$value": "#4194AA"
        },
        "primary-600": {
            "$type": "color",
            "$value": "#20798F"
        },
        "primary-700": {
            "$type": "color",
            "$value": "#006276"
        },
        "primary-800": {
            "$type": "color",
            "$value": "#004857"
        },
        "primary-900": {
            "$type": "color",
            "$value": "#00313D"
        },
        "primary-950": {
            "$type": "color",
            "$value": "#001C24"
        },
        "on-primary": {
            "$type": "color",
            "$value": "#FFFFFF"
        },
        "secondary": {
            "$type": "color",
            "$value": "#81A2BF"
        },
        "secondary-50": {
            "$type": "color",
            "$value": "#F4F7FB"
        },
        "secondary-100": {
            "$type": "color",
            "$value": "#E7EEF4"
        },
        "secondary-200": {
            "$type": "color",
            "$value": "#CEDDEA"
        },
        "secondary-300": {
            "$type": "color",
            "$value": "#ADC4D9"
        },
        "secondary-400": {
            "$type": "color",
            "$value": "#81A2BF"
        },
        "secondary-500": {
            "$type": "color",
            "$value": "#6A8CA9"
        },
        "secondary-600": {
            "$type": "color",
            "$value": "#50718E"
        },
        "secondary-700": {
            "$type": "color",
            "$value": "#3B5972"
        },
        "secondary-800": {
            "$type": "color",
            "$value": "#2A4257"
        },
        "secondary-900": {
            "$type": "color",
            "$value": "#1A2D3D"
        },
        "secondary-950": {
            "$type": "color",
            "$value": "#0C1A25"
        },
        "on-secondary": {
            "$type": "color",
            "$value": "#15191A"
        },
        "accent": {
            "$type": "color",
            "$value": "#D48673"
        },
        "accent-50": {
            "$type": "color",
            "$value": "#FEF4F2"
        },
        "accent-100": {
            "$type": "color",
            "$value": "#FBE8E4"
        },
        "accent-200": {
            "$type": "color",
            "$value": "#F5D1C8"
        },
        "accent-300": {
            "$type": "color",
            "$value": "#EAB2A4"
        },
        "accent-400": {
            "$type": "color",
            "$value": "#D48673"
        },
        "accent-500": {
            "$type": "color",
            "$value": "#BE6F5C"
        },
        "accent-600": {
            "$type": "color",
            "$value": "#A15442"
        },
        "accent-700": {
            "$type": "color",
            "$value": "#823F2F"
        },
        "accent-800": {
            "$type": "color",
            "$value": "#652D1F"
        },
        "accent-900": {
            "$type": "color",
            "$value": "#471C12"
        },
        "accent-950": {
            "$type": "color",
            "$value": "#2C0D07"
        },
        "on-accent": {
            "$type": "color",
            "$value": "#15191A"
        },
        "neutral": {
            "$type": "color",
            "$value": "#6D7679"
        },
        "neutral-50": {
            "$type": "color",
            "$value": "#F6F7F7"
        },
        "neutral-100": {
            "$type": "color",
            "$value": "#EBEDEE"
        },
        "neutral-200": {
            "$type": "color",
            "$value": "#D7DBDD"
        },
        "neutral-300": {
            "$type": "color",
            "$value": "#BBC2C4"
        },
        "neutral-400": {
            "$type": "color",
            "$value": "#9CA5A8"
        },
        "neutral-500": {
            "$type": "color",
            "$value": "#808A8D"
        },
        "neutral-600": {
            "$type": "color",
            "$value": "#6D7679"
        },
        "neutral-700": {
            "$type": "color",
            "$value": "#4F575A"
        },
        "neutral-800": {
            "$type": "color",
            "$value": "#3A4143"
        },
        "neutral-900": {
            "$type": "color",
            "$value": "#272C2E"
        },
        "neutral-950": {
            "$type": "color",
            "$value": "#15191A"
        },
        "on-neutral": {
            "$type": "color",
            "$value": "#FFFFFF"
        },
        "success": {
            "$type": "color",
            "$value": "#2D885B"
        },
        "warning": {
            "$type": "color",
            "$value": "#C7B05A"
        },
        "danger": {
            "$type": "color",
            "$value": "#B64B67"
        },
        "info": {
            "$type": "color",
            "$value": "#2D7BAF"
        }
    },
    "font": {
        "heading": {
            "$type": "fontFamily",
            "$value": [
                "Big Shoulders Display",
                "serif"
            ]
        },
        "body": {
            "$type": "fontFamily",
            "$value": [
                "Barlow",
                "sans-serif"
            ]
        },
        "heading-weight": {
            "$type": "fontWeight",
            "$value": 800
        }
    },
    "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.