Medical Solutions design system

medicalsolutions.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FCFCFC

  --offwhite
• Ink

  #172031
• Accent on the ground

  #253248
• Primary

  #253248
• On primary

  #B2CC11

  --lime-500
• Secondary accent

  #8E4396

  --purple-500
• Dark

  #172031

  --slate-800
• Site background

  #FCFCFC

  --offwhite

Color ramps

Other named colors

• --mm-color-background #F3F3F3
• --mm-color-border #000000
• --mm-color-icon #000000
• --mm-color-text #000000
• --mm-color-text-dimmed #000000
• --mm-color-background-highlight #000000
• --mm-color-focusring #0066CC
• --grey50 #FAFBFC
• --grey100 #F4F5F6
• --grey200 #E9EAEC
• --grey300 #E6E7EB
• --grey400 #C9CCD1
• --grey500 #969AA4
• --slate50 #E5E7E9
• --slate100 #BEC2C8
• --slate200 #9399A4
• --slate300 #677080
• --slate400 #475264
• --slate500 #263349
• --slate600 #222E42
• --slate700 #1E293A
• --slate800 #172031
• --slate900 #0D1421
• --onyx50 #EAECEF
• --onyx100 #CCCFD7
• --onyx200 #AAB0BC
• --onyx300 #8790A1
• --onyx400 #6E788C
• --onyx500 #546078
• --onyx600 #4D5870
• --onyx700 #434E65
• --onyx800 #3A445B
• --onyx900 #293348
• --green50 #ECF4E2
• --green100 #D0E4B7
• --green200 #B0D387
• --green300 #90C156
• --green400 #79B332
• --green500 #61A60E
• --green600 #599E0C
• --green700 #4F950A
• --green800 #458B08
• --green900 #337B04
• --green1000 #1D3204
• --blue50 #E0EFF7
• --blue100 #B3D6EC
• --blue200 #80BBE0
• --blue300 #4D9FD3

Type

• 2.5rem · 40pxMedical Solutions
• 32pxMedical Solutions
• 1.5rem · 24pxMedical Solutions
• 24pxMedical Solutions
• 1.25rem · 20pxMedical Solutions
• 18pxMedical Solutions
• 1rem · 16pxMedical Solutions
• 16pxMedical Solutions

Shape & depth

Cards and panels: 8px corners · buttons and chips: 8px.

Corner radii

• 1.5625rem

  used in 28 rules
• 50%

  used in 26 rules
• .25rem

  used in 17 rules
• 8px

  used in 16 rules
• 4px

  used in 12 rules
• 100%

  used in 11 rules
• 1rem

  used in 6 rules
• 50rem

  used in 6 rules
• 5px

  used in 6 rules
• 10px

  used in 5 rules

Shadows

• 0 0 0 .2rem rgba(38,51,73,.25)

  used in 9 rules
• 0 0 0 .2rem rgba(38,51,73,.5)

  used in 6 rules
• 0 40px 50px 0 rgba(0,0,0,.08),0 1px 1px 0 rgba(0,0,0,.05)

  used in 6 rules
• 0 0 0 .2rem rgba(97,166,14,.25)

  used in 4 rules
• 0 0 0 .2rem rgba(246,141,21,.25)

  used in 4 rules
• 0 0 0 .2rem rgba(71,82,100,.5)

  used in 4 rules

Gradients

• radial-gradient(circle,#f68d15 0,rgba(246,141,21,0) 70%)

  used in 5 rules
• linear-gradient(270deg,#000 4px,transparent 0)

  used in 4 rules
• linear-gradient(90deg,#00b9b0 21.92%,#b2cc11 80.75%)

  used in 2 rules
• radial-gradient(circle,#00bbb0 0,rgba(0,187,176,0) 70%)

  used in 2 rules
• radial-gradient(circle,#a3419a 0,rgba(163,65,154,0) 70%)

  used in 2 rules
• linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee)

  used in 2 rules

Breakpoints: 300px · 414px · 425px · 450px · 451px · 464px · 479px · 480px · 500px · 520px · 569px · 575px

Voice

Tone: professional. Energy: medium. Written for job seekers.

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Medical Solutions"
domain: "medicalsolutions.com"
colors:
  primary: "#253248"
  onPrimary: "#B2CC11"
  dark: "#172031"
  accent: "#8E4396"
  background: "#FCFCFC"
ground:
  mode: light
  hex: "#FCFCFC"
  ink: "#172031"
  accent: "#253248"
fonts:
  heading: "Montserrat"
  body: "Montserrat"
radius:
  card: "8px"
  button: "8px"
---

# Design System — Medical Solutions

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

## Ground
- **Light ground** (#FCFCFC), from Medical Solutions's site background #FCFCFC. Pages and panels sit on it.
- Main text: #172031 (15.9:1 on the ground).
- Secondary text is #172031 at 88% / 76% / 60%; hairlines and plate borders #172031 at 16%.

## Color
- **Accent on the ground: #253248** (12.57:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #253248** for filled shapes (buttons, chips, bars), with #B2CC11 text on it (7.09:1).
- Secondary accent #8E4396: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Slate** (`--slate-N`): 50 `#E5E7E9` · 100 `#BEC2C8` · 200 `#9399A4` · 300 `#677080` · 400 `#475264` · 500 `#263349` · 600 `#222E42` · 700 `#1C2739` · 800 `#172031` · 900 `#0D1421`
- **Lime** (`--lime-N`): 50 `#F6F9E2` · 100 `#E8F0B8` · 200 `#D9E688` · 300 `#C9DB58` · 400 `#BED435` · 500 `#B2CC11` · 600 `#ABC70F` · 700 `#A2C00C` · 800 `#99B90A` · 900 `#8AAD05`
- **Teal** (`--teal-N`): 50 `#E0F7F6` · 100 `#B3EAED` · 200 `#80DDDB` · 300 `#4DCECB` · 400 `#26C4BC` · 500 `#00B9B0` · 600 `#00B2A9` · 700 `#00AAAA` · 800 `#00A297` · 900 `#009387`
- **Purple** (`--purple-N`): 50 `#F1E8F2` · 100 `#DDC7E0` · 200 `#C7A1CB` · 300 `#B07BB6` · 400 `#9F5FA6` · 500 `#8E4396` · 600 `#863D8E` · 700 `#7B3483` · 800 `#712C79` · 900 `#5F1E68`
- **Green** (`--green-N`): 50 `#EBF1E5` · 100 `#D0E4B7` · 200 `#B0D387` · 300 `#90C156` · 400 `#79B332` · 500 `#61A60E` · 600 `#599E0C` · 700 `#4F950A` · 800 `#456B08` · 900 `#337B04`
- **Orange** (`--orange-N`): 50 `#FEF1E3` · 100 `#FCDDB9` · 200 `#FBC68A` · 300 `#F9AF5B` · 400 `#F79E38` · 500 `#F68D15` · 600 `#F58512` · 700 `#F37A0F` · 800 `#F2700C` · 900 `#EF5D06`
- **Red** (`--red-N`): 50 `#FFF2F2` · 100 `#FFE1E1` · 200 `#FFC8C8` · 300 `#FF9F9F` · 400 `#FF6A6A` · 500 `#E53535` · 600 `#CC0000` · 700 `#B30000` · 800 `#9A0000`
- **Blue** (`--blue-N`): 50 `#F7F7FF` · 100 `#EAEAFF` · 200 `#D0D0FF` · 300 `#9C9CFF` · 400 `#6868FF` · 500 `#3434FF` · 600 `#0000FF` · 700 `#0000CC` · 800 `#0000A0` · 900 `#000075`
- **Grey** (`--grey-N`): 0 `#FFFFFF` · 100 `#F4F5F6` · 200 `#E9EAEC` · 300 `#E6E7EB` · 400 `#C9CCD1` · 500 `#969AAA`

### Other named colors

- `--mm-color-background`: `#F3F3F3`
- `--mm-color-border`: `#000000`
- `--mm-color-icon`: `#000000`
- `--mm-color-text`: `#000000`
- `--mm-color-text-dimmed`: `#000000`
- `--mm-color-background-highlight`: `#000000`
- `--mm-color-focusring`: `#0066CC`
- `--grey50`: `#FAFBFC`
- `--grey100`: `#F4F5F6`
- `--grey200`: `#E9EAEC`
- `--grey300`: `#E6E7EB`
- `--grey400`: `#C9CCD1`
- `--grey500`: `#969AA4`
- `--slate50`: `#E5E7E9`
- `--slate100`: `#BEC2C8`
- `--slate200`: `#9399A4`
- `--slate300`: `#677080`
- `--slate400`: `#475264`
- `--slate500`: `#263349`
- `--slate600`: `#222E42`
- `--slate700`: `#1E293A`
- `--slate800`: `#172031`
- `--slate900`: `#0D1421`
- `--onyx50`: `#EAECEF`
- `--onyx100`: `#CCCFD7`
- `--onyx200`: `#AAB0BC`
- `--onyx300`: `#8790A1`
- `--onyx400`: `#6E788C`
- `--onyx500`: `#546078`
- `--onyx600`: `#4D5870`
- `--onyx700`: `#434E65`
- `--onyx800`: `#3A445B`
- `--onyx900`: `#293348`
- `--green50`: `#ECF4E2`
- `--green100`: `#D0E4B7`
- `--green200`: `#B0D387`
- `--green300`: `#90C156`
- `--green400`: `#79B332`
- `--green500`: `#61A60E`
- `--green600`: `#599E0C`
- `--green700`: `#4F950A`
- `--green800`: `#458B08`
- `--green900`: `#337B04`
- `--green1000`: `#1D3204`
- `--blue50`: `#E0EFF7`
- `--blue100`: `#B3D6EC`
- `--blue200`: `#80BBE0`
- `--blue300`: `#4D9FD3`
- `--blue400`: `#268BC9`
- `--blue500`: `#0076C0`
- `--blue600`: `#006EBA`
- `--blue700`: `#0063B2`
- `--blue800`: `#0059AA`
- `--blue900`: `#00469C`
- `--blue1000`: `#263349`
- `--purple50`: `#F1E8F2`
- `--purple100`: `#DDC7E0`
- `--purple200`: `#C7A1CB`
- `--purple300`: `#B07BB6`
- `--purple400`: `#9F5FA6`
- `--purple500`: `#8E4396`
- `--purple600`: `#863D8E`
- `--purple700`: `#7B3483`
- `--purple800`: `#712C79`
- `--purple900`: `#5F1E68`
- `--purple1000`: `#371A3A`
- `--orange50`: `#FEF1E3`
- `--orange100`: `#FCDDB9`
- `--orange200`: `#FBC68A`
- `--orange300`: `#F9AF5B`
- `--orange400`: `#F79E38`
- `--orange500`: `#F68D15`
- `--orange600`: `#F58512`
- `--orange700`: `#F37A0F`
- `--orange800`: `#F2700C`
- `--orange900`: `#EF5D06`
- `--orange1000`: `#4A2A06`
- `--lime50`: `#F6F9E2`
- `--lime100`: `#E8F0B8`
- `--lime200`: `#D9E688`
- `--lime300`: `#C9DB58`
- `--lime400`: `#BED435`
- `--lime500`: `#B2CC11`
- `--lime600`: `#ABC70F`
- `--lime700`: `#A2C00C`
- `--lime800`: `#99B90A`
- `--lime900`: `#8AAD05`
- `--lime1000`: `#353D05`
- `--teal50`: `#E0F7F6`
- `--teal100`: `#B3EAE7`
- `--teal200`: `#80DCD8`
- `--teal300`: `#4DCEC8`
- `--teal400`: `#26C4BC`
- `--teal500`: `#00B9B0`
- `--teal600`: `#00B2A9`
- `--teal700`: `#00AAA0`
- `--teal800`: `#00A297`
- `--teal900`: `#009387`
- `--teal1000`: `#003735`
- `--statusSuccess50`: `#E5F1E2`
- `--statusSuccess500`: `#2A8810`
- `--statusSuccess900`: `#0F5805`
- `--statusDanger50`: `#FBEAE3`
- `--statusDanger100`: `#F6C9B8`
- `--statusDanger500`: `#E04C12`
- `--statusDanger900`: `#CB2405`
- `--statusDanger1000`: `#A21D04`
- `--statusWarning50`: `#FEF1E3`
- `--statusWarning500`: `#F68D15`
- `--statusWarning900`: `#EF5D06`
- `--statusInfo50`: `#E6F6FD`
- `--statusInfo500`: `#30B7EF`
- `--statusInfo900`: `#1390E4`
- `--neutralWhite`: `#FFFFFF`
- `--neutralBlack`: `#000000`
- `--disabledBorder`: `#E9EAEC`
- `--linkTextEnabled`: `#263349`
- `--linkTextHover`: `#677080`
- `--linkTextPressed`: `#172031`
- `--linkTextSecondaryBrandEnabled`: `#B2CC11`
- `--linkTextSecondaryBrandHover`: `#BED435`
- `--linkTextSecondaryBrandPressed`: `#99B90A`
- `--linkTextPrimaryBrandEnabled`: `#172031`
- `--linkTextPrimaryBrandHover`: `#263349`
- `--linkTextPrimaryBrandPressed`: `#172031`
- `--textPrimaryBrand`: `#263349`
- `--textPrimaryBrandHover`: `#172031`
- `--textSecondaryHover`: `#263349`
- `--textTertiary`: `#E5E7E9`
- `--textTertiaryHover`: `#9399A4`
- `--textPrimaryInverse`: `#FFFFFF`
- `--textPrimaryInverseHover`: `#E9EAEC`
- `--textDisabledDark`: `#172031`
- `--textPrimary`: `#263349`
- `--textPrimaryHover`: `#172031`
- `--textSecondary`: `#677080`
- `--textDisabled`: `#677080`
- `--textDanger`: `#E04C12`
- `--textSecondaryInverse`: `#BEC2C8`
- `--textSecondaryInverseHover`: `#677080`
- `--borderPrimaryBrand`: `#263349`
- `--borderFocus`: `#4D9FD3`
- `--borderDanger`: `#E04C12`
- `--borderDisabled`: `#E9EAEC`
- `--primaryBrand50`: `#E5E7E9`
- `--primaryBrand100`: `#BEC2C8`
- `--primaryBrand200`: `#9399A4`
- `--primaryBrand300`: `#677080`
- `--primaryBrand400`: `#475264`
- `--primaryBrand500`: `#263349`
- `--primaryBrand600`: `#222E42`
- `--primaryBrand700`: `#1E293A`
- `--primaryBrand800`: `#172031`
- `--primaryBrand900`: `#0D1421`
- `--secondaryBrand50`: `#F6F9E2`
- `--secondaryBrand100`: `#E8F0B8`
- `--secondaryBrand200`: `#D9E688`
- `--secondaryBrand300`: `#C9DB58`
- `--secondaryBrand400`: `#BED435`
- `--secondaryBrand500`: `#B2CC11`
- `--secondaryBrand600`: `#ABC70F`
- `--secondaryBrand700`: `#A2C00C`
- `--secondaryBrand800`: `#99B90A`
- `--secondaryBrand900`: `#8AAD05`
- `--backgroundPrimary`: `#FFFFFF`
- `--backgroundSecondary`: `#F4F5F6`
- `--backgroundDisabled`: `#E9EAEC`
- `--backgroundPrimaryBrand50`: `#E5E7E9`
- `--backgroundPrimaryBrand100`: `#BEC2C8`
- `--backgroundPrimaryBrand300`: `#677080`
- `--backgroundDanger`: `#FBEAE3`
- `--backgroundOpacityPrimaryBrand15`: `#263349`
- `--backgroundOpacityPrimaryBrand25`: `#263349`
- `--backgroundOpacityTextPrimary15`: `#263349`
- `--backgroundOpacityTextPrimary25`: `#263349`
- `--backgroundOpacityTextSecondary15`: `#677080`
- `--backgroundOpacityTextSecondary25`: `#677080`
- `--backgroundOpacityTextTertiary15`: `#E5E7E9`
- `--backgroundOpacityTextTertiary25`: `#E5E7E9`
- `--backgroundOpacityTextPrimaryInverse15`: `#FFFFFF`
- `--backgroundOpacityTextPrimaryInverse25`: `#FFFFFF`
- `--backgroundOpacityWarning15`: `#F68D15`
- `--backgroundOpacityWarning25`: `#F68D15`
- `--backgroundOpacityDanger15`: `#E04C12`
- `--backgroundOpacityDanger25`: `#E04C12`
- `--backgroundOpacitySuccess15`: `#2A8810`
- `--backgroundOpacitySuccess25`: `#2A8810`
- `--backgroundOpacitySecondaryBrand15`: `#B2CC11`
- `--backgroundOpacitySecondaryBrand25`: `#B2CC11`
- `--backgroundTertiary`: `#263349`
- `--backgroundQuaternary`: `#1E293A`
- `--backgroundSecondaryBrand50`: `#F6F9E2`
- `--backgroundSecondaryBrand100`: `#E8F0B8`
- `--backgroundSecondaryBrand300`: `#C9DB58`
- `--shadowsPrimary`: `#263349`
- `--navItemBackgroundActive`: `#263349`
- `--navItemBackgroundHover`: `#263349`
- `--navItemBackgroundInactive`: `#1E293A`
- `--navItemBackgroundFocus`: `#263349`
- `--navItemIcon`: `#B2CC11`
- `--navItemSectionBackground`: `#1E293A`
- `--headerText`: `#263349`
- `--headerBackground`: `#FFFFFF`
- `--headerTextInverse`: `#FFFFFF`
- `--headerTextSecondary`: `#677080`
- `--ribbonText`: `#677080`
- `--ribbonBackground`: `#F4F5F6`
- `--ribbonBorder`: `#E9EAEC`
- `--copyrightText`: `#BEC2C8`
- `--profileMenuBackgroundHover`: `#E5E7E9`
- `--profileMenuBackgroundPressed`: `#E9EAEC`
- `--profileMenuBackgroundMobilePressed`: `#E9EAEC`
- `--profileMenuText`: `#263349`
- `--profileMenuBackground`: `#FFFFFF`
- `--profileMenuFooterText`: `#677080`
- `--profileMenuFooterTextHover`: `#263349`
- `--profileMenuFooterBackground`: `#F4F5F6`
- `--profileMenuSectionDivider`: `#E9EAEC`
- `--profileMenuTextMobile`: `#263349`
- `--leftNavigationText`: `#9399A4`
- `--leftNavigationBackground`: `#1E293A`
- `--leftNavigationIcon`: `#B2CC11`
- `--leftNavigationNavItemIconEnabled`: `#E5E7E9`
- `--leftNavigationNavItemIconActive`: `#B2CC11`
- `--assistantButtonBackgroundEnabled`: `#1E293A`
- `--assistantButtonBackgroundPressed`: `#337B04`
- `--stickyFooterBackgroundsecondary`: `#F4F5F6`
- `--stickyFooterBackgroundprimary`: `#FFFFFF`
- `--stickyFooterBorder`: `#E6E7EB`
- `--accentButtonBackgroundEnabled`: `#263349`
- `--accentButtonBackgroundHover`: `#677080`
- `--accentButtonBackgroundPressed`: `#172031`
- `--buttonTextPrimaryButtonSecondaryBrandEnabled`: `#263349`
- `--buttonTextPrimaryButtonPrimaryBrandEnabled`: `#FFFFFF`
- `--buttonTextSecondaryButtonPrimaryBrandEnabled`: `#172031`
- `--buttonTextSecondaryButtonPrimaryBrandPressed`: `#172031`
- `--buttonTextSecondaryButtonPrimaryBrandHover`: `#0D1421`
- `--buttonTextSecondaryButtonSecondaryBrandEnabled`: `#99B90A`
- `--buttonTextSecondaryButtonSecondaryBrandPressed`: `#99B90A`
- `--buttonTextSecondaryButtonSecondaryBrandHover`: `#8AAD05`
- `--buttonTextGhostPrimaryBrandEnabled`: `#263349`
- `--buttonTextGhostPrimaryBrandHover`: `#263349`
- `--buttonTextGhostPrimaryBrandPressed`: `#0D1421`
- `--buttonTextGhostLightEnabled`: `#FFFFFF`
- `--buttonTextGhostLightHover`: `#E5E7E9`
- `--buttonTextGhostLightPressed`: `#BEC2C8`
- `--buttonTextGhostSecondaryBrandEnabled`: `#B2CC11`
- `--buttonTextGhostSecondaryBrandHover`: `#BED435`
- `--buttonTextGhostSecondaryBrandPressed`: `#99B90A`
- `--buttonTextDangerSecondaryEnabled`: `#CB2405`
- `--buttonTextDangerPrimaryEnabled`: `#FFFFFF`
- `--buttonTextAccentEnabled`: `#FFFFFF`
- `--buttonTextSecondaryBrandEnabled`: `#B2CC11`
- `--buttonTextSecondaryBrandHover`: `#BED435`
- `--buttonTextSecondaryBrandPressed`: `#99B90A`
- `--buttonBackgroundPrimaryPrimaryBrandEnabled`: `#263349`
- `--buttonBackgroundPrimaryPrimaryBrandHover`: `#677080`
- `--buttonBackgroundPrimaryPrimaryBrandPressed`: `#172031`
- `--buttonBackgroundPrimarySecondaryBrandEnabled`: `#B2CC11`
- `--buttonBackgroundPrimarySecondaryBrandHover`: `#BED435`
- `--buttonBackgroundPrimarySecondaryBrandPressed`: `#ABC70F`
- `--buttonBackgroundSecondaryPrimaryBrandHover`: `#E5E7E9`
- `--buttonBackgroundSecondaryPrimaryBrandPressed`: `#BEC2C8`
- `--buttonBackgroundSecondarySecondaryBrandHover`: `#F6F9E2`
- `--buttonBackgroundSecondarySecondaryBrandPressed`: `#E8F0B8`
- `--buttonBackgroundDangerSecondaryHover`: `#FBEAE3`
- `--buttonBackgroundDangerSecondaryPressed`: `#F6C9B8`
- `--buttonBackgroundDangerPrimaryEnabled`: `#CB2405`
- `--buttonBackgroundDangerPrimaryHover`: `#E04C12`
- `--buttonBackgroundDangerPrimaryPressed`: `#CB2405`
- `--buttonBackgroundAccentEnabled`: `#263349`
- `--buttonBackgroundAccentHover`: `#677080`
- `--buttonBackgroundAccentPressed`: `#172031`
- `--buttonBorderSecondaryEnabled`: `#263349`
- `--buttonBorderDangerEnabled`: `#CB2405`
- `--buttonBorderDangerHover`: `#E04C12`
- `--buttonBorderDangerPressed`: `#A21D04`
- `--buttonBorderSecondaryBrandEnabled`: `#B2CC11`
- `--buttonBorderSecondaryBrandHover`: `#BED435`
- `--buttonBorderSecondaryBrandPressed`: `#ABC70F`
- `--chipTextDefault`: `#263349`
- `--chipTextSelected`: `#FFFFFF`
- `--chipTextHover`: `#172031`
- `--chipBackgroundDragged`: `#FFFFFF`
- `--chipBackgroundSelected`: `#263349`
- `--chipBackgroundHover`: `#E5E7E9`
- `--chipBackgroundPressed`: `#BEC2C8`
- `--chipBorderDefault`: `#BEC2C8`
- `--chipBorderDragged`: `#172031`
- `--chipBorderSelected`: `#263349`
- `--radioBackgroundPrimaryFill`: `#263349`
- `--radioBackgroundPrimaryHover`: `#E5E7E9`
- `--radioBackgroundPrimaryPressed`: `#BEC2C8`
- `--radioBackgroundErrorFill`: `#E04C12`
- `--radioBackgroundErrorHover`: `#FBEAE3`
- `--radioBackgroundErrorPressed`: `#F6C9B8`
- `--radioTextDefault`: `#263349`
- `--checkboxBackgroundPrimaryFill`: `#263349`
- `--checkboxBackgroundPrimaryHover`: `#E5E7E9`
- `--checkboxBackgroundPrimaryPressed`: `#BEC2C8`
- `--checkboxBackgroundErrorFill`: `#E04C12`
- `--checkboxBackgroundErrorHover`: `#FBEAE3`
- `--checkboxBackgroundErrorPressed`: `#F6C9B8`
- `--checkboxTextDefault`: `#263349`
- `--inputBorderEnabled`: `#BEC2C8`
- `--inputBorderActive`: `#263349`
- `--inputBorderAutofill`: `#263349`
- `--inputBackgroundEnabled`: `#FFFFFF`
- `--inputBackgroundAutofill`: `#E5E7E9`
- `--inputTextSecondary`: `#677080`
- `--inputTextSecondaryHover`: `#263349`
- `--inputTextDefault`: `#263349`
- `--inputTextPrimaryBrand`: `#263349`
- `--inputTextPrimaryBrandHover`: `#172031`
- `--notificationTextPrimary`: `#263349`
- `--notificationTextSecondary`: `#546078`
- `--notificationTextSecondaryHover`: `#293348`
- `--notificationTextSuccess`: `#2A8810`
- `--notificationTextWarning`: `#F68D15`
- `--notificationTextDanger`: `#E04C12`
- `--notificationTextInfo`: `#1390E4`
- `--notificationBackgroundSuccess`: `#E5F1E2`
- `--notificationBackgroundWarning`: `#FEF1E3`
- `--notificationBackgroundDanger`: `#FBEAE3`
- `--notificationBackgroundInfo`: `#E6F6FD`
- `--notificationFillUnread`: `#1390E4`
- `--notificationFillRead`: `#E6E7EB`
- `--notificationItemBackgroundHover`: `#F4F5F6`
- `--notificationItemBackgroundPressed`: `#E9EAEC`
- `--avatarBackgroundEnabled`: `#BEC2C8`
- `--avatarBackgroundEnabledSecondary`: `#F6F9E2`
- `--avatarBorderEnabled`: `#263349`
- `--avatarBorderEnabledSecondary`: `#B2CC11`
- `--avatarText`: `#263349`
- `--avatarAvatarBadgeBackground`: `#FFFFFF`
- `--avatarAvatarBadgeBorderColor`: `#FFFFFF`
- `--paginationDotPrimaryActive`: `#263349`
- `--paginationDotPrimaryInactive`: `#BEC2C8`
- `--paginationDotPrimaryHover`: `#677080`
- `--iconButtonBackgroundPrimaryBrandHover`: `#263349`
- `--iconButtonBackgroundPrimaryBrandPressed`: `#263349`
- `--iconButtonBackgroundPrimaryHover`: `#263349`
- `--iconButtonBackgroundPrimaryPressed`: `#263349`
- `--iconButtonBackgroundSecondaryHover`: `#677080`
- `--iconButtonBackgroundSecondaryPressed`: `#677080`
- `--iconButtonBackgroundTertiaryHover`: `#E5E7E9`
- `--iconButtonBackgroundTertiaryPressed`: `#E5E7E9`
- `--iconButtonBackgroundPrimaryInverseHover`: `#FFFFFF`
- `--iconButtonBackgroundPrimaryInversePressed`: `#FFFFFF`
- `--iconButtonBackgroundWarningHover`: `#F68D15`
- `--iconButtonBackgroundWarningPressed`: `#F68D15`
- `--iconButtonBackgroundDangerHover`: `#E04C12`
- `--iconButtonBackgroundDangerPressed`: `#E04C12`
- `--iconButtonBackgroundSuccessHover`: `#2A8810`
- `--iconButtonBackgroundSuccessPressed`: `#2A8810`
- `--iconButtonBackgroundSecondaryBrandHover`: `#B2CC11`
- `--iconButtonBackgroundSecondaryBrandPressed`: `#B2CC11`
- `--iconButtonBackgroundInformationalHover`: `#1390E4`
- `--iconButtonBackgroundInformationalPressed`: `#1390E4`
- `--iconButtonIconPrimaryBrand`: `#263349`
- `--iconButtonIconSecondaryBrand`: `#B2CC11`
- `--iconButtonIconInformational`: `#1390E4`
- `--breadcrumbTextEnabled`: `#9399A4`
- `--breadcrumbTextActive`: `#263349`
- `--breadcrumbTextInverseEnabled`: `#969AA4`
- `--breadcrumbTextInverseActive`: `#FFFFFF`
- `--tooltipBackground`: `#FFFFFF`
- `--tooltipBorder`: `#E6E7EB`
- `--tooltipLabel`: `#263349`
- `--tooltipBody`: `#677080`
- `--switchHandle`: `#FFFFFF`
- `--switchTrackPrimaryBrandEnabled`: `#9399A4`
- `--switchTrackPrimaryBrandSelected`: `#263349`
- `--switchTrackErrorSelected`: `#E04C12`
- `--switchLabel`: `#263349`
- `--switchBackgroundPrimaryBrandHover`: `#E5E7E9`
- `--switchBackgroundPrimaryBrandPressed`: `#BEC2C8`
- `--switchBackgroundErrorHover`: `#FBEAE3`
- `--switchBackgroundErrorPressed`: `#F6C9B8`
- `--bottomNavIconEnabled`: `#9399A4`
- `--bottomNavIconActive`: `#263349`
- `--bottomNavLabelEnabled`: `#9399A4`
- `--bottomNavLabelActive`: `#B2CC11`
- `--bottomNavBackground`: `#FFFFFF`
- `--bottomNavBorder`: `#F4F5F6`
- `--navigationRibbonText`: `#677080`
- `--navigationRibbonBackground`: `#F4F5F6`
- `--navigationRibbonBorder`: `#E9EAEC`
- `--navigationCopyrightText`: `#BEC2C8`
- `--navigationNavItemEnabled`: `#E5E7E9`
- `--navigationNavItemActive`: `#B2CC11`
- `--navigationNavItemBackgroundHover`: `#263349`
- `--navigationNavItemBackgroundActive`: `#263349`
- `--navigationNavItemIconEnabled`: `#E5E7E9`
- `--navigationNavItemIconActive`: `#B2CC11`
- `--navigationProfileMenuBackgroundEnabled`: `#FFFFFF`
- `--navigationProfileMenuBackgroundItemHover`: `#E5E7E9`
- `--navigationProfileMenuBackgroundItemMobilePressed`: `#E9EAEC`
- `--navigationProfileMenuFooterTextEnabled`: `#677080`
- `--navigationProfileMenuFooterTextHover`: `#263349`
- `--navigationProfileMenuFooterBackground`: `#F4F5F6`
- `--navigationProfileMenuFooterDivider`: `#E9EAEC`
- `--navigationProfileMenuTextItem`: `#263349`
- `--navigationProfileMenuTextMobile`: `#263349`
- `--navigationProfileMenuDivider`: `#E9EAEC`
- `--navigationHeaderText`: `#263349`
- `--navigationHeaderBackground`: `#FFFFFF`
- `--navigationHeaderTextInverse`: `#FFFFFF`
- `--navigationLeftNavigationTextEnabled`: `#9399A4`
- `--navigationLeftNavigationBackgroundDefault`: `#FFFFFF`
- `--navigationLeftNavigationIconEnabled`: `#263349`
- `--navigationLeftNavigationIconHover`: `#677080`
- `--bannerBackground`: `#1390E4`
- `--bannerText`: `#FFFFFF`
- `--bannerIconHover`: `#E9EAEC`
- `--progressBarTrackEnabled`: `#E5E7E9`
- `--progressBarBarEnabled`: `#263349`
- `--progressBarBarDanger`: `#E04C12`
- `--progressBarBarSuccess`: `#2A8810`
- `--progressBarBarPrimaryBrand`: `#263349`
- `--progressBarBarSecondaryBrand`: `#B2CC11`
- `--progressBarBarGradientStartColor`: `#00B9B0`
- `--progressBarBarGradientEndColor`: `#B2CC11`
- `--stepperFillEnabled`: `#E5E7E9`
- `--stepperFillActive`: `#263349`
- `--stepperFillDanger`: `#E04C12`
- `--stepperFillSuccess`: `#2A8810`
- `--stepperTextEnabled`: `#677080`
- `--stepperTextActive`: `#263349`
- `--stepperConnectorLineEnabled`: `#E5E7E9`
- `--stepperConnectorLineDanger`: `#E04C12`
- `--stepperConnectorLineSuccess`: `#2A8810`
- `--avatarButtonBackgroundPrimaryBrandHover`: `#263349`
- `--avatarButtonBackgroundPrimaryBrandPressed`: `#263349`
- `--avatarButtonBackgroundSecondaryBrandHover`: `#B2CC11`
- `--avatarButtonBackgroundSecondaryBrandPressed`: `#B2CC11`
- `--avatarButtonIndicator`: `#F68D15`
- `--avatarButtonBorderPrimaryBrandEnabled`: `#263349`
- `--avatarButtonBorderSecondaryBrandEnabled`: `#B2CC11`
- `--avatarButtonText`: `#263349`
- `--selectableTileBackgroundEnabled`: `#FFFFFF`
- `--selectableTileBackgroundHover`: `#E5E7E9`
- `--selectableTileBackgroundSelected`: `#263349`
- `--selectableTileLabelEnabled`: `#263349`
- `--selectableTileLabelSelected`: `#FFFFFF`
- `--selectableTileLabelHover`: `#263349`
- `--selectableTileIconEnabled`: `#263349`
- `--selectableTileIconSelected`: `#FFFFFF`
- `--selectableTileBorder`: `#263349`
- `--selectableTileDescriptionEnabled`: `#677080`
- `--selectableTileDescriptionSelected`: `#E6E7EB`
- `--segmentedControlOutlinedBorderEnabled`: `#BEC2C8`
- `--segmentedControlOutlinedBorderSelected`: `#263349`
- `--segmentedControlOutlinedBackgroundHover`: `#BEC2C8`
- `--segmentedControlOutlinedBackgroundSelected`: `#E5E7E9`
- `--segmentedControlOutlinedTextEnabled`: `#677080`
- `--segmentedControlOutlinedTextHover`: `#172031`
- `--segmentedControlOutlinedTextSelected`: `#172031`
- `--popoverBackground`: `#FFFFFF`
- `--popoverBorder`: `#E6E7EB`
- `--filterBorderEnabled`: `#BEC2C8`
- `--filterBorderActive`: `#BEC2C8`
- `--filterBorderHover`: `#263349`
- `--filterBorderSelected`: `#263349`
- `--filterBackgroundEnabled`: `#FFFFFF`
- `--filterBackgroundSelected`: `#E5E7E9`
- `--filterTextDefault`: `#263349`
- `--menuBackgroundEnabled`: `#FFFFFF`
- `--tabsTextEnabled`: `#677080`
- `--tabsTextSelected`: `#172031`
- `--tabsTextHover`: `#172031`
- `--tabsBorder`: `#677080`
- `--tabsBackgroundSelected`: `#E5E7E9`
- `--dividerSlateBackground`: `#263349`
- `--dividerGreyBackground`: `#E6E7EB`
- `--dividerPrimaryBrandBackground`: `#BEC2C8`
- `--aiAssistantButtonBackgroundEnabled`: `#1E293A`
- `--aiAssistantButtonBackgroundPressed`: `#337B04`
- `--badgeBackgroundInfoSubtle`: `#E6F6FD`
- `--badgeBackgroundInfoBold`: `#1390E4`
- `--badgeBackgroundSuccessSubtle`: `#E5F1E2`
- `--badgeBackgroundSuccessBold`: `#2A8810`
- `--badgeBackgroundWarningSubtle`: `#FEF1E3`
- `--badgeBackgroundWarningBold`: `#EF5D06`
- `--badgeBackgroundDangerSubtle`: `#FBEAE3`
- `--badgeBackgroundDangerBold`: `#CB2405`
- `--badgeBackgroundPrimaryBrandSubtle`: `#E5E7E9`
- `--badgeBackgroundPrimaryBrandBold`: `#172031`
- `--badgeBackgroundDefaultSubtle`: `#EAECEF`
- `--badgeBackgroundDefaultBold`: `#293348`
- `--badgeBackgroundSecondaryBrandSubtle`: `#F6F9E2`
- `--badgeBackgroundSecondaryBrandBold`: `#99B90A`
- `--badgeTextInfo`: `#1390E4`
- `--badgeTextSuccess`: `#0F5805`
- `--badgeTextWarning`: `#EF5D06`
- `--badgeTextDanger`: `#CB2405`
- `--badgeTextPrimaryBrand`: `#172031`
- `--badgeTextSecondaryBrand`: `#99B90A`
- `--badgeTextDefault`: `#293348`
- `--badgeTextBold`: `#FFFFFF`
- `--modalOverlay`: `#263349`
- `--modalBackground`: `#FFFFFF`
- `--skeletonLoaderBackgroundPrimary`: `#F4F5F6`
- `--skeletonLoaderBackgroundSecondary`: `#E6E7EB`
- `--skeletonLoaderBackgroundInverse`: `#263349`
- `--skeletonLoaderIconPrimary`: `#C9CCD1`
- `--skeletonLoaderIconSecondary`: `#969AA4`
- `--skeletonLoaderIconInverse`: `#475264`
- `--fileDisplayPrimaryBrandIconBackground`: `#E5E7E9`
- `--fileDisplayPrimaryBrandIconText`: `#172031`
- `--fileDisplayPrimaryBrandIconBorder`: `#172031`
- `--fileDisplayPrimaryBrandTextLabel`: `#263349`
- `--fileDisplayPrimaryBrandTextDescription`: `#969AA4`
- `--fileDisplaySecondaryBrandIconBackground`: `#F6F9E2`
- `--fileDisplaySecondaryBrandIconText`: `#99B90A`
- `--fileDisplaySecondaryBrandIconBorder`: `#99B90A`
- `--fileDisplaySecondaryBrandTextLabel`: `#263349`
- `--fileDisplaySecondaryBrandTextDescription`: `#969AA4`
- `--fileDisplayErrorIconBackground`: `#FBEAE3`
- `--fileDisplayErrorIconText`: `#E04C12`
- `--fileDisplayErrorIconBorder`: `#E04C12`
- `--fileDisplayErrorTextLabel`: `#263349`
- `--fileDisplayErrorTextDescription`: `#E04C12`
- `--fileDisplayBackground`: `#FFFFFF`
- `--blue`: `#0077C0`
- `--indigo`: `#6610F2`
- `--purple`: `#8E4396`
- `--pink`: `#E83E8C`
- `--red`: `#DC3545`
- `--orange`: `#F68D15`
- `--yellow`: `#FFC107`
- `--green`: `#61A60E`
- `--teal`: `#00B9B0`
- `--cyan`: `#17A2B8`
- `--white`: `#FFFFFF`
- `--gray`: `#6C757D`
- `--gray-dark`: `#263349`
- `--black`: `#000000`
- `--lime`: `#B2CC11`
- `--silver`: `#9299A4`
- `--gray-extra-light`: `#C9CCD1`
- `--gray-light`: `#E9EAEC`
- `--gray-medium`: `#546078`
- `--primary`: `#263349`
- `--secondary`: `#8E4396`
- `--success`: `#61A60E`
- `--info`: `#00B9B0`
- `--warning`: `#0077C0`
- `--danger`: `#F68D15`
- `--light`: `#F4F5F6`
- `--dark`: `#263349`
- `--slate`: `#263349`
- `--grey`: `#969AAA`
- `--offwhite`: `#FCFCFC`
- `--text-primary`: `#263349`
- `--text-secondary`: `#677080`
- `--text-reversed`: `#FCFCFC`
- `--text-accent`: `#B2CC11`
- `--bg-primary`: `#FCFCFC`
- `--bg-reversed`: `#263349`
- `--utility-blue`: `#0000FF`
- `--utlity-soft-blue`: `#6868FF`
- `--utility-red`: `#CC0000`
- `--utility-soft-red`: `#FF6A6A`

### Typefaces

- SFMono-Regular (`--font-family-monospace`)
- Montserrat (`--font-family-default`) — on Google Fonts
- msicomoon
- Caveat
- Roboto — on Google Fonts
- icomoon
- icomoon!important

### Type scale (most-used sizes)

`2.5rem` · `32px` · `1.5rem` · `24px` · `1.25rem` · `18px` · `1rem` · `16px` · `.875rem` · `14px` · `.75rem` · `.625rem`

### Letter-spacing

`-.09375rem` (7) · `-.00625rem` (5) · `-1px` (5) · `-.03125rem` (4) · `-.0063rem` (3) · `-.1px` (3)

### Corner radii (most-used)

`1.5625rem` · `50%` · `.25rem` · `8px` · `4px` · `100%` · `1rem` · `50rem` · `5px` · `10px`

### Shadows

- `0 0 0 .2rem rgba(38,51,73,.25)`
- `0 0 0 .2rem rgba(38,51,73,.5)`
- `0 40px 50px 0 rgba(0,0,0,.08),0 1px 1px 0 rgba(0,0,0,.05)`
- `0 0 0 .2rem rgba(97,166,14,.25)`
- `0 0 0 .2rem rgba(246,141,21,.25)`
- `0 0 0 .2rem rgba(71,82,100,.5)`

### Gradients

- `radial-gradient(circle,#f68d15 0,rgba(246,141,21,0) 70%)`
- `linear-gradient(270deg,#000 4px,transparent 0)`
- `linear-gradient(90deg,#00b9b0 21.92%,#b2cc11 80.75%)`
- `radial-gradient(circle,#00bbb0 0,rgba(0,187,176,0) 70%)`
- `radial-gradient(circle,#a3419a 0,rgba(163,65,154,0) 70%)`
- `linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee)`

### Breakpoints

300px · 414px · 425px · 450px · 451px · 464px · 479px · 480px · 500px · 520px · 569px · 575px · 576px · 600px · 601px · 767px · 768px · 782px · 783px · 991px · 992px · 1024px · 1025px · 1199px · 1200px · 1241px · 1280px · 1300px · 1350px · 1400px · 1440px · 1485px · 1536px · 1600px · 1700px · 1728px · 1900px