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 webinars 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: 3:54 AM 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: 3:49 AM 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: 3:54 AM EDT · 60 min
With: Lead Presenter · Co-host

Watch recording

Props + tokens

<WebinarCard data={entry.data} href="/webinars/[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 Webinars

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)

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

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