---
generator: clinical-terminal-brand-kit
company: "Axuall"
domain: "axuall.com"
colors:
  primary: "#755EEC"
  onPrimary: "#FFFFFF"
  dark: "#5847B1"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#5847B1"
  accent: "#755EEC"
fonts:
  heading: "Inter"
  body: "Inter"
radius:
  card: "10px"
  button: "99px"
---

# Design System — Axuall

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

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

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

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

## Shape
- Cards and panels: 10px corners. Buttons and chips: 99px.

## 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

- `--token-6a4c20cd-b2aa-4518-9ba5-a317fd22f556`: `#767676`
- `--token-6afad4ef-4f81-4866-8b36-f90afb609b0e`: `#282829`
- `--token-8f8dc9f2-7bc1-40d4-b853-c8714560cf9c`: `#5847B1`
- `--token-0c733b85-0f3c-4608-88d6-a26c99294064`: `#EBEBEB`
- `--token-cb7ab437-9b40-49c0-be09-99738286f555`: `#FBFBFB`
- `--token-384c9150-b0de-49cd-86b3-355e86786bae`: `#00A5AE`
- `--token-94ae4360-52c9-4db1-b94f-1bfc2d9c40f4`: `#FF9E1B`
- `--token-d32ee9cf-0e12-4b06-965a-09bc9afebc3a`: `#FF5151`
- `--token-09e08b46-484d-4957-a18d-d3234571caa5`: `#EF3340`
- `--token-fd0504ab-1658-4094-b01b-03fb2be7a937`: `#BF2933`
- `--token-4d98d9c9-e837-4a0b-9b0a-21fd30db5295`: `#FFC658`
- `--token-88a7d11b-d85e-4e79-b770-57e3d6a32dc5`: `#E8B450`
- `--token-d590ca93-6e32-446c-9d82-1c56ad0af56f`: `#1AC678`
- `--token-5737bd5c-325d-4af0-9c32-d50acfe5cc1a`: `#128D55`
- `--token-0031668e-19de-41bf-95e7-0c68e0762278`: `#1E88E5`
- `--token-dbe3ab5f-350e-4aee-86f9-87bd2af39a0c`: `#3A74B8`
- `--token-b2a3f77f-cbb0-4459-ad4f-3d58730f06d2`: `#FFFFFF`
- `--token-37b3a6c8-27ef-464c-876c-cec6c98f3ccf`: `#F0F0F0`
- `--token-47c35c16-4555-453f-8f8a-e85354c5c567`: `#292153`
- `--token-40d2a9ee-026d-4e83-a2e4-e0e0bcea8ef9`: `#755EEC`
- `--token-f7d9502f-0b4a-4dc1-9e33-ecd39f4a6ac3`: `#F1EFFD`
- `--token-3c43e087-adfc-4466-8945-2f52a403e9ae`: `#B59AFF`
- `--token-1ef9e3a0-a7df-44ca-bec3-2c6070b20405`: `#FFFFFF`
- `--token-bfafb4ac-ba8a-4bd0-a2da-5f8ec6eb534b`: `#68CC58`
- `--token-9b9340e7-7d5e-4793-a4dd-fdfbc2aa3821`: `#8FC7C9`
- `--token-d1979f86-6fd6-41d7-8c0a-3cd69dbe46ab`: `#F5F6F8`
- `--token-3ec989df-9786-408c-b056-9bd73dfe62d2`: `#1E1E1E`
- `--token-5d8d4ac2-5db4-4a42-90be-3419bbc266da`: `#4B4B4B`

### Typefaces

- Inter — on Google Fonts
- Inter Variable
- Fragment Mono
- Switzer
- Inter Placeholder
- Inter Variable Placeholder
- Switzer Placeholder

### Type scale (most-used sizes)

`32px` · `22px` · `16px` · `14px` · `12px`

### Letter-spacing

`-.04em` (3) · `-.02em` (1)

### Corner radii (most-used)

`10px` · `16px` · `8px` · `30px`

### Shadows

- `0 .602187px .602187px -1.25px #0000002e,0 2.28853px 2.28853px -2.5px #00000029,0 10px 10px -3.75px #0000000f`

### Breakpoints

810px · 1200px