# Caldura v4 — Component class contract The v4 design system declares a set of HTML class names that components are expected to use. When a class is applied to the right element type, the system's CSS resolves the variant-correct styling automatically. Component classes are declared in: - `code/shared/deck-components.css` — chevron, deck-table, matrix, deck-kpi, deck-bullets, deck-badge, deck-section - `code/shared/section-motifs.css` — section-motif (Horizon-derived for Capital, Thermal bars for AI) - `code/shared/paper-texture.css` — caldura-paper-surface (paper-grain utility) - `code/shared/entrance.css` — caldura-bloom (animated bloom mark wrapper) - `code/shared/sr-only.css` — sr-only (visually-hidden utility for the H1-as-lockup pattern) Variant overrides for specific components live in each variant's `tokens.css` (e.g., `.caldura-capital.variant-warm-steel a { color: rgb(var(--accent-secondary)); }`). --- ## Wrapper classes (set the variant scope) | Class | Apply to | Effect | |-------|----------|--------| | `caldura-capital` | `` or a section element | Activates Capital tokens. Required prefix. | | `caldura-ai` | `` or a section element | Activates AI tokens. | | `variant-warm-distinctive` | `` (combined with `caldura-capital`) | Resolves to v4 candidate A | | `variant-warm-steel` | same | v4 candidate B | | `variant-blue-institutional` | same | v4 candidate C | | `variant-v31-baseline` | same | frozen v3.1 reference | | `caldura-paper-surface` | `` or container | Enables the paper-texture overlay (opacity from `--paper-texture-opacity`) | `data-color-scheme="dark"` or `data-color-scheme="light"` on `` toggles mode override. --- ## Section / structural ### `.section-motif` A section-boundary indicator. Renders the variant's section motif (Horizon-derived line + half-disc echo for Capital; Thermal bars for AI). For the bare case (no child marks), use an `
`: ```html
``` When the variant adds a child mark — warm-steel's amber endcap, or AI's trailing thermal bar — use a `
` so the child is a real flex descendant (an `
` is a void element and cannot accept children): ```html ``` ### `.caldura-bloom` Wrapper for the animated Bloom mark. Inside, expect `` with `.ring-1`, `.ring-2`, `.ring-3`, `.ember`, and the wordmark element labeled `.wordmark`. Animations run when `--motion-play-state` is `running` and are paused otherwise. ```html
Caldura AI
``` ### `.sr-only` Visually-hidden utility for screen-reader-only content. Used when the lockup IS the hero and you still want a proper `

` for semantics. ```html

Caldura Capital

``` --- ## Deck components ### `.chevron` A three-step horizontal flow. Each `.step` is a discrete phase. Add `.highlight` to a step to call it out with a left-border accent. ```html
Originate
Underwrite
Hold
``` Bgs read `--accent` via color-mix; text reads `--deck-display-text`. ### `.deck-table` A standard table with deck styling. Alternate rows tinted with `--accent` at 8%; cell borders are accent-tinted. ```html
InvestmentSectorVintage
Mesa GridGrid mod2025
``` Header reads `--deck-display-text`; borders use `--accent` at 35%. ### `.matrix` A 2D grid where one cell is the "you are here." Add `.you-are-here` to the hero cell. ```html
...
...
``` Hero cell bg is `--accent` at 18%; left border is full `--accent`. ### `.deck-kpi` A single KPI tile. ```html
$420M
Target fund size
``` Value reads `--deck-kpi-hero` (computed); label reads `--deck-subtitle-muted`. ### `.deck-bullets` A `