Skip to main content

Utilities

Colors​

Theme​

See the Colors page for color swatches.

TokenValue
$primary$prism-gold
$secondary$prism-primary-blue
$primary-dark$prism-gold-dark
$secondary-light$prism-cerulean-light
$secondary-dark$prism-navy
$danger$prism-scarlet
$danger-light$prism-scarlet-light
$danger-dark$prism-scarlet-dark
$smoke$prism-smoke
$cerulean$prism-cerulean
$gold$prism-gold
$primary-blue$prism-primary-blue

Typography​

$font-primary: 'Roboto', sans-serif;
$font-condensed: 'Roboto Condensed', sans-serif;
$font-mono: 'Roboto Mono', monospace;
$font-size-base: 1.6rem;
$font-size-tiny: 1.2rem;
$font-size-sm: 1.4rem;
$font-size-med: 1.6rem;
$font-size-large: 2.6rem;
$font-weight-regular: 400;
$font-weight-light: 300;
$font-weight-medium: 500;
$font-weight-bold: 700;
$line-height: 1.5;
$font-size-h1: 2.6rem;
$font-size-h2: 2.2rem;
$font-size-h3: 2rem;
$font-size-h4: 1.8rem;
$font-size-h5: 1.4rem;
$font-size-h6: 1.2rem;

Spacing​

$spacing: 1.6rem;
$spacing-small: round(0.5 _ $spacing);
$spacing-large: round(2 _ \$spacing);

$spacer: 0.8rem;
$spacers: (
1: (
$spacer * 0.5,),
  2: $spacer,
3: (
$spacer * 1.5,
  ),
  4: (
    $spacer _ 2,
),
5: (
\$spacer _ 3,
),
6: (
\$spacer \* 5,
),
);

$grid-gutter-width: 32px;

Borders​

$border-thickness: 1px;
$border-width: 1px;
$border-radius: 4px;

Grid​

$bp-xs: 0px;
$bp-sm: 480px;
$bp-med: 680px;
$bp-lg: 960px;
$bp-xl: 1168px;
$bp-xxl: 1360px;
// for mapping bootstrap breakpoints
$grid-breakpoints: (
  xs: $bp-xs,
  sm: $bp-sm,
  md: $bp-med,
  lg: $bp-lg,
  xl: $bp-xl,
  xxl: $bp-xxl,
);

Usage​

Since Prism is built on top of the Bootstrap framework, the design system is able to take advantage of Bootstrap's many utilities and helper classes. The utilities described on this page are by no means an exhaustive list. See
Bootstrap's docs
for the full description of the (utility classes and helpers.

Color​

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

.bg-info
.bg-primary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

Flex​

'gold': $gold,
'cerelean': $prism-cerelean,
'smoke': $prism-smoke,
'navy': $prism-navy,
'slate': $prism-slate,
'info': $prism-cerelean,
'cyan': $prism-cerelean,
'primary': $primary,
'primary-dark': $primary-dark,
'primary-blue': $primary-blue,
'secondary': $primary-blue,
'secondary-light': $prism-cerelean-light,
'secondary-dark': $prism-navy,
'danger': $prism-scarlet,
'danger-light': $prism-scarlet-light,
'danger-dark': $prism-scarlet-dark,
'dark': $prism-charcoal,
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
p-1 m-1
p-2 m-2
p-3 m-3
p-4 m-4
p-5 m-5
p-4 m-4
p-3 m-3
p-2 m-2
p-1 m-1