[Design systems](/design-systems/) / EnableComp

# EnableComp design system

enablecomp.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FFFFFF

  \--oxynav-neutral-color

- Ink

  \#152735

- Accent on the ground

  \#008477

- Primary

  \#2A9D8F

- On primary

  \#000000

  \--black

- Secondary accent

  \#167A6D

  \--dark-green

- Dark

  \#152735

  \--dark-blue

- Site background

  \#FFFFFF

  \--oxynav-neutral-color

## Color ramps

Heading Color

1

\#2C487A

2

\#192634

3

\#2AA191

## Other named colors

- \--oxynav-brand-color #4831B0
- \--oxynav-neutral-color #FFFFFF
- \--oxynav-activehover-color #EFEDF4
- \--oxynav-background-color #4831B0
- \--light-blue #6782B4
- \--blue #2C487A
- \--dark-blue #152735
- \--yellow #F0E13A
- \--green #2AA191
- \--dark-green #167A6D
- \--black #000000
- \--white #FFFFFF
- \--border #DADADA
- \--grey #F0F0F0
- \--dark-grey #ACACAC
- \--dark #6A6A6A
- \--red #D65959
- \--paragraph-link #167A6D
- \--paragraph-text #1C2633
- \--paragraph-text-secondary #6A6A6A
- \--Light-Blue #6782B4
- \--Blue #2C487A
- \--Dark-Blue #152735
- \--Yellow #F0E13A
- \--Green #2AA191
- \--Dark-Green #167A6D
- \--Black #000000
- \--White #FFFFFF
- \--Border #DADADA
- \--Grey #F0F0F0
- \--Dark-Grey #ACACAC
- \--Dark #6A6A6A
- \--Red #D65959
- \--paragraph-Field-Placeholder #B4B4B4

## Type

Headings

Poppins

EnableComp at a glance

Body

Poppins

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

- 80pxEnableComp
- 48pxEnableComp
- 30pxEnableComp
- 28pxEnableComp
- 24pxEnableComp
- 21pxEnableComp
- 18pxEnableComp
- 16pxEnableComp

## Shape & depth

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

### Corner radii

- 50%

  used in 14 rules

- 15px

  used in 10 rules

- 2px

  used in 6 rules

- 3px

  used in 6 rules

- 8px

  used in 5 rules

- 20px

  used in 5 rules

- 12px

  used in 5 rules

- 4px

  used in 4 rules

- 9999px

  used in 4 rules

- 100px

  used in 1 rule

### Shadows

- 0 10px 30px 0 rgba(0, 0, 0, 0.1)

  used in 3 rules

- none !important

  used in 2 rules

- 0 10px 40px rgba(0, 0, 0, 0.3)

  used in 2 rules

- 0 1px 3px rgba(0, 0, 0, 0.1)

  used in 1 rule

- 0 2px 8px rgba(0, 0, 0, 0.15)

  used in 1 rule

- 0 0 0 1px rgba(0, 115, 170, 0.2)

  used in 1 rule

### Gradients

- linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent)

  used in 2 rules

- linear-gradient(to top, #FFF 0%, rgba(255, 255, 255, 0) 50%)

  used in 1 rule

- linear-gradient(270deg, rgba(240, 240, 240, 0) 0%, #F0F0F0 17.71%)

  used in 1 rule

- linear-gradient(135deg,#00d084,#0693e3)

  used in 1 rule

- linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)

  used in 1 rule

- linear-gradient(135deg,#faaca8,#dad0ec)

  used in 1 rule

Breakpoints: 480px · 600px · 767px · 768px · 782px · 992px · 993px · 1080px · 1200px · 1280px · 1300px · 1399px

## Voice

Tone: professional. Energy: low. Written for businesses.

## 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%2F100923704.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "EnableComp"
domain: "enablecomp.com"
colors:
  primary: "#2A9D8F"
  onPrimary: "#000000"
  dark: "#152735"
  accent: "#167A6D"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#152735"
  accent: "#008477"
fonts:
  heading: "Poppins"
  body: "Poppins"
radius:
  card: "8px"
  button: "8px"
---

# Design System — EnableComp

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

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

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

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

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

## Voice
- Tone: professional. Energy: low. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Heading Color** (`--heading-color-N`): 1 `#2C487A` · 2 `#192634` · 3 `#2AA191`

### Other named colors

- `--oxynav-brand-color`: `#4831B0`
- `--oxynav-neutral-color`: `#FFFFFF`
- `--oxynav-activehover-color`: `#EFEDF4`
- `--oxynav-background-color`: `#4831B0`
- `--light-blue`: `#6782B4`
- `--blue`: `#2C487A`
- `--dark-blue`: `#152735`
- `--yellow`: `#F0E13A`
- `--green`: `#2AA191`
- `--dark-green`: `#167A6D`
- `--black`: `#000000`
- `--white`: `#FFFFFF`
- `--border`: `#DADADA`
- `--grey`: `#F0F0F0`
- `--dark-grey`: `#ACACAC`
- `--dark`: `#6A6A6A`
- `--red`: `#D65959`
- `--paragraph-link`: `#167A6D`
- `--paragraph-text`: `#1C2633`
- `--paragraph-text-secondary`: `#6A6A6A`
- `--Light-Blue`: `#6782B4`
- `--Blue`: `#2C487A`
- `--Dark-Blue`: `#152735`
- `--Yellow`: `#F0E13A`
- `--Green`: `#2AA191`
- `--Dark-Green`: `#167A6D`
- `--Black`: `#000000`
- `--White`: `#FFFFFF`
- `--Border`: `#DADADA`
- `--Grey`: `#F0F0F0`
- `--Dark-Grey`: `#ACACAC`
- `--Dark`: `#6A6A6A`
- `--Red`: `#D65959`
- `--paragraph-Field-Placeholder`: `#B4B4B4`

### Typefaces

- Poppins (`--Font-Family-Primary`) — on Google Fonts
- Manrope — on Google Fonts
- Fira Code
- Open Sans — on Google Fonts
- Source Sans 3 — on Google Fonts

### Type scale (most-used sizes)

`80px` · `48px` · `30px` · `28px` · `24px` · `21px` · `18px` · `16px` · `14px` · `13px` · `12px` · `11px`

### Letter-spacing

`0.5px` (2) · `-0.1px` (2) · `0.96px` (1) · `1.4px` (1)

### Corner radii (most-used)

`50%` · `15px` · `2px` · `3px` · `8px` · `20px` · `12px` · `4px` · `9999px` · `100px`

### Shadows

- `0 10px 30px 0 rgba(0, 0, 0, 0.1)`
- `none !important`
- `0 10px 40px rgba(0, 0, 0, 0.3)`
- `0 1px 3px rgba(0, 0, 0, 0.1)`
- `0 2px 8px rgba(0, 0, 0, 0.15)`
- `0 0 0 1px rgba(0, 115, 170, 0.2)`

### Gradients

- `linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent)`
- `linear-gradient(to top, #FFF 0%, rgba(255, 255, 255, 0) 50%)`
- `linear-gradient(270deg, rgba(240, 240, 240, 0) 0%, #F0F0F0 17.71%)`
- `linear-gradient(135deg,#00d084,#0693e3)`
- `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)`
- `linear-gradient(135deg,#faaca8,#dad0ec)`

### Breakpoints

480px · 600px · 767px · 768px · 782px · 992px · 993px · 1080px · 1200px · 1280px · 1300px · 1399px
```