// 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).
| 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.
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.