Clinical Terminal
AboutSign in

Huron design system

huronconsultinggroup.com

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

Corrections or removal: agent@clinicalterminal.com

Huron homepage

Palette

Color ramps

Huron Colors Guava
100
#FFE0E5
600
#DB354D
700
#D62440
Huron Colors Stone
50
#F2F0EB
200
#D4D0CB
400
#9E9995
600
#5C5652
900
#2B2624
Alpha
10
#FFFFFF
20
#FFFFFF
30
#FFFFFF
40
#FFFFFF
50
#FFFFFF
60
#FFFFFF
70
#FFFFFF
80
#FFFFFF
90
#FFFFFF

Other named colors

Type

Headings
Archivo · closest free match for Bricolage Grotesque

Huron at a glance

Body
Roboto

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 480px · 639px · 640px · 767px · 768px · 992px · 1024px · 1025px · 1270px · 1280px · 1368px · 1505px

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: "Huron"
domain: "huronconsultinggroup.com"
colors:
  primary: "#DB354D"
  onPrimary: "#000000"
  dark: "#2B2624"
  background: "#F7F6F4"
ground:
  mode: light
  hex: "#F7F6F4"
  ink: "#2B2624"
  accent: "#D42D47"
fonts:
  heading: "Archivo"
  body: "Roboto"
radius:
  card: "1px"
  button: "8px"
---

# Design System — Huron

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

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

## Color
- **Accent on the ground: #D42D47** (4.56:1), adjusted from Huron's primary #DB354D so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #DB354D** for filled shapes (buttons, chips, bars), with #000000 text on it (4.63:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Roboto**. Both on Google Fonts.
- Huron's site uses Bricolage Grotesque / Roboto; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Huron Colors Guava** (`--huron-colors-guava-N`): 100 `#FFE0E5` · 600 `#DB354D` · 700 `#D62440`
- **Huron Colors Stone** (`--huron-colors-stone-N`): 50 `#F2F0EB` · 200 `#D4D0CB` · 400 `#9E9995` · 600 `#5C5652` · 900 `#2B2624`
- **Alpha** (`--alpha-N`): 10 `#FFFFFF` · 20 `#FFFFFF` · 30 `#FFFFFF` · 40 `#FFFFFF` · 50 `#FFFFFF` · 60 `#FFFFFF` · 70 `#FFFFFF` · 80 `#FFFFFF` · 90 `#FFFFFF`

### Other named colors

- `--huron-colors-aubergine-800-og`: `#370022`
- `--huron-colors-aubergine-600-og`: `#5D013A`
- `--huron-colors-guava-500-og`: `#FF3D5A`
- `--huron-colors-ecru-100-og`: `#EBE9E4`
- `--huron-colors-ecru-200-og`: `#E3E1D4`
- `--huron-colors-mint-300-og`: `#BCFFEC`
- `--huron-colors-mint-500-og`: `#70CDB3`
- `--huron-colors-white`: `#FFFFFF`
- `--colors-muted-foreground-dark`: `#F2F0EB`
- `--colors-outline-dark`: `#737373`
- `--colors-outline-light`: `#A3A3A3`
- `--colors-cta-border-primary-light`: `#DB354D`
- `--colors-cta-border-primary-dark`: `#FFFFFF`
- `--colors-cta-border-secondary-light`: `#5C5652`
- `--colors-cta-border-secondary-dark`: `#FFFFFF`
- `--colors-link-border-light`: `#5C5652`
- `--colors-link-border-dark`: `#FFFFFF`
- `--alpha-10-alt`: `#09090B`
- `--alpha-20-alt`: `#09090B`
- `--alpha-30-alt`: `#09090B`
- `--alpha-40-alt`: `#09090B`
- `--alpha-50-alt`: `#09090B`
- `--alpha-60-alt`: `#09090B`
- `--alpha-70-alt`: `#09090B`
- `--alpha-80-alt`: `#09090B`
- `--alpha-90-alt`: `#09090B`
- `--huron-colors-aubergine-400`: `#850253`
- `--huron-colors-aubergine-100`: `#F5E6EF`
- `--huron-colors-ecru-50`: `#F7F6F4`
- `--huron-colors-ecru-300`: `#D6D3C9`
- `--huron-colors-mint-100`: `#E3FFF6`
- `--huron-colors-mint-700`: `#4DA38B`

### Typefaces

- Bricolage Grotesque (`--typo-h1-font-family`)
- Roboto (`--font-body`) — on Google Fonts
- Bricolage Grotesque Fallback
- Roboto Fallback
- Bricolage

### Type scale (most-used sizes)

`32px` · `1.5rem` · `21px` · `20px` · `18px` · `1.125rem` · `16px` · `15px` · `14px` · `13px` · `11px` · `9px`

### Letter-spacing

`-0.4px` (4) · `16px` (1) · `-.4px` (1) · `.8px` (1) · `1.6px` (1)

### Corner radii (most-used)

`2px` · `100%` · `2.5px` · `100px` · `4px` · `5px` · `8px` · `26px` · `1px` · `.25rem`

### Shadows

- `0 1px 2px #00000026`
- `0 1px 1px #23282f26,0 0 0 1px #23282f33`
- `0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a`
- `0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80`
- `2px 2px 1px rgba(0,0,0,.15)`
- `0 0 0 5px rgba(0,0,0,.1)`

### Gradients

- `linear-gradient(#0000,#000000bf)`
- `linear-gradient(90deg,currentColor,#0000 0)`
- `linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000)`
- `linear-gradient(120deg,#D91438,#B80D6B 28%,#801A8C 50%,#4740A6 72%,#33B2C7)`
- `linear-gradient(180deg,white 0,transparent 20%)`
- `linear-gradient(180deg,rgba(55,0,34,.1),#370022 46%)`

### Breakpoints

480px · 639px · 640px · 767px · 768px · 992px · 1024px · 1025px · 1270px · 1280px · 1368px · 1505px · 1536px