Use when adding or modifying Tailwind utility classes, creating new components, changing colors/spacing/typography, or working with dark mode. Covers the project's Blueprint design system tokens and theme conventions.
Tailwind CSS 3.4 with class-based dark mode. All design tokens live in tailwind.config.ts. Custom utilities and patterns live in src/index.css.
| Token | Hex | Usage |
|---|---|---|
bp-blue | #5b9bd5 | Primary accent, interactive elements, links |
bp-steel | #7c8eb5 | Secondary text, muted interactive |
bp-green | #4caf7c | Success states, completed steps |
bp-red | #d65f5f | Error states, destructive actions |
bp-amber | #e5a84b | Warnings, in-progress states |
bp-navy | #0b1929 | Dark backgrounds |
bp-dark | #0f2035 | Card/panel backgrounds |
bp-grid | #1a3a5c | Grid lines, borders |
bp-line | #1e4a6e | Dividers, subtle borders |
Usage: text-bp-blue, bg-bp-dark, border-bp-grid/20 (with opacity).
| Class | Font |
|---|---|
font-sans | Inter, system-ui |
font-mono | JetBrains Mono, Fira Code |
Convention: UI labels use font-mono. Body text uses font-sans.
animate-pulse-slow — 3s pulse for loading statesanimate-progress-fill — 1s ease-out width fillbp-* tokens — never hardcode hex colors. text-bp-blue not text-[#5b9bd5].dark: variant — the toggle uses class strategy. Always pair light/dark: bg-zinc-100 dark:bg-bp-dark.src/index.css — complex patterns (.blueprint-grid, .checkerboard, .dropzone-active) are defined there with Tailwind's @apply or raw CSS.zinc-100 through zinc-900 for grays. Match existing components./20, /40 etc. for transparency: border-bp-blue/20.bg-blue-500 instead of bg-bp-blue — breaks visual consistencydark: variant — light mode looks fine but dark mode breakstailwind.config.ts[#hex] when a token exists