Design System

Reusable components and patterns for Dark Matter sites.

Component

TeamMemberCard

src/components/team/TeamMemberCard.astro

Displays a team member with avatar, name, role, bio, and optional social links. Used for both leadership and founding team members. The parent container controls sizing constraints - the card fills its container width.

Props

Prop Type Required Description

name string Yes Person's display name

role string Yes Job title or role

bio string Yes Short biography text

image string Yes Path to avatar image

socialLinks SocialLink[] No Array of social links (name, href, icon?)

class string No Additional CSS classes

Theme Support

The card automatically adapts to the current theme mode via CSS custom properties and :global([data-mode="..."]) selectors.

Dark Light Vibrant

Styling

Avatar: 96px circle (w-24 h-24) with colored border
Name: text-lg bold, centered
Role: text-xs uppercase tracking, accent color
Bio: text-sm with reduced opacity
Social links: Separated by border-top, uses SocialIcons component
Hover: Subtle lift (translateY(-4px)) with glow

Examples

With Social Links

Mark Moline

Managing Partner

Translates scientific narratives into investment-grade theses.

Without Social Links

Anthony Borquez

Commercialization

Driving user acquisition, partnerships, and go-to-market execution.

Usage

---
import TeamMemberCard from '@components/team/TeamMemberCard.astro';
---

<TeamMemberCard
  name="Jane Doe"
  role="Managing Partner"
  bio="Bio text here..."
  image="/images/team/jane.jpg"
  socialLinks={[
    { name: 'LinkedIn', href: 'https://linkedin.com/in/jane' },
    { name: 'X', href: 'https://x.com/jane' },
  ]}
/>

Layout Integration

The card fills its container width. Control card size via parent container constraints:

<!-- Leadership: constrained width -->
<div class="max-w-sm">
  <TeamMemberCard ... />
</div>

<!-- Team grid: 2 columns -->
<div class="grid gap-6 sm:grid-cols-2">
  {members.map(m => <TeamMemberCard {...m} />)}
</div>

Component

TeamMemberCard--Wide

src/components/team/TeamMemberCard--Wide.astro

Wide/horizontal team member card with alternating photo position and pillar badges. Designed for narrative-style team pages with an editorial feel. Photo and content columns can swap sides via the reversed prop.

Props

Prop Type Required Description

name string Yes Person's display name

role string Yes Job title or role

bio string Yes Biography text

image string Yes Path to photo

socialLinks SocialLink[] No Array of social links

pillar PillarBadge No Badge with label and color (purple/blue/cyan/green/amber)

reversed boolean No Photo on right instead of left

showDivider boolean No Show top border separator

Pillar Badge Colors

purple blue cyan green amber

Styling

Photo: 192-224px square (w-48 h-48 sm:w-56 sm:h-56) with rounded corners and accent shadow
Name: text-2xl sm:text-3xl bold
Role: text-base uppercase tracking, accent color
Layout: Flexbox with lg:flex-row, stacks on mobile
Alignment: Text aligns left/right based on reversed prop

Examples

Default (Photo Left)

Founding

Skinner Layne

Founding Partner

Builds structures that bridge scientific discovery with institutional LP expectations.

Reversed (Photo Right) + Divider

Operations

Michael Staton

Venture Operations

Implements state-of-the-art infrastructure for venture capital.

Usage

---
import TeamMemberCardWide from '@components/team/TeamMemberCard--Wide.astro';
---

{members.map((member, index) => (
  <TeamMemberCardWide
    name={member.name}
    role={member.role}
    bio={member.bio}
    image={member.image}
    socialLinks={member.socialLinks}
    pillar={{ label: 'Strategy', color: 'purple' }}
    reversed={index % 2 !== 0}
    showDivider={index > 0}
  />
))}

Component

TeamMemberCard--Micro

src/components/team/TeamMemberCard--Micro.astro

Compact team member card for dense 4+ column grids. Features a small 64px avatar, centered layout, and optional pillar/category badge. Best for sections showing multiple team members in a condensed format.

Props

Prop Type Required Description

name string Yes Person's display name

role string Yes Job title or role

description string Yes Short description (1-2 sentences)

image string Yes Path to avatar image

pillar PillarBadge No Badge with label and color (purple/blue/cyan/green/amber)

class string No Additional CSS classes

Pillar Badge Colors

purple blue cyan green amber

Styling

Avatar: 64px circle (w-16 h-16) with accent border
Name: text-lg (1.125rem) bold, centered
Role: text-xs uppercase tracking, accent color
Description: text-sm with reduced opacity
Pillar badge: Pill-shaped with color variants

Examples

Mark Moline

Managing Partner

Translates scientific narratives into investment-grade theses.

Analysis

Skinner Layne

Founding Partner

Builds structures that bridge scientific discovery with institutional LP expectations.

Strategy

Michael Staton

Venture Operations

Implements state-of-the-art infrastructure for venture capital.

Operations

Thomas Vu

Founding Partner

Scaling products from early validation to mass adoption.

Scale

Usage

---
import TeamMemberCardMicro from '@components/team/TeamMemberCard--Micro.astro';
---

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
  {team.map(member => (
    <TeamMemberCardMicro
      name={member.name}
      role={member.role}
      description={member.bio}
      image={member.image}
      pillar={{ label: 'Strategy', color: 'purple' }}
    />
  ))}
</div>