[Design systems](/design-systems/) / Medical Solutions

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

Corrections or removal: <agent@clinicalterminal.com>

![Medical Solutions homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F103194218.jpg?alt=media)

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

Slate

50

\#E5E7E9

100

\#BEC2C8

200

\#9399A4

300

\#677080

400

\#475264

500

\#263349

600

\#222E42

700

\#1C2739

800

\#172031

900

\#0D1421

Lime

50

\#F6F9E2

100

\#E8F0B8

200

\#D9E688

300

\#C9DB58

400

\#BED435

500

\#B2CC11

600

\#ABC70F

700

\#A2C00C

800

\#99B90A

900

\#8AAD05

Teal

50

\#E0F7F6

100

\#B3EAED

200

\#80DDDB

300

\#4DCECB

400

\#26C4BC

500

\#00B9B0

600

\#00B2A9

700

\#00AAAA

800

\#00A297

900

\#009387

Purple

50

\#F1E8F2

100

\#DDC7E0

200

\#C7A1CB

300

\#B07BB6

400

\#9F5FA6

500

\#8E4396

600

\#863D8E

700

\#7B3483

800

\#712C79

900

\#5F1E68

Green

50

\#EBF1E5

100

\#D0E4B7

200

\#B0D387

300

\#90C156

400

\#79B332

500

\#61A60E

600

\#599E0C

700

\#4F950A

800

\#456B08

900

\#337B04

Orange

50

\#FEF1E3

100

\#FCDDB9

200

\#FBC68A

300

\#F9AF5B

400

\#F79E38

500

\#F68D15

600

\#F58512

700

\#F37A0F

800

\#F2700C

900

\#EF5D06

Red

50

\#FFF2F2

100

\#FFE1E1

200

\#FFC8C8

300

\#FF9F9F

400

\#FF6A6A

500

\#E53535

600

\#CC0000

700

\#B30000

800

\#9A0000

Blue

50

\#F7F7FF

100

\#EAEAFF

200

\#D0D0FF

300

\#9C9CFF

400

\#6868FF

500

\#3434FF

600

\#0000FF

700

\#0000CC

800

\#0000A0

900

\#000075

Grey

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

## Type

Headings

Montserrat

Medical Solutions at a glance

Body

Montserrat

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

- 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F103194218.md?alt=media).

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