Zayo Group design system

zayo.com

Read from Zayo Group's public website by Clinical Terminal. Not reviewed by Zayo Group. Copy it and paste it into Claude as inspiration.

Corrections or removal: agent@clinicalterminal.com

Palette

Ground
#FFFFFF
--white-trans-10
Ink
#374248
Accent on the ground
#C85200
Primary
#EB720C
--action-trans-10
On primary
#000000
--neutral-trans-10
Secondary accent
#C74F05
--action-dark-trans-10
Dark
#374248
--base-dark-trans-10
Site background
#FFFFFF
--white-trans-10

Color ramps

Action Trans

#EB720C

Action Light Trans

#FBD5B6

Action Dark Trans

#C74F05

Action Ultra Dark Trans

#863603

Primary Trans

#00395C

Primary Light Trans

#B3E2FF

Primary Dark Trans

#00263D

Primary Ultra Dark Trans

#00060A

Secondary Trans

#018998

Secondary Light Trans

#E5F6F6

Secondary Dark Trans

#01727F

Secondary Ultra Dark Trans

#00454C

Other named colors

--action-hex #EB720C
--primary-hex #00395C
--secondary-hex #018998
--accent-hex #FABC2A
--base-hex #2F383D
--shade-hex #505050
--neutral-hex #000000
--danger-hex #DC3545
--warning-hex #FFC10A
--info-hex #18A2B8
--success-hex #29A745
--action #EB720C
--action-hover #F48226
--action-ultra-light #FFFCFA
--action-light #FBD5B6
--action-semi-light #F69E55
--action-semi-dark #EB6A00
--action-dark #C74F05
--action-ultra-dark #863603
--action-comp #0C85E9
--action-medium #F2740D
--primary #00395C
--primary-hover #00416A
--primary-ultra-light #F0F9FF
--primary-light #B3E2FF
--primary-semi-light #4DBBFF
--primary-semi-dark #004F80
--primary-dark #00263D
--primary-ultra-dark #00060A
--primary-comp #5C2300
--primary-medium #006EB3
--secondary #018998
--secondary-hover #019EAF
--secondary-ultra-light #FBFEFE
--secondary-light #E5F6F6
--secondary-semi-light #A1DDDD
--secondary-semi-dark #01A0B2
--secondary-dark #01727F
--secondary-ultra-dark #00454C
--secondary-comp #981001
--secondary-medium #38B2B2
--accent #FABC2A
--accent-hover #FBC954
--accent-ultra-light #FEF7E6
--accent-light #FDE7B4
--accent-semi-light #FBC851
--accent-semi-dark #AE7B04
--accent-dark #7C5803

Type

Headings

Open Sans

Zayo Group at a glance

Body

Open Sans

Clear, readable paragraphs for clinicians, buyers and patients alike.

2.94975rem · 47.196pxZayo Group
2.622rem · 41.952pxZayo Group
2.32875rem · 37.26pxZayo Group
2.07rem · 33.12pxZayo Group
30pxZayo Group
1.633rem · 26.128pxZayo Group
1.449rem · 23.184pxZayo Group
14pxZayo Group

Shape & depth

Cards and panels: 2px corners · buttons and chips: 0px.

Corner radii

50%
used in 5 rules
2px
used in 2 rules
8px
used in 2 rules
4px
used in 2 rules
20px
used in 1 rule
100%
used in 1 rule
9999px
used in 1 rule

Shadows

none !important
used in 3 rules
inset 0px 0px 0px 2px transparent
used in 2 rules
none!important
used in 2 rules
0 8px 20px rgba(0, 0, 0, 0.25)
used in 1 rule
0 16px 40px -10px rgba(0, 0, 0, 0.35)
used in 1 rule

Gradients

linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)
used in 1 rule
linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)
used in 1 rule
linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)
used in 1 rule
linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%)
used in 1 rule
linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)
used in 1 rule
linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)
used in 1 rule

Breakpoints: 500px · 501px · 600px · 640px · 641px · 767px · 768px · 870px · 871px · 990px · 991px · 1024px

Voice

Tone: professional. Energy: medium. Written for enterprises.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "Zayo Group"
domain: "zayo.com"
colors:
  primary: "#EB720C"
  onPrimary: "#000000"
  dark: "#374248"
  accent: "#C74F05"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#374248"
  accent: "#C85200"
fonts:
  heading: "Open Sans"
  body: "Open Sans"
radius:
  card: "2px"
  button: "0px"
---

# Design System — Zayo Group

> Read from Zayo Group's public website (zayo.com) by Clinical Terminal. Not reviewed by Zayo Group.
> Use it as inspiration: borrow the ideas, not Zayo Group's name, logo or identity.

## Ground
- **Light ground** (#FFFFFF), from Zayo Group's site background #FFFFFF. Pages and panels sit on it.
- Main text: #374248 (10.32:1 on the ground).
- Secondary text is #374248 at 88% / 76% / 60%; hairlines and plate borders #374248 at 16%.

## Color
- **Accent on the ground: #C85200** (4.5:1), adjusted from Zayo Group's primary #EB720C so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #EB720C** for filled shapes (buttons, chips, bars), with #000000 text on it (6.94:1).
- Secondary accent #C74F05: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Open Sans**. Body: **Open Sans**. Both on Google Fonts.

## Shape
- Cards and panels: 2px corners. Buttons and chips: 0px.

## Voice
- Tone: professional. Energy: medium. Written for enterprises.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Action Trans** (`--action-trans-N`): 10 `#EB720C` · 20 `#EB720C` · 30 `#EB720C` · 40 `#EB720C` · 50 `#EB720C` · 60 `#EB720C` · 70 `#EB720C` · 80 `#EB720C` · 90 `#EB720C`
- **Action Light Trans** (`--action-light-trans-N`): 10 `#FBD5B6` · 20 `#FBD5B6` · 30 `#FBD5B6` · 40 `#FBD5B6` · 50 `#FBD5B6` · 60 `#FBD5B6` · 70 `#FBD5B6` · 80 `#FBD5B6` · 90 `#FBD5B6`
- **Action Dark Trans** (`--action-dark-trans-N`): 10 `#C74F05` · 20 `#C74F05` · 30 `#C74F05` · 40 `#C74F05` · 50 `#C74F05` · 60 `#C74F05` · 70 `#C74F05` · 80 `#C74F05` · 90 `#C74F05`
- **Action Ultra Dark Trans** (`--action-ultra-dark-trans-N`): 10 `#863603` · 20 `#863603` · 30 `#863603` · 40 `#863603` · 50 `#863603` · 60 `#863603` · 70 `#863603` · 80 `#863603` · 90 `#863603`
- **Primary Trans** (`--primary-trans-N`): 10 `#00395C` · 20 `#00395C` · 30 `#00395C` · 40 `#00395C` · 50 `#00395C` · 60 `#00395C` · 70 `#00395C` · 80 `#00395C` · 90 `#00395C`
- **Primary Light Trans** (`--primary-light-trans-N`): 10 `#B3E2FF` · 20 `#B3E2FF` · 30 `#B3E2FF` · 40 `#B3E2FF` · 50 `#B3E2FF` · 60 `#B3E2FF` · 70 `#B3E2FF` · 80 `#B3E2FF` · 90 `#B3E2FF`
- **Primary Dark Trans** (`--primary-dark-trans-N`): 10 `#00263D` · 20 `#00263D` · 30 `#00263D` · 40 `#00263D` · 50 `#00263D` · 60 `#00263D` · 70 `#00263D` · 80 `#00263D` · 90 `#00263D`
- **Primary Ultra Dark Trans** (`--primary-ultra-dark-trans-N`): 10 `#00060A` · 20 `#00060A` · 30 `#00060A` · 40 `#00060A` · 50 `#00060A` · 60 `#00060A` · 70 `#00060A` · 80 `#00060A` · 90 `#00060A`
- **Secondary Trans** (`--secondary-trans-N`): 10 `#018998` · 20 `#018998` · 30 `#018998` · 40 `#018998` · 50 `#018998` · 60 `#018998` · 70 `#018998` · 80 `#018998` · 90 `#018998`
- **Secondary Light Trans** (`--secondary-light-trans-N`): 10 `#E5F6F6` · 20 `#E5F6F6` · 30 `#E5F6F6` · 40 `#E5F6F6` · 50 `#E5F6F6` · 60 `#E5F6F6` · 70 `#E5F6F6` · 80 `#E5F6F6` · 90 `#E5F6F6`
- **Secondary Dark Trans** (`--secondary-dark-trans-N`): 10 `#01727F` · 20 `#01727F` · 30 `#01727F` · 40 `#01727F` · 50 `#01727F` · 60 `#01727F` · 70 `#01727F` · 80 `#01727F` · 90 `#01727F`
- **Secondary Ultra Dark Trans** (`--secondary-ultra-dark-trans-N`): 10 `#00454C` · 20 `#00454C` · 30 `#00454C` · 40 `#00454C` · 50 `#00454C` · 60 `#00454C` · 70 `#00454C` · 80 `#00454C` · 90 `#00454C`
- **Accent Trans** (`--accent-trans-N`): 10 `#FABC2A` · 20 `#FABC2A` · 30 `#FABC2A` · 40 `#FABC2A` · 50 `#FABC2A` · 60 `#FABC2A` · 70 `#FABC2A` · 80 `#FABC2A` · 90 `#FABC2A`
- **Accent Light Trans** (`--accent-light-trans-N`): 10 `#FDE7B4` · 20 `#FDE7B4` · 30 `#FDE7B4` · 40 `#FDE7B4` · 50 `#FDE7B4` · 60 `#FDE7B4` · 70 `#FDE7B4` · 80 `#FDE7B4` · 90 `#FDE7B4`
- **Accent Dark Trans** (`--accent-dark-trans-N`): 10 `#7C5803` · 20 `#7C5803` · 30 `#7C5803` · 40 `#7C5803` · 50 `#7C5803` · 60 `#7C5803` · 70 `#7C5803` · 80 `#7C5803` · 90 `#7C5803`
- **Accent Ultra Dark Trans** (`--accent-ultra-dark-trans-N`): 10 `#322301` · 20 `#322301` · 30 `#322301` · 40 `#322301` · 50 `#322301` · 60 `#322301` · 70 `#322301` · 80 `#322301` · 90 `#322301`
- **Base Trans** (`--base-trans-N`): 10 `#2F383D` · 20 `#2F383D` · 30 `#2F383D` · 40 `#2F383D` · 50 `#2F383D` · 60 `#2F383D` · 70 `#2F383D` · 80 `#2F383D` · 90 `#2F383D`
- **Base Light Trans** (`--base-light-trans-N`): 10 `#D4DADE` · 20 `#D4DADE` · 30 `#D4DADE` · 40 `#D4DADE` · 50 `#D4DADE` · 60 `#D4DADE` · 70 `#D4DADE` · 80 `#D4DADE` · 90 `#D4DADE`
- **Base Dark Trans** (`--base-dark-trans-N`): 10 `#374248` · 20 `#374248` · 30 `#374248` · 40 `#374248` · 50 `#374248` · 60 `#374248` · 70 `#374248` · 80 `#374248` · 90 `#374248`
- **Base Ultra Dark Trans** (`--base-ultra-dark-trans-N`): 10 `#161A1D` · 20 `#161A1D` · 30 `#161A1D` · 40 `#161A1D` · 50 `#161A1D` · 60 `#161A1D` · 70 `#161A1D` · 80 `#161A1D` · 90 `#161A1D`
- **Shade Trans** (`--shade-trans-N`): 10 `#505050` · 20 `#505050` · 30 `#505050` · 40 `#505050` · 50 `#505050` · 60 `#505050` · 70 `#505050` · 80 `#505050` · 90 `#505050`
- **Shade Light Trans** (`--shade-light-trans-N`): 10 `#DEDEDE` · 20 `#DEDEDE` · 30 `#DEDEDE` · 40 `#DEDEDE` · 50 `#DEDEDE` · 60 `#DEDEDE` · 70 `#DEDEDE` · 80 `#DEDEDE` · 90 `#DEDEDE`
- **Shade Dark Trans** (`--shade-dark-trans-N`): 10 `#404040` · 20 `#404040` · 30 `#404040` · 40 `#404040` · 50 `#404040` · 60 `#404040` · 70 `#404040` · 80 `#404040` · 90 `#404040`
- **Shade Ultra Dark Trans** (`--shade-ultra-dark-trans-N`): 10 `#1A1A1A` · 20 `#1A1A1A` · 30 `#1A1A1A` · 40 `#1A1A1A` · 50 `#1A1A1A` · 60 `#1A1A1A` · 70 `#1A1A1A` · 80 `#1A1A1A` · 90 `#1A1A1A`
- **Neutral Trans** (`--neutral-trans-N`): 10 `#000000` · 20 `#000000` · 30 `#000000` · 40 `#000000` · 50 `#000000` · 60 `#000000` · 70 `#000000` · 80 `#000000` · 90 `#000000`
- **Neutral Light Trans** (`--neutral-light-trans-N`): 10 `#D9D9D9` · 20 `#D9D9D9` · 30 `#D9D9D9` · 40 `#D9D9D9` · 50 `#D9D9D9` · 60 `#D9D9D9` · 70 `#D9D9D9` · 80 `#D9D9D9` · 90 `#D9D9D9`
- **Neutral Dark Trans** (`--neutral-dark-trans-N`): 10 `#404040` · 20 `#404040` · 30 `#404040` · 40 `#404040` · 50 `#404040` · 60 `#404040` · 70 `#404040` · 80 `#404040` · 90 `#404040`
- **Neutral Ultra Dark Trans** (`--neutral-ultra-dark-trans-N`): 10 `#1A1A1A` · 20 `#1A1A1A` · 30 `#1A1A1A` · 40 `#1A1A1A` · 50 `#1A1A1A` · 60 `#1A1A1A` · 70 `#1A1A1A` · 80 `#1A1A1A` · 90 `#1A1A1A`
- **White Trans** (`--white-trans-N`): 10 `#FFFFFF` · 20 `#FFFFFF` · 30 `#FFFFFF` · 40 `#FFFFFF` · 50 `#FFFFFF` · 60 `#FFFFFF` · 70 `#FFFFFF` · 80 `#FFFFFF` · 90 `#FFFFFF`
- **Black Trans** (`--black-trans-N`): 10 `#000000` · 20 `#000000` · 30 `#000000` · 40 `#000000` · 50 `#000000` · 60 `#000000` · 70 `#000000` · 80 `#000000` · 90 `#000000`
- **Danger Trans** (`--danger-trans-N`): 10 `#DC3545` · 20 `#DC3545` · 30 `#DC3545` · 40 `#DC3545` · 50 `#DC3545` · 60 `#DC3545` · 70 `#DC3545` · 80 `#DC3545` · 90 `#DC3545`
- **Danger Light Trans** (`--danger-light-trans-N`): 10 `#F4BEC3` · 20 `#F4BEC3` · 30 `#F4BEC3` · 40 `#F4BEC3` · 50 `#F4BEC3` · 60 `#F4BEC3` · 70 `#F4BEC3` · 80 `#F4BEC3` · 90 `#F4BEC3`
- **Danger Dark Trans** (`--danger-dark-trans-N`): 10 `#410B11` · 20 `#410B11` · 30 `#410B11` · 40 `#410B11` · 50 `#410B11` · 60 `#410B11` · 70 `#410B11` · 80 `#410B11` · 90 `#410B11`
- **Danger Ultra Dark Trans** (`--danger-ultra-dark-trans-N`): 10 `#2B080B` · 20 `#2B080B` · 30 `#2B080B` · 40 `#2B080B` · 50 `#2B080B` · 60 `#2B080B` · 70 `#2B080B` · 80 `#2B080B` · 90 `#2B080B`
- **Warning Trans** (`--warning-trans-N`): 10 `#FFC10A` · 20 `#FFC10A` · 30 `#FFC10A` · 40 `#FFC10A` · 50 `#FFC10A` · 60 `#FFC10A` · 70 `#FFC10A` · 80 `#FFC10A` · 90 `#FFC10A`
- **Warning Light Trans** (`--warning-light-trans-N`): 10 `#FFECB3` · 20 `#FFECB3` · 30 `#FFECB3` · 40 `#FFECB3` · 50 `#FFECB3` · 60 `#FFECB3` · 70 `#FFECB3` · 80 `#FFECB3` · 90 `#FFECB3`
- **Warning Dark Trans** (`--warning-dark-trans-N`): 10 `#4D3900` · 20 `#4D3900` · 30 `#4D3900` · 40 `#4D3900` · 50 `#4D3900` · 60 `#4D3900` · 70 `#4D3900` · 80 `#4D3900` · 90 `#4D3900`
- **Warning Ultra Dark Trans** (`--warning-ultra-dark-trans-N`): 10 `#332600` · 20 `#332600` · 30 `#332600` · 40 `#332600` · 50 `#332600` · 60 `#332600` · 70 `#332600` · 80 `#332600` · 90 `#332600`
- **Info Trans** (`--info-trans-N`): 10 `#18A2B8` · 20 `#18A2B8` · 30 `#18A2B8` · 40 `#18A2B8` · 50 `#18A2B8` · 60 `#18A2B8` · 70 `#18A2B8` · 80 `#18A2B8` · 90 `#18A2B8`
- **Info Light Trans** (`--info-light-trans-N`): 10 `#BBEEF6` · 20 `#BBEEF6` · 30 `#BBEEF6` · 40 `#BBEEF6` · 50 `#BBEEF6` · 60 `#BBEEF6` · 70 `#BBEEF6` · 80 `#BBEEF6` · 90 `#BBEEF6`
- **Info Dark Trans** (`--info-dark-trans-N`): 10 `#093C44` · 20 `#093C44` · 30 `#093C44` · 40 `#093C44` · 50 `#093C44` · 60 `#093C44` · 70 `#093C44` · 80 `#093C44` · 90 `#093C44`
- **Info Ultra Dark Trans** (`--info-ultra-dark-trans-N`): 10 `#06282D` · 20 `#06282D` · 30 `#06282D` · 40 `#06282D` · 50 `#06282D` · 60 `#06282D` · 70 `#06282D` · 80 `#06282D` · 90 `#06282D`
- **Success Trans** (`--success-trans-N`): 10 `#29A745` · 20 `#29A745` · 30 `#29A745` · 40 `#29A745` · 50 `#29A745` · 60 `#29A745` · 70 `#29A745` · 80 `#29A745` · 90 `#29A745`
- **Success Light Trans** (`--success-light-trans-N`): 10 `#C1F0CC` · 20 `#C1F0CC` · 30 `#C1F0CC` · 40 `#C1F0CC` · 50 `#C1F0CC` · 60 `#C1F0CC` · 70 `#C1F0CC` · 80 `#C1F0CC` · 90 `#C1F0CC`
- **Success Dark Trans** (`--success-dark-trans-N`): 10 `#0F3E19` · 20 `#0F3E19` · 30 `#0F3E19` · 40 `#0F3E19` · 50 `#0F3E19` · 60 `#0F3E19` · 70 `#0F3E19` · 80 `#0F3E19` · 90 `#0F3E19`
- **Success Ultra Dark Trans** (`--success-ultra-dark-trans-N`): 10 `#0A2911` · 20 `#0A2911` · 30 `#0A2911` · 40 `#0A2911` · 50 `#0A2911` · 60 `#0A2911` · 70 `#0A2911` · 80 `#0A2911` · 90 `#0A2911`

### Other named colors

- `--action-hex`: `#EB720C`
- `--primary-hex`: `#00395C`
- `--secondary-hex`: `#018998`
- `--accent-hex`: `#FABC2A`
- `--base-hex`: `#2F383D`
- `--shade-hex`: `#505050`
- `--neutral-hex`: `#000000`
- `--danger-hex`: `#DC3545`
- `--warning-hex`: `#FFC10A`
- `--info-hex`: `#18A2B8`
- `--success-hex`: `#29A745`
- `--action`: `#EB720C`
- `--action-hover`: `#F48226`
- `--action-ultra-light`: `#FFFCFA`
- `--action-light`: `#FBD5B6`
- `--action-semi-light`: `#F69E55`
- `--action-semi-dark`: `#EB6A00`
- `--action-dark`: `#C74F05`
- `--action-ultra-dark`: `#863603`
- `--action-comp`: `#0C85E9`
- `--action-medium`: `#F2740D`
- `--primary`: `#00395C`
- `--primary-hover`: `#00416A`
- `--primary-ultra-light`: `#F0F9FF`
- `--primary-light`: `#B3E2FF`
- `--primary-semi-light`: `#4DBBFF`
- `--primary-semi-dark`: `#004F80`
- `--primary-dark`: `#00263D`
- `--primary-ultra-dark`: `#00060A`
- `--primary-comp`: `#5C2300`
- `--primary-medium`: `#006EB3`
- `--secondary`: `#018998`
- `--secondary-hover`: `#019EAF`
- `--secondary-ultra-light`: `#FBFEFE`
- `--secondary-light`: `#E5F6F6`
- `--secondary-semi-light`: `#A1DDDD`
- `--secondary-semi-dark`: `#01A0B2`
- `--secondary-dark`: `#01727F`
- `--secondary-ultra-dark`: `#00454C`
- `--secondary-comp`: `#981001`
- `--secondary-medium`: `#38B2B2`
- `--accent`: `#FABC2A`
- `--accent-hover`: `#FBC954`
- `--accent-ultra-light`: `#FEF7E6`
- `--accent-light`: `#FDE7B4`
- `--accent-semi-light`: `#FBC851`
- `--accent-semi-dark`: `#AE7B04`
- `--accent-dark`: `#7C5803`
- `--accent-ultra-dark`: `#322301`
- `--accent-comp`: `#2968FA`
- `--accent-medium`: `#F9B006`
- `--base`: `#2F383D`
- `--base-hover`: `#364046`
- `--base-ultra-light`: `#F1F3F4`
- `--base-light`: `#D4DADE`
- `--base-semi-light`: `#9AA9B1`
- `--base-semi-dark`: `#4E5D65`
- `--base-dark`: `#374248`
- `--base-ultra-dark`: `#161A1D`
- `--base-comp`: `#3D332F`
- `--base-medium`: `#6F8490`
- `--shade`: `#505050`
- `--shade-hover`: `#5B5B5B`
- `--shade-ultra-light`: `#EBEBEB`
- `--shade-light`: `#DEDEDE`
- `--shade-semi-light`: `#A6A6A6`
- `--shade-semi-dark`: `#595959`
- `--shade-dark`: `#404040`
- `--shade-ultra-dark`: `#1A1A1A`
- `--shade-comp`: `#4F4F4F`
- `--neutral`: `#000000`
- `--neutral-hover`: `#000000`
- `--neutral-ultra-light`: `#F2F2F2`
- `--neutral-light`: `#D9D9D9`
- `--neutral-semi-light`: `#A6A6A6`
- `--neutral-semi-dark`: `#595959`
- `--neutral-dark`: `#404040`
- `--neutral-ultra-dark`: `#1A1A1A`
- `--neutral-comp`: `#000000`
- `--white`: `#FFFFFF`
- `--black`: `#000000`
- `--danger`: `#DC3545`
- `--danger-hover`: `#E35A67`
- `--danger-ultra-light`: `#FBE9EB`
- `--danger-light`: `#F4BEC3`
- `--danger-semi-light`: `#E46774`
- `--danger-semi-dark`: `#981B27`
- `--danger-dark`: `#410B11`
- `--danger-ultra-dark`: `#2B080B`
- `--danger-comp`: `#38DCCB`
- `--danger-medium`: `#D92638`
- `--warning`: `#FFC10A`
- `--warning-hover`: `#FFCC32`
- `--warning-ultra-light`: `#FFF9E5`
- `--warning-light`: `#FFECB3`
- `--warning-semi-light`: `#FFD24D`
- `--warning-semi-dark`: `#B38600`
- `--warning-dark`: `#4D3900`
- `--warning-ultra-dark`: `#332600`
- `--warning-comp`: `#0A47FF`
- `--warning-medium`: `#FFBF00`
- `--info`: `#18A2B8`
- `--info-hover`: `#1CBCD5`
- `--info-ultra-light`: `#E8F9FC`
- `--info-light`: `#BBEEF6`
- `--info-semi-light`: `#61D8EA`
- `--info-semi-dark`: `#158C9E`
- `--info-dark`: `#093C44`
- `--info-ultra-dark`: `#06282D`
- `--info-comp`: `#B92E18`
- `--info-medium`: `#1DC7E2`
- `--success`: `#29A745`
- `--success-hover`: `#2FC24F`
- `--success-ultra-light`: `#EAFAEE`
- `--success-light`: `#C1F0CC`
- `--success-semi-light`: `#6FDC87`
- `--success-semi-dark`: `#23903A`
- `--success-dark`: `#0F3E19`
- `--success-ultra-dark`: `#0A2911`
- `--success-comp`: `#A8298D`
- `--success-medium`: `#32CD53`
- `--shade-white`: `#FFFFFF`
- `--shade-black`: `#000000`
- `--box-shadow-xl`: `#000000`
- `--light-card-shadow`: `#0E3F7E`
- `--spinner-color`: `#646464`
- `--active-title-bkg`: `#FFFFFF`
- `--active-accordion-bkg`: `#FFFFFF`
- `--inactive-title-txt`: `#FFFFFF`
- `--content-bkg`: `#FFFFFF`
- `--box-shadow-3`: `#000000`

### Typefaces

- not([class*="breakout--"]) (`--vp-max`)
- Open Sans Variable

### Type scale (most-used sizes)

`2.94975rem` · `2.622rem` · `2.32875rem` · `2.07rem` · `30px` · `1.633rem` · `1.449rem` · `14px` · `13px` · `12px` · `11px` · `10px`

### Letter-spacing

`-.2px` (1) · `-0.03em` (1) · `-1.5px` (1) · `-.7px` (1) · `-.015em` (1) · `1.2px` (1)

### Corner radii (most-used)

`50%` · `2px` · `8px` · `4px` · `20px` · `100%` · `9999px`

### Shadows

- `none !important`
- `inset 0px 0px 0px 2px transparent`
- `none!important`
- `0 8px 20px rgba(0, 0, 0, 0.25)`
- `0 16px 40px -10px rgba(0, 0, 0, 0.35)`

### Gradients

- `linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)`
- `linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)`
- `linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)`
- `linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%)`
- `linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)`
- `linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)`

### Breakpoints

500px · 501px · 600px · 640px · 641px · 767px · 768px · 870px · 871px · 990px · 991px · 1024px · 1025px · 1200px · 1201px · 1279px · 1280px