designlang
Brand guidelines #ec0853

June 12, 2026

tailwindcss.com

A reading of the visual language at https://tailwindcss.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
A 90/100
Tokens
5 colours · 12 sizes
Generated
designlang
Chapter 01

About

Page intent
landing 45% confidence
Material language
flat
Imagery style
photography
Component library
tailwindcss
Stack
next · Tailwind
Voice tone
friendly
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 2 neutrals · 5 total

Primary #EC0853
RGB
236, 8, 83
HSL
340°, 93%, 48%
Secondary #0080FF
RGB
0, 128, 255
HSL
210°, 100%, 50%
Accent #2CA8FF
RGB
44, 168, 255
HSL
205°, 100%, 59%

Neutrals

#000000
#FFFFFF

Full palette

#000000
#FFFFFF
#0080FF
#2CA8FF
#EC0853

WCAG 100% · 4 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

2 families · 12 sizes · 4 weights

Display
inter
Body
plexMono
Weights
400, 500, 600, 700

Specimen

Tailwind CSS
Resources

Scale

StepSizeSample
t00 96px Tailwind CSS
t01 40px Tailwind CSS
t02 36px Tailwind CSS
t03 30px Tailwind CSS
t04 24px Tailwind CSS
t05 20px Tailwind CSS
t06 18px Tailwind CSS
t07 17px Tailwind CSS
t08 16px Tailwind CSS
t09 14px Tailwind CSS
Chapter 05

Spacing

Base 4px · 8 steps captured

Rhythm

1px
57px
64px
72px
96px
160px
336px
400px
Chapter 06

Shape

6 radii · 6 elevation tiers

Border radii

4px
8px
12px
16px
24px
32px

Elevation

xs
sm
md
lg
xl
2xl
Chapter 07

Iconography

unknown · 24 captured

Library
unknown
Confidence
0%
Stroke style
—
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: mixed · 2 durations · 2 easings

Duration scale

150ms
300ms

Easings

Chapter 09

Components

tailwindcss · 1 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
outline
Sizes
xs, sm, lg
Chapter 10

Voice

friendly · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
4 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #ec0853;
  --font-display: "inter";
  --space-base: 4px;
  --radius-md: 8px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#ec0853' },
      fontFamily: { display: ['inter', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '8px' },
    },
  },
};

Run npx designlang pack tailwindcss.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.