---
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