Design tokens

The California Design System web design is built from consistent elements of style we call design tokens. Design tokens are set of css-variables that constitute elements like color, typography, and spacing units. Design tokens allow us to create predictable, consistent web design elements, layouts, and components.

Responsive tokens

Container width

Variables

--w-lg: 1176px;
--w-md: 960px;
--w-sm: 720px;
--w-xs: 540px;
--w-page-content: 876px;

Example

.official-header .container {
  max-width: var(--w-lg);
}

--w-xs

--w-sm

--w-md

--w-lg

Viewport width

Variables

--mobile-xs: 360px;
--mobile-xs-max: 359px;
--mobile-sm: 480px;
--mobile-sm-max: 479px;
--mobile: 768px;
--mobile-max: 767px;
--tablet: 992px;
--tablet-max: 991px;
--tablet-lg: 1024px;
--tablet-lg-max: 1023px;
--desktop: 1176px;
--desktop-max: 1175px;
--desktop-lg: 1440px;

Measure tokens

Spacing and size

Variables

--s0: 0px;
--s-sm: 0.25rem;
--s-1: 0.5rem;
--s-2: 1rem;
--s-3: 1.5rem;
--s-4: 2rem;
--s-5: 3rem;
--s-6: 4rem;
--s-7: 6rem;
--s-8: 12rem;

Example

.grid-container {
  gap: var(--s-3);
}

--s-1

--s-2

--s-3

--s-4

--s-5

--s-6

--s-7

--s-8

Fluid size

Variables

--s-fluid-1: clamp(0.5rem, 1vw, 1rem);
--s-fluid-2: clamp(1rem, 2vw, 1.5rem);
--s-fluid-3: clamp(1.5rem, 3vw, 2rem);
--s-fluid-4: clamp(2rem, 4vw, 3rem);
--s-fluid-5: clamp(4rem, 6vw, 6rem);
--s-fluid-6: clamp(6rem, 8vw, 8rem);
--s-fluid-7: clamp(8rem, 10vw, 10rem);
--s-fluid-8: clamp(10rem, 16vw, 12rem);

Color tokens

CA.gov theme colors

Theme colors (primary, accent 1, and accent 2) change depending the color scheme a website uses. The following color schemes are available in the California Design System:

CA.gov
Cannabis
Drought

Color scheme files are available in following directory: components/base-css/src/colorschemes/.

Primary colors

Variables

--primary-100: #e7eef9;
--primary-300: #a3bee7;
--primary-500: #5a8ad4;
--primary-700: #165ac2;
--primary-900: #003688;

Example

.btn-primary-outline {
  color: var(--primary-700);
}

--primary-100

--primary-300

--primary-500

--primary-700

--primary-900

Accent 1 colors

Variables

--accent1-100: #ffead6;
--accent1-300: #ffa656;
--accent1-500: #de6516;
--accent1-700: #9c4510;
--accent1-900: #642a0a;

Example

.bg-accent1-500 {
  background-color: var(--accent1-500);
}

--accent1-100

--accent1-300

--accent1-500

--accent1-700

--accent1-900

Accent 2 colors

Variables

--accent2-100: #ffecc4;
--accent2-300: #ecb32d;
--accent2-500: #ac8227;
--accent2-700: #775a20;
--accent2-900: #4a3918;

Example

a:focus {
  outline-color: var(--accent2-300);
}

--accent2-100

--accent2-300

--accent2-500

--accent2-700

--accent2-900

CA.gov main colors

CA.gov main colors are used in the CA.gov logo and other CA.gov branding elements.

Variables

--cagov-highlight: #fec02f;
--cagov-primary: #004abc;
--cagov-primary-dark: #003484;
--cagov-secondary: #ff8000;

Example

svg .gov {
  fill: var(--cagov-primary-dark);
}

--cagov-highlight

--cagov-primary

--cagov-primary-dark

--cagov-secondary

Grayscale colors

Variables

--white: #fff;
--gray-50: #fafafa;
--gray-100: #ededef;
--gray-200: #d4d4d7;
--gray-300: #bcbbc1;
--gray-400: #a4a3ab;
--gray-500: #898891;
--gray-600: #72717c;
--gray-700: #5e5e6a;
--gray-800: #4a4958;
--gray-900: #3b3a48;
--black: #000;

Example

.btn-primary-outline:hover {
  background-color: var(--gray-200);
}

--white

--gray-50

--gray-100

--gray-200

--gray-300

--gray-400

--gray-500

--gray-600

--gray-700

--gray-800

--gray-900

--black

System status colors

System status colors palette consist of four main colors spectrums, such as success, danger, warning, and info. System-level palette is consistent in all Design System color schemes.

Success

Variables

--success-100: #e5f1e7;
--success-300: #9ac7a4;
--success-500: #489b62;
--success-700: #0f6d38;
--success-900: #154425;

Example

.success {
  color: var(--success-700);
}

--success-100

--success-300

--success-500

--success-700

--success-900

Danger

Variables

--danger-100: #fce9e8;
--danger-300: #eeaba9;
--danger-500: #d5676a;
--danger-700: #b91b37;
--danger-900: #721923;

Example

.error {
  color: var(--danger-700);
}

--danger-100

--danger-300

--danger-500

--danger-700

--danger-900

Warning

Variables

--warning-100: #ffef97;
--warning-300: #dcba00;
--warning-500: #a38900;
--warning-700: #6f5e00;
--warning-900: #463b00;

Example

.alert {
  background-color: var(--warning-100);
}

--warning-100

--warning-300

--warning-500

--warning-700

--warning-900

Info

Variables

--info-100: #ededf6;
--info-300: #b9b9dc;
--info-500: #8585c2;
--info-700: #5555aa;
--info-900: #2b2b95;

Example

.info {
  background-color: var(--info-700);
}

--info-100

--info-300

--info-500

--info-700

--info-900

Typography tokens

--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-1: 1rem;
--font-size-2: 1.125rem;
--font-size-3: 1.25rem;
--font-size-4: 1.4375rem;
--font-size-5: 1.625rem;
--font-size-6: 1.8125rem;
--font-size-7: 2.0625rem;
--font-size-8: 2.3175rem;
--font-size-9: 2.625rem;
--font-size-10: 2.9375rem;
--font-size-11: 3.5rem;
--font-size-12: 5rem;

Example

body {
  font-size: var(--font-size-2);
}

var(--font-size-xs) Design for people var(--font-size-sm) Design for people var(--font-size-1) Design for people var(--font-size-2) Design for people var(--font-size-3) Design for people var(--font-size-4) Design for people var(--font-size-5) Design for people var(--font-size-6) Design for people var(--font-size-7) Design for people var(--font-size-8) Design for people var(--font-size-9) Design for people var(--font-size-10) Design for people var(--font-size-11) Design for people var(--font-size-12) Design for people

Font weight

Variables

--font-weight-1: 100;
--font-weight-2: 200;
--font-weight-3: 300;
--font-weight-4: 400;
--font-weight-5: 500;
--font-weight-6: 600;
--font-weight-7: 700;
--font-weight-8: 800;
--font-weight-9: 900;

Example

h1 {
  font-weight: var(--font-weight-7);
}

var(--font-weight-3) Do not design for designers. Design for people. var(--font-weight-4) Do not design for designers. Design for people. var(--font-weight-7) Do not design for designers. Design for people.

Line height

Variables

--font-lineheight-xs: 0.95;
--font-lineheight-sm: 1.1;
--font-lineheight-1: 1.25;
--font-lineheight-2: 1.375;
--font-lineheight-3: 1.5;
--font-lineheight-4: 1.625;
--font-lineheight-5: 1.75;
--font-lineheight-6: 2;

Example

h1 {
  line-height: var(--font-lineheight-1);
}

Line height can affect readability. This example uses text in Vietnamese because it has marks above and below letters. These marks could be hidden or hard to read if line height is too tight. This is important to consider for making your content accessible in other languages.