ONLINE Information Services design system

onlineis.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FFFFFF

  --odd-bg-color
• Ink

  #111111
• Accent on the ground

  #8E241B
• Primary

  #8E241B
• On primary

  #FFFFFF

  --odd-bg-color
• Secondary accent

  #2183BD
• Dark

  #1E73BE
• Site background

  #FFFFFF

  --odd-bg-color

Other named colors

• --text-color #111111
• --head-bg-color #D9EDF7
• --odd-bg-color #FFFFFF
• --even-bg-color #F9F9F9
• --hover-bg-color #F3F3F3
• --border-color #DDDDDD
• --head-active-bg-color #049CDB

Type

• 22pxONLINE Information Services
• 21pxONLINE Information Services
• 19pxONLINE Information Services
• 18pxONLINE Information Services
• 17pxONLINE Information Services
• 16pxONLINE Information Services
• 15pxONLINE Information Services
• 14pxONLINE Information Services

Shape & depth

Cards and panels: 3px corners · buttons and chips: 2px.

Corner radii

• 3px

  used in 29 rules
• 50%

  used in 26 rules
• 2px

  used in 24 rules
• 5px

  used in 8 rules
• 4px

  used in 6 rules
• 20px

  used in 6 rules
• 30px

  used in 4 rules
• 15px

  used in 3 rules
• 100%

  used in 3 rules
• 50px

  used in 2 rules

Shadows

• 0 1px 1px rgba(0, 0, 0, 0.075)

  used in 10 rules
• inset 0 1px 1px rgba(0, 0, 0, 0.075)

  used in 6 rules
• inset 0px -1px 0px 0px rgba(0,0,0, 0.2)

  used in 4 rules
• 0px 3px 13px 0px rgba(0, 0, 0, 0.15)

  used in 4 rules
• 0 5px 0 #3253bc

  used in 4 rules
• 0 5px 0 #008d97

  used in 4 rules

Gradients

• linear-gradient(#F4F4F4 50%, #E7E7E7 50%)

  used in 4 rules
• linear-gradient(top,#999999 0%,#e1e1e1 100%)

  used in 4 rules
• linear-gradient(180deg,#fff3 0,#ffffff03)

  used in 1 rule
• linear-gradient(#0000,#0000001a 50%,#0000001a)

  used in 1 rule
• linear-gradient(180deg,#00000003 0,#00000005)

  used in 1 rule
• linear-gradient(45deg,#ffffff26 25%,#0000 0,#0000 50%,#ffffff26 0,#ffffff26 75%,#0000 0,#0000)

  used in 1 rule

Breakpoints: 479px · 480px · 565px · 576px · 600px · 680px · 767px · 768px · 800px · 900px · 960px · 992px

Voice

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

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "ONLINE Information Services"
domain: "onlineis.com"
colors:
  primary: "#8E241B"
  onPrimary: "#FFFFFF"
  dark: "#1E73BE"
  accent: "#2183BD"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#111111"
  accent: "#8E241B"
fonts:
  heading: "Archivo"
  body: "PT Sans"
radius:
  card: "3px"
  button: "2px"
---

# Design System — ONLINE Information Services

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

## Ground
- **Light ground** (#FFFFFF), from ONLINE Information Services'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: #8E241B** (8.68:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #8E241B** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (8.68:1).
- Secondary accent #2183BD: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **PT Sans**. Both on Google Fonts.
- ONLINE Information Services's site uses Source Sans Pro / PT Sans; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--text-color`: `#111111`
- `--head-bg-color`: `#D9EDF7`
- `--odd-bg-color`: `#FFFFFF`
- `--even-bg-color`: `#F9F9F9`
- `--hover-bg-color`: `#F3F3F3`
- `--border-color`: `#DDDDDD`
- `--head-active-bg-color`: `#049CDB`

### Typefaces

- icomoon
- vc_grid_v1
- fontello
- PT Sans — on Google Fonts
- Dosis
- Source Sans Pro

### Type scale (most-used sizes)

`22px` · `21px` · `19px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` · `10px`

### Letter-spacing

`1px` (6) · `0.05em` (1) · `5px` (1) · `0.1em` (1) · `3px` (1)

### Corner radii (most-used)

`3px` · `50%` · `2px` · `5px` · `4px` · `20px` · `30px` · `15px` · `100%` · `50px`

### Shadows

- `0 1px 1px rgba(0, 0, 0, 0.075)`
- `inset 0 1px 1px rgba(0, 0, 0, 0.075)`
- `inset 0px -1px 0px 0px rgba(0,0,0, 0.2)`
- `0px 3px 13px 0px rgba(0, 0, 0, 0.15)`
- `0 5px 0 #3253bc`
- `0 5px 0 #008d97`

### Gradients

- `linear-gradient(#F4F4F4 50%, #E7E7E7 50%)`
- `linear-gradient(top,#999999 0%,#e1e1e1 100%)`
- `linear-gradient(180deg,#fff3 0,#ffffff03)`
- `linear-gradient(#0000,#0000001a 50%,#0000001a)`
- `linear-gradient(180deg,#00000003 0,#00000005)`
- `linear-gradient(45deg,#ffffff26 25%,#0000 0,#0000 50%,#ffffff26 0,#ffffff26 75%,#0000 0,#0000)`

### Breakpoints

479px · 480px · 565px · 576px · 600px · 680px · 767px · 768px · 800px · 900px · 960px · 992px · 1023px · 1024px · 1096px · 1176px · 1200px · 1324px · 1441px