Skip to content
Back to extractor

Overview

Tailwind CSS presents a rigorously systematic visual identity built around neutral grays, a functional blue accent, and a restrained typographic hierarchy using Inter and IBM Plex Mono. The design language prioritises clarity and precision, with consistent spacing scales and subtle depth cues that communicate structure without decoration. Every visual decision is intentional and utility-driven, reflecting the framework's own philosophy.

Signature traits: systematic neutral gray palette, Inter + IBM Plex Mono type pairing, tight negative letter-spacing on headings, utility-scale spacing, minimal elevation, oklab color-mix for subtle transparency effects.

Colors

| Role | Token | Hex | Usage | |------|-------|-----|-------| | Background | --color-background | #ffffff | Page backgrounds | | Surface | --color-surface | #f9fafb | Card/panel backgrounds | | Text Primary | --color-text-primary | #101828 | Headings, body copy | | Text Secondary | --color-text-secondary | #6a7282 | Captions, placeholders | | Border | --color-border | #e5e7eb | Dividers, outlines | | Accent | --color-accent | #155dfc | CTAs, highlights, links |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | inter, system-ui | 3rem | 700 | 1 | -0.05em | Hero headlines | | Heading | inter, system-ui | 1.875rem | 600 | calc(2.25 / 1.875) | -0.025em | Section titles | | Body | inter, system-ui | 1rem | 400 | calc(1.5 / 1) | 0em | Paragraph text | | Caption | inter, system-ui | 0.75rem | 400 | calc(1 / 0.75) | 0.1em | Labels, metadata | | Mono | plexMono, monospace | 0.875rem | 400 | calc(1.25 / 0.875) | 0em | Code, data |

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 0.25rem | Inline gaps, tight icon spacing | | Spacing SM | 0.5rem | Component padding, button gaps | | Spacing MD | 1rem | Standard component padding | | Spacing LG | 1.5rem | Card padding, section inner gaps | | Spacing XL | 2rem | Section gaps, layout margins | | Spacing 2XL | 3rem | Large section separators | | Max Width SM | 24rem | Narrow content containers | | Max Width MD | 28rem | Medium content containers | | Max Width LG | 32rem | Standard content containers | | Max Width 2XL | 42rem | Prose content containers | | Max Width 7XL | 80rem | Full-width page containers |

Responsive strategy: Five breakpoints defined — sm (40rem / 640px), md (48rem / 768px), lg (64rem / 1024px), xl (80rem / 1280px), 2xl (96rem / 1536px). Container utility caps width at each breakpoint progressively. @container / @container-size queries support component-level responsive adaptation.

Elevation & Depth

| Level | CSS Value | Usage | |-------|-----------|-------| | 2xs | 0 1px #0000000d | Subtle surface lift | | xs | 0 1px 2px 0 #0000000d | Input fields, small cards | | sm | 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a | Cards, tooltips | | md | 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a | Dropdowns, popovers | | lg | 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a | Modals, overlays | | xl | 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a | Elevated panels | | 2xl | 0 25px 50px -12px #00000040 | Full-screen dialogs |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Sharp-edged elements, table cells | | sm | 0.25rem | Badges, tags, small inputs | | md | 0.375rem | Buttons, form inputs | | lg | 0.5rem | Cards, dropdowns | | xl | 0.75rem | Modals, panels | | 2xl | 1rem | Large cards, featured sections | | 3xl | 1.5rem | Hero blocks, image wrappers | | 4xl | 2rem | Large decorative containers | | full | 9999px | Pills, avatar circles, toggle switches |

Components

Prose: A rich .prose component system with scoped CSS custom properties controls color, link underline color (--color-sky-400), table borders, HR color, and blockquote border. Dark mode and system dark mode are both supported via .dark class and prefers-color-scheme. The not-prose escape hatch prevents nested overrides.

Line decorators: The .line-y utility uses ::before and ::after pseudo-elements to render full-viewport-width horizontal rules at top: 0 and bottom: 0, using color-mix(in oklab, ...) for theme-aware 5% opacity gray lines.

Screen reader utilities: .sr-only and .not-sr-only follow the standard clip-path accessibility pattern.

Code blocks: Pre/code blocks use IBM Plex Mono with font-variant-ligatures: none, ss02 and zero OpenType features for disambiguation. Inline code wraps content in backtick pseudo-elements.

Transitions: Default transition duration is 0.15s with cubic-bezier(0.4, 0, 0.2, 1) easing. Named easing tokens include ease-in, ease-out, and ease-in-out.

Animations: Four built-in keyframe animations — spin (1s linear infinite), ping (1s ease-out infinite), pulse (2s ease infinite), bounce (1s infinite). A custom flash-code animation (2s forwards) is also defined.

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use Inter for all UI text and IBM Plex Mono exclusively for code/data | Mix system-ui or other sans-serif fonts with Inter in the same context | | Apply negative letter-spacing (-0.025em to -0.05em) on headings | Use positive or zero letter-spacing on large display text | | Use the gray scale (gray-50 through gray-950) for neutral surfaces and text | Reach for zinc, stone, or slate neutrals — gray is the canonical neutral | | Use color-mix(in oklab, ...) for transparent overlays and subtle tints | Hard-code semi-transparent hex/rgba values not derived from the palette | | Keep border-radius at md (0.375rem) or lg (0.5rem) for interactive elements | Apply xl or 2xl radius to small inline elements like badges or inputs | | Use shadow scale (sm, md, lg) with very low opacity blacks for elevation | Use coloured shadows or high-opacity drop shadows | | Use --color-sky-400 (#00bcfe) as the link underline accent colour | Use the primary blue accent (#155dfc) for decorative underlines |

Agent Prompt Guide

You are working within the Tailwind CSS design system. Key constraints:

  • —Colors: background #ffffff, surface #f9fafb, text-primary #101828, text-secondary #6a7282, border #e5e7eb, accent #155dfc
  • —Typography: Inter (inter, system-ui) for all UI text with feature-settings "cv02","cv03","cv04","cv11"; IBM Plex Mono (plexMono, monospace) with "ss02","zero" for all code/data
  • —Font sizes follow the scale: 0.75rem / 0.875rem / 1rem / 1.125rem / 1.25rem / 1.5rem / 1.875rem / 2.25rem / 3rem
  • —Headings use font-weight 600, negative letter-spacing (-0.025em standard, -0.05em for display)
  • —Spacing: use the 0.25rem base scale — xs=0.25rem, sm=0.5rem, md=1rem, lg=1.5rem, xl=2rem, 2xl=3rem
  • —Border radius: sm=0.25rem, md=0.375rem, lg=0.5rem, xl=0.75rem, full=9999px
  • —Shadows use very low opacity blacks; prefer shadow-sm for cards, shadow-md for dropdowns, shadow-lg for modals
  • —Breakpoints: sm=40rem, md=48rem, lg=64rem, xl=80rem, 2xl=96rem
  • —Never use colors, fonts, or spacing values outside the design system tokens
  • —For transparency effects, use color-mix(in oklab, ...) rather than hard-coded rgba values