Tailwind CSS

A modern, utility-first CSS framework prioritizing strict design system scales, indigo/sky color pal...
Back to Home
01

Visual Theme & Atmosphere

# Design System — Tailwind CSS (Utility-First)

Extracted and adapted from [tailwindcss.com](https://tailwindcss.com). A modern, utility-first CSS design framework prioritizing customizability, high-density utility scales, and clean component composition.

---

Live Visual Theme Representation:

Visual Theme Example

02

Color Palette & Roles

primary
#38bdf8
primary-focus
#6366f1
canvas
#ffffff
surface-card
#f8fafc
surface-soft
#f1f5f9
ink
#0f172a
body
#334155
muted
#94a3b8
hairline
#e2e8f0
03

Typography Rules

Dynamic Preview:
display-xl size: 30px | weight: 800 | height: 1.2 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Section Heading
body-md size: 16px | weight: 400 | height: 1.5 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Primary Body
04

Layout Principles

Grid Layout Wireframe Mockup:

Layout Grid Example

Layout Wireframe blueprint
1
2
3
4
5
6
7
8
9
10
11
12
Gutter spacing: 16px / 24px
Side Margins: 24px (Mobile) / 48px (Desktop)
Max Container Width: 1200px
05

Depth & Elevation

Elevation Level Showcase:

Elevation Level Example

Flat Surface (Level 0)

Used for background layers, sidebar headers, or baseline borders.

Low Elevation (Level 1 / Card)

Used for floating product elements, cards, and hover states.

High Elevation (Level 2 / Popover & Dropdown)

Used for modals, select menus, code editor tooltips, and overlay headers.

Border Radius & Shape Scale:

radius-sm 4px
radius-md 6px
radius-lg 8px
radius-pill Pill / Tag
06

Component Stylings

Interactive Component Demonstrations:

Component Interactive Example

07

Do's and Don'ts

Do

  • Tie all color usage strictly to semantic numerical tokens (e.g. bg-slate-900).
  • Resolve styles directly via utility class combinations rather than writing custom CSS rules.
  • Rely exclusively on CSS Flexbox and Grid for page structure layouts.

Don't

  • Don't use absolute or hardcoded hex colors inline without mapping to tailwind variables.
  • Don't use traditional CSS floats or complex position hacks.
  • Don't introduce unconstrained font sizes outside the predefined text- scale prefixes.
✅ Recommended / Do
  • Tie all color usage strictly to semantic numerical tokens (e.g. bg-slate-900).
  • Resolve styles directly via utility class combinations rather than writing custom CSS rules.
  • Rely exclusively on CSS Flexbox and Grid for page structure layouts.
❌ Discouraged / Don't
  • Don't use absolute or hardcoded hex colors inline without mapping to tailwind variables.
  • Don't use traditional CSS floats or complex position hacks.
  • Don't introduce unconstrained font sizes outside the predefined text- scale prefixes.
08

Responsive Behavior

Responsive Adaptation Note:

Responsive Behavior Example

Interactive Viewport Simulator
Width: 800px (Desktop Mode) Grid Container
Primary Column

Adjusts layout width

Secondary Column

Folds on viewport change

Sidebar Column

Stacks to bottom on mobile

09

Agent Prompt Guide

Copyable Agent Integration Prompt:

Prompt Guide Copy Box

10

Full System Design Tokens

The parsed design tokens extracted from the core stylesheet of this design system:

Design TokenHex ValueSystem Palette Role
--primary#38bdf8System color representation for primary
--primary-focus#6366f1System color representation for primary-focus
--canvas#ffffffSystem color representation for canvas
--surface-card#f8fafcSystem color representation for surface-card
--surface-soft#f1f5f9System color representation for surface-soft
--ink#0f172aSystem color representation for ink
--body#334155System color representation for body
--muted#94a3b8System color representation for muted
--hairline#e2e8f0System color representation for hairline