Meeting Card
A schedule card with a colored left accent, title, time and attendee avatars. Built from two Figma components in sequence: the Meeting Card (Tertiary, Primary, Secondary variants) and the Meetings List (stacked container). All values pulled directly from the LUSTER Figma variables.
Variant: Tertiary
Background: #FEE9E9
Left accent: #F54E4E
Title: #F32727
Padding: 24px · Left border: 4px
Component · Meeting Card (Variants)
Three semantic variants — each maps a palette family to the background, left accent, title, time and avatar-border color.
Component · Meetings List
A titled container that stacks meeting cards with a 12px gap — exactly as composed in Figma.
Design Tokens
Token names mirror the LUSTER Figma variable paths one-to-one. Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.
| Token Name | Figma Variable | Default Value |
|---|---|---|
| --meetingCardGap | meetingCard/gap | 12px |
| --meetingCardTitleMarginBottom | meetingCard/title/margin-bottom | 8px |
| --meetingCardListGap | meetingCard/list/gap | 12px |
| --meetingCardPaddingX | meetingCard/padding/x | 24px |
| --meetingCardPaddingY | meetingCard/padding/y | 24px |
| --meetingCardBorderRadius | meetingCard/border/radius | 0px |
| --meetingCardBorderWidthLeft | meeting card/border/width/left | 4px |
| --meetingCardBorderWidthRight | meeting card/border/width/right | 0px |
| --meetingCardPrimaryBgColor | meetingCard/primary/bg/color | #F2EDFF |
| --meetingCardPrimaryBorderColor | meetingCard/primary/border/color | #916DFF |
| --meetingCardPrimaryTitleFontColor | meetingCard/primary/title/font/color | #794DFF |
| --meetingCardPrimaryTimeFontColor | meetingCard/primary/time/font/color | #AB8FFF |
| --meetingCardPrimaryAvatarBorderColor | meetingCard/primary/avatar/border/color | #F2EDFF |
| --meetingCardSecondaryBgColor | meetingCard/secondary/bg/color | #E6FAED |
| --meetingCardSecondaryBorderColor | meetingCard/secondary/border/color | #2ED46B |
| --meetingCardSecondaryTitleFontColor | meetingCard/secondary/title/font/color | #00CA4B |
| --meetingCardSecondaryTimeFontColor | meetingCard/secondary/time/font/color | #5EDE8E |
| --meetingCardSecondaryAvatarBorderColor | meetingCard/secondary/avatar/border/color | #E6FAED |
| --meetingCardTertiaryBgColor | meetingCard/tertiary/bg/color | #FEE9E9 |
| --meetingCardTertiaryBorderColor | meetingCard/tertiary/border/color | #F54E4E |
| --meetingCardTertiaryTitleFontColor | meetingCard/tertiary/title/font/color | #F32727 |
| --meetingCardTertiaryTimeFontColor | meetingCard/tertiary/time/font/color | #F77777 |
| --meetingCardTertiaryAvatarBorderColor | meetingCard/tertiary/avatar/border/color | #FEE9E9 |
| --avatarBorderRadius | avatar/border/radius | 0px |
| --avatarBorderWidth | avatar/border/width | 2px |
| --avatarSizeSmHeight | avatar/size/sm/height | 24px |
| --avatarGroupGap | avatarGroup/gap/gap | -4px |
| --sectionBgColor | section/bg/color | #FFFFFF |
| --sectionBorderRadius | section/border/radius | 0px |
| --sectionPaddingY | section/padding/y | 24px |
| --sectionMarginBottom | section/margin-bottom | 24px |
| --sectionTitleFontColor | foreground/on surface (list title) | #24242C |
| --sectionShadowColor | section/shadow/color | #CECBDC |
| --sectionShadowOffsetX | section/shadow/offset-x | 0px |
| --sectionShadowOffsetY | section/shadow/offset-y | 0px |
| --sectionShadowBlur | section/shadow/blur | 0px |
| --meetingCardListContent | meeting card/list/content | Meetings |
| --titleFontSize | typography/title/font/size | 16px |
| --titleFontLineHeight | typography/title/font/lineHeight | 19px |
| --titleFontWeight | typography/title/font/weight | 700 |
| --bodyFontSize | typography/body/font/size | 16px |
| --bodyFontLineHeight | typography/body/font/lineHeight | 19px |
| --bodyFontWeight | typography/body/font/weight | 400 |
| --caption1FontSize | typography/caption-1/font/size | 12px |
| --caption1FontLineHeight | typography/caption-1/font/lineHeight | 14px |
| --caption1FontWeight | typography/caption-1/font/weight | 400 |
| --bodyFontFamily | body/font/family | Inter |
Usage Guidelines
✓ DO
Use the variant color to signal the meeting category or status.
✓ DO
Show attendees with the Avatar Group, collapsing overflow to +N.
✗ DON'T
Don't drop the left accent — it carries the semantic meaning.
✗ DON'T
Don't overload the card — keep it to title, time and attendees.
Implementation
Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.
import { AvatarGroup, Avatar } from '@luster/ui';
import './MeetingCard.css';
type Variant = 'primary' | 'secondary' | 'tertiary';
export const MeetingCard = ({ variant = 'primary', title, time, attendees }) => (
<article className={`meeting-card meeting-card--${variant}`}>
<h4 className="mc-title">{title}</h4>
<p className="mc-time">{time}</p>
<AvatarGroup>{attendees.map(a => <Avatar key={a.id} {...a} />)}</AvatarGroup>
</article>
);
export const MeetingsList = ({ title = 'Meetings', children }) => (
<section className="meetings-list">
<h3 className="meetings-list__title">{title}</h3>
{children}
</section>
);