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.

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

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

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

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

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