SmarterDx design system

smarterdx.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FFFFFF

  --white
• Ink

  #051137
• Accent on the ground

  #0257FF
• Primary

  #0257FF

  --orbit-blue-5
• On primary

  #FFFFFF

  --white
• Secondary accent

  #674AF9

  --nebula-purple-4
• Highlight

  #00C8E2

  --aurora-teal-5
• Dark

  #051137

  --deep-space-1
• Site background

  #FFFFFF

  --white

Color ramps

Other named colors

• --white #FFFFFF
• --black #12141A
• --grey #525C6B
• --mercury-gray-7 #404252
• --mercury-gray-4 #B3B5BD

Type

• 3rem · 48pxSmarterDx
• 40pxSmarterDx
• 2rem · 32pxSmarterDx
• 1.7rem · 27.2pxSmarterDx
• 18pxSmarterDx
• 1rem · 16pxSmarterDx
• 16pxSmarterDx
• 15pxSmarterDx

Shape & depth

Cards and panels: 14px corners · buttons and chips: 5px.

Corner radii

• 20px

  used in 31 rules
• 10px

  used in 24 rules
• 8px

  used in 14 rules
• 30px

  used in 14 rules
• 15px

  used in 14 rules
• 5px

  used in 11 rules
• 12px

  used in 10 rules
• 999px

  used in 10 rules
• 16px

  used in 9 rules
• 18px

  used in 8 rules

Shadows

• none!important

  used in 7 rules
• 0 7px 13px -1px #002caa4d

  used in 3 rules
• 0 18px 40px -12px #05123857

  used in 2 rules
• 0 2px 5px #0003

  used in 2 rules
• 0 20px 35px 10px #0003

  used in 2 rules
• 0 2px 5px #10182829

  used in 2 rules

Gradients

• linear-gradient(155.06deg, #051137 14.644%, #0257ff 85.356%)

  used in 8 rules
• linear-gradient(145deg, #e0ebff, #f2eeff)

  used in 4 rules
• linear-gradient(145deg, #008291, #81d7d9)

  used in 3 rules
• linear-gradient(145deg, #0a2167, #3a7cff)

  used in 2 rules
• linear-gradient(145deg, #0a2167, #7d64fc)

  used in 2 rules
• linear-gradient(145deg, #3d24b3, #937ffa)

  used in 2 rules

Breakpoints: 479px · 640px · 767px · 768px · 991px · 992px · 1280px · 1440px · 1920px

Voice

Tone: professional. Energy: high. Written for enterprises.

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "SmarterDx"
domain: "smarterdx.com"
colors:
  primary: "#0257FF"
  onPrimary: "#FFFFFF"
  dark: "#051137"
  accent: "#674AF9"
  highlight: "#00C8E2"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#051137"
  accent: "#0257FF"
fonts:
  heading: "Mona Sans"
  body: "Archivo"
radius:
  card: "14px"
  button: "5px"
---

# Design System — SmarterDx

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

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

## Color
- **Accent on the ground: #0257FF** (5.51:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #0257FF** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.51:1).
- Secondary accent #674AF9: charts and a second data series only.
- Highlight #00C8E2 (from SmarterDx's logo gradient): sparing emphasis, never body text.
- Quote every hex exactly as written above.

## Type
- Headlines: **Mona Sans**. Body: **Archivo**. Both on Google Fonts.

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

## Voice
- Tone: professional. Energy: high. Written for enterprises.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Color ramps

- **Deep Space** (`--deep-space-N`): 1 `#051137` · 2 `#0C2061` · 3 `#143088` · 4 `#1F41AD` · 5 `#2C54D0` · 6 `#5775D5` · 7 `#8197DB` · 8 `#A9B7E3` · 9 `#CFD6ED` · 10 `#F2F4FA`
- **Aurora Teal** (`--aurora-teal-N`): 1 `#005661` · 2 `#007D8D` · 3 `#0098AC` · 4 `#00B0C8` · 5 `#00C8E2` · 6 `#33D4EA` · 7 `#7BE0EE` · 8 `#AEEAF3` · 9 `#D0F2F7` · 10 `#EBF9FB`
- **Orbit Blue** (`--orbit-blue-N`): 1 `#001552` · 2 `#001F78` · 3 `#002CAA` · 4 `#003DDB` · 5 `#0257FF` · 6 `#3D78FF` · 7 `#7AA3FF` · 8 `#AABFFF` · 9 `#CFDAFF` · 10 `#EBF0FF`
- **Nebula Purple** (`--nebula-purple-N`): 1 `#2D10BE` · 2 `#3A19E2` · 3 `#5030F4` · 4 `#674AF9` · 5 `#7D64FC` · 6 `#9C87FD` · 7 `#BBADFE` · 8 `#D3CAFE` · 9 `#E5DFFE` · 10 `#F4F1FF`

### Other named colors

- `--white`: `#FFFFFF`
- `--black`: `#12141A`
- `--grey`: `#525C6B`
- `--mercury-gray-7`: `#404252`
- `--mercury-gray-4`: `#B3B5BD`

### Typefaces

- Mona Sans (`--primary`) — on Google Fonts
- Archivo (`--secondary`) — on Google Fonts
- Instrument Serif (`--serif`) — on Google Fonts
- Atkinson Hyperlegible Mono (`--tertiary`) — on Google Fonts
- Inter — on Google Fonts

### Type scale (most-used sizes)

`3rem` · `40px` · `2rem` · `1.7rem` · `18px` · `1rem` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px`

### Letter-spacing

`.08em` (37) · `-.01em` (17) · `-.02em` (15) · `.02em` (7) · `-1px` (7) · `.04em` (5)

### Corner radii (most-used)

`20px` · `10px` · `8px` · `30px` · `15px` · `5px` · `12px` · `999px` · `16px` · `18px`

### Shadows

- `none!important`
- `0 7px 13px -1px #002caa4d`
- `0 18px 40px -12px #05123857`
- `0 2px 5px #0003`
- `0 20px 35px 10px #0003`
- `0 2px 5px #10182829`

### Gradients

- `linear-gradient(155.06deg, #051137 14.644%, #0257ff 85.356%)`
- `linear-gradient(145deg, #e0ebff, #f2eeff)`
- `linear-gradient(145deg, #008291, #81d7d9)`
- `linear-gradient(145deg, #0a2167, #3a7cff)`
- `linear-gradient(145deg, #0a2167, #7d64fc)`
- `linear-gradient(145deg, #3d24b3, #937ffa)`

### Breakpoints

479px · 640px · 767px · 768px · 991px · 992px · 1280px · 1440px · 1920px