Understanding the scale

<Description> Learn which scale step is the most appropriate for each use case. </Description>

Use cases

There are 12 steps in each scale. Each step was designed for at least one specific use case.

This table is a simple overview of the most common use case for each step. However, there are many exceptions and caveats to factor in, which are covered in further detail below.

Steps 1–2: Backgrounds

Steps 1 and 2 are designed for app backgrounds and subtle component backgrounds. You can use them interchangeably, depending on the vibe you're going for.

Appropriate applications include:

Main app background
Striped table background
Code block background
Card background
Sidebar background
Canvas area background

<Note> You may want to use white for your app background in light mode, and Step `1` or `2` from a gray or coloured scale in dark mode. In this case, set up a [mutable alias](/colors/docs/overview/aliasing#mutable-aliases) for `AppBg` and map it to a different color for each color mode. </Note>

Steps 3–5: Component backgrounds

Steps 3, 4, and 5 are designed for UI component backgrounds.

Step 3 is for normal states.
Step 4 is for hover states.
Step 5 is for pressed or selected states.

{

{' '}

<Flex direction="column" maxWidth="max-content"> <MenuItemButton color="gray" data-state="active"> Menu item </MenuItemButton> <MenuItemButton color="gray">Second menu item</MenuItemButton> <MenuItemButton color="gray">Third menu item</MenuItemButton> </Flex> <Flex direction="column" maxWidth="max-content"> <MenuItemButton color="pink" data-state="active"> Menu item </MenuItemButton> <MenuItemButton color="pink"> Second menu item </MenuItemButton> <MenuItemButton color="pink"> Third menu item </MenuItemButton> </Flex> </Flex> }

If your component has a transparent background in its default state, you can use Step 3 for its hover state.

{

<Flex wrap="wrap" gap="5" my="5"> <IconButton variant="ghost" color="gray"> <PlusIcon /> </IconButton> <IconButton variant="ghost" color="blue"> <PlusIcon /> </IconButton> <IconButton variant="ghost" color="red"> <PlusIcon /> </IconButton> </Flex> } <Note> Steps `11` and `12`—which are designed for text—are guaranteed to Lc 60 and Lc 90 APCA contrast ratio on top of a step `2` background from the same scale. </Note>

Steps 6–8: Borders

Steps 6, 7, and 8 are designed for borders.

Step 6 is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.
Step 7 is designed for subtle borders on interactive components.
Step 8 is designed for stronger borders on interactive components and focus rings.

{

<Grid columns="7" gap="3" my="5"> <Button variant="surface" color="gold"> Gold </Button> <Button variant="surface" color="bronze"> Bronze </Button> <Button variant="surface" color="brown"> Brown </Button> <Button variant="surface" color="yellow"> Yellow </Button> <Button variant="surface" color="amber"> Amber </Button> <Button variant="surface" color="orange"> Orange </Button> <Button variant="surface" color="tomato"> Tomato </Button> <Button variant="surface" color="red"> Red </Button> <Button variant="surface" color="ruby"> Ruby </Button> <Button variant="surface" color="crimson"> Crimson </Button> <Button variant="surface" color="pink"> Pink </Button> <Button variant="surface" color="plum"> Plum </Button> <Button variant="surface" color="purple"> Purple </Button> <Button variant="surface" color="violet"> Violet </Button> <Button variant="surface" color="iris"> Iris </Button> <Button variant="surface" color="indigo"> Indigo </Button> <Button variant="surface" color="blue"> Blue </Button> <Button variant="surface" color="cyan"> Cyan </Button> <Button variant="surface" color="teal"> Teal </Button> <Button variant="surface" color="jade"> Jade </Button> <Button variant="surface" color="green"> Green </Button> <Button variant="surface" color="grass"> Grass </Button> <Button variant="surface" color="lime"> Lime </Button> <Button variant="surface" color="mint"> Mint </Button> <Button variant="surface" color="sky"> Sky </Button> </Grid>

}

Steps 9–10: Solid backgrounds

Steps 9 and 10 are designed for solid backgrounds.

Step 9 has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because 9 is the purest step, it has a wide range of applications:

Website/App backgrounds
Website section backgrounds
Header backgrounds
Component backgrounds
Graphics/Logos
Overlays
Coloured shadows
Accent borders

Step 10 is designed for component hover states, where step 9 is the component's normal state background.

<Note> Most step 9 colors are designed for white foreground text. `Sky`, `Mint`, `Lime`, `Yellow`, and `Amber` are designed for dark foreground text and steps `9` and `10`. </Note>

{

<Grid columns="7" gap="3" my="5"> <Button variant="solid" color="gold"> Gold </Button> <Button variant="solid" color="bronze"> Bronze </Button> <Button variant="solid" color="brown"> Brown </Button> <Button variant="solid" color="yellow"> Yellow </Button> <Button variant="solid" color="amber"> Amber </Button> <Button variant="solid" color="orange"> Orange </Button> <Button variant="solid" color="tomato"> Tomato </Button> <Button variant="solid" color="red"> Red </Button> <Button variant="solid" color="ruby"> Ruby </Button> <Button variant="solid" color="crimson"> Crimson </Button> <Button variant="solid" color="pink"> Pink </Button> <Button variant="solid" color="plum"> Plum </Button> <Button variant="solid" color="purple"> Purple </Button> <Button variant="solid" color="violet"> Violet </Button> <Button variant="solid" color="iris"> Iris </Button> <Button variant="solid" color="indigo"> Indigo </Button> <Button variant="solid" color="blue"> Blue </Button> <Button variant="solid" color="cyan"> Cyan </Button> <Button variant="solid" color="teal"> Teal </Button> <Button variant="solid" color="jade"> Jade </Button> <Button variant="solid" color="green"> Green </Button> <Button variant="solid" color="grass"> Grass </Button> <Button variant="solid" color="lime"> Lime </Button> <Button variant="solid" color="mint"> Mint </Button> <Button variant="solid" color="sky"> Sky </Button> </Grid>

}

Steps 11–12: Text

Steps 11 and 12 are designed for text.

Step 11 is designed for low-contrast text.
Step 12 is designed for high-contrast text.

{

<Flex gap="2" direction="column" my="5"> <Text size="3" style={{ color: "var(--pink-11)" }}> This text is Pink 11 </Text> <Text size="3" style={{ color: "var(--slate-11)" }}> This text is Slate 11 </Text> <Text size="3" style={{ color: "var(--gray-11)" }}> This text is Gray 11 </Text> <Text size="3" weight="bold" style={{ color: "var(--pink-12)" }}> This text is Pink 12 </Text> <Text size="3" weight="bold" style={{ color: "var(--slate-12)" }}> This text is Slate 12 </Text> <Text size="3" weight="bold" style={{ color: "var(--gray-12)" }}> This text is Gray 12 </Text> </Flex>

}