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