// Vira's design system — TailwindCSS conventions, color palette, typography, spacing, components, and accessibility rules. Use when working on UI components, styling, or layout in this project (Lucid HTML in Haskell sources under packages/vira).
Use this when writing or reviewing Haskell code. Covers error handling, type safety, idiomatic patterns, HLint compliance, Aeson usage, and testing.
Enter talk mode — conversation and research, no repo changes. ONLY invoke when the user explicitly types `/talk` or `$talk`; never auto-select from a natural-language question or design discussion.
Review code for quality, simplicity, and common mistakes before declaring work complete.
| name | vira-design |
| description | Vira's design system — TailwindCSS conventions, color palette, typography, spacing, components, and accessibility rules. Use when working on UI components, styling, or layout in this project (Lucid HTML in Haskell sources under packages/vira). |
Clean, minimal CI/CD application design system emphasizing clarity and functionality.
brand-600 (primary actions), brand-700 (hover states). The brand-* scale is declared in packages/vira/src/style.css as a @theme alias to Tailwind's cyan today — change those var(--color-cyan-*) aliases to shift the brand without touching widget code.gray-50 (page), white (cards), gray-200 (dividers)
gray-900 (page), gray-800 (cards), gray-700 (dividers)green-600 (success actions)red-600 (delete/dangerous actions)yellow-500 (cautionary states)gray-100 (secondary actions)
gray-700 (secondary actions)gray-900 (primary), gray-600 (secondary), gray-500 (muted)
gray-100 (primary), gray-300 (secondary), gray-400 (muted)gray-200 (default), gray-300 (interactive)
gray-700 (default), gray-600 (interactive)gray-50 (sections), gray-100 (subtle contrast)
gray-800 (sections), gray-700 (subtle contrast)Tokens are declared as --font-sans / --font-mono in packages/vira/src/style.css (the Tailwind v4 input file). Generated static/tailwind.css exposes them via font-sans / font-mono utility classes — prefer those over hard-coded font-family declarations.
| Class | Size | Usage |
|---|---|---|
text-xs | 12px | Badges, table headers (uppercase), tertiary metadata |
text-sm | 14px | Body text, form labels, buttons, timestamps |
text-base | 16px | Breadcrumbs, emphasized body content |
text-lg | 18px | Card subheadings, section descriptions |
text-xl | 20px | Section headers (h2, h3) |
text-2xl | 24px | Page headers (h1) |
| Weight | Class | Usage |
|---|---|---|
| 500 | font-medium | Badges, subtle emphasis, secondary labels |
| 600 | font-semibold | Buttons, tab labels, highlighted text |
| 700 | font-bold | All headings (h1-h3), important values |
-- Page headers (h1)
h1_ [class_ "text-2xl font-bold text-gray-900 dark:text-gray-100"]
-- Section headers (h2)
h2_ [class_ "text-xl font-bold text-gray-900 dark:text-gray-100 mb-4"]
-- Buttons
button_ [class_ "text-sm font-semibold"]
-- Badges
span_ [class_ "text-xs font-medium"]
-- Table headers
th_ [class_ "text-xs font-medium uppercase tracking-wider"]
| Class | Size | Common Usage |
|---|---|---|
1 | 4px | Icon margins, tight gaps |
2 | 8px | Badge padding, inline spacing |
3 | 12px | Button padding (vertical) |
4 | 16px | Card content margins, section gaps |
6 | 24px | Section spacing, card padding |
8 | 32px | Page section dividers |
| Component | Pattern |
|---|---|
| Cards | p-6 (content), mb-6 (between cards) |
| Buttons | px-6 py-3 (primary), px-4 py-2 (secondary) |
| Badges | px-2 py-1 or px-3 py-1 |
| Form groups | space-y-6 (between groups), mb-2 (label to input) |
| Page sections | space-y-6 or mb-8 |
| Inline items | space-x-2 (tight), space-x-4 (normal), gap-4 (flex) |
| Class | Usage |
|---|---|
rounded | Small elements, code blocks |
rounded-lg | Default - buttons, cards, inputs |
rounded-full | Badges, pills, avatars |
rounded-xl | Large feature cards, modals |
All components are defined in src/Vira/Widgets/*.hs with full documentation and usage examples.
viraButton_, viraButtonIcon_ (see Button.hs)viraCard_ (flat), viraCardElevated_ (with shadow) (see Card.hs)viraSection_, viraPageHeader_, viraDivider_ (see Layout.hs)viraInput_, viraLabel_ (see Form.hs)viraStatusBadge_ (see Status.hs)viraAlert_ (see Alert.hs)import Vira.Widgets qualified as W
W.viraButton_ W.ButtonPrimary [] $ do
W.viraButtonIcon_ $ toHtmlRaw Icon.plus
"Add Repository"
Web.TablerIcons.Outline)w-4 h-4 (buttons), w-5 h-5 (UI), w-6 h-6 (headers), w-8 h-8 (sections), w-16 h-16 (hero)flex items-center justify-centershadow-sm only for important contentspace-y-*)text-3xl, text-lg, etc.md:, lg:, xl: breakpointsgrid gap-6 md:grid-cols-2 lg:grid-cols-3container mx-auto with responsive paddingtext-gray-900 (high contrast)text-gray-600 (medium contrast)text-gray-500 (minimum contrast)text-gray-400 (insufficient contrast)text-gray-500 minimum for functional iconstext-xs): Use text-gray-600 minimumtext-gray-500 for secondary informationtext-gray-600 or darkerVira implements automatic dark mode using Tailwind's @media (prefers-color-scheme: dark) strategy. Dark mode activates based on system preferences without any JavaScript or configuration.
dark: variantsdark:bg-red-900/20)-- Backgrounds
"bg-white dark:bg-gray-800"
"bg-gray-50 dark:bg-gray-900"
"bg-gray-100 dark:bg-gray-700"
-- Borders
"border-gray-200 dark:border-gray-700"
"border-gray-300 dark:border-gray-600"
-- Text
"text-gray-900 dark:text-gray-100"
"text-gray-600 dark:text-gray-300"
"text-gray-500 dark:text-gray-400"
-- Semantic colors with opacity
"bg-red-50 dark:bg-red-900/20"
"bg-blue-50 dark:bg-blue-900/20"
dark: variants for gray colorsWidgets/*.hs firstvira[ComponentName]_ pattern[Attributes] parameter for extensibilityRefer to src/Vira/Widgets/*.hs for complete component documentation and implementation details.