[Design systems](/design-systems/) / Zayo Group # 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: ![Zayo Group logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F100923938.jpg?alt=media) ## 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 10 \#EB720C 20 \#EB720C 30 \#EB720C 40 \#EB720C 50 \#EB720C 60 \#EB720C 70 \#EB720C 80 \#EB720C 90 \#EB720C Action Light Trans 10 \#FBD5B6 20 \#FBD5B6 30 \#FBD5B6 40 \#FBD5B6 50 \#FBD5B6 60 \#FBD5B6 70 \#FBD5B6 80 \#FBD5B6 90 \#FBD5B6 Action Dark Trans 10 \#C74F05 20 \#C74F05 30 \#C74F05 40 \#C74F05 50 \#C74F05 60 \#C74F05 70 \#C74F05 80 \#C74F05 90 \#C74F05 Action Ultra Dark Trans 10 \#863603 20 \#863603 30 \#863603 40 \#863603 50 \#863603 60 \#863603 70 \#863603 80 \#863603 90 \#863603 Primary Trans 10 \#00395C 20 \#00395C 30 \#00395C 40 \#00395C 50 \#00395C 60 \#00395C 70 \#00395C 80 \#00395C 90 \#00395C Primary Light Trans 10 \#B3E2FF 20 \#B3E2FF 30 \#B3E2FF 40 \#B3E2FF 50 \#B3E2FF 60 \#B3E2FF 70 \#B3E2FF 80 \#B3E2FF 90 \#B3E2FF Primary Dark Trans 10 \#00263D 20 \#00263D 30 \#00263D 40 \#00263D 50 \#00263D 60 \#00263D 70 \#00263D 80 \#00263D 90 \#00263D Primary Ultra Dark Trans 10 \#00060A 20 \#00060A 30 \#00060A 40 \#00060A 50 \#00060A 60 \#00060A 70 \#00060A 80 \#00060A 90 \#00060A Secondary Trans 10 \#018998 20 \#018998 30 \#018998 40 \#018998 50 \#018998 60 \#018998 70 \#018998 80 \#018998 90 \#018998 Secondary Light Trans 10 \#E5F6F6 20 \#E5F6F6 30 \#E5F6F6 40 \#E5F6F6 50 \#E5F6F6 60 \#E5F6F6 70 \#E5F6F6 80 \#E5F6F6 90 \#E5F6F6 Secondary Dark Trans 10 \#01727F 20 \#01727F 30 \#01727F 40 \#01727F 50 \#01727F 60 \#01727F 70 \#01727F 80 \#01727F 90 \#01727F Secondary Ultra Dark Trans 10 \#00454C 20 \#00454C 30 \#00454C 40 \#00454C 50 \#00454C 60 \#00454C 70 \#00454C 80 \#00454C 90 \#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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100923938.md?alt=media). ``` --- 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 ```