DESIGN.md · measured October 21, 2026

Tailwind CSS design system

Dark interface measured from tailwindcss.com: inter type, vivid cyan accents, flat surfaces and 4px corners.

Background: #030712
Primary: #00BCFF
Type: inter
Corners: 4px

Download DESIGN.md

From tailwindcss.com ↗ · 359 elements at 1440×900 and 390×844 · Independent analysis, not affiliated with Tailwind CSS

Tailwind CSS colors

13 roles measured on the page, grouped by where each color is used.

Surfaces

Near Black#030712backgroundPage background · 3×

White 10%#FFFFFF1AoverlayTranslucent fill for cards and controls · 23×

White 20%#FFFFFF33overlay-strongStronger translucent fill · 3×

Dark Blue#364153inverse-surfaceHigh-contrast fills · 2×

Text

White#FFFFFFon-surfacePrimary text and headings · 35×

Light Blue#CAD5E2on-surface-variantSecondary text · 6×

Blue#99A1AFon-surface-mutedMuted text and metadata · 3×

Blue#90A1B9on-surface-subtleSubtle text and placeholders · 32×

Near Black#000000on-primaryText and icons on primary

Accents

Vivid Cyan#00BCFFprimaryBrand color in the logo · 5×

Pink#FB64B6secondaryMost used accent color · 15×

Light Cyan#74D4FFtertiaryMost used accent color · 11×

Borders

Light Cyan 30%#74D4FF4DoutlineBorders and dividers · 1×

Tailwind CSS fonts

2 families.

AainterWeights 400, 500, 600inter, inter Fallback, system-ui

AaplexMonoMonospace · Weights 400plexMono, plexMono Fallback, monospace

headline-displayPage title (h1)Tailwind CSS96px · 400 · 1 · -0.05em
mobile 36px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog40px · 500 · 1 · -0.05em

body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog18px · 500 · 1.56

body-smSecondary and small textThe quick brown fox jumps over the lazy dog14px · 400 · 2

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog14px · 600 · 2

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog12px · 400 · 1.67

codeCode and technical valuesconst ready = true;13px · 400 · 1.85

Contrast

Text on #030712

AaAAA20.1:1

AaAAA13.5:1

AaAAA7.7:1

Spacing

4px grid · 96% of values fit

xs4px

sm8px

md16px

lg20px

xl36px

gutter8px

Breakpoints: 600px

Shapes

Corner radii, most used first.

sm4px · 20×

xl32px · 10×

lg16px · 6×

md8px · 4×

Depth

Inset

Ring

Components

Rebuilt from the measured CSS.

Get started

button-primaryFilled button · hover to see the measured hover state

v4.3

button-ghostText button

Input text

input-fieldInput field

Inline link

linkInline link

Motion

Interface transitions

0.15s

cubic-bezier(0.4, 0, 0.2, 1)

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #030712 for the page.
Keep text in 4 levels: #FFFFFF, #CAD5E2, #99A1AF, #90A1B9.
Use #00BCFF as the brand accent: header, logo and key highlights.
Set headlines in inter with tight tracking (-0.05em).
Keep spacing on the 4px grid.
Use 4px corners on most elements; larger surfaces also use 32px, 16px and 8px.
Add drop shadows for depth; use hairline rings and borders and contrast.
Introduce new font families beyond inter and plexMono.
Use #00BCFF for large backgrounds or body text.
Make interface transitions slower than 0.15s.

DESIGN.md204 lines

---
version: alpha
name: Tailwind CSS
description: "Dark interface measured from tailwindcss.com: inter type, vivid cyan accents, flat surfaces and 4px corners."
colors:
  background: "#030712"
  surface: "#030712"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  on-surface-variant: "#CAD5E2"
  on-surface-muted: "#99A1AF"
  on-surface-subtle: "#90A1B9"
  overlay: "#FFFFFF1A"
  overlay-strong: "#FFFFFF33"
  outline: "#74D4FF4D"
  primary: "#00BCFF"
  on-primary: "#000000"
  inverse-surface: "#364153"
  secondary: "#FB64B6"
  tertiary: "#74D4FF"
typography:
  headline-display:
    fontFamily: inter
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: inter
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.05em
  body-md:
    fontFamily: inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: inter
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.56
  body-sm:
    fontFamily: inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2
  label-md:
    fontFamily: inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 2
  label-sm:
    fontFamily: inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
  code:
    fontFamily: plexMono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.85
  headline-display-mobile:
    fontFamily: inter
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.11
    letterSpacing: -0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 32px
spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 36px
  gutter: 8px
components:
  button-primary:
    backgroundColor: "{colors.inverse-surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    padding: 8px 16px
    height: 40px
  button-primary-hover:
    backgroundColor: "#4A5565"
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.lg}"
    padding: 2px 6px 2px 10px
  input-field:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 0px
  link:
    textColor: "{colors.on-surface}"
---

# Tailwind CSS Design System

## Overview

Tailwind CSS describes itself as: “Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.” The interface is dark, built on **Near Black (#030712)** with **White (#FFFFFF)** text, and **Vivid Cyan (#00BCFF)** as the main accent.

Type is set in **inter**, with **plexMono** for code. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 4px.

Measured from [tailwindcss.com](https://tailwindcss.com/) on October 21, 2026 at 1440×900 and 390×844 from 359 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 13 roles.

- **Near Black (#030712):** Page background, seen 3 times. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 35 times. Token `on-surface`.
- **Light Blue (#CAD5E2):** Secondary text, seen 6 times. Token `on-surface-variant`.
- **Blue (#99A1AF):** Muted text and metadata, seen 3 times. Token `on-surface-muted`.
- **Blue (#90A1B9):** Subtle text and placeholders, seen 32 times. Token `on-surface-subtle`.
- **White 10% (#FFFFFF1A):** Translucent fill for cards and controls, seen 23 times. Token `overlay`.
- **White 20% (#FFFFFF33):** Stronger translucent fill, seen 3 times. Token `overlay-strong`.
- **Light Cyan 30% (#74D4FF4D):** Borders and dividers, seen 1 time. Token `outline`.
- **Vivid Cyan (#00BCFF):** Brand color in the logo, seen 5 times. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Dark Blue (#364153):** High-contrast fills, seen 2 times. Token `inverse-surface`.
- **Pink (#FB64B6):** Most used accent color, seen 15 times. Token `secondary`.
- **Light Cyan (#74D4FF):** Most used accent color, seen 11 times. Token `tertiary`.

## Typography

**inter** and **plexMono** (monospace) share the interface. Fallback stack: `inter, inter Fallback, system-ui`. Other loaded fonts: inter Fallback.

- **headline-display:** inter 96px at weight 400, line height 1, tracking -0.05em (36px on mobile). Page title (h1).
- **headline-lg:** inter 40px at weight 500, line height 1, tracking -0.05em. Section headings (h2).
- **body-md:** inter 16px at weight 400, line height 1.5. Body text.
- **body-lg:** inter 18px at weight 500, line height 1.56. Lead paragraphs.
- **body-sm:** inter 14px at weight 400, line height 2. Secondary and small text.
- **label-md:** inter 14px at weight 600, line height 2. Buttons, navigation and labels.
- **label-sm:** inter 12px at weight 400, line height 1.67. Small labels and badges.
- **code:** plexMono 13px at weight 400, line height 1.85. Code and technical values.

## Layout

Spacing follows a 4px grid: 96% of measured gaps and paddings are multiples of 4px.

- **Scale:** xs 4px, sm 8px, md 16px, lg 20px, xl 36px.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Breakpoints:** 600px.

## Elevation & Depth

The design avoids drop shadows. Layers are separated by tonal surface steps and hairline rings:

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.02) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`

## Shapes

Most elements use 4px corners. Measured radii, most used first:

- **sm (4px):** 20 elements.
- **xl (32px):** 10 elements.
- **lg (16px):** 6 elements.
- **md (8px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Get started”):** #364153 fill, #FFFFFF text, 14px/600, 32px radius, padding 8px 16px.
- **button-primary-hover:** background #4A5565, text #FFFFFF on hover.
- **button-ghost (“v4.3”):** transparent fill, #FFFFFF text, 12px/500, 16px radius, padding 2px 6px 2px 10px.
- **input-field:** transparent fill, #FFFFFF text, 16px/400, padding 0px.
- **link:** transparent fill, #FFFFFF text, padding 0px.

## Do's and Don'ts

- Do use #030712 for the page.
- Do keep text in 4 levels: #FFFFFF, #CAD5E2, #99A1AF, #90A1B9.
- Do use #00BCFF as the brand accent: header, logo and key highlights.
- Do set headlines in inter with tight tracking (-0.05em).
- Do keep spacing on the 4px grid.
- Do use 4px corners on most elements; larger surfaces also use 32px, 16px and 8px.
- Don't add drop shadows for depth; use hairline rings and borders and contrast.
- Don't introduce new font families beyond inter and plexMono.
- Don't use #00BCFF for large backgrounds or body text.
- Don't make interface transitions slower than 0.15s.

## Motion

Interface transitions are quick: 0.15s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/tailwindcss.com/), the free DESIGN.md generator.

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need more than one page?

Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.

Explore the tool

More designs

See all →

GrammarlyBrand grammarly.com · matter

HootsuiteBrand hootsuite.com · Montserrat

SmartSkill smartskill.shop · IRANYekanX

Just Falafel jfvegancafe.com · Bodoni Moda

Greenpaktourism greenpaktourism.com/destinations · Poppins

Pusho pusho.fun · Yatra One

FAQ

Questions

What can I build with the Tailwind CSS DESIGN.md?

Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, inter type, spacing, corners and buttons instead of its own defaults.

How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

Is this Tailwind CSS’s official design system?

No. Sitepeel measured it from tailwindcss.com’s public page on October 21, 2026. It is an independent analysis, not made or approved by Tailwind CSS.

Can I use Tailwind CSS’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Tailwind CSS’s logo, name, pictures or text.

How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.