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