CurtainCritics Design System
v0.3.0 Last modified 2026-06-29
Language
EN
Viewport

Components

Cards & results

Cards are only for genuinely repeated items. No cards-in-cards. MVP has no media, so the no-image fallback is a first-class state — a deliberate paper/orange panel, never a broken box. Both user and press scores show, never merged.

ProductionCard.astro — grid auto 1 → 2 → 3 columns
.cc-result — mixed search result row the default “All” tab
Production · Opera
Wiener Staatsoper · Vienna · in repertoire
9.2
Artist · Soprano
PersonScore from 9 verified performances
8.8
.cc-noimg — no-image fallbacks deliberate panels for the MVP no-media state
OperaTosca
DanceGiselle
.cc-duo — duotone media genre-colour overlay → reveals original on hover/focus
.cc-card__media--photo / .cc-litho-layer — Bildsprache “Variante C” rest = colour photo; hover/focus/tap = translucent orange-litho tint over the grayscale/contrast photo (still visible as texture — issue #94 review round 2 finding #1) plus a centred, opaque orange title chip fitted to width (issue #93). The chip's own opaque background is what guarantees the title's ink-on-orange contrast, independent of the photo underneath (round 2 finding #2) — see the dedicated worst-case contrast probe below. Touch has no :hover: a first tap reveals instead of navigating (chrome.ts initLithoTouch) — a second tap navigates. The title is never hover-exclusive: it's always in the accessible tree via the always-visible .cc-card__title below each image. Mobile edge-to-edge (fine-tuning point 3) uses the shipped, reusable .cc-cards--edge-bleed opt-in (components.css §13) — this demo overrides --cc-cards-bleed to cancel its own doc-site-only .ds-spec__stage padding, a real consumer overrides it to match its own container's gutter instead.
.cc-litho-layer — worst-case contrast probe review round 2 finding #2: the title's own opaque chip must hold ≥4.5:1 (ink on orange) regardless of how dark/light the underlying photo is — the surrounding wash is deliberately translucent (round 2 finding #1) and so is no longer what guarantees this. Solid black + solid white 1×1 SVG data-URIs stand in for the darkest/lightest possible photos.