Adonis design system

adonis.io

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

Corrections or removal: agent@clinicalterminal.com

Palette

Ground
#FFFFFF
--white
Ink
#000000
Accent on the ground
#074141
Primary
#074141
--primary--adonis-green
On primary
#FFFFFF
--white
Secondary accent
#F7F4BE
--secondary--light-yellow
Dark
#000000
--primary--black
Site background
#FFFFFF
--white

Color ramps

Neutral

#F6F8FA

#ECEFF3

100

#DFE1E7

200

#C1C7D0

300

#A4ACB9

500

#666D80

600

#36394A

900

#0D0D12

Other named colors

--primary--black #000000
--primary--dark-green #042F3A
--lighter-green #196061
--accent--primary #042F3A
--accent--light-green #E4FFEA
--white #FFFFFF
--primary--adonis-green #074141
--primary--white #FFFFFF
--primary--light-gray #F6F8FA
--lp-green #094745
--accent--green #0A5152
--secondary--light-yellow #F7F4BE
--secondary--bright-yellow #EDD642
--givry #E5D3B3
--secondary--grey #E3E7EF
--accent--petrichor #67CBCD
--accent--tertiary #DCFF79
--secondary--givry #E5D3B3
--secondary--light-green #E4FFEA
--secondary--petrichor #67CBCD
--tan-1 #F7F4BE
--neutral-400 #818898

Type

Headings

Inter

Adonis at a glance

Body

Inter

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

3rem · 48pxAdonis
2rem · 32pxAdonis
1.5rem · 24pxAdonis
24pxAdonis
1.25rem · 20pxAdonis
20pxAdonis
18pxAdonis
1.125rem · 18pxAdonis

Shape & depth

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

Corner radii

16px
used in 80 rules
12px
used in 54 rules
8px
used in 47 rules
4px
used in 41 rules
1rem
used in 35 rules
20px
used in 22 rules
50%
used in 20 rules
.5rem
used in 19 rules
.75rem
used in 11 rules
100px
used in 10 rules

Shadows

0 2px 5px #0003
used in 4 rules
1px 2px 17px 1px #0003
used in 3 rules
7px 7px 12px #0000001a
used in 3 rules
0 24px 40px -18px #02241e29
used in 3 rules
0 0 #fff0
used in 3 rules
0 0 3px 1px #3898ec
used in 2 rules

Gradients

linear-gradient(#fff,#fff)
used in 2 rules
linear-gradient(#fcfcfc00,#fff0)
used in 2 rules
linear-gradient(#0003,#0003)
used in 2 rules
radial-gradient(circle,#dfe1e7b8,#f6f8fa00)
used in 1 rule
linear-gradient(225deg,#fff0 8%,#ffffff14 37%,#fff0 63%)
used in 1 rule
linear-gradient(270deg,#fff 69%,#fff6)
used in 1 rule

Breakpoints: 449px · 450px · 479px · 767px · 768px · 991px · 992px · 1201px · 1600px

Voice

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

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Adonis"
domain: "adonis.io"
colors:
  primary: "#074141"
  onPrimary: "#FFFFFF"
  dark: "#000000"
  accent: "#F7F4BE"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#000000"
  accent: "#074141"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "12px"
  button: "4px"
---

# Design System — Adonis

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

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

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

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Neutral** (`--neutral--N`): 25 `#F6F8FA` · 50 `#ECEFF3` · 100 `#DFE1E7` · 200 `#C1C7D0` · 300 `#A4ACB9` · 500 `#666D80` · 600 `#36394A` · 900 `#0D0D12`

### Other named colors

- `--primary--black`: `#000000`
- `--primary--dark-green`: `#042F3A`
- `--lighter-green`: `#196061`
- `--accent--primary`: `#042F3A`
- `--accent--light-green`: `#E4FFEA`
- `--white`: `#FFFFFF`
- `--primary--adonis-green`: `#074141`
- `--primary--white`: `#FFFFFF`
- `--primary--light-gray`: `#F6F8FA`
- `--lp-green`: `#094745`
- `--accent--green`: `#0A5152`
- `--secondary--light-yellow`: `#F7F4BE`
- `--secondary--bright-yellow`: `#EDD642`
- `--givry`: `#E5D3B3`
- `--secondary--grey`: `#E3E7EF`
- `--accent--petrichor`: `#67CBCD`
- `--accent--tertiary`: `#DCFF79`
- `--secondary--givry`: `#E5D3B3`
- `--secondary--light-green`: `#E4FFEA`
- `--secondary--petrichor`: `#67CBCD`
- `--tan-1`: `#F7F4BE`
- `--neutral-400`: `#818898`

### Typefaces

- Inter — on Google Fonts
- Interv

### Type scale (most-used sizes)

`3rem` · `2rem` · `1.5rem` · `24px` · `1.25rem` · `20px` · `18px` · `1.125rem` · `1rem` · `16px` · `.875rem` · `14px`

### Letter-spacing

`-.01em` (34) · `.08em` (23) · `-.01rem` (12) · `-.16px` (6) · `-.005em` (6) · `-.2px` (5)

### Corner radii (most-used)

`16px` · `12px` · `8px` · `4px` · `1rem` · `20px` · `50%` · `.5rem` · `.75rem` · `100px`

### Shadows

- `0 2px 5px #0003`
- `1px 2px 17px 1px #0003`
- `7px 7px 12px #0000001a`
- `0 24px 40px -18px #02241e29`
- `0 0 #fff0`
- `0 0 3px 1px #3898ec`

### Gradients

- `linear-gradient(#fff,#fff)`
- `linear-gradient(#fcfcfc00,#fff0)`
- `linear-gradient(#0003,#0003)`
- `radial-gradient(circle,#dfe1e7b8,#f6f8fa00)`
- `linear-gradient(225deg,#fff0 8%,#ffffff14 37%,#fff0 63%)`
- `linear-gradient(270deg,#fff 69%,#fff6)`

### Breakpoints

449px · 450px · 479px · 767px · 768px · 991px · 992px · 1201px · 1600px