Schema uses Figma's native variables and modes to create an architecture mapped to ACSS variables, following the same naming conventions and semantics.
The Variable Manager is made of 12 collections that represent ACSS variable groupings.
Some collections have extra modes that switch variable values based on context - desktop/mobile or light/dark.
Here's what each collection does.
Modes: Light, Dark
Raw color values for your brand - Primary, Secondary, Tertiary, Neutral, Base, Black, and White. Each group follows a shade scale (ultra light through ultra dark, plus hover). Light and Dark modes share the same variable names with inverted values, which is what makes the automatic light/dark switch possible.
Modes: Default
The semantic layer for color. Components and sections reference these assignment variables for backgrounds and text colors instead of raw palette values. Most values are aliased to Palette, so a single palette change cascades everywhere.
Modes: Default
Font families and font weights for both text and headings. These live in their own mode-less collection rather than in Typography because Typography has Desktop and Mobile modes. If these values lived there, they'd need to be set identically in both modes since font family and font weight don't change between breakpoints. Define once here.
Modes: Desktop, Mobile
Scale-based text sizing. Heading and body text sizes derive from a base size and a scale multiplier, with different values per breakpoint. See Working with Scales for how to generate and update these values.