Deck Design System

Deck is MeetCard’s flagship atomic design system — a composable foundation of accessible, production-ready components for building card-centric experiences.

MeetCard is a digital business-card and networking platform. The product metaphor is a deck of cards: people, companies, and contacts are cards you view, share, exchange, and organize. Deck exists to make building those surfaces fast, consistent, and accessible by default.

Deck is currently under active development. It is not yet published. The package will be available publicly as:

npm install @meetcard/deck

Installation

Once published, install the package and import the stylesheet once at your app root, then use components anywhere:

import '@meetcard/deck/styles.css'
import { Button, Card, PersonCard } from '@meetcard/deck'

Deck ships the token layer in that stylesheet. Add the deck-root class to your app shell to adopt Deck’s page background, text color, and font stack:

export function App() {
  return <div className="deck-root">{/* … */}</div>
}

Deck expects Inter. It deliberately does not bundle or fetch the font — load it however your app loads fonts. The stack degrades to system UI.

What’s in the box

Building the two surfaces

The public networking layer (meetcard.io) is unauthenticated and recipient-first: PersonCard/CompanyCard/EventCard for the profile, company, and event pages, with CardPile for browsing a stack of saved cards; QRCode for the scannable card; Banner for the “create your own card” invite; and Stepper for the four-step booking wizard (purpose → availability → details → booked), where each step is its own route.

The application layer (app.meetcard.io) is the installed PWA: AppBar + BottomNav form the shell — four destinations plus the elevated Exchange action, which opens a Sheet offering “Show my card” and “Scan a card”. SearchField and Tag drive the Rolodex, StatTile the dashboard headline metrics, and UsageMeter the Solo connections cap.

Usage

Deck favours small primitives that compose, rather than large components with many options:

<Card as="article" interactive>
  <CardHeader divided>
    <Heading level={3} size="sm">Ada Lovelace</Heading>
    <Badge tone="success" dot>Connected</Badge>
  </CardHeader>
  <CardBody>
    <Text size="sm" tone="muted">Head of Partnerships · MeetCard</Text>
  </CardBody>
  <CardFooter divided>
    <Button size="sm">Share card</Button>
  </CardFooter>
</Card>

For common MeetCard surfaces, the pattern components already compose those primitives for you:

<PersonCard
  name="Ada Lovelace"
  title="Head of Partnerships"
  company="MeetCard"
  companyHref="/companies/meetcard"
  location="London, UK"
/>

Dark mode

Every component reads semantic tokens, so dark mode needs no per-component work. It follows prefers-color-scheme automatically, and a host app can force a theme:

<html data-deck-theme="dark">

Theme source

Color comes from the Figma Deck Design System → Brand guidelines → MeetCard - Brand Colors frame (July 2026); type, spacing, radius, and elevation come from the Foundations page. See Design System/Foundations for the resolved values.