---
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