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