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