---
generator: clinical-terminal-brand-kit
company: "KLAS Research"
domain: "klasresearch.com"
colors:
  primary: "#EF6820"
  onPrimary: "#000000"
  dark: "#1D2939"
  accent: "#1570EF"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#1D2939"
  accent: "#CF4A00"
fonts:
  heading: "Barlow"
  body: "Barlow"
radius:
  card: "4px"
  button: "8px"
---

# Design System — KLAS Research

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

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

## Color
- **Accent on the ground: #CF4A00** (4.53:1), adjusted from KLAS Research's primary #EF6820 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #EF6820** for filled shapes (buttons, chips, bars), with #000000 text on it (6.67:1).
- Secondary accent #1570EF: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--divider-color`: `#0C0D0E`
- `--n-menu-title-color-normal`: `#1F2124`
- `--n-menu-title-color-active`: `#58D0F5`
- `--n-menu-title-hover-color-fallback`: `#1F2124`
- `--n-menu-title-color-hover`: `#1F2124`
- `--n-menu-toggle-icon-color`: `#1F2124`
- `--n-menu-dropdown-content-box-border-color`: `#FFFFFF`
- `--e-social-icon-icon-color`: `#FFFFFF`
- `--e-global-color-primary`: `#5F8BB3`
- `--e-global-color-secondary`: `#1D2939`
- `--e-global-color-text`: `#475467`
- `--e-global-color-accent`: `#EF6820`
- `--e-global-color-6bf6f9f`: `#F2F4F7`
- `--e-global-color-652ea9f`: `#EAECF0`
- `--e-global-color-ba5694a`: `#D0D5DD`
- `--e-global-color-052a3c0`: `#98A2B3`
- `--e-global-color-0d745e0`: `#3A5E83`
- `--e-global-color-7ef2555`: `#EFF8FF`
- `--e-global-color-fa309ae`: `#D1E9FF`
- `--e-global-color-d923a37`: `#2E90FA`
- `--e-global-color-3ca8b8b`: `#1570EF`
- `--e-global-color-82883e8`: `#175CD3`
- `--e-global-color-e61dd3c`: `#E04F16`
- `--e-global-color-ebc91a9`: `#C68651`
- `--e-global-color-59f6e8d`: `#039855`
- `--e-global-color-ed1b8e3`: `#FFFFFF`
- `--e-global-color-3b362bb`: `#FEC84B`
- `--e-global-color-3717512`: `#FDB022`
- `--e-global-color-9cd28a6`: `#F79009`
- `--n-menu-dropdown-content-box-shadow-color`: `#000000`
- `--wpforms-button-background-color`: `#1570EF`
- `--wpforms-label-color`: `#475467`
- `--wpforms-field-background-color`: `#FFFFFF`
- `--wpforms-field-border-color`: `#000000`
- `--wpforms-field-border-color-spare`: `#000000`
- `--wpforms-field-text-color`: `#000000`
- `--wpforms-field-menu-color`: `#FFFFFF`
- `--wpforms-label-sublabel-color`: `#000000`
- `--wpforms-label-error-color`: `#D63637`
- `--wpforms-button-border-color`: `#066AAB`
- `--wpforms-button-text-color`: `#FFFFFF`
- `--wpforms-page-break-color`: `#066AAB`
- `--wpforms-background-color`: `#000000`
- `--wpforms-container-border-color`: `#000000`

### Typefaces

- Barlow (`--e-global-typography-secondary-font-family`) — on Google Fonts
- Barlow Semi Condensed (`--e-global-typography-b92be05-font-family`)
- inherit!important

### Type scale (most-used sizes)

`32px` · `24px` · `20px` · `18px` · `16px` · `1rem` · `15px` · `14px` · `.875rem` · `.8125rem` · `13px` · `.8rem`

### Letter-spacing

`-1px` (9) · `-1.5px` (6) · `.06em` (2) · `.05em` (2) · `.03em` (1) · `-0.5px` (1)

### Corner radii (most-used)

`50%` · `4px` · `3px` · `6px` · `2px` · `48px` · `10px` · `100%` · `5px` · `9999px`

### Shadows

- `0 0 0 1px #ccc`
- `0 0 35px 0 rgb(0 0 0 / .15)`
- `0 0 0 2px currentColor`
- `0 0 0 2px color-mix(in sRGB,black 50%,white))`
- `0 0 0 2px color-mix(in sRGB,currentColor 28%,#0000)`
- `0 4px 16px color-mix(in sRGB,currentColor 12%,#0000)`

### Gradients

- `linear-gradient(90deg,#0000,color-mix(in sRGB,currentColor 6%,#0000) 50%,#0000)`
- `linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03))`
- `linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))`
- `linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))`
- `linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))`
- `linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))`

### Breakpoints

479px · 480px · 575px · 576px · 600px · 767px · 768px · 769px · 960px · 991px · 992px · 1024px · 1025px · 1200px