Changelog - 2025-12-18 (#2)

Dark Matter Site: Team Member Card Components & Design System Documentation

Overview

Extracted reusable team member card components from page variants and created a comprehensive design system index page documenting component usage, props, and styling.

Key deliverables:

TeamMemberCard: Compact card with avatar, name, role, bio, and social links for grid layouts
TeamMemberCard--Wide: Horizontal card with larger photo, pillar badges, and alternating layout for narrative-style pages
Design System Index: New /design-system page documenting both components with live examples and code samples
Team Page Refactor: Promoted variant-3 to the main team page using the new component

Changes by Area

1. TeamMemberCard Component (`src/components/team/TeamMemberCard.astro`)

Created a compact, centered card component for team grids:

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
`class`	string	No	Additional CSS classes

Styling:

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

Theme Support: Dark, light, and vibrant modes via :global([data-mode="..."]) selectors.

2. TeamMemberCard--Wide Component (`src/components/team/TeamMemberCard--Wide.astro`)

Created a horizontal card for narrative team pages with alternating layouts:

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
`reversed`	boolean	No	Photo on right instead of left
`showDivider`	boolean	No	Show top border separator

Pillar Badge Colors:

purple — Leadership, Strategy
blue — Analysis
cyan — Operations
green — Founding, Scale
amber — Growth, Commercialization

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, lilac accent
Layout: Flexbox with lg:flex-row, stacks on mobile
Alignment: Text aligns left/right based on reversed prop

3. Design System Index (`src/pages/design-system/index.astro`)

Created a comprehensive documentation page at /design-system:

TeamMemberCard Documentation:

Component description and file path
Props table with types and required/optional indicators
Theme support badges (Dark/Light/Vibrant)
Styling notes with Tailwind classes
Live examples using Mark Moline and Anthony Borquez
Usage code snippets
Layout integration tips

TeamMemberCard--Wide Documentation:

Full props table including pillar, reversed, showDivider
Visual demo of all 5 pillar badge colors
Styling notes for photo size, typography, and layout
Live examples using Skinner Layne and Michael Staton
Usage code showing alternating pattern with index % 2

4. Team Page Refactor (`src/pages/team/`)

Reorganized team page files:

index.astro: Now uses the side-by-side layout with TeamMemberCard component (previously variant-3)
archive-1.astro: Original index page preserved for reference
variant-1.astro: Preserved (different layout with larger managing partner cards)
variant-2.astro: Preserved (narrative alternating layout, source for Wide component)

Layout improvements to index.astro:

Responsive padding: px-6 md:px-12 lg:px-16 xl:px-24
Reduced max container: max-w-6xl (from max-w-7xl)
Leadership column constraint: max-w-sm for managing partner

Files Changed Summary

New

Components:

src/components/team/TeamMemberCard.astro — Compact centered card for team grids
src/components/team/TeamMemberCard--Wide.astro — Horizontal card with pillar badges and alternating layout

Design System:

src/pages/design-system/index.astro — Component documentation with live examples

Modified

src/pages/team/index.astro — Refactored to use TeamMemberCard component (was variant-3)

Renamed

src/pages/team/index.astro → src/pages/team/archive-1.astro (original page preserved)
src/pages/team/variant-3.astro → src/pages/team/index.astro (promoted to main)

Technical Details

Component Architecture

Both card components follow the same patterns:

Props interface with TypeScript types
SocialLink mapping to normalize input for SocialIcons component
Tailwind utility classes for layout and sizing
Scoped <style> block with theme-aware selectors

---
interface Props {
  name: string;
  role: string;
  // ...
}
const { name, role, ... } = Astro.props;

const mappedSocialLinks = socialLinks.map(link => ({
  name: link.name,
  href: link.href,
  icon: link.icon || link.name.toLowerCase(),
}));
---

<article class:list={['team-card', className]}>
  <!-- Markup with Tailwind classes -->
</article>

<style>
  /* Dark mode (default) */
  .team-card .card-inner { ... }

  /* Light mode */
  :global([data-mode="light"]) .team-card .card-inner { ... }

  /* Vibrant mode */
  :global([data-mode="vibrant"]) .team-card .card-inner { ... }
</style>

Parent Container Sizing Strategy

Cards fill their container width, allowing parent elements to control sizing:

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

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

<!-- Wide cards: alternating layout -->
{members.map((m, i) => (
  <TeamMemberCardWide
    reversed={i % 2 !== 0}
    showDivider={i > 0}
    ...
  />
))}

Design System Page Structure

The design system page follows a consistent documentation pattern for each component:

Component badge + title + file path
Description prose block
Props table (grid layout)
Theme support badges
Styling notes (bulleted list)
Live examples with labels
Usage code block
Layout integration notes

Notes / Follow-Ups

Existing PersonCard: There's an existing PersonCard.astro in the team components directory that was not modified. Consider consolidating or documenting the difference between components.
Design System Navigation: The design system now has multiple pages (/design-system, /design-system/messages, /design-system/vibrant, etc.). Consider adding a navigation component.
Team Data Bios: Sample bios in team.json still have placeholder text. Update with real content.
Photo Resolution: Mark Moline's photo was noted as low resolution, which informed the max-w-sm constraint on the leadership column.
Component Library: These team card components could be candidates for extraction to @knots/astro package for use in other sites.