n8r6yg1cqwyfwwsscjwap5zsvo

This article discusses defining color usage through semantic sets when creating a design system. It explains the difference between primitive colors, individual colors from a brand palette, and semantic color names, which define how a primitive color will be used. Primitive colors are attached to semantic names.

It recommends dividing all color styles into foregrounds, backgrounds, and borders. It suggests top-level semantic color sets like these categories and more specific styles for interactive components, inputs, system components, and accents.





Get Fountn

Pro friends get unlimited Figma conversions, bookmarks and collections.

Free Forever

$0

1 Figma conversion/day

5 collections

15 bookmarks

Limited access to new features

Current Plan

Fountn Pro

$6

Unlimited Figma conversions

Unlimited collections

Unlimited bookmarks

Full access to new features

Upgrade to Pro

You've reached your free limit. Upgrade for unlimited access.