---
generator: clinical-terminal-brand-kit
company: "Abeo Solutions"
domain: "crystalpm.com"
colors:
  primary: "#113D93"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#1BB0CE"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#113D93"
fonts:
  heading: "Lexend"
  body: "Raleway"
radius:
  card: "5px"
  button: "10px"
---

# Design System — Abeo Solutions

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--aux-chart-color`: `#00ACC1`

### Typefaces

- auxin-front
- Raleway — on Google Fonts
- auxin-front"!important
- auxin-front-2"!important
- Lexend — on Google Fonts
- auxin-front-2
- Roboto — on Google Fonts
- Montserrat — on Google Fonts

### Type scale (most-used sizes)

`28px` · `22px` · `20px` · `19px` · `18px` · `16px` · `15px` · `14px` · `.875rem` · `13px` · `12px` · `11px`

### Letter-spacing

`1px` (3) · `2px` (2) · `.1em` (1) · `.5px` (1)

### Corner radii (most-used)

`50%` · `3px` · `4px` · `5px` · `2px` · `6px` · `999px` · `8px` · `25px` · `15px`

### Shadows

- `0 0 2px rgba(61,61,61,.8)`
- `0 1px 2px rgba(0,0,0,.1)`
- `0 0 0 1px #3D3D3D inset`
- `0 2px 0 #fff,0 0 2px rgba(61,61,61,.8)`
- `0 -2px 0 #fff,0 0 2px rgba(61,61,61,.8)`
- `2px 0 0 #fff,0 0 2px rgba(61,61,61,.8)`

### Gradients

- `linear-gradient(right,rgba(0,0,0,0) 30%,#acacac 30%,#acacac 100%)`
- `linear-gradient(top,white 50%,#eeeeee 100%)`
- `linear-gradient(top,#eeeeee 50%,#cccccc 100%)`
- `linear-gradient(top,white 0%,#eeeeee 50%)`
- `linear-gradient(top,#eeeeee 50%,white 100%)`
- `linear-gradient(bottom,rgba(0,0,0,.55) 30%,rgba(0,0,0,.3) 60%,rgba(0,0,0,0) 100%)`

### Breakpoints

321px · 390px · 415px · 479px · 500px · 550px · 634px · 700px · 767px · 768px · 769px · 900px · 990px · 1023px · 1024px · 1025px · 1070px · 1220px · 1221px · 1270px · 1300px · 1439px · 1470px · 1670px · 1920px · 1970px