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:

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:

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:

1. Props interface with TypeScript types

2. SocialLink mapping to normalize input for SocialIcons component

3. Tailwind utility classes for layout and sizing

4. 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:

1. Component badge + title + file path

2. Description prose block

3. Props table (grid layout)

4. Theme support badges

5. Styling notes (bulleted list)

6. Live examples with labels

7. Usage code block

8. Layout integration notes

Notes / Follow-Ups

1. 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.

2. Design System Navigation: The design system now has multiple pages (/design-system, /design-system/messages, /design-system/vibrant, etc.). Consider adding a navigation component.

3. Team Data Bios: Sample bios in team.json still have placeholder text. Update with real content.

4. Photo Resolution: Mark Moline's photo was noted as low resolution, which informed the max-w-sm constraint on the leadership column.

5. Component Library: These team card components could be candidates for extraction to @knots/astro package for use in other sites.