Free Launch Tools

Brand Kit Token Generator

Create a complete brand system with semantic colors, typography, spacing, contrast checks, and exports for Tailwind v3/v4.

Build With Bloqpage See Pricing

Brand Kit Builder

Starter presets

Brand nameTaglineWebsite (optional)

Core colors

Primary

Secondary

Accent

Surface

Background

Text

Heading fontBody font

Base radius (14px)Spacing unit (8px)Base font size (16px)Line height (1.60)Shadow strength (45%)

Live Preview

Bloqpage

Launch beautiful pages in minutes.

Brand token system with Tailwind v3 and v4 support.

Primary

100

200

300

400

500

600

700

800

900

Secondary

100

200

300

400

500

600

700

800

900

Accent

100

200

300

400

500

600

700

800

900

Contrast Checks

Primary button5.17 (AA)

Secondary button17.85 (AAA)

Accent button6.68 (AA)

Text on surface17.85 (AAA)

Text on background17.06 (AAA)

CSS Variables

:root {
  --brand-name: "Bloqpage";
  --brand-tagline: "Launch beautiful pages in minutes.";

  --color-primary-50: #eef3fd;
  --color-primary-100: #dce6fc;
  --color-primary-200: #b9cdf9;
  --color-primary-300: #8eaef5;
  --color-primary-400: #628ff1;
  --color-primary-500: #2563eb;
  --color-primary-600: #2157cf;
  --color-primary-700: #1c4bb3;
  --color-primary-800: #173d92;
  --color-primary-900: #112e6c;
  --color-secondary-50: #ececee;
  --color-secondary-100: #d9dadd;
  --color-secondary-200: #b2b5bb;
  --color-secondary-300: #828690;
  --color-secondary-400: #525866;
  --color-secondary-500: #0f172a;
  --color-secondary-600: #0d1425;
  --color-secondary-700: #0b1120;
  --color-secondary-800: #090e1a;
  --color-secondary-900: #070b13;
  --color-accent-50: #fff4ec;
  --color-accent-100: #fee9da;
  --color-accent-200: #fdd2b4;
  --color-accent-300: #fcb686;
  --color-accent-400: #fb9a57;
  --color-accent-500: #f97316;
  --color-accent-600: #db6513;
  --color-accent-700: #bd5711;
  --color-accent-800: #9a470e;
  --color-accent-900: #73350a;

  --color-surface: #ffffff;
  --color-background: #f8fafc;
  --color-text: #0f172a;
  --color-text-muted: #7b7f8a;
  --color-border-subtle: #caccd0;

  --color-on-primary: #ffffff;
  --color-on-secondary: #ffffff;
  --color-on-accent: #0b1220;

  --font-heading: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.60;

  --radius-base: 14px;
  --space-unit: 8px;
  --shadow-soft: 0 10px 32px rgba(15, 23, 42, 0.13);
  --shadow-brand: 0 14px 34px rgba(37, 99, 235, 0.26);
}

Tailwind v3 Config

// tailwind.config.ts (v3)
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#eef3fd",
          100: "#dce6fc",
          200: "#b9cdf9",
          300: "#8eaef5",
          400: "#628ff1",
          500: "#2563eb",
          600: "#2157cf",
          700: "#1c4bb3",
          800: "#173d92",
          900: "#112e6c",
        },
        secondary: {
          50: "#ececee",
          100: "#d9dadd",
          200: "#b2b5bb",
          300: "#828690",
          400: "#525866",
          500: "#0f172a",
          600: "#0d1425",
          700: "#0b1120",
          800: "#090e1a",
          900: "#070b13",
        },
        accent: {
          50: "#fff4ec",
          100: "#fee9da",
          200: "#fdd2b4",
          300: "#fcb686",
          400: "#fb9a57",
          500: "#f97316",
          600: "#db6513",
          700: "#bd5711",
          800: "#9a470e",
          900: "#73350a",
        },
        brand: {
          surface: "#ffffff",
          background: "#f8fafc",
          text: "#0f172a",
          muted: "#7b7f8a",
          border: "#caccd0",
          onPrimary: "#ffffff",
          onSecondary: "#ffffff",
          onAccent: "#0b1220",
        },
      },
      fontFamily: {
        heading: ["Sora, Inter, ui-sans-serif, system-ui, sans-serif"],
        body: ["Inter, ui-sans-serif, system-ui, sans-serif"],
      },
      borderRadius: { brand: "14px" },
      spacing: { unit: "8px" },
      boxShadow: { soft: "0 10px 32px rgba(15, 23, 42, 0.13)", brand: "0 14px 34px rgba(37, 99, 235, 0.26)" },
    },
  },
};

export default config;

Tailwind v4 Theme

/* app.css (Tailwind v4) */
@import "tailwindcss";

@theme {
  --color-primary-50: #eef3fd;
  --color-primary-100: #dce6fc;
  --color-primary-200: #b9cdf9;
  --color-primary-300: #8eaef5;
  --color-primary-400: #628ff1;
  --color-primary-500: #2563eb;
  --color-primary-600: #2157cf;
  --color-primary-700: #1c4bb3;
  --color-primary-800: #173d92;
  --color-primary-900: #112e6c;
  --color-secondary-50: #ececee;
  --color-secondary-100: #d9dadd;
  --color-secondary-200: #b2b5bb;
  --color-secondary-300: #828690;
  --color-secondary-400: #525866;
  --color-secondary-500: #0f172a;
  --color-secondary-600: #0d1425;
  --color-secondary-700: #0b1120;
  --color-secondary-800: #090e1a;
  --color-secondary-900: #070b13;
  --color-accent-50: #fff4ec;
  --color-accent-100: #fee9da;
  --color-accent-200: #fdd2b4;
  --color-accent-300: #fcb686;
  --color-accent-400: #fb9a57;
  --color-accent-500: #f97316;
  --color-accent-600: #db6513;
  --color-accent-700: #bd5711;
  --color-accent-800: #9a470e;
  --color-accent-900: #73350a;
  --color-brand-surface: #ffffff;
  --color-brand-background: #f8fafc;
  --color-brand-text: #0f172a;
  --color-brand-muted: #7b7f8a;
  --color-brand-border: #caccd0;
  --font-heading: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --radius-brand: 14px;
  --spacing-unit: 8px;
  --shadow-soft: 0 10px 32px rgba(15, 23, 42, 0.13);
  --shadow-brand: 0 14px 34px rgba(37, 99, 235, 0.26);
}

:root {
  font-size: 16px;
  line-height: 1.60;
}

JSON Tokens

{
  "brand": {
    "name": "Bloqpage",
    "slug": "bloqpage",
    "tagline": "Launch beautiful pages in minutes.",
    "website": "https://bloqpage.com"
  },
  "colors": {
    "primary": {
      "50": "#eef3fd",
      "100": "#dce6fc",
      "200": "#b9cdf9",
      "300": "#8eaef5",
      "400": "#628ff1",
      "500": "#2563eb",
      "600": "#2157cf",
      "700": "#1c4bb3",
      "800": "#173d92",
      "900": "#112e6c"
    },
    "secondary": {
      "50": "#ececee",
      "100": "#d9dadd",
      "200": "#b2b5bb",
      "300": "#828690",
      "400": "#525866",
      "500": "#0f172a",
      "600": "#0d1425",
      "700": "#0b1120",
      "800": "#090e1a",
      "900": "#070b13"
    },
    "accent": {
      "50": "#fff4ec",
      "100": "#fee9da",
      "200": "#fdd2b4",
      "300": "#fcb686",
      "400": "#fb9a57",
      "500": "#f97316",
      "600": "#db6513",
      "700": "#bd5711",
      "800": "#9a470e",
      "900": "#73350a"
    },
    "semantic": {
      "surface": "#ffffff",
      "background": "#f8fafc",
      "text": "#0f172a",
      "mutedText": "#7b7f8a",
      "borderSubtle": "#caccd0",
      "onPrimary": "#ffffff",
      "onSecondary": "#ffffff",
      "onAccent": "#0b1220"
    }
  },
  "typography": {
    "heading": "Sora, Inter, ui-sans-serif, system-ui, sans-serif",
    "body": "Inter, ui-sans-serif, system-ui, sans-serif",
    "baseFontSizePx": 16,
    "lineHeight": 1.6
  },
  "ui": {
    "radiusBasePx": 14,
    "spacingUnitPx": 8,
    "shadowSoft": "0 10px 32px rgba(15, 23, 42, 0.13)",
    "shadowBrand": "0 14px 34px rgba(37, 99, 235, 0.26)"
  },
  "contrast": {
    "primary": 5.17,
    "secondary": 17.85,
    "accent": 6.68,
    "textOnSurface": 17.85,
    "textOnBackground": 17.06
  }
}

Brand Guidelines (Markdown)

# Bloqpage Brand Kit

Launch beautiful pages in minutes.

- Website: https://bloqpage.com
- Generated with BLOQPAGE Brand Kit Token Generator

## Accessibility
- Primary contrast: 5.17 (AA)
- Secondary contrast: 17.85 (AAA)
- Accent contrast: 6.68 (AA)
- Text on surface: 17.85 (AAA)
- Text on background: 17.06 (AAA)

## Next
- Use bloqpage-tailwind-v3.config.ts for Tailwind v3
- Use bloqpage-tailwind-v4-theme.css for Tailwind v4

Publish In Bloqpage

Brand kit ready. Sign in and apply your token system while building your Bloqpage site.