Internal · Design System

Component catalog

Every component used on the site, with variants visible in all three modes. New components land here in the same change that introduces them.

Mode

Theme

Card

Surface element using --fx-card-* tokens. Mode determines shadow intensity, border treatment, and hover behavior.

Rest

Default card surface in current mode.

Hover state

Forced hover styling for inspection.

With code

const dojo = await VCDojo.start();

CSS contract + usage

<div class="ds-card">
  <h3 class="ds-card-title">Title</h3>
  <p class="ds-card-body">Body</p>
</div>

/* Tokens read */
--fx-card-bg, --fx-card-border, --fx-card-border-hover,
--fx-card-shadow, --fx-card-shadow-hover,
--color-text, --color-text-muted, --font-display

WebinarCard

Calendar-style card for the sessions collection. Status (Upcoming / Live / Recorded) is inferred at render time from date_scheduled via inferWebinarStatus().

Upcoming

Sample · How agents reshape diligence

A workshop on wiring an agentic research loop into a junior analyst workflow.

When: 6:07 PM EDT · 60 min
With: Lead Presenter · Co-host

RSVP

Live

Sample · How agents reshape diligence

A workshop on wiring an agentic research loop into a junior analyst workflow.

When: 6:02 PM EDT · 60 min
With: Lead Presenter · Co-host

Join now

Recorded

Sample · How agents reshape diligence

A workshop on wiring an agentic research loop into a junior analyst workflow.

When: 6:07 PM EDT · 60 min
With: Lead Presenter · Co-host

Watch recording

Props + tokens

<WebinarCard data={entry.data} href="/sessions/[id]" />

/* Props */
data:           { title, lede?, date_scheduled, durationMinutes?,
                  presenters?, rsvpUrl?, recordingUrl? }
href?:          link to detail page
statusOverride?: 'Upcoming' | 'Live' | 'Recorded' (design-system use only)

/* Tokens read */
--fx-card-bg, --fx-card-border, --fx-card-border-hover,
--fx-card-shadow, --fx-card-shadow-hover,
--color-text, --color-text-muted, --color-primary, --color-accent,
--color-surface, --color-border, --color__bone,
--font-display, --font-code

Buttons

Primary, secondary (outlined), ghost.

TextLinkSpan

Subtle text-link row with an auto-inserted bright dot between children. Pass plain <a> tags — the separator comes from CSS.

Default

Brand Kit Design System

Three links

Brand Kit Design System Changelog

Custom separator (slash) + accent color

Brand Kit Design System Changelog

Constrained width (maxWidth=320px)

Brand Kit Design System Changelog Sessions

Props + tokens

<TextLinkSpan>
  <a href="/brand-kit">Brand Kit</a>
  <a href="/design-system">Design System</a>
</TextLinkSpan>

/* Props (all optional) */
width?:           CSS width        (default: auto)
minWidth?:        CSS min-width    (default: max-content — keeps links on one line)
maxWidth?:        CSS max-width    (default: 80%)
separator?:       glyph            (default: "•")
separatorColor?:  CSS color        (default: var(--color-primary))
class?:           extra class name(s)

/* Tokens read */
--color-text-muted, --color-text, --color-primary, --font-code

/* Internal CSS vars (overridable via props above) */
--tls-width, --tls-min-width, --tls-max-width,
--tls-separator, --tls-separator-color

ContentPreviewNavCard

Prev / next chapter card used by BookReaderLayout. Two variants: inline adapts to the reader's container size (full → slim → chevron) for the top triptych beside the banner; block is always full for chapter-end placement. The visible variant of the inline cards below depends on the width of the catalog page itself — resize the window to see them flex.

Variant: block — chapter-end pair

Previous Chapter 02

Proprietary Dealflow & Dealflow Management

Earn the inbound, route the inbound, say "no" fast and well, and get invited to oversubscribed rounds.

Next Chapter 04

Winning Deals

Personal brand, fast trust, and valuation gymnastics — what makes the founder pick you.

Variant: inline — top-triptych adaptive (no container here, so full fidelity always shown; in BookReaderLayout this collapses by container size)

Previous Chapter 02

Proprietary Dealflow & Dealflow Management

Earn the inbound, route the inbound, say "no" fast and well, and get invited to oversubscribed rounds.

Next Chapter 04

Winning Deals

Personal brand, fast trust, and valuation gymnastics — what makes the founder pick you.

Props + tokens

<ContentPreviewNavCard
  direction="prev"  /* or "next" */
  number={3}
  title="Thesis, Diligence & Pushing Deals Through"
  lede="Build a point of view…"
  tags={['Investment-Thesis', 'Diligence-Sprints']}
  href="/read/venture-handbook/.../"
  variant="inline"  /* or "block" */
/>

/* Tokens */
--fx-card-bg, --fx-card-border, --color-primary,
--color-text, --color-text-muted, --color-border,
--font-display, --font-body, --font-code

/* Container queries (only fire under .book-reader-page → container reader) */
< 768px        → chevron only
768–1023       → slim, no tags, 2-line lede
1024–1279      → ~200px wide, 3-line lede, 2 tags
≥1280 (landscape) → full fidelity, 4-line lede

Effect tokens (--fx-*)

Carry mode-adaptive intensity. Same names across modes; values shift.

Token	Purpose
--fx-glow-opacity	Base glow opacity (0–1) — light: subtle, dark: moderate, vibrant: max
--fx-glow-spread	Glow spread radius — scales with mode intensity
--fx-card-bg	Card background, mode-adaptive
--fx-card-border	Card border at rest
--fx-card-border-hover	Card border on hover
--fx-card-shadow	Card shadow at rest
--fx-card-shadow-hover	Card shadow on hover
--fx-headline-gradient	Display headline gradient — none in light, gradient in dark/vibrant
--fx-flare-color	Color for canvas/Three.js elements (resolved via getComputedStyle)

Sub-pages

Component-specific demo pages — added in the same change that introduces the component.

Heroes

HeroBannerWithMessageHierarchy

3 heights × 3 overlays × 2 alignments.

Sections

Section__ProjectGallery

portfolio · mission-brief · lite · shelf.

Components

JumboPopdown__Projects

Header dropdown · keyboard + a11y.

Sections

Section__WorkingGroupGallery

Same 4 variants + active-projects chip row.

Components

JumboPopdown__WorkingGroups

Sibling popdown for the WG header item.

Components

JumboPopdown__More

Static "More" popdown — Stacks + People.

Components

AlertDisplay

Dismissable announcement bar · session-scoped.

Markdown

MarkdownReader

Renamed from ProjectReader · generic.

Markdown

Markdown components index

AstroMarkdown · Callout · CodeBlock · MarkdownImage · Sources.

Markdown

Callouts

10 types · aliases · info hero · 3 modes.

Catalog index

As components grow, sub-pages will be added (e.g., /design-system/page-headers).

ModeThemeToggle

The 3-mode + theme toggle widget used on /brand-kit and /design-system.

props: — (no props yet)

tokens: --color-primary, --color-text, --color-text-muted, --color-border, --fx-card-bg, --fx-card-border, --font-code

AlertDisplay

Inline announcement bar with primary-tinted gradient and an "×" dismiss button. Sits above the section/page it's mounted in. Dismissal is per-id and per-session (sessionStorage) — same alert never shows twice in one browsing session, but reappears on a future visit. Content via default slot (HTML/components) or text prop.

props: id (required, dismiss key), text? (string fallback), variant? ("announce"|"info"|"warning", default "announce"), align? ("left"|"center", default "left") → demo: /design-system/components/alert-display

tokens: --color-primary, --color-secondary, --color-surface, --color-text, --color-text-muted, --color-border, --fx-card-shadow

BaseThemeLayout

Site-wide layout wrapper. Applies theme class on <html>, boots theme + mode switchers, imports global.css.

props: title, description, themeClass, noindex, containerClass

tokens: (none directly — sets up the contract for descendants)

BoilerPlateHTML

Bare HTML skeleton with pre-paint mode-application script (avoids FOUC).

props: title, description, themeClass, favicon, noindex

tokens: (none directly)

WebinarCard

Calendar-style card for webinars collection entries; status inferred from date_scheduled.

props: data, href?, statusOverride?

tokens: --fx-card-*, --color-text, --color-text-muted, --color-primary, --color-accent, --color-surface, --color-border, --font-display, --font-code

BannerWithOverlay

Composites brand-font HTML title text over an Ideogram-generated, text-stripped base image. Used for changelog banners. Mode-aware scrim adapts to light/dark/vibrant.

props: src, title, eyebrow?, subtitle?, alt?, href?

tokens: --color-border, --color-surface, --color__bone, --color__obsidian, --color__ink, --color__lime-terminal, --font-display, --font-body, --font-code

Header

Sticky site chrome — wordmark + nav + ModeToggle. Rendered by BaseThemeLayout on every page.

props: — (no props)

tokens: --color-background, --color-border, --color-text, --color-text-muted, --color-primary, --font-display, --font-code

ModeToggle

3-mode chrome cycle button (light → dark → vibrant). Reads window.modeSwitcher; CSS-driven icon visibility.

props: — (no props)

tokens: --color-text, --color-border, --color-primary

SocialsFaviconRow

Universal social-icon row. Pass a URL per platform to show that link; omit to hide. Renders nothing if no platforms passed. Brand-aware hover via --color-primary so the row tracks the active mode.

props: github?, linkedin?, twitter?, bluesky?, instagram?, youtube?, mastodon?, email?, rss?, size?, class?

tokens: --color-text-muted, --color-primary

HeroContentCoreMessage

Primary hero composition for marketing pages. Eyebrow + h1 (gradient via --fx-headline-gradient) + h2 + supporting paragraph + optional CTA. Used on /dojo as the 2/3-width hero.

props: contextSetter?, headerTxt, subheaderTxt?, supportingTxt?, ctaHref?, ctaLabel?

tokens: --font-display, --font-body, --font-code, --color-text, --color-text-muted, --color-primary, --color__bone, --fx-headline-gradient, --fx-card-shadow, --fx-card-shadow-hover

AlternateCta

Secondary card-style CTA that lives next to a hero (typically 1/3 width). Title + body HTML + trailing attribution + optional secondary action. Mode-aware card surface.

props: title?, bodyHtml, trailingHtml?, ctaHref?, ctaLabel?

TextLinkSpan

Inline-flex row of subtle text links auto-separated by a bright dot. Children are plain <a> tags; the dot is inserted between them by CSS pseudo-elements. Used for low-emphasis nav rows (e.g. footer-style links inline below a primary CTA).

props: width?, minWidth?, maxWidth? (defaults: auto / max-content / 80%); separator? (default "•"); separatorColor? (default var(--color-primary)); class?

tokens: --color-text-muted, --color-text, --color-primary, --font-code; internal: --tls-width, --tls-min-width, --tls-max-width, --tls-separator, --tls-separator-color (all overridable via props)

AreasOfVentureGrid

Section that renders a 1/2/3-column responsive grid of "areas of venture" cards. Sourced from the Venture Handbook chapter structure; used at the bottom of /dojo.

props: eyebrow?, heading?, intro?, areas: Area[] (number, title, lede, tags? — marketing hooks, not structural sub-sections)

BookReaderLayout

Page chrome around a single chapter. Wraps BaseThemeLayout. Composes ReadingProgressBar + skip link + top triptych (prev card + banner + next card) + ChapterMeta + tags + "in this chapter" outline + body slot + bottom prev/next cards. Container queries (NOT viewport media) drive four layout modes (Mobile / Tablet / Half-Screen / Desktop) per width AND aspect ratio.

props: title, description?, chapterNumber, chapterTitle, chapterLede?, chapterEyebrow?, bannerSrc?, tags?, subsectionOutline?, readingMinutes?, wordCount?, author?, updated?, sourceOrganization?, prev?, next?, backHref?, backLabel?

tokens: --fx-card-bg, --fx-card-border, --fx-card-border-hover, --fx-card-shadow, --fx-card-shadow-hover, --color-text, --color-text-muted, --color-primary, --color-accent, --color-surface, --color-border, --color-background, --color__bone, --font-display, --font-body, --font-code; declares container-type: inline-size, container-name: reader on .book-reader-page; sets --reader-column, --reader-outer, --reader-card-width, --reader-prose-size by mode

ReadingProgressBar

Thin top-of-viewport stripe that tracks scroll position relative to the article body bounding rect (not the viewport). 3px tall, --color-primary fill, rAF-throttled scroll listener. Inline <script> via define:vars; respects prefers-reduced-motion (kills the width transition).

props: target? (CSS selector for article body, default ".book-reader__body")

tokens: --color-primary; uses color-mix() for the glow shadow

ChapterMeta

Slim, code-font row immediately below the chapter banner. Renders Chapter NN · X min read · word count · author · updated date · source org as a horizontal definition-list. Reading time computed by caller as ceil(words / 220).

props: chapterNumber, readingMinutes?, wordCount?, author?, updated?, sourceOrganization?

tokens: --color-text, --color-text-muted, --color-primary, --color-border, --font-code

FormattedDate

Renders a date (Date object, ISO date string, or full ISO timestamp) in one of a small set of named styles inside a semantic <time datetime="YYYY-MM-DD"> element. Default style "long" → "April 26, 2026" (preferred for body prose and chapter meta). Other styles: "medium", "short", "iso", "reverse-medium" ("2026, Apr. 26"), "year-only". Backed by lib/format-date.ts which handles UTC normalization to avoid timezone-shift bugs.

tokens: (none — inherits from context; passes through optional class= prop to the <time> element)

ContentPreviewNavCard

Prev / next chapter preview card. Visual echo of AreasOfVentureGrid (--fx-card-* tokens, number-in-corner motif, lede + tags rhythm) with direction-aware chevron (top-left for prev, top-right for next). Two variants: "inline" adapts to reader container size — full → slim → chevron-only — for the top triptych; "block" is always full for chapter-end placement.

props: direction: "prev"|"next", number, title, lede?, tags?, href, maxHeight?, ledeLineClamp? (default 4), variant?: "inline"|"block" (default "inline")

tokens: --fx-card-bg, --fx-card-border, --color-primary, --color-text, --color-text-muted, --color-border, --font-display, --font-body, --font-code; uses container queries on the reader container

HeroBannerWithMessageHierarchy

Image-banner hero that wraps HeroContentCoreMessage. Three heights (short/standard/tall) × three overlays (gradient/scrim/none) × two alignments (left/center). Used by /projects/ and any project detail page that has a hero_image.

props: image, imageAlt?, overlay?, align?, height?, contextSetterTxt?, headerTxt, subheaderTxt?, supportingTxt?, ctaLabelTxt?, ctaHref? → demo: /design-system/heroes/hero-banner-with-message-hierarchy

tokens: --color-background, --color-surface, --color-text, --color-text-muted, --color-primary, --fx-headline-gradient, --fx-card-shadow, --fx-card-shadow-hover, --font-display, --font-body, --font-code

Section__ProjectGallery

Renders a filtered set of projects in one of four variants: portfolio (Working Group Cards — default for active), mission-brief (numbered dossier — alternate "standard"), lite (proposed — dashed), shelf (archive — compact rows). Empty list + emptyHide → renders nothing.

props: contextSetterTxt?, headingTxt?, introTxt?, projects: ProjectEntry[], variant?: "portfolio"|"mission-brief"|"lite"|"shelf" (default "portfolio"), emptyHide?: boolean (default true) → demo: /design-system/sections/project-gallery

tokens: --fx-card-bg, --fx-card-border, --fx-card-border-hover, --fx-card-shadow, --fx-card-shadow-hover, --color-text, --color-text-muted, --color-primary, --color-secondary, --color-surface, --color-border, --color-background, --color-status-active, --color-status-proposed, --color-status-archived, --font-display, --font-body, --font-code

JumboPopdown__Projects

Header-mounted dropdown surfacing active (and optionally proposed) working-group projects. Conforms to context-v/blueprints/Jumbotron-Popdown-Patterns.md. Hover-open + click-toggle, Esc closes, arrow keys navigate, mobile becomes a bottom drawer.

props: triggerLabelTxt? (default "Projects"), projects: ProjectEntry[], showProposed?: boolean (default true) → demo: /design-system/components/jumbo-popdown-projects

tokens: --fx-card-bg, --fx-card-border, --fx-card-shadow-hover, --color-text, --color-text-muted, --color-primary, --color-surface, --color-border, --color-status-*, --font-display, --font-code

ProjectMetadataDisplay

Below-hero metadata strip on /projects/[slug]/. Status pill, cadence, last-activity timestamp, leads + members with avatars (initials fallback), external link icon row, optional RSVP CTA, scope paragraph.

props: project: ProjectEntry

tokens: --fx-card-bg, --fx-card-border, --fx-card-shadow, --color-text, --color-text-muted, --color-primary, --color-surface, --color-border, --color-status-*, --color__bone, --font-display, --font-code

MarkdownReader

Generic LFM-rendered reading column. Used by /projects/[slug]/ and /working-groups/[slug]/. Wraps an MDAST tree in a 70ch prose container with global heading/paragraph/list styles. Top chrome: optional back-link (configurable via backHref/backLabelTxt) + optional "Edit on source" link. Renders Sources when citations are present. Renamed from ProjectReader to make non-domain reuse explicit.

props: tree: MDAST root, citations?: Citation[], editUrl?, backHref? (default "/projects/"), backLabelTxt? (default "All projects") → demo: /design-system/markdown/markdown-reader

tokens: --color-text, --color-text-muted, --color-primary, --color-surface, --color-border, --font-display, --font-body, --font-code

AstroMarkdown

The recursive MDAST → Astro/JSX renderer that powers every long-form page. Dispatches each node type (paragraph, heading, list, link, table, footnoteReference, containerDirective, etc.) to inline JSX or a specialized component (Callout, CodeBlock, MarkdownImage). Canonical source: packages/lfm-astro/components/AstroMarkdown.astro.

props: node: MDAST node, data?: tree.data → demo index: /design-system/markdown

tokens: (structural — no direct CSS; defers to the page-level body class and the specialized child components)

Callout

Renders LFM/remark-callouts blocks (`> [!type] Title`). Three-file split (Callout.astro + callout-types.ts + callout.css) — structure, type registry, and mode-aware stylesheet. Ten built-in types plus a 7-entry alias map. Every type obeys the light/dark/vibrant mode contract; the `info` hero variant scales its glow with --fx-glow-opacity. Canonical source: packages/lfm-astro/components/.

props: node: containerDirective with name="callout", data? → demo: /design-system/markdown/callouts

tokens: --callout-accent (per-type, mode-overridden), --color-text, --color__cyan-vapor / lime-terminal / amber-flare / magenta-fuse / violet-electric / graphite-* (named tokens), --fx-glow-opacity, --fx-glow-spread (info hero variant)

CodeBlock

Fenced-code renderer. Receives a `code` MDAST node (lang + value) and produces a styled <pre><code> block. Used for inline code samples in long-form content.

props: node: code MDAST node → demo index: /design-system/markdown

tokens: --color-surface, --color-border, --font-code

MarkdownImage

Renders `:::image{src=… alt=…}` directive blocks with caption support. Distinct from inline `![alt](src)` images, which go through AstroMarkdown directly.

props: node: containerDirective with name="image", data? → demo index: /design-system/markdown

tokens: --color-text-muted, --color-border

Sources

Citation list at the bottom of a long-form page. Receives `tree.data.citations.ordered` from `parseMarkdown()`. Renders sequentially-numbered footnote anchors paired with `footnoteReference` superscripts inside the body.

props: citations: Citation[] → demo index: /design-system/markdown

tokens: --color-text, --color-text-muted, --color-primary, --color-border

Section__WorkingGroupGallery

Sibling to Section__ProjectGallery — same four variants and CSS, but the data shape is enriched: each entry carries the WorkingGroupEntry plus its currently-active projects (pre-joined by the loader). The portfolio and mission-brief variant cards add a small chip row showing 1–3 of the WG's active projects, which is the headline differentiator vs. project cards.

props: contextSetterTxt?, headingTxt?, introTxt?, entries: WorkingGroupWithProjects[], variant?: "portfolio"|"mission-brief"|"lite"|"shelf" (default "portfolio"), emptyHide?: boolean (default true) → demo: /design-system/sections/working-group-gallery

tokens: --fx-card-bg, --fx-card-border, --fx-card-border-hover, --fx-card-shadow, --fx-card-shadow-hover, --color-text, --color-text-muted, --color-primary, --color-secondary, --color-surface, --color-border, --color-background, --color-status-active, --color-status-proposed, --color-status-archived, --font-display, --font-body, --font-code

JumboPopdown__WorkingGroups

Sibling to JumboPopdown__Projects. Header-mounted dropdown surfacing active (and optionally proposed) working groups. Same hover-open + click-toggle, Esc closes, arrow keys navigate, mobile becomes a bottom drawer. Mounted in Header.astro alongside the Projects popdown.

props: triggerLabelTxt? (default "Working Groups"), workingGroups: WorkingGroupEntry[], showProposed?: boolean (default true) → demo: /design-system/components/jumbo-popdown-working-groups

tokens: --fx-card-bg, --fx-card-border, --fx-card-shadow-hover, --color-text, --color-text-muted, --color-primary, --color-surface, --color-border, --color-status-*, --font-display, --font-code

JumboPopdown__More

Third sibling popdown. Surfaces secondary destinations (Stacks, People) under a "More" trigger. Static items — no collection backing, edit the items array in the component to add destinations. Same hover-open + click-toggle, Esc closes, arrow keys navigate, mobile becomes a bottom drawer.

props: triggerLabelTxt? (default "More") → demo: /design-system/components/jumbo-popdown-more

tokens: --fx-card-bg, --fx-card-border, --fx-card-shadow-hover, --color-text, --color-text-muted, --color-primary, --color-surface, --color-border, --font-display, --font-code

WorkingGroupMetadataDisplay

Sibling to ProjectMetadataDisplay. Below-hero metadata strip on /working-groups/[slug]/. Same shape because the WG schema is currently a clone of the projects schema: status pill, cadence, last-activity timestamp, leads + members rosters, external link icon row, optional RSVP CTA, scope paragraph.

props: workingGroup: WorkingGroupEntry

ToolCard (stack)

Tool entry visual for /stack — favicon + name + tagline + description + tag chips, with optional 16:9 screenshot at top. Visual ancestor: lossless.group/toolkit cards. Accepts partial tool entries (Obsidian-pasted files have sparse frontmatter). Optional annotation line surfaces stack-tier context (notes / intent / reason).

props: slug: string, data: ToolEntryData (partial), small?: boolean, notes?: string, intent?: string, reason?: string, abandoned?: string

PersonCard--Thumb

Compact profile chip for /people, /stacks, and any roster grid. Avatar with primary halo + name + firm + role + tool-count + Kauffman class + joined-on date. Visual vocabulary copied from Section__WebinarPresenters avatar pattern. Whole card is a link to /people/[handle]. Naming: PersonCard--{variant}.astro — Thumb is the small horizontal card; future variants (Full, Hero, Mini) live as siblings.

props: handle: string, name: string, firm?: string, role?: string, avatar?: string, toolCount?: number, kauffmanClass?: number, joinedOn?: string | Date

ParticipantStackView (stack)

Three-tier stack panel: Current / Aspirational / Moved on from. Resolves tool slugs to entries from the `tools` content collection at render time. Missing references render as ghost cards so registry gaps surface visually. Used on /stack/people/[handle].

props: currentStack?, aspirationalStack?, abandonedStack? (each: { tool: slug, ...tier-specific fields }[]), handle? (when set, owner-only Edit chips render in each tier header)

tokens: --color-text, --color-text-muted, --color-primary, --color-surface, --color-border, --font-display, --font-code

StackBuilder + StackBucket (stack editor)

Owner-only multi-column stack editor used at /people/[handle]/stack/edit. Three buckets (Current / Aspirational / Archived) with pill toggles for which are visible (at-least-one invariant; localStorage-persisted per handle). Single-pill = single column max-w 36rem; two-pill = side-by-side max-w 60rem; three-pill snaps to two-up of the most-recently-toggled pair + a "more →" peek. svelte-dnd-action wires drag within and across columns. Cross-column drops trigger an inline reshape form (notes ↔ intent ↔ reason) that auto-dismisses after 5s. Optimistic UI + dirty banner + Cmd/Ctrl+Z undo (LIFO depth 10). Mobile (<=768px) hides drag handles and replaces them with Move (modal-driven) + ↑/↓ buttons. Saves the full snapshot of all three buckets to Turso via /api/stack/save; the public /people/[handle] page renders from materialized markdown, refreshed by `pnpm sync:stacks`. Not catalogued with a live preview here because the editor requires an owner session and would attempt real DB writes — visit /people/<your-handle>/stack/edit to see it.

props: handle: string, initialName?, initialFirm?, initialPublic?, initialCurrent?, initialAspirational?, initialAbandoned?, avatar?

tokens: --color-text, --color-text-muted, --color-primary, --color-surface, --color-border, --color-background, --fx-card-bg, --font-display, --font-code, --font-body

CtaBtnWithAuthIcons

Primary CTA button that shows which auth providers (linkedin, github) the destination accepts. Provider glyphs sit on the leading edge of the button with a thin divider before the label. Same chrome as HeroContentCoreMessage's default CTA so it slots in via the hero's `cta` named slot. Used on /dojo for the "Join by creating an account" entry point.

props: href: string, label: string, providers?: ("linkedin"|"github")[] (default both, order preserved), external? (default false), iconSize? (default 18)

tokens: --color-primary, --color__bone, --font-code, --fx-card-shadow, --fx-card-shadow-hover

ToolTipIndicator

Subtle "?" circle that reveals an explanatory bubble on hover OR focus. Touch users tap the trigger to focus it (bubble shows); tapping elsewhere blurs. Zero JS — :hover + :focus-within drive visibility. Pass copy via the default slot (HTML allowed) or the `text` prop. Use anywhere the UI risks the "wait, why?" reaction (auth gates, jargon, surprising defaults).

props: text? (string fallback), position?: "top"|"bottom" (default "top"), width? (default "18rem"), label? (default "More information"), size? (default 16)

tokens: --color-text-muted, --color-primary, --color-text, --fx-card-bg, --fx-card-border, --fx-card-shadow, --font-body; internal: --tt-width (overridable via prop)

PersonCard--Bare

Canonical "person row" used wherever the site introduces a human — webinar presenters, project leads, working-group leads. Avatar with --color-primary halo + name (linked when profile is set) + firm in code-font primary + muted role. Optional `topic` block on the right (vertical dashed divider, "Presenting on …"). `tbd` prop renders a dashed-border placeholder for proposed groups still recruiting a lead. Used by Section__WebinarPresenters, ProjectMetadataDisplay, WorkingGroupMetadataDisplay. Auto-fills avatar/firm/profile from the participants collection via lib/resolve-people.ts (case-insensitive name match).

props: name (required), firm?, role?, avatar?, profile?, topic?, topicLabel? (default "Presenting on"), tbd? (default false; auto-detected when name === "TBD")

tokens: --fx-card-bg, --fx-card-border, --fx-card-border-hover, --fx-card-shadow, --color-primary, --color-text, --color-text-muted, --color-surface, --color-border, --font-display, --font-code