EXSA Cheatsheet
Complete reference for all tokens, utilities, element styles, and component classes in the 5-layer cascade.
1
Tokens
36 custom propertiesDefined in @layer exsa.tokens. All components and element styles reference these. Override in your own stylesheet or swap the theme file. 📋 Export as JSON for Figma, JavaScript, or design tools.
--color-bgPage background
--color-bg-secondaryCard / stripe / border bg
--color-textBody text
--color-text-secondaryMuted / helper text
--color-linkLinks, primary actions, focus
--color-secondaryAccent color, visited links
--color-successSuccess / green states
--color-success-hoverSuccess hover state
--color-dangerError / destructive actions
--color-danger-hoverDanger hover state
--color-warningWarning / amber states
--color-warning-hoverWarning hover state
--color-accentSubtle link tint (bg)
--color-secondary-accentSubtle secondary tint
--color-shadowBox shadow color
--color-scrollbarScrollbar thumb
--color-tableTable accent color
--gap-xs0.25rem (4px)
--gap-sm0.5rem (8px)
--gap1rem (16px)
--gap-lg1.5rem (24px)
--gap-xl2rem (32px)
--width-card285px
--width-card-medium460px
--width-card-wide800px
--width-content1080px (container max)
--font-familySystem font stack
--line-height1.5
--border-radius5px
--box-shadow2px 2px 10px
--hover-brightness1.2
--active-brightness0.85
--justify-importantcenter
--justify-normalstart
2
Reset
@layer exsa.resetAlways-on base styles. No opt-in required. Applies globally.
| Rule | What It Does | Details |
|---|---|---|
*,*::before,*::after | Box-sizing border-box | All elements use border-box |
:focus-visible | Focus ring | 2px solid --color-link, offset 2px |
:focus:not(:focus-visible) | Suppress click focus | No outline on mouse click |
* { scrollbar-width } | Thin scrollbars | Firefox: thin. Webkit: 5px, rounded |
html | Smooth scrolling | scroll-behavior: smooth |
@media (prefers-reduced-motion) | Respects accessibility | Disables animations & smooth scroll |
[dir=rtl] | RTL support | direction: rtl; slideshow track stays ltr |
body | Base styles | bg, color, font-family, line-height, no margin |
h1–h6 | Heading balance | text-wrap: balance |
img, svg, video | Responsive media | max-width: 100% |
figure | Clean figures | margin: 0; figcaption uses --color-text-secondary |
[hidden] | Hide elements | display: none |
.sr-only | Screen reader only | Visually hidden, accessible to SR |
3
Layout
50+ utilitiesAlways-on utility classes. No prefix. Use directly in HTML.
Containers
| Class | Effect |
|---|---|
.container | max-width: 1080px, centered, padded |
.container-sm | max-width: 800px, centered, small pad |
.container-full | width: 100% |
Flex
| Class | Effect |
|---|---|
.flex | display: flex |
.flex-inline | display: inline-flex |
.flex-col / .flex-col-rev / .flex-row-rev | Column, column-reverse, row-reverse |
.flex-wrap / .flex-nowrap | Wrap / no-wrap |
.flex-1 / .flex-auto / .flex-none | flex: 1 / 0 1 auto / none |
.justify-start / .justify-end / .justify-center | flex-start / flex-end / center |
.justify-between / .justify-around / .justify-evenly | space-between / around / evenly |
.items-start / .items-end / .items-center | align-items values |
.items-baseline / .items-stretch | baseline / stretch |
.self-start / .self-end / .self-center / .self-stretch | align-self values |
.content-start / .content-end / .content-center | align-content values |
.content-between / .content-around | space-between / space-around |
Gap
| Class | Value |
|---|---|
.gap-0 | 0 |
.gap-xs / .gap-sm / .gap | 0.25rem / 0.5rem / 1rem |
.gap-lg / .gap-xl | 1.5rem / 2rem |
Grid
| Class | Effect |
|---|---|
.grid | display: grid |
.grid-cols-1 … .grid-cols-6 | 1 to 6 equal columns |
.grid-auto-fit | auto-fit, minmax(200px, 1fr) |
.grid-auto-fill | auto-fill, minmax(200px, 1fr) |
Column Widths (Flex)
| Class | Width |
|---|---|
.col-1 | 100% |
.col-2 | calc(50% - var(--gap-sm)) |
.col-3 | calc(33.333% - var(--gap)) |
.col-4 | calc(25% - var(--gap)) |
.col-5 | calc(20% - var(--gap-sm)) |
Responsive Helpers
| Breakpoint | Available Classes |
|---|---|
sm: (max 575px) | .sm\:flex-col, .sm\:flex-wrap, .sm\:grid-cols-1; cols stack to 100% |
md: (min 768px) | .md\:col-2/3/4, .md\:grid-cols-2/3/4 |
lg: (min 1024px) | .lg\:col-2/3/4/5, .lg\:grid-cols-3/4/5/6 |
4
Elements
Classless, opt-in via body.exsaAdd class="exsa" to <body> to enable semantic HTML styling. All use :where() for zero specificity — your custom styles always win.
| Selector | Styling | Tokens Used |
|---|---|---|
:where(.exsa p) | 0.75rem vertical margin | — |
:where(.exsa a) | Bold, underlined, link color | --color-link |
:where(.exsa a:visited) | Secondary color for visited links | --color-secondary |
:where(.exsa a:hover) | Brightness boost on hover | --hover-brightness |
:where(.exsa a:active) | Dim on click | --active-brightness |
:where(.exsa small) | Muted color | --color-text-secondary |
:where(.exsa mark) | 0.1rem padding highlight | — |
:where(.exsa sup) | Pill badge with secondary bg | --color-secondary, --color-bg |
:where(.exsa code) | Inline code with accent bg | --color-accent, --color-text |
:where(.exsa pre) | Code block, 1rem margin | --width-card-wide |
:where(.exsa hr) | 1px divider, 4rem vertical margin | --color-bg-secondary |
:where(.exsa details) | 1.3rem margin, bold summary cursor | — |
:where(.exsa header/main/footer) | Max-width content, 3rem padding vertical | --width-content |
:where(.exsa nav) | Flex row, bold, space-between. Nested ul for dropdowns. | --color-bg, --box-shadow |
:where(.exsa section) | Flex wrap, container queries for responsive aside cards | --justify-important |
:where(.exsa section aside) | Card with border, shadow, hover lift. Container queries at 320/500px | --width-card, --box-shadow |
:where(.exsa article>aside) | Callout box with left border accent | --color-secondary, --color-secondary-accent |
:where(.exsa nav ul li ul) | Dropdown menu, hidden by default, revealed on hover/focus | --color-bg, --box-shadow, --border-radius |
5
Components
49 components · 7 categoriesEach component is a single CSS file. Link only what you need. All use :where() for zero specificity.
Layout
| Component | Core Class | Key Modifiers | Tokens |
|---|---|---|---|
| Accordion | .accordion | .accordion--sm | --color-link |
| Drawer | .drawer | .drawer--left | --color-bg, --box-shadow |
| Footer | .footer | .footer__brand, .footer__links, .footer__bottom | --color-bg-secondary, --color-link |
| Modal | .modal | .modal__dialog, .modal__header/body/footer | --box-shadow, --border-radius |
| Pricing Table | .pricing | .pricing__card--featured, .pricing__badge | --color-link, --box-shadow |
Navigation
| Component | Core Class | Key Modifiers | Tokens |
|---|---|---|---|
| Topbar | .topbar | .topbar__brand, .topbar__nav, .topbar__btn--primary | --color-bg |
| Sidebar | .sidebar | .sidebar__link--active, .sidebar__sub-menu | --color-bg, --color-link |
| Back to Top | .back-top | Appears after 300px scroll | --color-link |
| Breadcrumbs | .breadcrumbs | .breadcrumbs__sep, .breadcrumbs__current | --color-link, --color-text-secondary |
| Pagination | .pagination | .pagination--sm, disabled state | --color-link, --color-bg-secondary |
| Stepper | .stepper | .stepper--vertical, .stepper__step--done/active | --color-link |
| Timeline | .timeline | .timeline--sm, .timeline__item--active | --color-link, --color-bg-secondary |
| Tooltip | .tooltip | .tooltip--bottom/left/right, data-tip attr | --color-text, --color-bg |
| Context Menu | .ctx-menu | .ctx-menu--soft, .ctx-menu--sm | --box-shadow, --border-radius |
Content
| Component | Core Class | Key Modifiers | Tokens |
|---|---|---|---|
| Avatar | .avatar | .avatar--xs/sm/lg/xl, .avatar__status--online/away/busy | --color-bg-secondary |
| Badge | .badge | .badge--primary/success/danger/warning/pill | --color-link, --color-bg-secondary |
| Card | .card | .card--hoverable, .card--horizontal | --box-shadow |
| Table | .tbl | .tbl--striped, .tbl--bordered, .tbl--sm, .tbl--responsive | --color-bg-secondary |
| Data List | .data-list | .data-list--vertical, .data-list--bordered, .data-list--striped, --sm/--lg | --color-link |
| Separator | .sep | .sep--sm, .sep--lg, .sep--vertical | --color-bg-secondary |
Media
| Component | Core Class | Key Modifiers | Tokens |
|---|---|---|---|
| Lightbox | .lightbox-gallery | .lightbox-gallery__thumb, prev/next arrows, keyboard nav | --color-link, --border-radius |
| Music Player | .music-player | .media-display, .media-bar, data-duration attr | --color-link, --color-text |
| Video Gallery | .video-gallery | .video-gallery__card, data-video attr | --color-link, --color-bg-secondary |
| Slideshow | .slideshow | .slideshow__arrow--prev/next, .slideshow__dots, auto-advance | --color-link, --border-radius |
Data
| Component | Core Class | Key Modifiers | Tokens |
|---|---|---|---|
| Donut Chart | .donut | .donut__slice--1/2/3/4, --slice1–4 vars, .donut-legend | --color-link, --color-secondary |
| Bar Chart | .bar-row | .bar-row__fill, --bar-w (0–100%), background inline | --color-link, --color-bg-secondary |
| Progress Bars | .progress-item | .progress-item__fill, --fill-pct, --fill-clr | --color-link, --color-secondary |
| Range Slider | .range | .range--sm, live value display | --color-link, --color-bg-secondary |
Actions
| Component | Core Class | Key Modifiers | Tokens |
|---|---|---|---|
| Buttons | .btn | .btn--primary/success/danger/warning/neutral/outline/ghost/soft/surface, .btn--xs/sm/lg, .btn--icon, .btn--block, .btn--loading, .btn--high-contrast, .btn--radius-full/none | --color-link, --color-success, --color-danger, --color-warning |
| Checkbox | .checkbox | :checked fills --color-link, disabled state | --color-link |
| Color Picker | .color-picker | .color-picker--sm, .color-picker--lg | — |
| Date Picker | .date-picker | Month nav, today highlight, click-to-select | --color-link, --color-bg-secondary |
| Dropdown | .dropdown | .dropdown--soft, .dropdown--sm, shortcuts, labels, danger items | --box-shadow, --border-radius |
| Form Validation | .form-helper | .input--error, .input--success, .form-helper--error | --color-error, --color-success |
| Icon Button | .btn--icon | Combine with .btn--surface/ghost/outline | — |
| Input Group | .input-group | .input-group__icon, .input-group__addon | --color-link, --color-bg-secondary |
| Loading Button | .btn--loading | Works on all btn variants, spinner matches variant | --color-link |
| Password Input | .password-input | Show/hide toggle, JS ~8 lines | --color-link |
| Popover | .popover | .popover--sm/lg/xl, .popover--align-start/end, arrow | --box-shadow, --border-radius |
| Radio Button | .radio | name attr for groups, disabled state | --color-link, --color-bg-secondary |
| Rating | .rating | 5 stars, hover preview, CSS direction trick, JS ~10 lines | --color-link |
| Select | .select | .select--sm, .select--lg, error state, disabled | --color-link, --color-text-secondary |
| Tabs | .tabs | .tabs__tab--active, .tabs--vertical, .tabs--full, data-panel linking | --color-link |
| Toggle | .toggle | .toggle--sm, disabled state, :checked | --color-link |
Feedback
| Component | Core Class | Key Modifiers | Tokens |
|---|---|---|---|
| Alert | .alert | .alert--info/success/warning/danger, .alert--soft/outline/surface, .alert--sm/lg | --color-link, semantic colors |
| Cookie Bar | .cookie-bar | .cookie-bar--top, .cookie-bar--visible, .cookie-bar__btn--accept | --color-link, --color-bg |
| Skeleton | .skeleton | .skeleton__line--circle/h2/medium/short/btn | --color-bg-secondary |
| Spinner | .spinner | .spinner--sm, .spinner--lg | --color-link, --color-bg-secondary |
| Toast | .toast | .toast--success/error/info, #toast-container, auto-dismiss 3s | --border-radius, --box-shadow |
| Dashboard | .dashboard | .dashboard__card, .dashboard__stat | --color-link, --color-bg-secondary |
| Resizer | .resizer | ew-resize (horizontal), ns-resize (vertical) | --color-bg, --color-bg-secondary |