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

# Medusind design system

medusind.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FFFFFF

  \--color-white

- Ink

  \#171717

- Accent on the ground

  \#B26000

- Primary

  \#F59E0B

  \--color-accent

- On primary

  \#171717

  \--color-ink

- Dark

  \#171717

  \--color-ink

- Site background

  \#FFFFFF

  \--color-white

## Color ramps

Color Neutral

50

\#FAFAFA

100

\#F5F5F5

200

\#E5E5E5

400

\#A1A1A1

500

\#737373

600

\#525252

## Other named colors

- \--color-black #000000
- \--color-white #FFFFFF
- \--color-ink #171717
- \--color-canvas #FFFFFF
- \--color-subdued #737373
- \--color-accent #F59E0B
- \--color-cornflower-blue #4C87C6
- \--color-navy #08457E
- \--color-dark-navy #04223E
- \--color-sky-blue #EEF5FF
- \--color-light-blue #D7E6FF
- \--color-orange #F7941D
- \--focus-ring #FFFFFF
- \--color-red-500 #FB2C36
- \--color-amber-300 #FFD236
- \--color-amber-400 #FCBB00
- \--color-green-400 #05DF72
- \--color-blue-400 #54A2FF
- \--color-purple-500 #AC4BFF
- \--color-slate-500 #62748E
- \--color-slate-600 #45556C
- \--color-gray-400 #99A1AF

## Type

Headings

Archivo · closest free match for Oxygen

Medusind at a glance

Body

Roboto

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

- 56pxMedusind
- 2.75rem · 44pxMedusind
- 1.5rem · 24pxMedusind
- 1.375rem · 22pxMedusind
- 18pxMedusind
- 17pxMedusind
- 16pxMedusind
- .9375rem · 15pxMedusind

## Shape & depth

Cards and panels: 0px corners · buttons and chips: 6px.

### Corner radii

- 2px

  used in 2 rules

- 50%

  used in 2 rules

- .25rem

  used in 1 rule

- 4px

  used in 1 rule

- 6px

  used in 1 rule

- 3px

  used in 1 rule

### Shadows

- none!important

  used in 1 rule

### Gradients

- linear-gradient(in lab, red, red)

  used in 5 rules

- linear-gradient(#000 50%,#0000)

  used in 2 rules

- linear-gradient(90deg,#0000 25%,#000 60%)

  used in 2 rules

- linear-gradient(#ffffff59,#ffffff59)

  used in 1 rule

- linear-gradient(270deg,#00000080,#0000)

  used in 1 rule

- linear-gradient(90deg,#00000080,#0000)

  used in 1 rule

Breakpoints: 1160px · 1280px

## Voice

Tone: professional. Energy: high. 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%2F100923796.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "Medusind"
domain: "medusind.com"
colors:
  primary: "#F59E0B"
  onPrimary: "#171717"
  dark: "#171717"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#171717"
  accent: "#B26000"
fonts:
  heading: "Archivo"
  body: "Roboto"
radius:
  card: "0px"
  button: "6px"
---

# Design System — Medusind

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

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

## Color
- **Accent on the ground: #B26000** (4.6:1), adjusted from Medusind's primary #F59E0B so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #F59E0B** for filled shapes (buttons, chips, bars), with #171717 text on it (8.35:1).
- Quote every hex exactly as written above.

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

## Shape
- Cards and panels: 0px corners. Buttons and chips: 6px.

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

## Tokens from the site's stylesheets

### Color ramps

- **Color Neutral** (`--color-neutral-N`): 50 `#FAFAFA` · 100 `#F5F5F5` · 200 `#E5E5E5` · 400 `#A1A1A1` · 500 `#737373` · 600 `#525252`

### Other named colors

- `--color-black`: `#000000`
- `--color-white`: `#FFFFFF`
- `--color-ink`: `#171717`
- `--color-canvas`: `#FFFFFF`
- `--color-subdued`: `#737373`
- `--color-accent`: `#F59E0B`
- `--color-cornflower-blue`: `#4C87C6`
- `--color-navy`: `#08457E`
- `--color-dark-navy`: `#04223E`
- `--color-sky-blue`: `#EEF5FF`
- `--color-light-blue`: `#D7E6FF`
- `--color-orange`: `#F7941D`
- `--focus-ring`: `#FFFFFF`
- `--color-red-500`: `#FB2C36`
- `--color-amber-300`: `#FFD236`
- `--color-amber-400`: `#FCBB00`
- `--color-green-400`: `#05DF72`
- `--color-blue-400`: `#54A2FF`
- `--color-purple-500`: `#AC4BFF`
- `--color-slate-500`: `#62748E`
- `--color-slate-600`: `#45556C`
- `--color-gray-400`: `#99A1AF`

### Typefaces

- Roboto (`--font-sans`) — on Google Fonts
- Oxygen (`--font-heading`)

### Type scale (most-used sizes)

`56px` · `2.75rem` · `1.5rem` · `1.375rem` · `18px` · `17px` · `16px` · `.9375rem` · `15px` · `14px` · `13px`

### Letter-spacing

`.05em` (5) · `2px` (3)

### Corner radii (most-used)

`2px` · `50%` · `.25rem` · `4px` · `6px` · `3px`

### Shadows

- `none!important`

### Gradients

- `linear-gradient(in lab, red, red)`
- `linear-gradient(#000 50%,#0000)`
- `linear-gradient(90deg,#0000 25%,#000 60%)`
- `linear-gradient(#ffffff59,#ffffff59)`
- `linear-gradient(270deg,#00000080,#0000)`
- `linear-gradient(90deg,#00000080,#0000)`

### Breakpoints

1160px · 1280px
```