Surfaces

Basic concepts

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

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

Inline link

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.

.surface-accent

Body text

Inline link

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.

.surface

Body text

Inline link

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.

.surface-black

Body text

Inline link

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.

.surface-light

Body text

Inline link

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.

.surface-dark

Body text

Inline link

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.

.surface-brand-light

Body text

Inline link

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.

.surface-brand-dark

Body text

Inline link

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.

.surface-1

Body text

Inline link

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.

.surface-2

Body text

Inline link

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.

.surface-3

Body text

Inline link

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.

.surface-4

Body text

Inline link

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.

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

Inline link

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.

.surface-academy

Body text

Inline link

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.

.surface-cyber

Body text

Inline link

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.

.surface-future

Body text

Inline link

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.

.surface-ifg

Body text

Inline link

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.

.surface-lab

Body text

Inline link

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.

.surface-mayfair

Body text

Inline link

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.

.surface-mtech

Body text

Inline link

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.

.surface-solutions

Body text

Inline link

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.

.surface-taylorvinters

Body text

Inline link

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.

.surface-xtech

Body text

Inline link

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.

.surface-gray

Body text

Inline link

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.

.surface-warm-gray

Body text

Inline link

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.

.surface-helper-blue

Body text

Inline link

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.

.surface-helper-yellow

Body text

Inline link

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.

.surface-helper-green

Body text

Inline link

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.

.surface-helper-red

Body text

Inline link

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.

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

Inline link

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.

.shadow-2

Body text

Inline link

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.

.shadow-3

Body text

Inline link

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.

.shadow-4

Body text

Inline link

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.

.shadow-5

Body text

Inline link

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.

Inner Shadow

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

.inner-shadow-1

Body text

Inline link

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.

.inner-shadow-2

Body text

Inline link

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.

.inner-shadow-3

Body text

Inline link

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.

.inner-shadow-4

Body text

Inline link

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.

.inner-shadow-5

Body text

Inline link

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.