Wrap N children in .og-stagger to slide them in with escalating animation-delay (0ms → 420ms in 60ms steps).

The same primitive used by the onboarding stock picker. Click to toggle selection — the whole card is the hit target.

Glass shell · commandk-enter motion · 2-px left-edge accent on the active row · group labels in tracked-out tertiary mono · ↑ ↓ to navigate · ↵ to select · ESC to close.

Two-column hero: gradient headline + sub-line + chip strip on the left, glass sign-in (or primary CTA) card on the right. The card shares its shell with the Cmd+K palette and Modal so the motion + chrome read as one family across the app.

The hero ships a faked-but-realistic KPI strip whose numbers jitter every 2.4s so the surface reads as “live” without becoming distracting. Use it on public surfaces where you want to hint at the real product's motion without exposing live user data.

Six (or fewer) raised cards in a 3-col responsive grid. Each row opens with an IconTile, ends with a dotted-divider meta footer in mono. Wrap the grid in og-stagger to slide cards in with escalating delays on first paint.

Three solid-surface cards with floating gradient number pills. Use sparingly — the cards work best as the “and now what?” beat between the hero and the bottom CTA.

The closer for marketing pages. Gradient backdrop, large headline + sub-line, primary action paired with a ghost alternative. Stretches full-width inside the page shell.

What it is: the persistent top bar. Anatomy: brand wordmark (trd · candle · fun) · underlined tabs where active = primary text + 600 weight + a 2px --blue underline · a right utility cluster (live status dot, bells, sign-out, theme toggle) split by 1px dividers · an inline search field that opens the Cmd+K palette. Composes from the Kbd primitive (⌘K) and lucide icons. Source: app/components/DashboardNav.tsx.

What it is: two independent flat segmented controls under the nav. GROUP picks how rows are bucketed (Sections · None · Themes); SHOW picks which asset kinds appear (All · Stocks · Crypto). They are orthogonal — any Group combines with any Show. Active segment lifts to --bg-surface with a soft shadow. Source: app/components/WatchlistViewBar.tsx.

Click either control to cycle it — Group and Show move independently. When Group = Themes the bar grows a green-washed “Discover” promo panel plus a horizontally-scrollable sector chip row (documented on the Themes surfaces).

What it is: the single priority dot + short label that replaced the old activity + IBKR-sync badges. Anatomy:one dot whose color/label resolves by priority — IBKR error → stale → IBKR syncing → live / polling — with a soft pulse while active. Verbose detail (ago timestamp, IBKR fetch time, “Data HH:MM”) lives in a hover/focus tooltip. Source: app/components/StatusCluster.tsx.

What it is: the page masthead — identity, live quote, actions, and a cached one-line TLDR. Used on: /stock/<symbol>.

What it is: a slim figure strip under the hero. Tiles are omitted (not dashed) when a value is missing. Momentum chips colour by sign.

What it is: the cache-shared AI brief. Its header badge encodes one of four states. Stale shows the SAME content (never hidden) with an amber badge; only none swaps in a teaser / generating notice.

What it is: the right-hand rail — valuation + momentum key/value cards and blue theme chips. Each card hides entirely when its data is empty.

Mono eyebrow (EyebrowLabel) → oversized title (clamp(40px,6vw,62px), weight 800, letter-spacing -.03em) → bold sub-headline (the AI headline) → an intro overview paragraph as prose (not bullets) → a N stocks · curated/AI theme meta line. Used on: /theme/<slug>.

A full-width strip of seven KPI tiles: 1D basket move, real 1-yr growth, aggregate cap, company count, median P/E, and 30D / 90D basket moves. Momentum / valuation figures are computed client-side from the loaded fundamentals. Signed values colour via var(--green) / var(--red). Composes the shared StatTile primitive. Used on: /theme/<slug>.

A full-width synthesis of the brief's whyItMatters / overview: a mono section label, a bold lead line, and a bulleted body. The editorial anchor of the page. Used on: /theme/<slug>.

Three raised cards (Card variant="raised"): the bull case (green, TrendingUp), the catch (amber, AlertTriangle), and outlook · 12mo (blue, Compass). Each = a tinted IconTilewith a monochrome lucide line icon → heading → bullets → a dashed-divider mono keyword footer tinted to the card's tone. One tone per card (DS §5). Used on: /theme/<slug>.

Selectable cards (toggle into the watchlist). The big-player card is dense — symbol, live price, 1D chip, 1D/30D/90D momentum strip, market cap + sector role chip, and a USP tagline. The rising-star card is a compact two-momentum-cell variant. Selection affordance is BLUE (DS §5), never green. Used on: /theme/<slug>.

The "More in this theme" roster folds two card kinds into one dense grid. Public names render as selectable, solid-border roster cards (left). Private / pre-IPO names are info-only — a gold status badge flags the stage and the figure is a last-round valuation (dotted underline), not a live price. Used on: /theme/<slug>.

Header (ticker + company + live price + refresh/expand/close icons) → provider chips → meta line → synthesis rows → sources drawer → follow-up chips → ask box. Live: ResearchView (variant="panel").

The synthesis bar, type chip, send button, and follow-up borders all read from --rv-accent, which defaults to the gold --rp-accent (#d8b765). A call site can re-tint an entire instance — e.g. an embedded variant — by setting --rv-accent once on the wrapper, with no component fork.

The pulsing market pill (phase-aware), the recompute / updated / universe meta line, the H1 headline, the AI subhead, and the four verdict tally tiles (Long / Exit / Short / Wait).

The “Ready to buy” title + “N firing now” bull chip, the [Watched | All universe] segmented control with the theme dropdown, and the tape itself. Click a row to expand its drill-down; the theme menu and scope toggle are live.

The expanded accordion: large VerdictPill + confidence, the three traffic lights, the LABELED 2×2 quadrant matrix with its guidance line, the two link-out buttons, and the left-aligned “Why — engine verdict” reasons list (leading › marker).

The reusable atoms the row and drill-down compose from. The quadrant matrix labels its axes (Oversold→Overbought, Bullish→Bearish) and fills the active named cell in its tone color.

“Heating up · 30D momentum” — ranked theme chips (name + signed % + arrow), each a link to its /theme/<slug> AI deck.

The five research sources — news · x · reddit · fundamentals · portfolio — in canonical order. Each chip carries a colored provider icon, an uppercase label, an age figure (tabular-nums), and a status dot: fresh · stale · tertiary empty · failed · pulsing gold loading. Live: ProviderChipStrip.

One row per provider section: a 2-px left-edge gradient bar in that provider's accent fades from solid to transparent, a heading + a tinted tag, and a body paragraph (sans prose, not mono). The first row is always the cross-source Synthesis · Overview, tagged gold. Live: SynthesisBlock.

Left rail of past runs grouped by recency (Today / Yesterday / This week). Each card: a status dot (complete / partial / failed), a when · cost meta row (mono figures), a 2-line query, and a sources count. The active card gets a gold-tinted fill + ring. Live: SessionRail.

A compact run-metadata strip — run age · model · sources loaded · cost · tokens as label/value cells (mono) — with export actions pushed right. Below it, the sticky input dock: a row of quick-prompt pills over a composer with a gold send button. Live: BundleMetaStrip + QuickPrompts.

The flat system reserves var(--blue) for primary accents. The research workspace is the one documented exception: it scopes a warm gold accent (--rp-accent: #d8b765) behind .research-root for the active session ring, synthesis tag, send button, and quick-prompt borders. It never leaks out of the route. Light-theme darkens it to #806000 for WCAG AA.