Header hover fixed, JACB branding, open source statement — v1.6 Tarbert
Nav hover colour corrected, logo updated to JACB, footer updated to JACB Services, open source position added. Full changelog →
Foundations
The core tokens that all components are built on — colour, typography, and spacing.
Foundation
Colour
Brand purples, status colours, and the dark theme token overrides.
2 palettes · light + dark
Foundation
Typography
IBM Plex Sans and IBM Plex Mono. Eight scale steps from 12px to 40px.
2 typefaces · 8 steps
Foundation
Spacing
4px base unit. Named scale from space-1 (4px) to space-16 (64px).
8 steps · 4px base
Components
Ready-to-use HTML and CSS components. Each includes a rendered example and copy-paste code.
Component
Button
Primary, secondary, warning, and ghost variants.
4 variants
Component
Notification banner
Success, error, warning, and info banners with left-border treatment.
4 variants
Component
Card
Standard and branded cards, plus a responsive card grid layout.
2 variants · grid
Component
Table
Standard and striped tables with numeric column alignment.
2 variants
Component
Navigation
Site header with horizontal nav and vertical sidebar nav.
Horizontal + vertical
Component
Breadcrumb
Chevron-separated breadcrumb trail with current page indicator.
1 variant
Component
Accordion
Show/hide content sections with plus/minus toggle and ARIA support.
1 variant · animated
Reference
Useful starting points.