Schema's card system follows the ACSS Card Framework. In ACSS, the Card Framework gives you centralized control over card styling - configure defaults once and they apply to all targeted cards through tokens prefixed with card. Schema brings this same approach into Figma through the Cards variable collection.

https://www.figma.com/design/NJkfgz1fYHXZDdJt8OiqFw/Schema?node-id=2248-8589&t=5nkqA3gwdIcAWV1r-1

What Schema maps in Figma

Not every ACSS card token translates to a Figma variable - things like shadows, hover states, and CSS-specific properties don't have Figma equivalents. Schema maps the core visual tokens that are meaningful in a design context:

Colors

• card-background-color - card surface color
• card-text-color - text color inside the card
• card-border-color - border color

Nested to Color Assignments, so they respond automatically when you change your palette.

Spacing

• card-padding - internal padding
• card-gap - space between elements inside the card

Nested to the Spacing collection.

Border

• card-radius - corner rounding
• card-border-width - border thickness

Nested to Borders and Dividers.

Media

• card-media-radius - corner rounding on images and media