Clinical Terminal
AboutSign in

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

Palette

Other named colors

Type

Headings
Poppins

Rette AI at a glance

Body
Poppins

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

Shape & depth

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

Corner radii

Shadows

Gradients

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.

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