[Design systems](/design-systems/) / Amrita Medical Solutions

# Amrita Medical Solutions design system

amritamedical.com

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

Corrections or removal: <agent@clinicalterminal.com>

A

## Palette

- Ground

  \#FBFBF3

- Ink

  \#09371F

- Accent on the ground

  \#11528F

- Primary

  \#11528F

  \--divider-bottom-color

- On primary

  \#FFFCF8

- Secondary accent

  \#AFCEF8

- Dark

  \#09371F

- Site background

  \#FBFBF3

## Color ramps

Wbu Color Blue

0

\#0F2CCF

100

\#2F5DFF

200

\#597DFF

300

\#ACBEFF

400

\#D5DFFF

500

\#EAEFFF

600

\#F5F7FF

Wbu Color Black

0

\#151414

100

\#383838

200

\#525150

300

\#767574

400

\#A8A6A5

500

\#E0DFDF

600

\#F1F0EF

Wbu Color Red

0

\#9C2426

100

\#DF3336

200

\#E55C5E

300

\#ED8F90

400

\#F4B8B9

500

\#F9D6D7

600

\#FCEBEB

Wbu Color Green

0

\#0D4F3D

100

\#4B916D

200

\#97C693

300

\#BDE2A7

400

\#DAF3C0

500

\#EFFAE5

600

\#F1F5ED

Wbu Color Yellow

0

\#D49341

100

\#F9AD4D

200

\#FABD71

300

\#FCD29D

400

\#FDEAD2

500

\#FEF3E5

600

\#FEF6ED

Wbu Color Orange

0

\#AE3E09

100

\#FF8044

200

\#FE9361

300

\#FDA77F

400

\#FBCFBB

500

\#FBE3D9

600

\#FDF1EC

Wbu Color Purple

0

\#5000AA

100

\#7200F3

200

\#8B2DF5

300

\#BE89F9

400

\#D7B7FB

500

\#F1E5FE

600

\#F8F2FF

Wbu Color Ai

0

\#4D3DD0

100

\#5A48F5

200

\#7B6DF7

300

\#A59BFA

400

\#D6D1FC

500

\#E7E4FE

600

\#EEECFE

## Other named colors

- \--wut-bg-color #FFFFFF
- \--wut-text-color #000000
- \--wut-disabled-color #969696
- \--wut-placeholder-color #646464
- \--wut-secondary-cta-color #000000
- \--wut-input-border-color #000000
- \--wut-input-hover-and-focus-border-color #000000
- \--wut-selection-text-bg-color #000000
- \--wut-meta-data-color #646464
- \--wut-clear-button-bg-color #000000
- \--divider-bottom-color #11528F
- \--stroke #2B2716
- \--fill #11528F

## Type

Headings

Archivo · closest free match for Rozha One

Amrita Medical Solutions at a glance

Body

Archivo · closest free match for avenir-lt-w01\_35-light1475496

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

- 40pxAmrita Medical Solutions
- 32pxAmrita Medical Solutions
- 30pxAmrita Medical Solutions
- 24pxAmrita Medical Solutions
- 22pxAmrita Medical Solutions
- 18pxAmrita Medical Solutions
- 16pxAmrita Medical Solutions
- 14pxAmrita Medical Solutions

## Shape & depth

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

### Corner radii

- 50%

  used in 9 rules

- 100%

  used in 4 rules

- 24px

  used in 1 rule

- 300px

  used in 1 rule

- 20px

  used in 1 rule

- 2px

  used in 1 rule

- 3px

  used in 1 rule

- 8px

  used in 1 rule

- 4px

  used in 1 rule

- 100px

  used in 1 rule

### Shadows

- 0 0 1px 2px #fff

  used in 3 rules

- 0 0 0 1px #fff,0 0 0 3px #116dff!important

  used in 2 rules

- none!important

  used in 2 rules

- inset 0 0 1px 2px #116dff,inset 0 0 7px 0 #fff,0 0 10px -5px #116dff

  used in 2 rules

- inset 0 0 1px 2px #116dff,inset 0 0 7px 0 #fff,inset 0 0 10px -5px #116dff

  used in 2 rules

- 0 0 #000

  used in 1 rule

### Gradients

- linear-gradient(0deg,transparent,#000 30px)

  used in 2 rules

- linear-gradient(270deg,#000 -100%,#000 0,#000 40%,transparent 50%,transparent 0,#000 60%,#000 100%,#000 200%)

  used in 2 rules

Breakpoints: 300px · 500px · 659px · 660px · 685px · 686px · 740px · 886px · 980px

## Voice

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

```
---
generator: clinical-terminal-brand-kit
company: "Amrita Medical Solutions"
domain: "amritamedical.com"
colors:
  primary: "#11528F"
  onPrimary: "#FFFCF8"
  dark: "#09371F"
  accent: "#AFCEF8"
  background: "#FBFBF3"
ground:
  mode: light
  hex: "#FBFBF3"
  ink: "#09371F"
  accent: "#11528F"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "4px"
  button: "0px"
---

# Design System — Amrita Medical Solutions

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

## Ground
- **Light ground** (#FBFBF3), from Amrita Medical Solutions's site background #FBFBF3. Pages and panels sit on it.
- Main text: #09371F (12.8:1 on the ground).
- Secondary text is #09371F at 88% / 76% / 60%; hairlines and plate borders #09371F at 16%.

## Color
- **Accent on the ground: #11528F** (7.69:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #11528F** for filled shapes (buttons, chips, bars), with #FFFCF8 text on it (7.81:1).
- Secondary accent #AFCEF8: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Amrita Medical Solutions's site uses Rozha One / avenir-lt-w01_35-light1475496; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Wbu Color Blue** (`--wbu-color-blue-N`): 0 `#0F2CCF` · 100 `#2F5DFF` · 200 `#597DFF` · 300 `#ACBEFF` · 400 `#D5DFFF` · 500 `#EAEFFF` · 600 `#F5F7FF`
- **Wbu Color Black** (`--wbu-color-black-N`): 0 `#151414` · 100 `#383838` · 200 `#525150` · 300 `#767574` · 400 `#A8A6A5` · 500 `#E0DFDF` · 600 `#F1F0EF`
- **Wbu Color Red** (`--wbu-color-red-N`): 0 `#9C2426` · 100 `#DF3336` · 200 `#E55C5E` · 300 `#ED8F90` · 400 `#F4B8B9` · 500 `#F9D6D7` · 600 `#FCEBEB`
- **Wbu Color Green** (`--wbu-color-green-N`): 0 `#0D4F3D` · 100 `#4B916D` · 200 `#97C693` · 300 `#BDE2A7` · 400 `#DAF3C0` · 500 `#EFFAE5` · 600 `#F1F5ED`
- **Wbu Color Yellow** (`--wbu-color-yellow-N`): 0 `#D49341` · 100 `#F9AD4D` · 200 `#FABD71` · 300 `#FCD29D` · 400 `#FDEAD2` · 500 `#FEF3E5` · 600 `#FEF6ED`
- **Wbu Color Orange** (`--wbu-color-orange-N`): 0 `#AE3E09` · 100 `#FF8044` · 200 `#FE9361` · 300 `#FDA77F` · 400 `#FBCFBB` · 500 `#FBE3D9` · 600 `#FDF1EC`
- **Wbu Color Purple** (`--wbu-color-purple-N`): 0 `#5000AA` · 100 `#7200F3` · 200 `#8B2DF5` · 300 `#BE89F9` · 400 `#D7B7FB` · 500 `#F1E5FE` · 600 `#F8F2FF`
- **Wbu Color Ai** (`--wbu-color-ai-N`): 0 `#4D3DD0` · 100 `#5A48F5` · 200 `#7B6DF7` · 300 `#A59BFA` · 400 `#D6D1FC` · 500 `#E7E4FE` · 600 `#EEECFE`

### Other named colors

- `--wut-bg-color`: `#FFFFFF`
- `--wut-text-color`: `#000000`
- `--wut-disabled-color`: `#969696`
- `--wut-placeholder-color`: `#646464`
- `--wut-secondary-cta-color`: `#000000`
- `--wut-input-border-color`: `#000000`
- `--wut-input-hover-and-focus-border-color`: `#000000`
- `--wut-selection-text-bg-color`: `#000000`
- `--wut-meta-data-color`: `#646464`
- `--wut-clear-button-bg-color`: `#000000`
- `--divider-bottom-color`: `#11528F`
- `--stroke`: `#2B2716`
- `--fill`: `#11528F`

### Typefaces

- Madefor Display (`--wbu-heading-font-stack`)
- normal normal normal 60px/1.4em 'rozha one (`--font_0`)
- normal normal normal 16px/1.4em din-next-w01-light (`--font_1`)
- normal normal normal 50px/1.4em 'rozha one (`--font_2`)
- normal normal normal 40px/1.4em 'rozha one (`--font_3`)
- normal normal normal 25px/1.4em 'rozha one (`--font_4`)
- normal normal normal 20px/1.4em avenir-lt-w01_85-heavy1475544 (`--font_5`)
- normal normal normal 14px/1.4em avenir-lt-w01_85-heavy1475544 (`--font_6`)
- normal normal normal 25px/1.4em avenir-lt-w01_35-light1475496 (`--font_7`)
- normal normal normal 16px/1.4em avenir-lt-w01_35-light1475496 (`--font_8`)
- normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496 (`--font_9`)
- normal normal normal 12px/1.4em din-next-w01-light (`--font_10`)
- normal normal 700 20px/1.4em avenir-lt-w01_35-light1475496 (`--fnt`)
- normal normal normal 16px/16px avenir-lt-w01_35-light1475496 (`--buttonsFontHover`)
- normal normal normal 40px/1.4em "rozha one (`--headerThreeFont`)
- normal normal normal 25px/1.4em "rozha one (`--headerFourFont`)
- normal normal normal 16px/20px futura-lt-w01-book (`--inputValueFont`)
- futura-lt-w01-book (`--inputValueFont-family`)
- normal normal bold 16px/20px futura-lt-w01-book (`--submitButtonFont`)
- normal normal normal 12px/15px helvetica-w01-roman (`--inputNoteFont`)
- helvetica-w01-roman (`--inputNoteFont-family`)
- normal normal normal 25px/31px futura-lt-w01-book (`--headerTwoFont`)
- normal normal normal 38px/47px playfairdisplay-bold (`--headerOneFont`)
- playfairdisplay-bold (`--headerOneFont-family`)
- normal normal normal 14px/17px futura-lt-w01-book (`--inputLabelFont`)
- avenir-lt-w01_35-light1475496 (`--buttonsFont-family`)
- rozha one (`--headerThreeFont-family`)
- avenir-lt-w01_85-heavy1475544 (`--headerFiveFont-family`)
- normal normal normal 60px/1.4em "rozha one (`--wix-font-Title`)
- din-next-w01-light (`--wix-font-Menu-family`)
- normal normal normal 50px/1.4em "rozha one (`--wix-font-Page-title`)
- normal normal normal 14px/19.599999999999998px avenir-lt-w01_35-light1475496 (`--category-label-text-textFont`)
- normal normal 700 18px/22px futura-lt-w01-book (`--post-pg-grid-post-list-titleFont`)
- normal normal normal 16px/20px avenir-lt-w01_35-light1475496 (`--post-pg-grid-post-list-descriptionFont`)

### Type scale (most-used sizes)

`40px` · `32px` · `30px` · `24px` · `22px` · `18px` · `16px` · `14px` · `13px` · `12px` · `11px` · `10px`

### Letter-spacing

`-0.5px` (6)

### Corner radii (most-used)

`50%` · `100%` · `24px` · `300px` · `20px` · `2px` · `3px` · `8px` · `4px` · `100px`

### Shadows

- `0 0 1px 2px #fff`
- `0 0 0 1px #fff,0 0 0 3px #116dff!important`
- `none!important`
- `inset 0 0 1px 2px #116dff,inset 0 0 7px 0 #fff,0 0 10px -5px #116dff`
- `inset 0 0 1px 2px #116dff,inset 0 0 7px 0 #fff,inset 0 0 10px -5px #116dff`
- `0 0 #000`

### Gradients

- `linear-gradient(0deg,transparent,#000 30px)`
- `linear-gradient(270deg,#000 -100%,#000 0,#000 40%,transparent 50%,transparent 0,#000 60%,#000 100%,#000 200%)`

### Breakpoints

300px · 500px · 659px · 660px · 685px · 686px · 740px · 886px · 980px
```