Clinical Terminal
AboutSign in

Xsolis design system

xsolis.com

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

Corrections or removal: agent@clinicalterminal.com

Xsolis homepage

Palette

Other named colors

Type

Headings
Archivo · closest free match for Sofia-Pro

Xsolis at a glance

Body
Archivo · closest free match for Sofia-Pro

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 320px · 350px · 480px · 600px · 601px · 640px · 760px · 761px · 768px · 769px · 783px · 960px

Voice

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

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Xsolis"
domain: "xsolis.com"
colors:
  primary: "#00B5ED"
  onPrimary: "#00355A"
  dark: "#000000"
  background: "#DEF3FC"
ground:
  mode: light
  hex: "#DEF3FC"
  ink: "#000000"
  accent: "#0073A8"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "16px"
  button: "0px"
---

# Design System — Xsolis

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

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

## Color
- **Accent on the ground: #0073A8** (4.56:1), adjusted from Xsolis's primary #00B5ED so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #00B5ED** for filled shapes (buttons, chips, bars), with #00355A text on it (5.33:1).
- Quote every hex exactly as written above.

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

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--c-black`: `#000000`
- `--c-white`: `#FFFFFF`
- `--c-ice-blue`: `#DEF3FC`
- `--c-blue`: `#00B5ED`
- `--c-navy`: `#00355A`
- `--color`: `#000000`

### Typefaces

- sofia-pro
- Trebuchet MS
- Poppins — on Google Fonts
- sans-serif!important

### Type scale (most-used sizes)

`36px` · `30px` · `28px` · `24px` · `22px` · `20px` · `18px` · `16px` · `15px` · `14px` · `13px` · `12px`

### Letter-spacing

`2px` (10) · `-1px` (8) · `0.5px` (6) · `.042px` (4) · `-2px` (3) · `-.5px` (2)

### Corner radii (most-used)

`20px` · `50%` · `3px` · `4px` · `1000px` · `12px` · `16px` · `30px` · `100px` · `6px`

### Shadows

- `inset 0 0 0 3px`
- `0 4px 12px rgba(0, 181, 237, 0.3)`
- `0 0 5px rgba(0,0,0,.3)`
- `0 0 3px rgba(0,0,0,.3)`
- `inset 0 0 0 2px #ff6f6f`
- `0 4px 5px rgba(0,0,0,.15)`

### Gradients

- `linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%)`
- `linear-gradient(top,#fff 50%,#eee 100%)`
- `linear-gradient(top,#eee 50%,#ccc 100%)`
- `linear-gradient(top,#fff 0,#eee 50%)`
- `linear-gradient(top,#eee 50%,#fff 100%)`
- `radial-gradient(149.19% 149.19% at 35.24% 28.78%,#def3fc 27.85%,#00b5ed)`

### Breakpoints

320px · 350px · 480px · 600px · 601px · 640px · 760px · 761px · 768px · 769px · 783px · 960px · 961px · 992px · 1300px · 1301px · 1440px · 1500px · 1800px · 1920px · 2000px