[Design systems](/design-systems/) / Avaap

# Avaap design system

avaap.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#F8F8F8

  \--Light-Neutral

- Ink

  \#3C0609

- Accent on the ground

  \#9A6173

- Primary

  \#C08497

  \--Pink-Accent

- On primary

  \#3C0609

  \--Dark-Neutral

- Secondary accent

  \#607382

- Dark

  \#3C0609

  \--Dark-Neutral

- Site background

  \#F8F8F8

  \--Light-Neutral

## Other named colors

- \--Dark-Neutral #3C0609
- \--Light-Neutral #F8F8F8
- \--Pink-Accent #C08497
- \--Dark-Blue #002647
- \--Brand-Red #B5121B
- \--Darkest-Blue #000F1C
- \--Bright-Blue #003F76

## Type

Headings

Manrope · closest free match for Satoshi

Avaap at a glance

Body

Manrope · closest free match for Satoshi

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

- 130pxAvaap
- 30pxAvaap
- 26pxAvaap
- 24pxAvaap
- 20pxAvaap
- 18pxAvaap
- 16pxAvaap
- 15pxAvaap

## Shape & depth

Cards and panels: 8px corners · buttons and chips: 30px.

### Corner radii

- 100%

  used in 27 rules

- 100px

  used in 16 rules

- 30px

  used in 6 rules

- 4px

  used in 6 rules

- 8px

  used in 5 rules

- 526.561px

  used in 2 rules

- 13px

  used in 1 rule

- 500px

  used in 1 rule

- 48px

  used in 1 rule

- 768.723px

  used in 1 rule

### Shadows

- 0 1px 20px rgba(0,0,0,0.1)

  used in 9 rules

- inset 0 1px 0 rgba(120,200,230,.6)

  used in 8 rules

- none !important

  used in 5 rules

- 0px 2px 4px -2px rgba(0,0,0,0.40)

  used in 3 rules

- 2px 8px 18.1px 0 rgba(0, 0, 0, 0.20)

  used in 1 rule

- none!important

  used in 1 rule

### Gradients

- linear-gradient(#000 0 0)

  used in 4 rules

- linear-gradient(90deg, #004B8D 0%, #B5121B 100%)

  used in 3 rules

- linear-gradient(99deg, #3C0609 13.14%, #00192F 54.63%, #5B090E 109.78%)

  used in 1 rule

- linear-gradient(#C08497, #C08497)

  used in 1 rule

- linear-gradient(135deg,#00d084,#0693e3)

  used in 1 rule

- linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)

  used in 1 rule

Breakpoints: 360px · 480px · 600px · 640px · 760px · 768px · 769px · 782px · 992px · 1025px · 1050px · 1141px

## 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%2F100923651.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "Avaap"
domain: "avaap.com"
colors:
  primary: "#C08497"
  onPrimary: "#3C0609"
  dark: "#3C0609"
  accent: "#607382"
  background: "#F8F8F8"
ground:
  mode: light
  hex: "#F8F8F8"
  ink: "#3C0609"
  accent: "#9A6173"
fonts:
  heading: "Manrope"
  body: "Manrope"
radius:
  card: "8px"
  button: "30px"
---

# Design System — Avaap

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

## Ground
- **Light ground** (#F8F8F8), from Avaap's site background #F8F8F8. Pages and panels sit on it.
- Main text: #3C0609 (16.18:1 on the ground).
- Secondary text is #3C0609 at 88% / 76% / 60%; hairlines and plate borders #3C0609 at 16%.

## Color
- **Accent on the ground: #9A6173** (4.57:1), adjusted from Avaap's primary #C08497 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #C08497** for filled shapes (buttons, chips, bars), with #3C0609 text on it (5.72:1).
- Secondary accent #607382: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Manrope**. Body: **Manrope**. Both on Google Fonts.
- Avaap's site uses Satoshi / Satoshi; these are the closest free look-alikes.

## Shape
- Cards and panels: 8px corners. Buttons and chips: 30px.

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

## Tokens from the site's stylesheets

### Other named colors

- `--Dark-Neutral`: `#3C0609`
- `--Light-Neutral`: `#F8F8F8`
- `--Pink-Accent`: `#C08497`
- `--Dark-Blue`: `#002647`
- `--Brand-Red`: `#B5121B`
- `--Darkest-Blue`: `#000F1C`
- `--Bright-Blue`: `#003F76`

### Typefaces

- \30 (`--fa`)
- satoshi

### Type scale (most-used sizes)

`130px` · `30px` · `26px` · `24px` · `20px` · `18px` · `16px` · `15px` · `14px` · `13px` · `12px` · `10px`

### Letter-spacing

`1.8px` (9) · `-3.9px` (3) · `-2.4px` (3) · `-2.1px` (2) · `1px` (2) · `-1.26px` (2)

### Corner radii (most-used)

`100%` · `100px` · `30px` · `4px` · `8px` · `526.561px` · `13px` · `500px` · `48px` · `768.723px`

### Shadows

- `0 1px 20px rgba(0,0,0,0.1)`
- `inset 0 1px 0 rgba(120,200,230,.6)`
- `none !important`
- `0px 2px 4px -2px rgba(0,0,0,0.40)`
- `2px 8px 18.1px 0 rgba(0, 0, 0, 0.20)`
- `none!important`

### Gradients

- `linear-gradient(#000 0 0)`
- `linear-gradient(90deg, #004B8D 0%, #B5121B 100%)`
- `linear-gradient(99deg, #3C0609 13.14%, #00192F 54.63%, #5B090E 109.78%)`
- `linear-gradient(#C08497, #C08497)`
- `linear-gradient(135deg,#00d084,#0693e3)`
- `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)`

### Breakpoints

360px · 480px · 600px · 640px · 760px · 768px · 769px · 782px · 992px · 1025px · 1050px · 1141px · 1150px · 1180px · 1181px · 1200px · 1201px · 1275px · 1350px · 1367px · 1500px
```