[Design systems](/design-systems/) / FHAS

# FHAS design system

fhas.com

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

Corrections or removal: <agent@clinicalterminal.com>

![FHAS homepage](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100097.jpg?alt=media)

## Palette

- Ground

  \#D9E8EE

- Ink

  \#000000

- Accent on the ground

  \#006BA6

- Primary

  \#0093D0

- On primary

  \#000000

  \--nectar-font-color

- Secondary accent

  \#6DB0FF

  \--nectar-extra-color-2

- Dark

  \#000000

  \--nectar-font-color

- Site background

  \#D9E8EE

## Color ramps

Nectar Extra Color

1

\#DD3333

2

\#6DB0FF

3

\#FFCB47

## Other named colors

- \--nectar-font-light-color #FFFFFF
- \--nectar-accent-color #003471
- \--nectar-bg-color #FFFFFF
- \--nectar-font-color #000000

## Type

Headings

Jost

FHAS at a glance

Body

Jost

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

- 45pxFHAS
- 32pxFHAS
- 30pxFHAS
- 22pxFHAS
- 20pxFHAS
- 18pxFHAS
- 17pxFHAS
- 16pxFHAS

## Shape & depth

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

### Corner radii

- 2px

  used in 11 rules

- 50%

  used in 8 rules

- 200px

  used in 8 rules

- 5px

  used in 7 rules

- 100px

  used in 7 rules

- 4px

  used in 7 rules

- 10px

  used in 6 rules

- 100%

  used in 2 rules

- 999px

  used in 2 rules

- 1px

  used in 1 rule

### Shadows

- rgba(0,0,0,.04) 0 1px 0,rgba(0,0,0,.05) 0 2px 7px,rgba(0,0,0,.06) 0 12px 22px

  used in 3 rules

- 0 -3px rgba(0,0,0,.1) inset

  used in 3 rules

- 0 40px 100px rgba(0,0,0,.15),0 25px 80px rgba(0,0,0,.1)

  used in 2 rules

- 0 60px 135px rgba(0,0,0,.14),0 15px 65px rgba(0,0,0,.14)

  used in 2 rules

- 0 1px 2px rgba(0,0,0,.2)

  used in 2 rules

- none!important

  used in 2 rules

### Gradients

- linear-gradient(to right,#003471 0,#003471 100%)

  used in 3 rules

- linear-gradient(to right,#0f8fff,#0de2b8)

  used in 3 rules

- linear-gradient(to bottom right,#0f8fff,#0de2b8)

  used in 3 rules

- linear-gradient(to right,#dd3333,#3452ff)

  used in 3 rules

- linear-gradient(to bottom right,#dd3333,#3452ff)

  used in 3 rules

- linear-gradient(to right,#ffffff 0,#ffffff 100%)

  used in 3 rules

Breakpoints: 1px · 481px · 499px · 500px · 690px · 691px · 700px · 768px · 781px · 782px · 992px · 993px

## Voice

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

## DESIGN.md

The file Copy design system puts on your clipboard. [Open the raw file](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100097.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "FHAS"
domain: "fhas.com"
colors:
  primary: "#0093D0"
  onPrimary: "#000000"
  dark: "#000000"
  accent: "#6DB0FF"
  background: "#D9E8EE"
ground:
  mode: light
  hex: "#D9E8EE"
  ink: "#000000"
  accent: "#006BA6"
fonts:
  heading: "Jost"
  body: "Jost"
radius:
  card: "5px"
  button: "200px"
---

# Design System — FHAS

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

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

## Color
- **Accent on the ground: #006BA6** (4.58:1), adjusted from FHAS's primary #0093D0 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #0093D0** for filled shapes (buttons, chips, bars), with #000000 text on it (6.08:1).
- Secondary accent #6DB0FF: charts and a second data series only.
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Nectar Extra Color** (`--nectar-extra-color-N`): 1 `#DD3333` · 2 `#6DB0FF` · 3 `#FFCB47`

### Other named colors

- `--nectar-font-light-color`: `#FFFFFF`
- `--nectar-accent-color`: `#003471`
- `--nectar-bg-color`: `#FFFFFF`
- `--nectar-font-color`: `#000000`

### Typefaces

- hover (`--single`)
- Jost — on Google Fonts
- Inter — on Google Fonts
- Open Sans — on Google Fonts
- icomoon
- icomoon!important
- Roboto — on Google Fonts
- Andale Mono

### Type scale (most-used sizes)

`45px` · `32px` · `30px` · `22px` · `20px` · `18px` · `17px` · `16px` · `14px` · `13px` · `12px` · `11px`

### Letter-spacing

`2px` (3) · `-1px` (2) · `.5px` (1) · `1.5px` (1) · `.6px` (1)

### Corner radii (most-used)

`2px` · `50%` · `200px` · `5px` · `100px` · `4px` · `10px` · `100%` · `999px` · `1px`

### Shadows

- `rgba(0,0,0,.04) 0 1px 0,rgba(0,0,0,.05) 0 2px 7px,rgba(0,0,0,.06) 0 12px 22px`
- `0 -3px rgba(0,0,0,.1) inset`
- `0 40px 100px rgba(0,0,0,.15),0 25px 80px rgba(0,0,0,.1)`
- `0 60px 135px rgba(0,0,0,.14),0 15px 65px rgba(0,0,0,.14)`
- `0 1px 2px rgba(0,0,0,.2)`
- `none!important`

### Gradients

- `linear-gradient(to right,#003471 0,#003471 100%)`
- `linear-gradient(to right,#0f8fff,#0de2b8)`
- `linear-gradient(to bottom right,#0f8fff,#0de2b8)`
- `linear-gradient(to right,#dd3333,#3452ff)`
- `linear-gradient(to bottom right,#dd3333,#3452ff)`
- `linear-gradient(to right,#ffffff 0,#ffffff 100%)`

### Breakpoints

1px · 481px · 499px · 500px · 690px · 691px · 700px · 768px · 781px · 782px · 992px · 993px · 999px · 1000px · 1024px · 1160px · 1299px · 1300px · 1425px · 2600px
```