Tailwind CSS

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/tailwindcss.com -->
<!-- Extracted: 2026-04-26T13:10:37.249Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Tailwind CSS"
description: "Tailwind CSS exudes a modern, developer-centric vibe focused on efficiency and directness. It's a tool for creators who value speed and control, presenting itself as an indispensable, cutting-edge solution for web development."
colors:
  primary: "#000000"
  surface: "#ffffff"
  on-surface: "#000000"
typography:
  display-lg:
    fontFamily: "inter"
    fontSize: "96px"
    fontWeight: "400"
    lineHeight: "96px"
    letterSpacing: "-4.8px"
  headline-lg:
    fontFamily: "inter"
    fontSize: "40px"
    fontWeight: "500"
    lineHeight: "40px"
    letterSpacing: "-2px"
  headline-md:
    fontFamily: "inter"
    fontSize: "16px"
    fontWeight: "600"
    lineHeight: "24px"
  body-md:
    fontFamily: "inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "4px"
  md: "16px"
  lg: "32px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-ghost:
    rounded: "16px"
    padding: "2px 6px 2px 10px"
    fontSize: "12px"
    fontWeight: "500"
  button-secondary:
    backgroundColor: "#000000"
    textColor: "#ffffff"
    rounded: "32px"
    padding: "8px 16px"
    fontSize: "14px"
    fontWeight: "600"
    borderColor: "#ffffff"
  button-outline:
    rounded: "0px"
    padding: "24px"
    fontSize: "14px"
    fontWeight: "400"
    borderWidth: "0px 1px 0px 0px"
---

# Tailwind CSS — Design System

## Overview

Tailwind CSS design embodies the archetypes of The Creator and The Sage, projecting a developer-first, modern, and highly efficient aesthetic. This system prioritizes utility and directness, mirroring the unapologetic and technical ethos of the brand itself. Visuals are clean, precise, and functional, designed to empower creators with speed and control. The aesthetic aligns with industry leaders like Vercel, Stripe, GitHub, and Next.js, all of whom champion a streamlined, high-performance user experience. This is a design system for those who build, emphasizing clarity and robust functionality over decorative elements.

The design atmosphere is intentionally devoid of superfluous ornamentation, gradients, or overly complex visual metaphors. It does not aim for a 'friendly' or 'playful' tone, nor does it indulge in artisanal or handcrafted aesthetics. Instead, it is a tool-like interface: sharp, predictable, and optimized for cognitive efficiency. Every element serves a purpose, reflecting a brand that values direct communication and practical application. The visual language is a direct extension of its utility-first philosophy, ensuring that the design itself is as efficient and powerful as the code it helps produce.

**Key characteristics:**

- Vibe — developer-first, modern, efficient, utility-first, unapologetic, technical
- Archetypes — The Creator, The Sage
- Comparable to — Vercel, Stripe, GitHub, Next.js
- Design era — contemporary-minimal
- Emotional tone — empowering-efficient
- Target audience — Web developers, front-end engineers, and designers who are comfortable with code and seek highly customizable, performant, and modern development tools.
- Visual energy — 6/10 (moderate)

## Colors

The color philosophy is minimalist and high-contrast, centered on a primary black (#000000) and surface white (#ffffff). This stark palette signals clarity, precision, and a professional, technical environment. The absence of a broad color spectrum reinforces the brand's focus on functionality and directness, avoiding visual distractions. This deliberate restraint communicates confidence and an uncompromising commitment to core utility, aligning with the efficient, developer-first character of Tailwind CSS.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#000000` | Black |
| background | `#ffffff` | White |
| text | `#000000` | Black |

## Typography

The type system leverages Inter for primary text and Plex Mono for monospaced elements. Inter, a highly legible and modern sans-serif, establishes a clear, professional, and accessible reading experience, reflecting the brand's developer-first approach. Plex Mono provides distinct visual separation for code snippets and technical data, emphasizing precision and technical accuracy. The hierarchy is direct and functional, prioritizing readability and information density, ensuring that content is consumed efficiently without visual clutter. This combination reinforces the brand's commitment to clarity, technical excellence, and an optimized developer workflow.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| inter | body | self-hosted | 400, 500, 600, 700 |
| inter | heading | self-hosted | 400, 500, 600 |
| plexMono | mono | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | inter | 96px | 400 | 96px | -4.8px |
| Heading 2 | inter | 40px | 500 | 40px | -2px |
| Heading 3 | inter | 16px | 600 | 24px | — |
| Body | inter | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px
- Monospace — plexMono

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.1) 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` |
| element | `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, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |
| element | `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, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |
| element | `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.745991 -0.0970495 -0.127188 / 0.5) 0px 10px 15px -3px, oklab(0.745991 -0.0970495 -0.127188 / 0.5) 0px 4px 6px -4px` |
| element | `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.713996 0.117875 -0.165232 / 0.5) 0px 10px 15px -3px, oklab(0.713996 0.117875 -0.165232 / 0.5) 0px 4px 6px -4px` |
| element | `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.718004 0.198758 -0.035884 / 0.5) 0px 10px 15px -3px, oklab(0.718004 0.198758 -0.035884 / 0.5) 0px 4px 6px -4px` |
| element | `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.672993 0.0219624 -0.180645 / 0.5) 0px 10px 15px -3px, oklab(0.672993 0.0219624 -0.180645 / 0.5) 0px 4px 6px -4px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 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.25) 0px 25px 50px -12px` |
| element | `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, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 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.05) 0px 2px 4px 0px inset` |
| button | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.08) 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` |

### Gradients

- `repeating-linear-gradient(315deg, oklab(0 0 0 / 0.05) 0px, oklab(0 0 0 / 0.05) 1px, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%)`
- `radial-gradient(oklab(0.129999 -0.00404751 -0.027702 / 0.05) 1px, rgba(0, 0, 0, 0) 0px)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, lab(1.90334 0.278696 -5.48866) 100%)`
- `linear-gradient(to right, lab(66.9756 -58.27 19.5419) 0%, lab(70.687 -23.6078 -45.9483) 100%)`
- `linear-gradient(to right, lab(49.5493 79.8381 2.31768) 0%, lab(86.4156 6.13147 78.3961) 100%)`
- `linear-gradient(to right, lab(43.0295 75.21 -86.5669) 0%, lab(76.6045 -40.9406 -29.6231) 100%)`

## Shapes

Border-radius scale:

- `sm` — 4px
- `md` — 16px
- `lg` — 32px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Ghost**

- Radius — `16px`
- Padding — `2px 6px 2px 10px`
- Font size — `12px`
- Font weight — `500`
- Sample copy — "v4.2"

**Secondary**

- Background — `#000000`
- Text — `#ffffff`
- Radius — `32px`
- Padding — `8px 16px`
- Font size — `14px`
- Font weight — `600`
- Border — ` solid #ffffff`
- Sample copy — "Get started"

**Outline**

- Radius — `0px`
- Padding — `24px`
- Font size — `14px`
- Font weight — `400`
- Sample copy — "TemplatesVisually-stunning, easy to customize site templates built with React an"

## Do's and Don'ts

### Do

- Maintain a stark, high-contrast monochrome color scheme using #000000 for primary text and #ffffff for backgrounds in light mode.
- Use Inter font family for all body and heading text, specifically Inter 700 for prominent headings and Inter 400 for body copy, with a line-height of 24px for body text.
- Apply sentence-case for all headings and titles, avoiding title case or all caps.
- Utilize PlexMono font for all code snippets and technical references to clearly differentiate it from other text.
- Implement multi-layer shadows, such as `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.1) 0px` for depth and visual separation on elements like cards or modals.
- Incorporate subtle, repeating linear gradients like `repeating-linear-gradient(315deg, oklab(0 0 0 / 0.05) 0px, oklab(0 0 0 / 0.05) 1px)` for background textures or subtle visual interest, ensuring they remain understated.
- Design primary action buttons with a solid #000000 background, #ffffff text, and a large border-radius of 32px, such as the 'Get started' button.
- Use a base spacing unit of 2px for all padding, margins, and component sizing, ensuring consistent visual rhythm.
- Employ action-oriented imperative verbs for all Call-to-Action (CTA) copy, keeping it direct and concise.

### Don't

- Avoid using any emojis in marketing or technical copy; the brand maintains a professional and direct tone.
- Do not use exclamations; the brand's voice is matter-of-fact and confident, not overly enthusiastic.
- Refrain from using serif fonts; the brand's typography is exclusively sans-serif and monospace.
- Do not introduce vibrant or extensive color palettes beyond the established monochrome, as the brand emphasizes clarity and focus.
- Avoid flat, single-layer shadows; instead, use the detected multi-layer shadow styles for subtle depth.
- Do not use small or sharp border radii (e.g., 0px or 4px) for primary action buttons; prefer large radii like 32px for a modern, approachable feel.
- Do not deviate from the established sentence-case convention for headings; title case or all caps are not permitted.
- Avoid verbose or overly formal language; maintain a moderate vocabulary with heavy, but clear, technical jargon where appropriate.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 4/10 | formal |
| Playful ↔ Serious | 7/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 4/10 | enthusiastic |
| Respectful ↔ Irreverent | 6/10 | balanced |
| Technical ↔ Accessible | 4/10 | technical |

### Copywriting style

- Avg. sentence length — 10 words
- Vocabulary — moderate
- Jargon — heavy
- CTA style — action-oriented imperative verbs
- Rhetorical devices — repetition

### Sample copy

> Rapidly build modern websites without ever leaving your HTML.

> A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

> Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make the developer experience as enjoyable as possible.

> Ship faster and smaller.

> Build whatever you want, without touching your CSS file.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/tailwindcss.com) | 100% |
| favicon | — | png | [link](brands/tailwindcss.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/tailwindcss.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/tailwindcss.com/logo-2.png) | 95% |
| favicon | — | ico | [link](brands/tailwindcss.com/logo-3.ico) | 95% |
| favicon | — | ico | [link](brands/tailwindcss.com/logo-4.ico) | 95% |
| favicon | — | png | [link](brands/tailwindcss.com/logo-5.png) | 95% |
| favicon | — | png | [link](brands/tailwindcss.com/logo-6.png) | 95% |

## Sources

- Official brand guidelines — https://tailwindcss.com/brand
- Live brand page — https://extractvibe.com/brand/tailwindcss.com
- Raw JSON — https://extractvibe.com/api/brand/tailwindcss.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/tailwindcss.com/design.md
- Extracted — 2026-04-26T13:10:37.249Z
- Generator — ExtractVibe vv1
- Quality score — 90/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md