Sutherland design system

sutherlandglobal.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FFFFFF
• Ink

  #111111
• Accent on the ground

  #0B4789
• Primary

  #0B4789
• On primary

  #FFFFFF
• Secondary accent

  #F7608D
• Dark

  #2E79BB
• Site background

  #FFFFFF

Other named colors

• --vig-navy #050F42
• --vig-text #26235D
• --vig-placeholder #A2A2A2
• --vig-line #091867
• --vig-dot #70CDFA

Type

• 40pxSutherland
• 32pxSutherland
• 30pxSutherland
• 28pxSutherland
• 26pxSutherland
• 24pxSutherland
• 20pxSutherland
• 18pxSutherland

Shape & depth

Cards and panels: 6px corners · buttons and chips: 24px.

Corner radii

• 50%

  used in 61 rules
• 6px

  used in 46 rules
• 10px

  used in 22 rules
• 2px

  used in 17 rules
• 5px

  used in 12 rules
• 100%

  used in 7 rules
• 8px

  used in 6 rules
• 4px

  used in 6 rules
• 24px

  used in 5 rules
• 12px

  used in 5 rules

Shadows

• none !important

  used in 27 rules
• 0 2px 14px rgba(0,0,0,.12)

  used in 10 rules
• 0 2px 4px rgba(0,0,0,.1)

  used in 10 rules
• 0px 3px 6px rgba(0,0,0,.1607843137)

  used in 7 rules
• 0px 4px 12px rgba(0,0,0,0.2549019608)

  used in 6 rules
• inset 0px 3px 5px rgba(0,0,0,.1960784314)

  used in 6 rules

Gradients

• linear-gradient(#000 0 0)

  used in 88 rules
• linear-gradient(#000 0, #000 0)

  used in 82 rules
• linear-gradient(115.97deg, #26235d 63.36%, #12acf7 117.68%)

  used in 16 rules
• linear-gradient(133.26deg, #084789 10.42%, #091867 95.91%)

  used in 12 rules
• linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0.1) 100%)

  used in 10 rules
• linear-gradient(133deg, #084789 10.42%, #091867 95.91%)

  used in 6 rules

Breakpoints: 360px · 370px · 380px · 426px · 450px · 460px · 480px · 576px · 600px · 767px · 768px · 769px

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: "Sutherland"
domain: "sutherlandglobal.com"
colors:
  primary: "#0B4789"
  onPrimary: "#FFFFFF"
  dark: "#2E79BB"
  accent: "#F7608D"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#111111"
  accent: "#0B4789"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "6px"
  button: "24px"
---

# Design System — Sutherland

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

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

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

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Sutherland's site uses Proxima-Nova / Proxima-Nova; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--vig-navy`: `#050F42`
- `--vig-text`: `#26235D`
- `--vig-placeholder`: `#A2A2A2`
- `--vig-line`: `#091867`
- `--vig-dot`: `#70CDFA`

### Typefaces

- proxima-nova (`--vig-font`)
- Montserrat-Regular
- Proxima Nova
- Montserrat — on Google Fonts
- proxima-nova" !important

### Type scale (most-used sizes)

`40px` · `32px` · `30px` · `28px` · `26px` · `24px` · `20px` · `18px` · `17px` · `16px` · `14px` · `12px`

### Letter-spacing

`2px` (10) · `.18px` (6) · `.22px` (4) · `1.5px` (4) · `.6px` (3) · `.12px` (1)

### Corner radii (most-used)

`50%` · `6px` · `10px` · `2px` · `5px` · `100%` · `8px` · `4px` · `24px` · `12px`

### Shadows

- `none !important`
- `0 2px 14px rgba(0,0,0,.12)`
- `0 2px 4px rgba(0,0,0,.1)`
- `0px 3px 6px rgba(0,0,0,.1607843137)`
- `0px 4px 12px rgba(0,0,0,0.2549019608)`
- `inset 0px 3px 5px rgba(0,0,0,.1960784314)`

### Gradients

- `linear-gradient(#000 0 0)`
- `linear-gradient(#000 0, #000 0)`
- `linear-gradient(115.97deg, #26235d 63.36%, #12acf7 117.68%)`
- `linear-gradient(133.26deg, #084789 10.42%, #091867 95.91%)`
- `linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0.1) 100%)`
- `linear-gradient(133deg, #084789 10.42%, #091867 95.91%)`

### Breakpoints

360px · 370px · 380px · 426px · 450px · 460px · 480px · 576px · 600px · 767px · 768px · 769px · 782px · 799px · 800px · 810px · 991px · 992px · 1023px · 1024px · 1040px · 1100px · 1139px · 1140px · 1149px · 1171px · 1189px · 1190px · 1199px · 1200px · 1201px · 1240px · 1249px · 1250px · 1279px · 1280px · 1299px · 1300px · 1340px · 1350px · 1359px · 1360px · 1361px · 1366px · 1399px · 1400px · 1430px · 1440px · 1499px · 1500px · 1599px · 1600px · 1680px · 1700px · 1720px · 1800px · 1820px · 1920px · 2200px · 2560px