Search Steady’s file for the hex code #0F766E and you will find it on check buttons, the primary button, a focus ring, a link and a progress ring, typed in by hand each time. When the brand team asks for a slightly bluer teal, you face the same hunt as in Lesson 3.1, this time for a color. Worse, when dark mode arrives, some of those places need a lighter teal and some do not, and the hex code cannot tell you which.
\nStyles and variables both put values in one place. They solve slightly different problems.
\nA style is a named bundle of visual properties. At the time of writing, Figma has color styles, text styles, effect styles and layout guide styles. You already planned text styles in Lesson 1.3: Headline is a font family, a size, a weight, a line height and letter spacing, all applied in one click.
Styles shine when the value is a composite. A text style is several properties at once. An effect style can hold a stack of two shadows. A color style can hold a gradient or several layered fills. Change the style and every layer using it updates.
\nA variable holds one raw value. The core types are color, number, string and boolean (Figma has added further types for motion work since). You can bind variables to fills and strokes, corner radius, gap, padding, width and height, opacity, layer visibility, text content and many typography properties.
\nThree things make variables different from styles:
\nVariables live in collections, and slashes in names create groups: color/text/primary sits in the group color/text.
The pattern most design systems use, and the one Steady uses, has two tiers.
\nPrimitives are the raw palette, named by what they are: teal/700 = #0F766E, gray/500 = #6B7280, white = #FFFFFF. They have no opinion about where they are used.
Semantic variables are named by what they are for, and alias a primitive: color/action/primary → teal/700, color/text/secondary → gray/500, color/surface/default → white. Components bind only to semantic variables.
Why bother with the middle column? Because meaning and value change for different reasons. The brand team changes teal/700, and every action color follows. Dark mode changes what color/action/primary points at, and only action colors follow, not every teal in the file. Neither change requires touching a single component.
Steady’s numbers get the same treatment: a space group (space/1 = 4 through space/12 = 48, from Lesson 2.3) and a radius group (radius/sm = 8, radius/md = 12). Bind the habit row’s padding to space/3 and space/4, and its corner radius to radius/md.
Two settings keep people on the system. Scoping limits where a variable is offered: scope space variables to gap and padding, and they stop appearing in the corner radius picker. Hiding from publishing keeps primitives out of the library that other files see, so designers using the kit only find semantic tokens. Both live in each variable’s edit panel at the time of writing.
Variables did not replace styles. The usual split is: variables for single values (colors, spacing, radius, booleans) because they alias and switch modes; text styles for typography, with their sizes bound to number variables if you need them to change per mode; effect styles for shadows; color styles only for gradients or layered fills. Bind a color style’s fill to a variable and you get the composite’s convenience with the variable’s modes.
\n\nWith every component pointing at meanings, dark mode becomes a question of what each meaning points at, which is exactly what modes answer next.
\n","toc":[{"id":"sec-1","text":"Styles: reusable composites","level":2},{"id":"sec-2","text":"Variables: single values with superpowers","level":2},{"id":"sec-3","text":"Two tiers: primitives and semantics","level":2},{"id":"sec-4","text":"Keeping the picker clean","level":2},{"id":"sec-5","text":"Use both","level":2}],"takeaways":["A style bundles several properties into one reusable composite, such as a text style’s font, size, weight and line height.","A variable holds one raw value (color, number, string or boolean), can alias another variable, and can change per mode.","Use two tiers of variables, primitives for the raw palette and semantic tokens for meanings, and bind components only to the semantic tier.","Text styles, effect styles and multi-fill or gradient color styles still have no single-variable equivalent, so most teams use both systems.","Scoping and hiding primitives from publishing keep the variable picker short and stop people from reaching for raw values."],"further":[{"title":"Overview of variables, collections, and modes","url":"https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes"},{"title":"Guide to styles in Figma","url":"https://help.figma.com/hc/en-us/articles/360039238753-Guide-to-styles-in-Figma"},{"title":"Create and manage variables and collections","url":"https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables-and-collections"}],"quiz":[{"q":"The Done state of the habit row uses the check color teal/700 directly from the primitives collection. Next sprint you add dark mode. What goes wrong?
color/action/primary instead lets dark mode point that meaning at a lighter teal."},{"text":"The habit row loses its variants.","why":"Variable bindings do not affect variants or other component properties."}],"answer":2},{"q":"Which of these belongs in a style rather than a single variable?
","options":[{"text":"The Headline text treatment, 17 px semibold with a 24 px line height.","why":"Correct. It is a composite of several properties. A text style bundles them, and each part can still be bound to a variable."},{"text":"The 16 px card padding.","why":"Padding is a single number, which is exactly what a number variable is for."},{"text":"The primary action color.","why":"A single color that should change per mode is a classic color variable."},{"text":"Whether the onboarding hint is visible.","why":"A true or false value fits a boolean variable."}],"answer":0},{"q":"What is the main benefit of aliasing color/text/secondary to gray/500 instead of typing #6B7280 into it?
A designer types 15 into a gap field even though a space variable picker is available. What setup change best discourages this?
16 hide meaning and do not stop anyone typing 15."},{"text":"Convert all spacing into text styles.","why":"Text styles hold typography, not layout spacing."}],"answer":1}],"exercise":{"kind":"spot-bug","language":"json","code":"{\n \"primitives\": {\n \"teal/700\": \"#0F766E\",\n \"gray/900\": \"#1A1A1A\",\n \"gray/500\": \"#6B7280\",\n \"gray/400\": \"#9CA3AF\",\n \"gray/200\": \"#E5E7EB\",\n \"white\": \"#FFFFFF\"\n },\n \"semantic\": {\n \"color/text/primary\": \"{gray/900}\",\n \"color/text/secondary\": \"{gray/400}\",\n \"color/surface/default\": \"{white}\",\n \"color/border/default\": \"{gray/200}\",\n \"color/action/primary\": \"#0F766E\",\n \"color/teal-checkbox\": \"{teal/700}\",\n \"color/on-action\": \"{white}\"\n }\n}","bugLines":[12,15,16],"title":"Review Steady's color variables","prompt":"Here is an export of Steady’s light-mode color variables. {name} means the variable aliases another variable. The kit’s rules: semantic variables alias primitives (never raw values), are named by role (never by appearance), and every text color passes 4.5:1 on white. Select every line that breaks a rule.
Line 12: color/text/secondary aliases gray/400 (#9CA3AF), which is 2.54:1 on white and fails for text. Point it at gray/500 (4.83:1). Line 15: color/action/primary holds a raw hex instead of aliasing {teal/700}, so a palette change will not reach it and it breaks the two-tier pattern. Line 16: color/teal-checkbox is named by appearance and by one component. Rename it to a role such as color/action/primary (it is the same meaning, so you can delete it and use that) or color/control/checked if checked controls need their own token.