---
generator: clinical-terminal-brand-kit
company: "Silna Health"
domain: "silnahealth.com"
colors:
  primary: "#1E0525"
  onPrimary: "#FFFFFF"
  dark: "#1E0525"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#1E0525"
  accent: "#1E0525"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "4px"
---

# Design System — Silna Health

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

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

## Color
- **Accent on the ground: #1E0525** (19.03:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #1E0525** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (19.03:1).
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Silna Health's site uses ABCArizonaFlare / EnduroWeb; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--color-black`: `#000000`
- `--color-white`: `#FFFFFF`

### Typefaces

- ABCArizonaFlare (`--font-heading`)
- EnduroWeb (`--font-body`)

### Type scale (most-used sizes)

`3.5rem` · `2.75rem` · `2.5rem` · `2.25rem` · `2rem` · `1.75rem` · `1.625rem` · `1.5rem` · `1.3125rem` · `1.25rem` · `1.125rem` · `1rem`

### Letter-spacing

`-.025em` (7) · `.05em` (3) · `-.01em` (2) · `-.02em` (2) · `-.005em` (1) · `-.5px` (1)

### Corner radii (most-used)

`.25rem` · `4px` · `50%` · `6px` · `.3125rem` · `.375rem` · `2.562px` · `2px` · `3.214px` · `3px`

### Shadows

- `inset 0 0 0 .2px #fff`
- `inset 0 0 0 .2px #1e0525`

### Gradients

- `linear-gradient(#fff 0 0)`
- `linear-gradient(152.04deg,#895be714 17.34%,#895be705 100.03%)`
- `linear-gradient(90deg,#fff 99%,#fff0)`
- `linear-gradient(168.16deg,#1e05250d -8.68%,#1e052500 102.8%)`
- `linear-gradient(90deg,#feb5c0,#ffb3be 10%,#f9aebf 39%,#e8a2c5 49%,#ce8ece 60%,#a872db 73%,#885ae7 82%,#7a54d9 87%,#5844b7 97%,#4c3fab)`
- `linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,0))`