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

# ASIMILY design system

asimily.com

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

Corrections or removal: <agent@clinicalterminal.com>

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

## Palette

- Ground

  \#FFFFFF

  \--color--white

- Ink

  \#1A2129

- Accent on the ground

  \#25493E

- Primary

  \#25493E

  \--color--primary1

- On primary

  \#FFFFFF

  \--color--white

- Secondary accent

  \#A2FCB5

  \--color--primary4

- Dark

  \#1A2129

  \--color--textcolorprimary

- Site background

  \#FFFFFF

  \--color--white

## Other named colors

- \--color--primary1 #25493E
- \--color--primary2 #346758
- \--color--primary3 #69C9AD
- \--color--primary4 #A2FCB5
- \--color--secondary1 #283733
- \--color--secondary2 #3E504F
- \--color--secondary3 #729091
- \--color--contrast1 #A62080
- \--color--contrast3 #DBB11A
- \--color--lightgrey1 #BFC6CC
- \--color--lightgrey2 #D9DEE2
- \--color--lightgrey3 #EDF1F4
- \--color--darkgrey1 #434D56
- \--color--darkgrey2 #5E6B74
- \--color--darkgrey3 #A4ABB1
- \--color--textcolorprimary #1A2129
- \--color--textcolorsecondary #434D56
- \--color--textcolortertiary #A9B2B9
- \--color--textcolor\_darkmode #EDF1F4
- \--color--textcolor2\_darkmode #A9B2B9
- \--color--white #FFFFFF
- \--color--darkbg #1A2129
- \--color--content1 #232C35
- \--color--content2 #5E6B74
- \--color--primary3-20 #69C9AD

## Type

Headings

Archivo · closest free match for OpenSansExtraBold

ASIMILY at a glance

Body

Archivo · closest free match for OpenSansBold

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

- 2.5rem · 40pxASIMILY
- 1.5rem · 24pxASIMILY
- 1.25rem · 20pxASIMILY
- 20pxASIMILY
- 1rem · 16pxASIMILY
- 16pxASIMILY
- .9375rem · 15pxASIMILY
- 14pxASIMILY

## Shape & depth

Cards and panels: 10px corners · buttons and chips: 8px.

### Corner radii

- 8px

  used in 9 rules

- 20px

  used in 8 rules

- 50%

  used in 7 rules

- 1rem

  used in 7 rules

- 10px

  used in 5 rules

- 12px

  used in 4 rules

- 32px

  used in 4 rules

- 16px

  used in 4 rules

- 6px

  used in 3 rules

- 40px

  used in 2 rules

### Shadows

- 0 0 0 .25rem #0d6efd40

  used in 4 rules

- 0 4px 20px 0 #69c9ad33

  used in 4 rules

- 0 1px 2px 0 #1018280d

  used in 4 rules

- 0 0 0 1px #fff,0 0 0 .25rem #0d6efd40

  used in 2 rules

- 0 0 0 0.25rem #0d6efd40

  used in 2 rules

- 0 0.5rem 1rem #00000026

  used in 1 rule

### Gradients

- linear-gradient(130deg,#000 55%,#000c 75%,#000 95%)

  used in 2 rules

- linear-gradient(180deg,#ffffff26,#fff0)

  used in 1 rule

- linear-gradient(45deg,#ffffff26 25%,#0000 0,#0000 50%,#ffffff26 0,#ffffff26 75%,#0000 0,#0000)

  used in 1 rule

- linear-gradient(135deg,#00d084,#0693e3)

  used in 1 rule

- linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)

  used in 1 rule

- linear-gradient(135deg,#faaca8,#dad0ec)

  used in 1 rule

Breakpoints: 420px · 450px · 575px · 576px · 600px · 767px · 768px · 782px · 992px · 999px · 1023px · 1024px

## Voice

Tone: professional. Energy: medium. Written for enterprises.

## 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%2F100302164.md?alt=media).

```
---
generator: clinical-terminal-brand-kit
company: "ASIMILY"
domain: "asimily.com"
colors:
  primary: "#25493E"
  onPrimary: "#FFFFFF"
  dark: "#1A2129"
  accent: "#A2FCB5"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#1A2129"
  accent: "#25493E"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "10px"
  button: "8px"
---

# Design System — ASIMILY

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

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

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

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

## Shape
- Cards and panels: 10px corners. Buttons and chips: 8px.

## Voice
- Tone: professional. Energy: medium. Written for enterprises.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Other named colors

- `--color--primary1`: `#25493E`
- `--color--primary2`: `#346758`
- `--color--primary3`: `#69C9AD`
- `--color--primary4`: `#A2FCB5`
- `--color--secondary1`: `#283733`
- `--color--secondary2`: `#3E504F`
- `--color--secondary3`: `#729091`
- `--color--contrast1`: `#A62080`
- `--color--contrast3`: `#DBB11A`
- `--color--lightgrey1`: `#BFC6CC`
- `--color--lightgrey2`: `#D9DEE2`
- `--color--lightgrey3`: `#EDF1F4`
- `--color--darkgrey1`: `#434D56`
- `--color--darkgrey2`: `#5E6B74`
- `--color--darkgrey3`: `#A4ABB1`
- `--color--textcolorprimary`: `#1A2129`
- `--color--textcolorsecondary`: `#434D56`
- `--color--textcolortertiary`: `#A9B2B9`
- `--color--textcolor_darkmode`: `#EDF1F4`
- `--color--textcolor2_darkmode`: `#A9B2B9`
- `--color--white`: `#FFFFFF`
- `--color--darkbg`: `#1A2129`
- `--color--content1`: `#232C35`
- `--color--content2`: `#5E6B74`
- `--color--primary3-20`: `#69C9AD`

### Typefaces

- OpenSansRegular (`--font-family--OpenSansRegular`)
- OpenSansExtraBold (`--font-family--OpenSansExtraBold`)
- OpenSansBold (`--font-family--OpenSansBold`)
- ExoRegular (`--font-family--ExoRegular`)
- ExoMedium (`--font-family--ExoMedium`)
- ExoSemiBold (`--font-family--ExoSemiBold`)
- ExoBold (`--font-family--ExoBold`)

### Type scale (most-used sizes)

`2.5rem` · `1.5rem` · `1.25rem` · `20px` · `1rem` · `16px` · `.9375rem` · `14px` · `.875rem` · `13px` · `.8125rem` · `.75rem`

### Letter-spacing

`1px` (6) · `.125rem` (3) · `.0625rem` (1) · `.5px` (1) · `2px` (1) · `.005em` (1)

### Corner radii (most-used)

`8px` · `20px` · `50%` · `1rem` · `10px` · `12px` · `32px` · `16px` · `6px` · `40px`

### Shadows

- `0 0 0 .25rem #0d6efd40`
- `0 4px 20px 0 #69c9ad33`
- `0 1px 2px 0 #1018280d`
- `0 0 0 1px #fff,0 0 0 .25rem #0d6efd40`
- `0 0 0 0.25rem #0d6efd40`
- `0 0.5rem 1rem #00000026`

### Gradients

- `linear-gradient(130deg,#000 55%,#000c 75%,#000 95%)`
- `linear-gradient(180deg,#ffffff26,#fff0)`
- `linear-gradient(45deg,#ffffff26 25%,#0000 0,#0000 50%,#ffffff26 0,#ffffff26 75%,#0000 0,#0000)`
- `linear-gradient(135deg,#00d084,#0693e3)`
- `linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)`
- `linear-gradient(135deg,#faaca8,#dad0ec)`

### Breakpoints

420px · 450px · 575px · 576px · 600px · 767px · 768px · 782px · 992px · 999px · 1023px · 1024px · 1025px · 1200px · 1400px · 1440px
```