Example Brand

A compact example slab showing colours, typography, spacing, and logo guidance.

Code

Copy the CSS custom properties into your app, then map them into Tailwind.

CSS rules

/* Example Brand brand tokens */
:root {
  --slab-name: "Example Brand";
  --slab-color-ink: #111827;
  --slab-color-ink-rgb: 17 24 39;
  --slab-color-blue: #2563EB;
  --slab-color-blue-rgb: 37 99 235;
  --slab-color-sky: #38BDF8;
  --slab-color-sky-rgb: 56 189 248;
  --slab-color-lime: #A3E635;
  --slab-color-lime-rgb: 163 230 53;
  --slab-color-mist: #F1F5F9;
  --slab-color-mist-rgb: 241 245 249;
  --slab-color-paper: #FFFFFF;
  --slab-color-paper-rgb: 255 255 255;
  --slab-font-body: "Inter";
  --slab-font-inter-weights: 400 600 700;
  --slab-type-display-size: 4rem;
  --slab-type-display-size: 4rem;
  --slab-type-display-line-height: 1.0;
  --slab-type-display-weight: 700;
  --slab-type-display-breakpoint: "Base";
  --slab-type-display-breakpoint-mode: "mobile_first";
  --slab-type-display-letter-spacing: -2%;
  --slab-type-h1-size: 2.75rem;
  --slab-type-h1-size: 2.75rem;
  --slab-type-h1-line-height: 1.05;
  --slab-type-h1-weight: 700;
  --slab-type-h1-breakpoint: "Base";
  --slab-type-h1-breakpoint-mode: "mobile_first";
  --slab-type-h1-letter-spacing: -1%;
  --slab-type-h2-size: 1.75rem;
  --slab-type-h2-size: 1.75rem;
  --slab-type-h2-line-height: 1.15;
  --slab-type-h2-weight: 700;
  --slab-type-h2-breakpoint: "Base";
  --slab-type-h2-breakpoint-mode: "mobile_first";
  --slab-type-body-size: 1rem;
  --slab-type-body-size: 1rem;
  --slab-type-body-line-height: 1.6;
  --slab-type-body-weight: 400;
  --slab-type-body-breakpoint: "Base";
  --slab-type-body-breakpoint-mode: "mobile_first";
  --slab-type-caption-size: 0.8125rem;
  --slab-type-caption-size: 0.8125rem;
  --slab-type-caption-line-height: 1.4;
  --slab-type-caption-weight: 600;
  --slab-type-caption-breakpoint: "Base";
  --slab-type-caption-breakpoint-mode: "mobile_first";
  --slab-spacing-base: 4px;
  --slab-space-4: 4px;
  --slab-space-8: 8px;
  --slab-space-12: 12px;
  --slab-space-16: 16px;
  --slab-space-24: 24px;
  --slab-space-32: 32px;
  --slab-space-48: 48px;
  --slab-space-64: 64px;
  --slab-space-96: 96px;
}

Tailwind rules

/* Example Brand Tailwind v4 theme tokens */
@theme {
  --color-slab-ink: var(--slab-color-ink);
  --color-slab-blue: var(--slab-color-blue);
  --color-slab-sky: var(--slab-color-sky);
  --color-slab-lime: var(--slab-color-lime);
  --color-slab-mist: var(--slab-color-mist);
  --color-slab-paper: var(--slab-color-paper);
  --font-slab-body: var(--slab-font-body);
  --font-slab-inter: var(--slab-font-inter);
  --text-slab-display: var(--slab-type-display-size);
  --leading-slab-display: var(--slab-type-display-line-height);
  --text-slab-h1: var(--slab-type-h1-size);
  --leading-slab-h1: var(--slab-type-h1-line-height);
  --text-slab-h2: var(--slab-type-h2-size);
  --leading-slab-h2: var(--slab-type-h2-line-height);
  --text-slab-body: var(--slab-type-body-size);
  --leading-slab-body: var(--slab-type-body-line-height);
  --text-slab-caption: var(--slab-type-caption-size);
  --leading-slab-caption: var(--slab-type-caption-line-height);
  --spacing-slab-4: var(--slab-space-4);
  --spacing-slab-8: var(--slab-space-8);
  --spacing-slab-12: var(--slab-space-12);
  --spacing-slab-16: var(--slab-space-16);
  --spacing-slab-24: var(--slab-space-24);
  --spacing-slab-32: var(--slab-space-32);
  --spacing-slab-48: var(--slab-space-48);
  --spacing-slab-64: var(--slab-space-64);
  --spacing-slab-96: var(--slab-space-96);
}