Design System

Reusable components, patterns, and visual styles for Dark Matter sites. Browse the documentation below.

Components

Citations

Hex-code citation system with inline markers, source lists, and wrapper utilities.

InlineCitationSourcesSourcesCompactSourcesInline +1 more

People

Team member cards in compact and wide variants for grid and narrative layouts.

TeamMemberCardTeamMemberCard--WideTeamMemberCard--Micro

Deals

Pipeline company cards for public and confidential deal flow displays.

DealCard--MicroDealCard--Micro--Confidential

Sections

Messages

Narrative section components for fund messaging and data visualizations.

TheAgingCrisisAgingPopulationDarkMatterDifferentiationExitPotential

Page Headers

Hero header variants for page tops: centered gradient, split-nav, and compact styles.

PageHeader--CenteredPageHeader--SplitNavPageHeader--Compact

Themes

Vibrant Mode

Showcase of the vibrant visual mode with glows and gradients.

Effects

Flare

Three.js particle visualizations and abstract imagery.

ImageAbstract--OrbImageAbstract--DNAImageAbstract--Graph

Glows

CSS-based animated glow effects for hero backgrounds.

HeroGlow--AnimatedOrbsHeroGlow--EventHorizonHeroGlow--QuarteredRingHeroGlow--PerpendicularArcs +2 more

Reference

Needs Modes

Components requiring light/dark/vibrant mode support.