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

# Doceree design system

doceree.com

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

Corrections or removal: <agent@clinicalterminal.com>

![Doceree logo](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Flogos%2F101502806.svg?alt=media)

## Palette

- Ground

  \#F8F7FF

  \--background

- Ink

  \#2C2E42

- Accent on the ground

  \#8A4FE6

- Primary

  \#8D52E9

- On primary

  \#FFFFFF

  \--color-white

- Secondary accent

  \#7B61FF

  \--doceree-purple

- Highlight

  \#B063DC

- Dark

  \#2C2E42

  \--foreground

- Site background

  \#F8F7FF

  \--background

## Color ramps

Color Purple

50

\#FAF5FF

100

\#F3E8FF

200

\#E9D5FF

300

\#D9B3FF

400

\#C07EFF

600

\#9810FA

700

\#8200DA

Color Gray

100

\#F3F4F6

500

\#6A7282

600

\#4A5565

700

\#364153

900

\#101828

Lilac

50

\#FDFCFF

100

\#F8FBFF

150

\#F7F7FF

200

\#F6F1FF

250

\#F3ECFF

300

\#EFE6FF

400

\#F0EAFF

500

\#EBE4FB

## Other named colors

- \--color-black #000000
- \--color-white #FFFFFF
- \--background #F8F7FF
- \--foreground #2C2E42
- \--doceree-purple #7B61FF
- \--bg #F8F7FF
- \--text #2C2E42
- \--text-strong #2B2F4F
- \--muted #6F7191
- \--border-soft #EBE7F8
- \--border-card #D8D0F4
- \--border-card-strong #CBB5FF
- \--purple #7B61FF
- \--purple-deep #2A1B4F
- \--purple-darker #1A1234
- \--accent #7B61FF
- \--ink #23263A
- \--strip-border-hover #BCD9F7
- \--strip-shadow #2A7DE2

## Type

Headings

Urbanist

Doceree at a glance

Body

Urbanist

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

- 17pxDoceree
- 1rem · 16pxDoceree
- 16pxDoceree
- .95rem · 15.2pxDoceree
- 15pxDoceree
- 14pxDoceree
- 13.5pxDoceree
- 13pxDoceree

## Shape & depth

Cards and panels: 22px corners · buttons and chips: 999px.

### Corner radii

- 999px

  used in 95 rules

- 50%

  used in 28 rules

- 14px

  used in 26 rules

- 20px

  used in 22 rules

- 22px

  used in 19 rules

- 24px

  used in 15 rules

- 18px

  used in 14 rules

- 16px

  used in 13 rules

- 10px

  used in 11 rules

- 28px

  used in 11 rules

### Shadows

- 0 0 0 3px #b094ff24

  used in 4 rules

- inset 0 1px #fffffff2,0 6px 20px #6b4fb814

  used in 4 rules

- 0 10px 22px #7c5ef052

  used in 3 rules

- 0 0 0 3px #7b61ff47

  used in 3 rules

- 0 12px 26px #7b61ff1f

  used in 3 rules

- 0 10px 24px #7b61ff47

  used in 2 rules

### Gradients

- linear-gradient(135deg,#f6f1ff,#ebe1ff)

  used in 7 rules

- linear-gradient(#fff 0%,#fdfcff 100%)

  used in 6 rules

- linear-gradient(#0000 0%,#000000b3 28%,#000000e6 100%)

  used in 6 rules

- linear-gradient(90deg,#0000 0%,#000 8% 92%,#0000 100%)

  used in 6 rules

- linear-gradient(#8b74ff 0%,#7b61ff 48%,#7159f5 100%)

  used in 5 rules

- linear-gradient(135deg,#7b61ff,#9b66ff)

  used in 5 rules

Breakpoints: 420px · 480px · 520px · 560px · 580px · 600px · 640px · 680px · 720px · 760px · 768px · 820px

## Voice

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

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

```
---
generator: clinical-terminal-brand-kit
company: "Doceree"
domain: "doceree.com"
colors:
  primary: "#8D52E9"
  onPrimary: "#FFFFFF"
  dark: "#2C2E42"
  accent: "#7B61FF"
  highlight: "#B063DC"
  background: "#F8F7FF"
ground:
  mode: light
  hex: "#F8F7FF"
  ink: "#2C2E42"
  accent: "#8A4FE6"
fonts:
  heading: "Urbanist"
  body: "Urbanist"
radius:
  card: "22px"
  button: "999px"
---

# Design System — Doceree

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

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

## Color
- **Accent on the ground: #8A4FE6** (4.55:1), adjusted from Doceree's primary #8D52E9 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #8D52E9** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (4.65:1).
- Secondary accent #7B61FF: charts and a second data series only.
- Highlight #B063DC (from Doceree's logo gradient): sparing emphasis, never body text.
- Quote every hex exactly as written above.

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

## Shape
- Cards and panels: 22px corners. Buttons and chips: 999px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Color Purple** (`--color-purple-N`): 50 `#FAF5FF` · 100 `#F3E8FF` · 200 `#E9D5FF` · 300 `#D9B3FF` · 400 `#C07EFF` · 600 `#9810FA` · 700 `#8200DA`
- **Color Gray** (`--color-gray-N`): 100 `#F3F4F6` · 500 `#6A7282` · 600 `#4A5565` · 700 `#364153` · 900 `#101828`
- **Lilac** (`--lilac-N`): 50 `#FDFCFF` · 100 `#F8FBFF` · 150 `#F7F7FF` · 200 `#F6F1FF` · 250 `#F3ECFF` · 300 `#EFE6FF` · 400 `#F0EAFF` · 500 `#EBE4FB`

### Other named colors

- `--color-black`: `#000000`
- `--color-white`: `#FFFFFF`
- `--background`: `#F8F7FF`
- `--foreground`: `#2C2E42`
- `--doceree-purple`: `#7B61FF`
- `--bg`: `#F8F7FF`
- `--text`: `#2C2E42`
- `--text-strong`: `#2B2F4F`
- `--muted`: `#6F7191`
- `--border-soft`: `#EBE7F8`
- `--border-card`: `#D8D0F4`
- `--border-card-strong`: `#CBB5FF`
- `--purple`: `#7B61FF`
- `--purple-deep`: `#2A1B4F`
- `--purple-darker`: `#1A1234`
- `--accent`: `#7B61FF`
- `--ink`: `#23263A`
- `--strip-border-hover`: `#BCD9F7`
- `--strip-shadow`: `#2A7DE2`

### Typefaces

- Urbanist (`--font-urbanist`) — on Google Fonts
- Urbanist Fallback
- Doceree Logo

### Type scale (most-used sizes)

`17px` · `1rem` · `16px` · `.95rem` · `15px` · `14px` · `13.5px` · `13px` · `12px` · `.72rem` · `11px` · `.68rem`

### Letter-spacing

`-.01em` (26) · `-.02em` (24) · `-.03em` (23) · `-.005em` (15) · `.14em` (13) · `-.025em` (11)

### Corner radii (most-used)

`999px` · `50%` · `14px` · `20px` · `22px` · `24px` · `18px` · `16px` · `10px` · `28px`

### Shadows

- `0 0 0 3px #b094ff24`
- `inset 0 1px #fffffff2,0 6px 20px #6b4fb814`
- `0 10px 22px #7c5ef052`
- `0 0 0 3px #7b61ff47`
- `0 12px 26px #7b61ff1f`
- `0 10px 24px #7b61ff47`

### Gradients

- `linear-gradient(135deg,#f6f1ff,#ebe1ff)`
- `linear-gradient(#fff 0%,#fdfcff 100%)`
- `linear-gradient(#0000 0%,#000000b3 28%,#000000e6 100%)`
- `linear-gradient(90deg,#0000 0%,#000 8% 92%,#0000 100%)`
- `linear-gradient(#8b74ff 0%,#7b61ff 48%,#7159f5 100%)`
- `linear-gradient(135deg,#7b61ff,#9b66ff)`

### Breakpoints

420px · 480px · 520px · 560px · 580px · 600px · 640px · 680px · 720px · 760px · 768px · 820px · 860px · 900px · 960px · 980px · 1024px · 1100px · 1280px
```