---
generator: clinical-terminal-brand-kit
company: "Sectra"
domain: "sectra.com"
colors:
  primary: "#A9BFDC"
  onPrimary: "#000000"
  dark: "#2860A8"
  accent: "#2860A8"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#111111"
  accent: "#647893"
fonts:
  heading: "Archivo"
  body: "Open Sans"
radius:
  card: "4px"
  button: "50px"
---

# Design System — Sectra

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

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

## Color
- **Accent on the ground: #647893** (4.52:1), adjusted from Sectra's primary #A9BFDC so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #A9BFDC** for filled shapes (buttons, chips, bars), with #000000 text on it (11.17:1).
- Secondary accent #2860A8: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Open Sans**. Both on Google Fonts.
- Sectra's site uses Eurostile / Open Sans; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--xxiv-background-color`: `#FFFFFF`
- `--xxiv-link-color`: `#2860A8`

### Typefaces

- icomoon
- Open Sans — on Google Fonts
- Eurostile
- Nunito — on Google Fonts
- &#039

### Type scale (most-used sizes)

`2rem` · `30px` · `1.7rem` · `1.4rem` · `20px` · `1.25rem` · `18px` · `17px` · `16px` · `15px` · `14px` · `12px`

### Letter-spacing

`.5px` (2) · `-.3px` (2) · `.12em` (1) · `.05em` (1)

### Corner radii (most-used)

`50%` · `50px` · `5px` · `1rem` · `150px` · `2px` · `14px` · `0.375rem` · `34px` · `10px`

### Shadows

- `0 0 70px 0 rgba(0,0,0,.25)`
- `0 0 0 0.25rem rgba(13, 110, 253, 0.25)`
- `none !important`
- `inset 0 0 0 1px currentColor`
- `0 0 1px 3px #0C4DA2`
- `0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25)`

### Gradients

- `linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%)`
- `linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))`
- `linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)`
- `linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0))`
- `linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0))`
- `radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0))`

### Breakpoints

350px · 479px · 483px · 486px · 550px · 551px · 576px · 600px · 767px · 768px · 900px · 991px · 992px · 1000px · 1199px · 1200px · 1215px · 1400px · 1500px