---
version: 1.0
updated: 2025-10-18
---

# Volt CSS Semantics

Auto-generated documentation from base.css

## CSS Custom Properties

All design tokens defined in the stylesheet.

### Typography

- `--font-size-base`: `18px`
- `--font-size-sm`: `0.889rem`
- `--font-size-lg`: `1.125rem`
- `--font-size-xl`: `1.266rem`
- `--font-size-2xl`: `1.424rem`
- `--font-size-3xl`: `1.802rem`
- `--font-size-4xl`: `2.027rem`
- `--font-size-5xl`: `2.566rem`
- `--font-sans`: `"Inter", sans-serif`
- `--font-serif`: `"Libre Baskerville", serif`
- `--font-mono`: `"Google Sans Code", monospace`
- `--line-height-tight`: `1.25`
- `--line-height-base`: `1.6`
- `--line-height-relaxed`: `1.8`
- `--font-size-base`: `16px`
- `--font-size-base`: `15px`

### Spacing

- `--space-xs`: `0.25rem`
- `--space-sm`: `0.5rem`
- `--space-md`: `1rem`
- `--space-lg`: `1.5rem`
- `--space-xl`: `2rem`
- `--space-2xl`: `3rem`
- `--space-3xl`: `4rem`
- `--space-2xl`: `2rem`
- `--space-3xl`: `3rem`

### Layout

- `--content-width`: `70ch`
- `--sidenote-width`: `18rem`
- `--sidenote-gap`: `2rem`

### Colors

- `--color-bg`: `#fefefe`
- `--color-bg-alt`: `#f5f5f5`
- `--color-text`: `#1a1a1a`
- `--color-text-muted`: `#666666`
- `--color-accent`: `#0066cc`
- `--color-accent-hover`: `#0052a3`
- `--color-border`: `#d4d4d4`
- `--color-code-bg`: `#f8f8f8`
- `--color-mark`: `#fff3cd`
- `--color-success`: `#22863a`
- `--color-warning`: `#bf8700`
- `--color-error`: `#cb2431`
- `--color-bg`: `#1a1a1a`
- `--color-bg-alt`: `#2a2a2a`
- `--color-text`: `#e6e6e6`
- `--color-text-muted`: `#a0a0a0`
- `--color-accent`: `#4da6ff`
- `--color-accent-hover`: `#66b3ff`
- `--color-border`: `#404040`
- `--color-code-bg`: `#2a2a2a`
- `--color-mark`: `#4a4a00`
- `--color-success`: `#34d058`
- `--color-warning`: `#ffdf5d`
- `--color-error`: `#f97583`

### Effects

- `--shadow-sm`: `0 1px 2px rgba(0, 0, 0, 0.05)`
- `--shadow-md`: `0 4px 6px rgba(0, 0, 0, 0.07)`
- `--shadow-lg`: `0 10px 15px rgba(0, 0, 0, 0.1)`
- `--radius-sm`: `3px`
- `--radius-md`: `6px`
- `--radius-lg`: `8px`
- `--transition-fast`: `150ms ease-in-out`
- `--transition-base`: `250ms ease-in-out`
- `--shadow-sm`: `0 1px 2px rgba(0, 0, 0, 0.3)`
- `--shadow-md`: `0 4px 6px rgba(0, 0, 0, 0.4)`
- `--shadow-lg`: `0 10px 15px rgba(0, 0, 0, 0.5)`

## Element Coverage

HTML elements with defined styling in the stylesheet.

**Coverage**: 58/60 elements

### Styled Elements

**Document Structure**: html, body
**Typography**: h1, h2, h3, h4, h5, h6, p, a, em, strong, mark, small, sub, sup, hr
**Lists**: ul, ol, li, dl, dt, dd
**Semantic**: blockquote, cite, article, section, aside, header, footer, nav, details, summary
**Forms**: form, fieldset, legend, label, input, select, textarea, button
**Tables**: table, thead, th, td
**Media**: img, figure, figcaption, video, audio, canvas, svg, iframe
**Code**: code, pre, kbd, samp, var

### Unstyled Elements

tbody, tr

## Documentation Comments

Inline documentation extracted from CSS comments.

### `:root`

Root-level CSS variables define the design system. Light theme is default, dark theme overrides via media query.

### `@media (prefers-color-scheme: dark)`

Dark Theme Overrides Automatically applied when user prefers dark color scheme

### `*, *::before, *::after`

CSS reset

### `html`

Document root configuration Sets base font size for rem calculations

### `body`

Body element - Primary container Sets default typography and colors for the entire document

### `h1, h2, h3, h4, h5, h6`

Headings hierarchy Uses modular scale for harmonious sizing Tighter line-height for larger text improves readability

### `h1`

Individual heading sizes h1-h3 use slightly larger weights for emphasis

### `p`

Paragraph spacing Generous spacing between paragraphs aids scanning

### `h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p`

First paragraph after headings - No top margin Inspired by tufte.css

### `a`

Links Uses accent color with underline for clarity

### `em`

Emphasis and strong elements

### `mark`

Marked/highlighted text

### `sub, sup`

Subscript and superscript Prevents them from affecting line height

### `small`

Small text Also used for Tufte-style sidenotes (see sidenotes section)

### `ul, ol`

List spacing and indentation Nested lists inherit spacing

### `li`

List items

### `li > ul, li > ol`

Nested lists - Reduced spacing

### `dl`

Description lists - For key-value pairs

### `p:has(small)`

Parent paragraph must be positioned for absolute children

### `p small`

Pull small elements into the right margin Creates classic Tufte-style sidenote layout

### `@media (max-width: 767px)`

Mobile sidenotes - Inline with subtle styling

### `blockquote`

Blockquote styling Left border for visual distinction, italic for emphasis

### `cite`

Citation element

### `code`

Inline code Monospace font with subtle background

### `kbd`

Keyboard input Styled like keys on a keyboard

### `samp`

Sample output

### `var`

Variable

### `pre`

Preformatted code blocks Horizontal scrolling for overflow, no word wrap

### `hr`

Section dividers Centered decorative element

### `table`

Table container for horizontal scrolling on small screens

### `thead`

Table header styling Bold text with bottom border

### `td`

Table cells

### `tbody tr:nth-child(even)`

Zebra striping for easier row scanning

### `tbody tr:hover`

Hover state for interactive tables

### `form`

Form container spacing

### `fieldset`

Fieldset grouping

### `label`

Labels Block display for better touch targets

### `textarea`

Textarea specific

### `input[type="checkbox"],`

Checkboxes and radio buttons

### `input[type="file"]`

File input

### `input[type="range"]`

Range input

### `progress, meter`

Progress and meter

### `input[type="reset"]`

Reset button - Subdued styling

### `img`

Images Responsive by default, maintains aspect ratio

### `figure`

Figures with captions Common in academic and technical writing

### `video, audio`

Video and audio

### `article, section`

Article and Section Spacing between major content blocks

### `aside`

Aside Complementary content, styled distinctly

### `header`

Header and Footer

### `details`

Details and Summary Disclosure widget for expandable content

### `.sr-only`

Screen reader only Hides content visually but keeps it accessible to assistive technology

### `@media print`

Print-specific optimizations

### `@media (max-width: 768px)`

Tablet and below - Reduce spacing

### `@media (max-width: 480px)`

Mobile - Further reduced spacing and sizing