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

# Sagility design system

sagility.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FFFFFF

- Ink

  \#060E28

- Accent on the ground

  \#1C78C9

- Primary

  \#55AAFF

- On primary

  \#000000

- Secondary accent

  \#ED7070

- Dark

  \#060E28

- Site background

  \#FFFFFF

## Type

Headings

Figtree

Sagility at a glance

Body

Figtree

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

- 36pxSagility
- 24pxSagility
- 22pxSagility
- 20pxSagility
- 18pxSagility
- 16pxSagility
- 1rem · 16pxSagility
- 15pxSagility

## Shape & depth

Cards and panels: 4px corners · buttons and chips: 50px.

### Corner radii

- 3px

  used in 6 rules

- 100%

  used in 6 rules

- 9999px

  used in 5 rules

- 40px

  used in 5 rules

- 4px

  used in 4 rules

- 50px

  used in 4 rules

- 2px

  used in 3 rules

- 15px

  used in 2 rules

- 20px

  used in 2 rules

- 5px

  used in 2 rules

### Shadows

- none!important

  used in 5 rules

- inset 0 0 0 10px #333,inset 0 0 0 11px hsla(0,0%,100%,.1)

  used in 2 rules

- 0 0 3px #ccc

  used in 2 rules

- 0 0 0 1px #e1e1e1

  used in 2 rules

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

  used in 2 rules

- 0 0 0 1px #efefef

  used in 2 rules

### Gradients

- conic-gradient(#000 0 0)

  used in 4 rules

- radial-gradient(100% 80% at 40% 0%,#060e28 0%,transparent)

  used in 2 rules

- radial-gradient(70% 100% at 0% 90%,#060e28 0%,transparent)

  used in 2 rules

- radial-gradient(circle 200px at 80% 60%, #55AAFF 0%, #c7e3ff 50%, transparent)

  used in 2 rules

- radial-gradient(circle 300px at 100% 100%, #BCEAFF, transparent)

  used in 2 rules

- radial-gradient(circle 300px at 20% 0%, #c7e3ff, transparent)

  used in 2 rules

Breakpoints: 480px · 499px · 549px · 599px · 600px · 699px · 768px · 769px · 781px · 782px · 924px · 925px

## Voice

Tone: professional. Energy: low. Written for enterprises.

## 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%2F100923881.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "Sagility"
domain: "sagility.com"
colors:
  primary: "#55AAFF"
  onPrimary: "#000000"
  dark: "#060E28"
  accent: "#ED7070"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#060E28"
  accent: "#1C78C9"
fonts:
  heading: "Figtree"
  body: "Figtree"
radius:
  card: "4px"
  button: "50px"
---

# Design System — Sagility

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

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

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

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

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

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

## Tokens from the site's stylesheets

### Typefaces

- Figtree — on Google Fonts

### Type scale (most-used sizes)

`36px` · `24px` · `22px` · `20px` · `18px` · `16px` · `1rem` · `15px` · `14px` · `13px` · `12px` · `6px`

### Letter-spacing

`0.25px` (2)

### Corner radii (most-used)

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

### Shadows

- `none!important`
- `inset 0 0 0 10px #333,inset 0 0 0 11px hsla(0,0%,100%,.1)`
- `0 0 3px #ccc`
- `0 0 0 1px #e1e1e1`
- `inset 0 2px 1px rgba(0,0,0,.05)`
- `0 0 0 1px #efefef`

### Gradients

- `conic-gradient(#000 0 0)`
- `radial-gradient(100% 80% at 40% 0%,#060e28 0%,transparent)`
- `radial-gradient(70% 100% at 0% 90%,#060e28 0%,transparent)`
- `radial-gradient(circle 200px at 80% 60%, #55AAFF 0%, #c7e3ff 50%, transparent)`
- `radial-gradient(circle 300px at 100% 100%, #BCEAFF, transparent)`
- `radial-gradient(circle 300px at 20% 0%, #c7e3ff, transparent)`

### Breakpoints

480px · 499px · 549px · 599px · 600px · 699px · 768px · 769px · 781px · 782px · 924px · 925px · 950px · 960px · 1020px · 1024px · 1025px · 1099px · 1199px · 1200px · 1375px · 1380px · 1400px · 1450px
```