Clinical Terminal
AboutSign in

Brellium design system

brellium.com

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

Corrections or removal: agent@clinicalterminal.com

Brellium homepage

Palette

Color ramps

Dove
2
#706A60
3
#4C463E
4
#36312A
Peach
0
#FFDDBC
1
#E69256
2
#CC6C29
3
#A65319
Gray
50
#FBF8F0
100
#F3EEE4
200
#E7E1D5
300
#D8D1C4
400
#A6A096

Other named colors

Type

Headings
Archivo · closest free match for Playfair

Brellium at a glance

Body
Archivo · closest free match for dmSans

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

Shape & depth

Cards and panels: 11px corners · buttons and chips: 4px.

Corner radii

Shadows

Gradients

Breakpoints: 420px · 480px · 520px · 640px · 720px · 760px · 768px · 769px · 860px · 880px · 900px · 980px

Voice

Tone: professional. Energy: medium. Written for businesses.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

---
generator: clinical-terminal-brand-kit
company: "Brellium"
domain: "brellium.com"
colors:
  primary: "#FBBE84"
  onPrimary: "#2A2722"
  dark: "#2A2722"
  background: "#FFFBED"
ground:
  mode: light
  hex: "#FFFBED"
  ink: "#2A2722"
  accent: "#9F682D"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "11px"
  button: "4px"
---

# Design System — Brellium

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

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

## Color
- **Accent on the ground: #9F682D** (4.51:1), adjusted from Brellium's primary #FBBE84 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #FBBE84** for filled shapes (buttons, chips, bars), with #2A2722 text on it (9.07:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Brellium's site uses Playfair / dmSans; these are the closest free look-alikes.

## Shape
- Cards and panels: 11px corners. Buttons and chips: 4px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Dove** (`--dove-N`): 2 `#706A60` · 3 `#4C463E` · 4 `#36312A`
- **Peach** (`--peach-N`): 0 `#FFDDBC` · 1 `#E69256` · 2 `#CC6C29` · 3 `#A65319`
- **Gray** (`--gray-N`): 50 `#FBF8F0` · 100 `#F3EEE4` · 200 `#E7E1D5` · 300 `#D8D1C4` · 400 `#A6A096`

### Other named colors

- `--ecru`: `#FFFBED`
- `--ink`: `#2A2722`
- `--dove`: `#A6A096`
- `--mauve`: `#AF968C`
- `--warm`: `#DDD8D3`
- `--cool`: `#C8CBCB`
- `--peach`: `#FBBE84`
- `--lilac`: `#DCC7FB`
- `--salmon`: `#F8A0A1`
- `--hairline`: `#2A2722`
- `--purple`: `#2A2722`
- `--purple-hover`: `#423C33`
- `--purple-light`: `#CC6C29`
- `--purple-dark`: `#2A2722`
- `--purple-deeper`: `#1E1B17`
- `--purple-muted`: `#8C8579`
- `--lavender`: `#F4EEE1`
- `--text-dark`: `#2A2722`
- `--text-body`: `#4C463E`
- `--text-muted`: `#6E675C`
- `--white`: `#FFFFFF`
- `--green`: `#E69256`
- `--green-light`: `#FFDDBC`
- `--amber`: `#CC6C29`
- `--amber-light`: `#FFDDBC`
- `--red`: `#E37373`
- `--red-light`: `#FECFD0`
- `--lilac-1`: `#C1A7EA`
- `--lilac-2`: `#B093DE`
- `--salmon-2`: `#E37373`

### Typefaces

- __dmSans_d9b0f4 (`--font-dm-sans`)
- __jakarta_df44ca (`--font-jakarta`)
- __playfair_d13d2b (`--font-playfair`)
- __dmSans_Fallback_d9b0f4
- __jakarta_Fallback_df44ca
- __playfair_Fallback_d13d2b

### Type scale (most-used sizes)

`22px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px` · `11px` · `10.5px` · `10px` · `9.5px`

### Letter-spacing

`.08em` (34) · `.06em` (32) · `-.02em` (19) · `.07em` (14) · `.05em` (12) · `-.03em` (10)

### Corner radii (most-used)

`50%` · `16px` · `8px` · `10px` · `100px` · `20px` · `6px` · `24px` · `14px` · `12px`

### Shadows

- `0 30px 80px rgba(0,0,0,.06),0 0 40px rgba(42,39,34,.03)`
- `0 20px 60px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05)`
- `0 36px 60px -34px rgba(42,39,34,.4)`
- `inset 0 0 0 1px rgba(42,39,34,.05)`
- `0 24px 80px rgba(204,108,41,.15),0 0 0 1px rgba(204,108,41,.06)`
- `0 0 0 3px rgba(204,108,41,.1)`

### Gradients

- `linear-gradient(180deg,#000,transparent 32% 68%,#000)`
- `radial-gradient(rgba(42,39,34,.06) 1px,transparent 1.4px)`
- `radial-gradient(ellipse 70% 80% at 78% 30%,#000 0,transparent 70%)`
- `linear-gradient(135deg,rgba(42,39,34,.08),hsla(29,94%,75%,.04))`
- `radial-gradient(circle,transparent 48.5%,#000 49.5%,#000 50.5%,transparent 51.5%)`
- `radial-gradient(circle,hsla(29,94%,75%,.06) 0,transparent 70%)`

### Breakpoints

420px · 480px · 520px · 640px · 720px · 760px · 768px · 769px · 860px · 880px · 900px · 980px · 1024px · 1100px