Color System
Figure 1. Animation demonstrating state layer implementation.
Overview
The LiftKit color system is almost exactly the same as Material 3’s color system. You can read their documentation instead of this one, and you’ll mostly be fine. The difference isn’t in how the system works in theory. But rather, it’s a difference of implementation.
Material is geared primarily for app developers working with Android and Flutter, and it has limited official support for web. LiftKit packages the system specifically for web to make it a little easier for everyone to use.
It Starts with a Palette
Before you start building, you need a color palette. A color palette tells you what colors you’re allowed to use. Instead of designing one from scratch, LiftKit generates one for you.
Palettes have numerous benefits:
- It ensures your colors stay consistent as your app grows
- If you have multiple designers, it ensures they all use the same colors
- It makes your code easier to organize
- If you update a swatch from the palette, it’ll update everywhere that uses it.
A palette consists of swatches. Swatches are variables that can hold colors. When we’re building, we assign swatches, not raw colors.
Look at the example below.
I have three swatches: “Primary,” “Accent,” and “Surface.” You can see where these swatches are applied. If we’re talking about the background color on the “New” label, we’d say it has a background color of “Primary.” We would not say it has a background color of “blue.” It’s very important to get in the habit of talking about colors this way, for reasons that will become self-evident as we continue.
How the System Works
Figure 2 below demonstrates how the system generates a palette.
Recommended Usage
Customization
Resources that mention this topic
Give Us Feedback
:root {
--light__background_lkv: #fefbff;
--light__onsurface_lkv: #1b1b1f;
--light__primary_lkv: #4658ac;
--light__surfacecontainerlowest_lkv: #fff;
--light__onsurfacevariant_lkv: #45464f;
--dark__outline_lkv: #90909a;
--dark__error_lkv: #ffb4ab;
--dark__primary_lkv: #b9c3ff;
--light__onprimary_lkv: #fefbff;
--light__outlinevariant_lkv: #c6c5d0;
--light__shadow_lkv: #000;
--light__info_lkv: #1758c7;
--light__secondary_lkv: #5a5d72;
--light__outline_lkv: #767680;
--light__inverseprimary_lkv: #b9c3ff;
--light__surfacecontainerlow_lkv: #cbdadd;
--light__successcontainer_lkv: #92f8b4;
--light__onsuccesscontainer_lkv: #00210f;
--light__infocontainer_lkv: #dae2ff;
--light__oninfocontainer_lkv: #001946;
--light__warningcontainer_lkv: #ffdea7;
--light__onwarningcontainer_lkv: #271900;
--light__errorcontainer_lkv: #ffdad6;
--light__onerrorcontainer_lkv: #410002;
--light__onsecondarycontainer_lkv: #171b2c;
--light__primarycontainer_lkv: #dee1ff;
--light__onprimarycontainer_lkv: #001258;
--light__onsecondary_lkv: #fff;
--light__secondarycontainer_lkv: #dfe1f9;
--light__tertiary_lkv: #76546e;
--light__ontertiary_lkv: #fff;
--light__tertiarycontainer_lkv: #ffd7f2;
--light__ontertiarycontainer_lkv: #2d1228;
--light__error_lkv: #ba1a1a;
--light__onerror_lkv: #fff;
--light__onbackground_lkv: #1b1b1f;
--light__surface_lkv: #e8eced;
--light__surfacevariant_lkv: #e3e1ec;
--light__scrim_lkv: #000;
--light__inversesurface_lkv: #303034;
--light__inverseonsurface_lkv: #f3f0f4;
--light__success_lkv: #006d3d;
--light__onsuccess_lkv: #fff;
--light__warning_lkv: #7c5800;
--light__onwarning_lkv: #fff;
--light__oninfo_lkv: #fff;
--light__primaryfixed_lkv: #dee1ff;
--light__onprimaryfixed_lkv: #001258;
--light__primaryfixeddim_lkv: #b9c3ff;
--light__onprimaryfixedvariant_lkv: #2d3f93;
--light__secondaryfixed_lkv: #dfe1f9;
--light__onsecondaryfixed_lkv: #171b2c;
--light__secondaryfixeddim_lkv: #c3c5dd;
--light__onsecondaryfixedvariant_lkv: #434659;
--light__tertiaryfixed_lkv: #ffd7f2;
--light__ontertiaryfixed_lkv: #2d1228;
--light__tertiaryfixeddim_lkv: #e5bad8;
--light__ontertiaryfixedvariant_lkv: #5c3c55;
--light__surfacedim_lkv: #dcd9de;
--light__surfacebright_lkv: #fbf8fd;
--light__surfacecontainer_lkv: #f0edf1;
--light__surfacecontainerhigh_lkv: #eae7ec;
--light__surfacecontainerhighest_lkv: #e4e1e6;
--dark__onprimary_lkv: #11277c;
--dark__primarycontainer_lkv: #2d3f93;
--dark__onprimarycontainer_lkv: #dee1ff;
--dark__secondary_lkv: #c3c5dd;
--dark__onsecondary_lkv: #2c2f42;
--dark__secondarycontainer_lkv: #434659;
--dark__onsecondarycontainer_lkv: #dfe1f9;
--dark__tertiary_lkv: #e5bad8;
--dark__ontertiary_lkv: #44263e;
--dark__tertiarycontainer_lkv: #5c3c55;
--dark__ontertiarycontainer_lkv: #ffd7f2;
--dark__onerror_lkv: #690005;
--dark__errorcontainer_lkv: #93000a;
--dark__onerrorcontainer_lkv: #ffb4ab;
--dark__background_lkv: #1b1b1f;
--dark__onbackground_lkv: #e4e1e6;
--dark__surface_lkv: #131316;
--dark__onsurface_lkv: #e4e1e6;
--dark__onsurfacevariant_lkv: #c6c5d0;
--dark__surfacevariant_lkv: #45464f;
--dark__shadow_lkv: #000;
--dark__inversesurface_lkv: #e4e1e6;
--dark__scrim_lkv: #000;
--dark__inverseonsurface_lkv: #303034;
--dark__inverseprimary_lkv: #4658ac;
--dark__success_lkv: #76db9a;
--dark__onsuccess_lkv: #00391d;
--dark__successcontainer_lkv: #00522c;
--dark__onsuccesscontainer_lkv: #92f8b4;
--dark__warning_lkv: #f7bd48;
--dark__onwarning_lkv: #412d00;
--dark__warningcontainer_lkv: #5e4200;
--dark__onwarningcontainer_lkv: #ffdea7;
--dark__info_lkv: #b1c5ff;
--dark__oninfo_lkv: #002c71;
--dark__infocontainer_lkv: #00419e;
--dark__oninfocontainer_lkv: #dae2ff;
--dark__primaryfixed_lkv: #dee1ff;
--dark__onprimaryfixed_lkv: #001258;
--dark__primaryfixeddim_lkv: #b9c3ff;
--dark__onprimaryfixedvariant_lkv: #2d3f93;
--dark__secondaryfixed_lkv: #dfe1f9;
--dark__secondaryfixeddim_lkv: #c3c5dd;
--dark__onsecondaryfixed_lkv: #171b2c;
--dark__onsecondaryfixedvariant_lkv: #434659;
--dark__tertiaryfixed_lkv: #ffd7f2;
--dark__ontertiaryfixed_lkv: #2d1228;
--dark__tertiaryfixeddim_lkv: #e5bad8;
--dark__ontertiaryfixedvariant_lkv: #5c3c55;
--dark__surfacedim_lkv: #131316;
--dark__surfacebright_lkv: #39393c;
--dark__surfacecontainerlowest_lkv: #0e0e11;
--dark__surfacecontainer_lkv: #1f1f23;
--dark__surfacecontainerhigh_lkv: #2a2a2d;
--dark__surfacecontainerhighest_lkv: #353438;
--dark__surfacecontainerlow_lkv: #1b1b1f;
--dark__outlinevariant_lkv: #45464f;
}