[Design systems](/design-systems/) / Rette AI

# Rette AI design system

rette.ai

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FCFCFC

  \--token-9f3b3ffd-64e7-46a2-9e42-fe3f75ce50ff

- Ink

  \#2E2E2E

- Accent on the ground

  \#006BD6

- Primary

  \#006BD6

  \--token-66ca4493-d431-4853-b164-61ebe58aaef1

- On primary

  \#FFFFFF

  \--token-fe9d93ed-b3f8-4dd5-a542-7dee2ff95478

- Dark

  \#2E2E2E

  \--token-fb253759-04cf-4542-80a9-432948a595de

- Site background

  \#FCFCFC

  \--token-9f3b3ffd-64e7-46a2-9e42-fe3f75ce50ff

## Other named colors

- \--token-66ca4493-d431-4853-b164-61ebe58aaef1 #006BD6
- \--token-fe9d93ed-b3f8-4dd5-a542-7dee2ff95478 #FFFFFF
- \--token-a9df859c-9446-4d39-a524-69fbbb683a61 #0080FF
- \--token-2fc8c117-c618-4a85-9ab4-2bb9893a140f #F2F5F7
- \--token-fb253759-04cf-4542-80a9-432948a595de #2E2E2E
- \--token-42018dc5-d3b4-4df3-b283-1c0c6b15b714 #FFFFFF
- \--token-8ce9d430-3235-4208-b6f7-5de35cf07b90 #2E2E2E
- \--token-9f3b3ffd-64e7-46a2-9e42-fe3f75ce50ff #FCFCFC
- \--token-06c6a511-84d3-4adc-bc4e-0ff0f156b6ea #2E2E2E
- \--token-e6542936-dbf0-476c-83f0-70c6e43f45a7 #0E60C4

## Type

Headings

Poppins

Rette AI at a glance

Body

Poppins

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

- 18pxRette AI
- 16pxRette AI
- 14pxRette AI
- 12pxRette AI

## Shape & depth

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

### Corner radii

- 25px

  used in 4 rules

- 12px

  used in 4 rules

- 24px

  used in 2 rules

- 20px

  used in 2 rules

- 32px

  used in 1 rule

- 50%

  used in 1 rule

- 50px

  used in 1 rule

- 16px

  used in 1 rule

- 10px

  used in 1 rule

### Shadows

- inset -10px -10px 20px #2351a61a,inset 10px 10px 20px #0000001f

  used in 3 rules

- -10px -10px 20px #244c9666,10px 10px 20px #29405e40

  used in 3 rules

- inset -5px -5px 10px #ffffff80,inset 5px 5px 10px #abaeb840

  used in 2 rules

- inset -5px -5px 10px #f2f2f280,inset 5px 5px 10px #abaeb840

  used in 2 rules

- inset -5px -5px 10px #154aad1a,inset 5px 5px 10px #0f172626

  used in 1 rule

- inset -5px -5px 15px #f5f5f580,inset 5px 5px 15px #a3a3a340

  used in 1 rule

### Gradients

- linear-gradient(90deg,#f0f6fa 16.4661%,#d1e2ed00 100%)

  used in 1 rule

- linear-gradient(90deg,#f7f8fa 16.6244%,#d1e2ed00 58.1627%)

  used in 1 rule

- linear-gradient(#e4e9f400 0%,#e3e8f3 24.3507%)

  used in 1 rule

Breakpoints: 810px · 1200px

## Voice

Tone: professional. Energy: low. 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%2F100067.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "Rette AI"
domain: "rette.ai"
colors:
  primary: "#006BD6"
  onPrimary: "#FFFFFF"
  dark: "#2E2E2E"
  background: "#FCFCFC"
ground:
  mode: light
  hex: "#FCFCFC"
  ink: "#2E2E2E"
  accent: "#006BD6"
fonts:
  heading: "Poppins"
  body: "Poppins"
radius:
  card: "10px"
  button: "50px"
---

# Design System — Rette AI

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

## Ground
- **Light ground** (#FCFCFC), from Rette AI's site background #FCFCFC. Pages and panels sit on it.
- Main text: #2E2E2E (13.24:1 on the ground).
- Secondary text is #2E2E2E at 88% / 76% / 60%; hairlines and plate borders #2E2E2E at 16%.

## Color
- **Accent on the ground: #006BD6** (5.02:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #006BD6** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (5.15:1).
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--token-66ca4493-d431-4853-b164-61ebe58aaef1`: `#006BD6`
- `--token-fe9d93ed-b3f8-4dd5-a542-7dee2ff95478`: `#FFFFFF`
- `--token-a9df859c-9446-4d39-a524-69fbbb683a61`: `#0080FF`
- `--token-2fc8c117-c618-4a85-9ab4-2bb9893a140f`: `#F2F5F7`
- `--token-fb253759-04cf-4542-80a9-432948a595de`: `#2E2E2E`
- `--token-42018dc5-d3b4-4df3-b283-1c0c6b15b714`: `#FFFFFF`
- `--token-8ce9d430-3235-4208-b6f7-5de35cf07b90`: `#2E2E2E`
- `--token-9f3b3ffd-64e7-46a2-9e42-fe3f75ce50ff`: `#FCFCFC`
- `--token-06c6a511-84d3-4adc-bc4e-0ff0f156b6ea`: `#2E2E2E`
- `--token-e6542936-dbf0-476c-83f0-70c6e43f45a7`: `#0E60C4`

### Typefaces

- Inter — on Google Fonts
- Poppins — on Google Fonts
- DM Serif Text
- DM Serif Text Placeholder
- Poppins Placeholder
- Inter Placeholder

### Type scale (most-used sizes)

`18px` · `16px` · `14px` · `12px`

### Corner radii (most-used)

`25px` · `12px` · `24px` · `20px` · `32px` · `50%` · `50px` · `16px` · `10px`

### Shadows

- `inset -10px -10px 20px #2351a61a,inset 10px 10px 20px #0000001f`
- `-10px -10px 20px #244c9666,10px 10px 20px #29405e40`
- `inset -5px -5px 10px #ffffff80,inset 5px 5px 10px #abaeb840`
- `inset -5px -5px 10px #f2f2f280,inset 5px 5px 10px #abaeb840`
- `inset -5px -5px 10px #154aad1a,inset 5px 5px 10px #0f172626`
- `inset -5px -5px 15px #f5f5f580,inset 5px 5px 15px #a3a3a340`

### Gradients

- `linear-gradient(90deg,#f0f6fa 16.4661%,#d1e2ed00 100%)`
- `linear-gradient(90deg,#f7f8fa 16.6244%,#d1e2ed00 58.1627%)`
- `linear-gradient(#e4e9f400 0%,#e3e8f3 24.3507%)`

### Breakpoints

810px · 1200px
```