Components
The pieces the system is made of, in the order they compose: atoms, then molecules built from them, then organisms built from those.
Atoms 17
- AvatarA person or company image with a resilient initials fallback.
- BadgeA compact status or category label.
- ButtonThe primary action control.
- CheckboxA single checkbox with its label.
- DividerA one-pixel rule on the Hairline token.
- HeadingSection titles, card headers, and hero statements.
- IconButtonA square (or round) button containing only an icon.
- LinkA navigational anchor.
- QRCodeA QR code — the matrix, plated, with the mark in the middle.
- RadioA set of mutually exclusive options.
- SpinnerAn indeterminate loading indicator.
- StackThe workhorse layout primitive: a flex container with token-bound spacing.
- StepperProgress through a multi-step flow.
- SwitchAn immediate on/off toggle.
- TagA user-authored label on a connection, and the filter control for it.
- TextBody copy at Deck's Body type scale.
- UsageMeterConsumption against a plan cap.
Molecules 33
- AttendeeListWho's coming to an event — a compact identity row per attendee, distinct
from
PersonCard: this is a scannable list entry, not the full business card. - AvatarGroupA handful of people as overlapping faces — who was there, in the space a sentence naming two of them would take.
- BannerAn inline message attached to the surface it concerns.
- BookingSummaryRecap of what a person has chosen so far in a booking flow.
- BreakdownListA ranked breakdown: one row per value of a dimension, each with a bar showing how it compares.
- CardThe surface every MeetCard experience is built on.
- CardIndexThe index to a
CardPile— everyone in it, and a way to bring any one of them to the top. - ChoiceGroupA single choice from a small set, laid out as pills or tiles.
- CodeSnippetA block of code to copy and paste — an embed tag, a webhook payload, a CLI line.
- ColorFieldA colour, picked or typed.
- CopyFieldA read-only value with a one-click copy — a shareable link, an API key, an invite code.
- CoverCardA card-shaped box with a photograph behind it.
- DayStripHorizontal day picker for a booking flow's availability step.
- EmptyStateThe zero-data state for a list or surface.
- EventCalendarA month calendar surfacing which days carry an event, for an events index.
- EventMetaListA row of read-only facts about an event — date, time, location, attendee count — each as its own small card.
- EventRowOne event in a list: when it is, what it is, where, and what you are to it.
- EventScheduleThe running order of a day — what happens, and when.
- EventTimelineThe events a set of cards came from, laid out as one line through time.
- FunnelStages of a conversion, each measured twice: against the step before it, and against the top of the funnel.
- ImageUploadAn image field: what it is, what it must be, what is there now, and how to change it.
- InputA single-line text field.
- IntegrationRowOne external service and where you stand with it.
- MemberRowOne person on the team: who they are, where their invitation stands, what they can do, and what you can do about it.
- ReorderListA short list whose order is the point — the buttons on a card, the steps of a flow — reorderable by dragging or by keyboard.
- RsvpControlTri-state RSVP for an event, with the running tally kept alongside it.
- SearchFieldThe search input for Rolodex and other lists.
- SelectA dropdown built on the native
<select>. - SettingRowOne preference: what it is called, what it does, and the control that changes it.
- StatTileA single headline metric.
- TextareaA multi-line text field, for notes and longer free text.
- TimeSlotPickerTime-of-day picker for a booking flow's availability step.
- TrendChartOne measure over time, as columns.
Organisms 19
- AccountSheetThe account drawer, opened from the avatar in the app bar.
- AppBarThe persistent application header.
- BookingCelebrationThe moment a meeting is booked.
- BottomNavThe app's primary navigation bar.
- CardPileA pile of
PersonCards you flip through by swiping — the physical-deck metaphor made literal, for browsing a person's saved or captured cards. - CompanyCardA company as a card — the company-profile counterpart to
PersonCard, and the same physical object: a fixed 1.75:1 box lying down, 1:1.75 stood up, portrait on a phone and landscape fromsmup. - CompanyProfileCardA company's own card — what you see when you turn a company-branded person's card over, or open the company from it.
- ContactCardA saved contact, with their reachable details and follow-up state.
- EventCardAn event as a card — for the public event page, a company's events listing, and the app's Events destination.
- EventHeaderCardThe top of an event: its picture, its name, and the two facts anyone actually needs — when, and where.
- FeaturedEventsHeaderCardThe event at the top of the calendar — the one happening next, as a card.
- PersonCardThe professional business card — the artifact you hand over, and the
canonical child of
CardPile. - PlanCardOne plan in a row of them: what it costs, what it includes, and the one button that changes anything.
- PrivateNoteThe back of a business card — what you scribble on it after meeting someone.
- SettingsNavSwitching between the sections of a settings page.
- ShareCardThe card you hold up to be scanned.
- ShareSheetThe share dialog, wherever something can be shared.
- SheetA modal surface that slides up from the bottom.
- SideNavThe desktop navigation rail.