Shared primitives: The base CSS class catalog (buttons, badges, alerts, forms, modals, cards, typography, tables, tabs, tooltips, data display) is documented in the shared design system. This document covers the full class inventory as consumed by AiHordeFrontpage, including project-specific extensions and overrides.
Class catalog for the AI Horde frontend. For design philosophy, tokens, and surface primitives, see design-system.md. For high-level rules and file organization, see STYLING.md.
- CSS Component Patterns
- Cards (
_cards.css) - Alerts (
_alerts.css) - Buttons (
_buttons.css) - Headings (
_typography-headings.css) - Typography (
_typography-text.css) - Forms (
_forms.css) - Modals (
_modals.css) - Badges (
_badges.css) - Tab System (
_details-tabs.css) - Table & List Rows (
_tables.css) - Tooltip System (
_tooltips.css) - Collapsible & Accordion System (
_collapsibles.css) - Data Display (
_data-display.css) - Loading & Empty States (
_utilities.css) - Animation & Motion
- Icon System
- Responsive Design
- Accessibility Patterns
- Cards (
.card /* Base card container */
.card--interactive /* Hoverable/clickable card */
.card-title /* Card heading */
.card-content /* Card body content */
.card-footer /* Card footer area */card-bg-primary, panel, and similar wrappers exist for compatibility. Prefer feature-semantic classes inheriting from surface primitives for new UI.
.alert /* Base alert container */
.alert--danger /* Red error/danger alert */
.alert--warning /* Yellow/amber warning alert */
.alert--info /* Blue informational alert */
.alert--success /* Green success alert */
.alert-icon /* Icon container */
.alert-content /* Text content area */Info notes:
.info-note /* Contextual info box */
.info-note--blue /* Blue variant */
.info-note--orange /* Orange variant */
.info-note--padded /* Extra padding */.btn-primary /* Blue branded button */
.btn-purple /* Purple branded button */
.btn-secondary /* Gray secondary button */
.btn-danger /* Red destructive button */
.btn-warning /* Yellow cautionary button */
.btn-muted /* Gray tertiary button */
.btn-icon /* Icon-only button */
.btn-sm /* Small size modifier */
.btn-xs /* Extra-small size modifier */
.btn-group /* Responsive button row */
.btn-group--center /* Centered button group */.heading-hero /* h1 hero text (responsive 4xl→6xl) */
.heading-page-title /* Page title with margin */
.heading-section /* h2 section heading */
.heading-card /* h3 card heading */
.heading-item /* List item heading */.text-lead /* Large emphasized body text */
.checkmark-list /* Flex container for inline checkmarks */
.checkmark-item /* Green checkmark + text item */
.card-inline-title /* Card title (inline with icon) */
.card-inline-description /* Card subtitle */.form-label /* Input label */
.form-input /* Text input field */
.form-hint /* Help text below input */
.form-field /* Field container with gap */
.form-row /* Horizontal row of fields */
.form-actions /* Button row at form bottom */For structured configuration forms, see the form shell system in design-system.md.
.modal-overlay /* Full-screen backdrop */
.modal-panel /* Dialog container */
.modal-actions /* Button row in modal */.badge-base /* inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium */
.badge-sm /* Compact: px-2 py-0.5 */
.badge-container /* Flex wrap gap-2 for badge groups */| Class | Color | Usage |
|---|---|---|
.badge-primary |
Blue | Brand / default |
.badge-secondary |
Gray | Neutral / deemphasized |
.badge-info |
Blue | Informational |
.badge-warning |
Amber | Caution |
.badge-success |
Green | Positive / healthy |
.badge-danger |
Red | Error / destructive |
.badge-purple |
Purple | Brand accent / kudos |
.badge-pink |
Pink | Alternative accent |
.badge-indigo |
Indigo | Secondary brand |
.badge-teal |
Teal | Categorical |
.badge-recommended /* Gold/yellow with star treatment */
.badge-easy-to-use /* Green with border, beginner-friendly */
.badge-online /* Green with pulsing dot */
.badge-outline /* Transparent bg, gray border */
.badge-dismissible /* Interactive, removable */.details-tabs /* Sticky flex container with horizontal scroll */
.details-tab /* Individual tab button */
.details-tab-active /* Active state: purple border, font-weight 600 */.details-tabs--sub /* Lighter 1px border, smaller font */.details-tabs-arrow /* Sticky left/right scroll button */
.details-tabs-arrow.is-visible /* Visible state */Two-zone grid layout: content (left) and actions (right).
.item-list-row /* 2-zone grid: grid-template-columns: 1fr auto */
.table-cell-content /* Left content zone */
.table-cell-title /* Row title (truncated) */
.table-cell-description /* 2-line clamped description */
.table-cell-actions /* Right actions zone */
.table-item-recommended /* Yellow accent for featured items */.tooltip-wrapper /* Trigger container (position: relative) */
.dotted-underline /* Dotted border-bottom hover hint */
.tooltip-text /* Tooltip bubble (hidden by default) */.tooltip-pos-left /* Left-aligned */
.tooltip-pos-right /* Right-aligned */
.tooltip-pos-bottom /* Below trigger */.tooltip-fixed-mode + .tooltip-text-fixed for escaping parent overflow: hidden. Position is set via JS; CSS controls appearance only.
.tooltip-highlight /* Brand blue emphasis */
.tooltip-code /* Purple monospace */
.tooltip-muted /* Secondary italic */
.tooltip-math /* Purple monospace for equations */[appTouchTooltip] directive with Popover API:
.touch-tooltip /* Fixed-position, width: max-content */
.touch-tooltip-title /* Bold title line */
.touch-tooltip-desc /* Secondary description */<span class="tooltip-wrapper" tabindex="0">
<span class="dotted-underline">hover text</span>
<span class="tooltip-text">Tooltip content here</span>
</span>.collapsible-card /* Glass-surface wrapper */
.collapsible-header-button /* Non-sticky trigger button */
.collapsible-header-icon /* Chevron icon container */.section-header-collapsible /* Sticky at var(--sticky-offset, 80px) */
.section-header-collapsible--light /* Less prominent dark mode tint */.expanded-detail-panel /* Content revealed when row is expanded */
.expanded-detail-grid /* Responsive grid inside expanded area */.stat-column /* Padded glass card for stats */
.stat-item /* Icon + text row */
.stat-text /* Body text in stat items */
.stat-text-label /* Label within stat text */.data-item-box /* Glass surface for key-value pairs */
.data-label /* Label text */
.data-value /* Value text */
.data-value-lg /* Prominent stat (text-2xl) */
.data-value-xl /* Hero stat (text-4xl) */
.data-value-split /* Stacked metric pairs */| Class | Columns |
|---|---|
.data-grid-2 |
grid-cols-2 |
.data-grid-2-3 |
grid-cols-2 lg:grid-cols-3 |
.data-grid-1-2 |
grid-cols-1 sm:grid-cols-2 |
.data-grid-1-2-3 |
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 |
.data-grid-2-4 |
grid-cols-2 md:grid-cols-4 |
.domain-tint--image /* Purple */
.domain-tint--text /* Blue */
.domain-tint--alchemy /* Green */
.domain-tint--combined /* Red */
.domain-label--* /* Inline text color per domain */.skeleton-bar /* Animated placeholder bar */
.skeleton-bar-sm /* 40% width */
.skeleton-bar-md /* 60% width */
.skeleton-bar-lg /* 70% width */
.skeleton-box /* Container for skeleton groups */
.skeleton-box-dashed /* Dashed border "missing" state */.spinner /* Border-based rotating spinner */
.spinner-sm / -md / -lg /* Size variants */
.state-container /* Centered flex column */
.state-container-sm /* Compact variant */
.state-empty /* Minimal empty state */
.state-icon / -lg /* State icons */
.state-error /* Red text */
.state-muted /* Gray text */.scroll-reveal /* Initial hidden state: opacity 0, translateY */
.scroll-reveal--visible /* Revealed state */
.scroll-reveal-delay-1 through -6 /* 70ms increments for stagger */| Keyframe | Duration | Usage |
|---|---|---|
pulse |
2s | Online badges, loading |
fadeIn |
— | Element appearance |
slideDown |
— | Expanded content |
heroEntrance |
0.7s | Homepage hero |
featureCardEntrance |
0.5s | Staggered feature cards |
btn-shake |
0.35s | Button error feedback |
toast-slide-in |
300ms | Toast notifications |
skeleton-pulse |
1.4s | Skeleton loading |
faq-highlight-fade |
2.5s | FAQ jump highlight |
- Entrance animations:
cubic-bezier(0.22, 1, 0.36, 1) - Standard transitions:
easewith--transition-fast/normal/slow
All animations respect @media (prefers-reduced-motion: reduce). Content is shown immediately without transitions.
.icon-sm /* shrink-0 w-4 h-4 mt-0.5 — inline hints */
.icon-md /* shrink-0 w-5 h-5 — buttons/toggles */Use fill="currentColor" or stroke="currentColor" so icons inherit text color and respond to dark mode.
.info-tooltip-trigger /* inline-flex, cursor: help */
.info-tooltip-icon /* w-4 h-4, hover: brand-blue */a.glossary-link /* Dotted underline, purple text; hover: solid, blue */| Token | Width | Purpose |
|---|---|---|
sm |
640px | Large phones |
md |
768px | Tablets |
lg |
1024px | Desktops |
xl |
1280px | Large desktops |
2xl |
1536px | Extra-large |
--breakpoint-nav |
1249px | Navigation layout switch |
Mobile-first: all responsive styles use @media (min-width: …).
font-size: clamp(0.75rem, 1.4vw, 0.9375rem); /* Body */
font-size: clamp(0.6875rem, 1.2vw, 0.875rem); /* Sub-tabs */StickyRegistryService manages --sticky-offset (default 80px). Multiple sticky elements read this property for top and scroll-margin-top.
Interactive elements use box-shadow focus rings:
- Links / informational:
--shadow-focus-blue - Buttons / brand:
--shadow-focus-purple
.sr-only /* Visually hidden but accessible */- Tooltips: visible on
:focus-within - Collapsibles: keyboard-focusable triggers
- Dropdowns: arrow key navigation
- Tab bars: standard tab/arrow key patterns
role="dialog"andaria-modal="true"aria-labelledbypointing to the title- Focus trap while open
- Focus restoration on close
All badge, alert, and status variants meet WCAG AA 4.5:1 contrast ratio. Test dark mode after changing translucent surfaces.