Silna Health design system

silnahealth.com

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

CopyCopy design system

Corrections or removal: agent@clinicalterminal.com

Palette

• Ground

  #FFFFFF

  --color-white
• Ink

  #1E0525
• Accent on the ground

  #1E0525
• Primary

  #1E0525
• On primary

  #FFFFFF

  --color-white
• Dark

  #1E0525
• Site background

  #FFFFFF

  --color-white

Other named colors

• --color-black #000000
• --color-white #FFFFFF

Type

• 3.5rem · 56pxSilna Health
• 2.75rem · 44pxSilna Health
• 2.5rem · 40pxSilna Health
• 2.25rem · 36pxSilna Health
• 2rem · 32pxSilna Health
• 1.75rem · 28pxSilna Health
• 1.625rem · 26pxSilna Health
• 1.5rem · 24pxSilna Health

Shape & depth

Cards and panels: 0px corners · buttons and chips: 4px.

Corner radii

• .25rem

  used in 2 rules
• 4px

  used in 2 rules
• 50%

  used in 2 rules
• 6px

  used in 2 rules
• .3125rem

  used in 1 rule
• .375rem

  used in 1 rule
• 2.562px

  used in 1 rule
• 2px

  used in 1 rule
• 3.214px

  used in 1 rule
• 3px

  used in 1 rule

Shadows

• inset 0 0 0 .2px #fff

  used in 1 rule
• inset 0 0 0 .2px #1e0525

  used in 1 rule

Gradients

• linear-gradient(#fff 0 0)

  used in 4 rules
• linear-gradient(152.04deg,#895be714 17.34%,#895be705 100.03%)

  used in 1 rule
• linear-gradient(90deg,#fff 99%,#fff0)

  used in 1 rule
• linear-gradient(168.16deg,#1e05250d -8.68%,#1e052500 102.8%)

  used in 1 rule
• linear-gradient(90deg,#feb5c0,#ffb3be 10%,#f9aebf 39%,#e8a2c5 49%,#ce8ece 60%,#a872db 73%,#885ae7 82%,#7a54d9 87%,#5844b7 97%,#4c3fab)

  used in 1 rule
• linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,0))

  used in 1 rule

Voice

Tone: professional. Energy: low. Written for patients and healthcare professionals.

DESIGN.md

The file Copy design system puts on your clipboard. Open the raw file.

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