Surfaces

Each theme has twelve different .surface classes. These classes can be assigned to any group or card which will then inherit these theme styles. For accessibility each theme (color-scheme e.g. mishcon, cyber, academy) has a set of colour values dependent on the users color-scheme preference, e.g. prefers light (default), dark, dim - color-scheme is set by the operating system and /or the browser.

The surface class has a set of color variables, e.g. for text, subtitle, link, hover, rule, etc. Color variables are set to align with the user preference mode, e.g. dark, light

System Forced Light Forced Dark

Theme: Intensities

Some surfaces in themes have intensity options. These can be combined to produce up to 11 different hues.

.surface-accent

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-brand

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

Theme Surfaces

Below are the standard surfaces used in each of our themes (color-scheme). Use the theme switcher to preview.

.surface-brand

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-accent

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-black

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod labore et dolore magna aliqua.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-light

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-dark

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-brand-light

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-brand-dark

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-1

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-2

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-3

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-4

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

Global: Intensities

The surfaces have intensity options that can be combined to produce up to 11 hues of the surface colour

.surface-gray

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-warm-gray

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-helper-blue

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-helper-yellow

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-helper-green

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-helper-red

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-academy

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-cyber

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-future

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-ifg

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-lab

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-mayfair

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-mishcon

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-mtech

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-solutions

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-taylorvinters

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

.surface-xtech

.intensity-0

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-100

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-200

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-300

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-400

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-500

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-600

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-700

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-800

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-900

body inv. alt. link

Label Label Label Label

Primary Secondary

.intensity-1000

body inv. alt. link

Label Label Label Label

Primary Secondary

Global Surfaces

These surfaces are available in any theme and can be assigned to .group or .card

.surface-mishcon

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-academy

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-cyber

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-future

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-ifg

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-lab

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-mayfair

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-mtech

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-solutions

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-taylorvinters

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-xtech

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-gray

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-warm-gray

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-helper-blue

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-helper-yellow

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-helper-green

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.surface-helper-red

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

Border

Border classes are available to any .card or .group

.border-1

0.0625rem - 1px

Text Alt

Type Issue 01

Link Hover Active

.border-2

0.125rem - 2px

Text Alt

Type Issue 01

Link Hover Active

.border-3

0.25rem - 4px

Text Alt

Type Issue 01

Link Hover Active

.border-4

0.5rem - 8px

Text Alt

Type Issue 01

Link Hover Active

.border-5

0.75rem - 12px

Text Alt

Type Issue 01

Link Hover Active

.border-6

1rem - 16px

Text Alt

Type Issue 01

Link Hover Active

Shadow

Shadow classes are available to any .card or .group

.shadow-1

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.shadow-2

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.shadow-3

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.shadow-4

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.shadow-5

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

Inner Shadow

Inner Shadow classes are available to any .card or .group

.inner-shadow-1

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.inner-shadow-2

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.inner-shadow-3

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.inner-shadow-4

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary

.inner-shadow-5

Body text

Text alt: .text-alt
Text invert: .text-cc
Accent: .text-accent
Type: .text-type
Issue 01: .text-issue
Label accent: .label-accent

Ipsum dolor sit consectetur adipiscing elit, sed do labore et dolore magna aliqua.

Do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary Secondary