Amrita Medical Solutions design system

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

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

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

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