---
generator: clinical-terminal-brand-kit
company: "Qventus, Inc"
domain: "qventus.com"
colors:
  primary: "#6700E5"
  onPrimary: "#FFFFFF"
  dark: "#340073"
  accent: "#3DEAC9"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#340073"
  accent: "#6700E5"
fonts:
  heading: "Sora"
  body: "Sora"
radius:
  card: "7px"
  button: "0px"
---

# Design System — Qventus, Inc

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

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

## Color
- **Accent on the ground: #6700E5** (7.75:1). Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #6700E5** for filled shapes (buttons, chips, bars), with #FFFFFF text on it (7.75:1).
- Secondary accent #3DEAC9: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Sora**. Body: **Sora**. Both on Google Fonts.

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

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

## Tokens from the site's stylesheets

### Other named colors

- `--color-aubergine`: `#340073`
- `--color-electric`: `#6700E5`
- `--color-turquoise`: `#3DEAC9`
- `--color-plum`: `#AC77FF`
- `--color-teal`: `#009FA3`
- `--color-light-teal`: `#BDF7F5`
- `--color-charcoal`: `#353535`
- `--color-light-gray`: `#D8D8D8`
- `--color-bone`: `#F6EFEA`
- `--color-terracotta`: `#FF7B6A`
- `--color-burnt-orange`: `#FFA847`
- `--color-power-blue`: `#7485E6`
- `--color-green`: `#96E388`
- `--color-white`: `#FFFFFF`
- `--color-lightest-plum-bkg`: `#F5F2F7`
- `--color-charcoal-2`: `#353535`
- `--color-lightest-plum-1`: `#EEE4FF`
- `--color-lightest-plum-2`: `#F5EFFF`

### Typefaces

- Soleil
- Soleil !important

### Type scale (most-used sizes)

`45px` · `36.909px` · `26px` · `25px` · `24px` · `19px` · `18px` · `16px` · `1rem` · `14px` · `13px` · `12px`

### Letter-spacing

`1.9px` (4) · `1.2px` (4)

### Corner radii (most-used)

`20px` · `50%` · `7px` · `10px` · `12px` · `30px` · `100px` · `4px` · `60px` · `15px`

### Shadows

- `none !important`
- `0px 4.363px 76.355px 4.363px rgba(110, 110, 110, 0.15)`
- `0 0.5rem 1rem rgba(0, 0, 0, 0.15)`
- `none!important`
- `0 8px 24px rgba(0, 0, 0, 0.25)`

### Gradients

- `linear-gradient(180deg, #7CCFFB 0%, #A4DFFF 100%)`
- `linear-gradient(130deg, rgba(124, 207, 251, 0.40) 4.54%, rgba(255, 255, 255, 0.40) 132.05%)`
- `linear-gradient(180deg, #7ccffb00 0%, #a4dfff00 100%)`
- `linear-gradient(0deg, rgba(18, 20, 32, 0.80) 0%, rgba(18, 20, 32, 0.80) 100%)`
- `radial-gradient(circle, transparent 61%, black 61%)`
- `radial-gradient(209.49% 178.61% at 87.15% 117.88%, #250E3B 0%, #121420 77.5%)`

### Breakpoints

480px · 576px · 767px · 768px · 991px · 992px · 1024px · 1025px · 1200px · 1400px · 1600px