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

# 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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fthumbs%2F100016.jpg?alt=media)

## Palette

- Ground

  \#FFFBED

  \--ecru

- Ink

  \#2A2722

- Accent on the ground

  \#9F682D

- Primary

  \#FBBE84

  \--peach

- On primary

  \#2A2722

  \--ink

- Dark

  \#2A2722

  \--ink

- Site background

  \#FFFBED

  \--ecru

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

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

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

- 22pxBrellium
- 18pxBrellium
- 17pxBrellium
- 16pxBrellium
- 15pxBrellium
- 14pxBrellium
- 13pxBrellium
- 12pxBrellium

## Shape & depth

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

### Corner radii

- 50%

  used in 17 rules

- 16px

  used in 15 rules

- 8px

  used in 14 rules

- 10px

  used in 13 rules

- 100px

  used in 9 rules

- 20px

  used in 9 rules

- 6px

  used in 6 rules

- 24px

  used in 6 rules

- 14px

  used in 5 rules

- 12px

  used in 4 rules

### Shadows

- 0 30px 80px rgba(0,0,0,.06),0 0 40px rgba(42,39,34,.03)

  used in 4 rules

- 0 20px 60px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.05)

  used in 1 rule

- 0 36px 60px -34px rgba(42,39,34,.4)

  used in 1 rule

- inset 0 0 0 1px rgba(42,39,34,.05)

  used in 1 rule

- 0 24px 80px rgba(204,108,41,.15),0 0 0 1px rgba(204,108,41,.06)

  used in 1 rule

- 0 0 0 3px rgba(204,108,41,.1)

  used in 1 rule

### Gradients

- linear-gradient(180deg,#000,transparent 32% 68%,#000)

  used in 4 rules

- radial-gradient(rgba(42,39,34,.06) 1px,transparent 1.4px)

  used in 2 rules

- radial-gradient(ellipse 70% 80% at 78% 30%,#000 0,transparent 70%)

  used in 2 rules

- linear-gradient(135deg,rgba(42,39,34,.08),hsla(29,94%,75%,.04))

  used in 2 rules

- radial-gradient(circle,transparent 48.5%,#000 49.5%,#000 50.5%,transparent 51.5%)

  used in 2 rules

- radial-gradient(circle,hsla(29,94%,75%,.06) 0,transparent 70%)

  used in 2 rules

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](https://firebasestorage.googleapis.com/v0/b/clinical-ai-design.firebasestorage.app/o/snapshots%2Fdesign-systems%2Fmd%2F100016.md?alt=media).

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