Design System & Tokens
The Ticket Stub visual language every component speaks. Tokens live in bigbullui.css — override them and the entire library adapts instantly.
Warm paper, ink lines
Light theme is a cream stub (#F6F0E0 on #17130C). Dark theme is a night stub (#16120B on #F3EAD3) — a tactile material shift, not a cold mechanical inversion.
Stamp red means action
One accent (#BC3A28, brighter in dark) marks primary actions, focus rings, and status badges. Everything else stays calm and neutral.
Mono speaks, sans explains
JetBrains Mono for micro labels, readouts, tickets, and serial numbers. Inter Tight for headings with tight tracking and UI body copy.
Borders do the talking
Dashed ticket edges, double frames on cards, squarish corners. Depth comes from crisp ink strokes and paper borders, not heavy drop blurs.
Core Design Tokens
All components reference these semantic variables via Tailwind utilities (e.g. bg-background, border-border, text-accent).
| CSS Variable | Light (Paper) | Dark (Night) | Role |
|---|---|---|---|
| --background | #f6f0e0 | #16120b | Page and canvas background |
| --foreground | #17130c | #f3ead3 | Primary text and sharp ink strokes |
| --card | #fffdf5 | #1e1810 | Surface containers and elevated stubs |
| --border | #d8c9ac | #3a3122 | Dashed outlines and card dividers |
| --primary | #17130c | #f3ead3 | Filled buttons and solid contrast |
| --accent | #bc3a28 | #d95b43 | Stamp red action, badges, and focus rings |
| --muted | #ece3cc | #241e13 | Secondary badges and inactive track bg |
| --radius | 0.5rem | 0.5rem | Tactile squarish ticket corner radius |
Tailwind CSS v4 Customization
In Tailwind CSS v4, theme values are defined directly in CSS using standard CSS variables and @theme inline. No tailwind.config.js required.
/* In your globals.css after importing bigbullui */
@import "tailwindcss";
@import "bigbullui/css";
/* 1. Override tokens globally */
:root {
--radius: 0.25rem; /* sharper retro corners */
--accent: #c2410c; /* warm amber stamp */
}
/* 2. Custom night stub colors */
.dark {
--background: #0f172a; /* deep navy paper */
--accent: #f97316; /* vibrant orange stamp */
--border: #1e293b;
}
/* 3. Extend Tailwind v4 utility theme inline */
@theme inline {
--font-ticket: "JetBrains Mono", monospace;
}Motion & Accessibility (A11y)
Tactile transitions with snappy spring easing. Every component includes motion-reduce fallbacks for users with vestibular sensitivities. Full keyboard focus rings (focus-visible:ring-2 ring-ring) are guaranteed across all interactive elements.