Clinical Terminal

AKASA design system

akasa.com

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

Corrections or removal: agent@clinicalterminal.com

AKASA homepage

Palette

Other named colors

Type

Headings
Montserrat

AKASA at a glance

Body
Montserrat

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

Shape & depth

Cards and panels: 9px corners · buttons and chips: 9px.

Corner radii

Shadows

Breakpoints: 809px · 810px · 1199px · 1200px

Voice

Tone: bold. Energy: high. Written for businesses.

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "AKASA"
domain: "akasa.com"
colors:
  primary: "#1D334D"
  onPrimary: "#FFFFFF"
  dark: "#1D334D"
  accent: "#E7314E"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#1D334D"
  accent: "#1D334D"
fonts:
  heading: "Montserrat"
  body: "Montserrat"
radius:
  card: "9px"
  button: "9px"
---

# Design System — AKASA

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

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

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

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

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

## Voice
- Tone: bold. Energy: high. Written for businesses.
- Headlines are short and concrete.

## Tokens from the site's stylesheets

### Other named colors

- `--token-70271ca8-2e0e-4797-baf8-3f3159963f93`: `#1D334D`
- `--token-cdb00753-17e7-442a-b865-e59c52778b64`: `#E7314E`
- `--token-991d9116-a9e4-481a-a0e4-456a232b4e79`: `#86D9E9`
- `--token-45e03799-a415-448f-928f-df21a72c514e`: `#00B5C2`
- `--token-7e2b1952-2625-4a68-bb7a-e341a0faef9e`: `#7C909B`
- `--token-c7af658e-82c3-4303-a3ff-d769483cb2a1`: `#4A5ECC`
- `--token-194c10c3-0c05-47c8-8430-53f28ce7806f`: `#FF9661`
- `--token-7b05bbe7-13fe-47fd-aead-4eb6eaba8b4f`: `#B8D982`
- `--token-0faeb179-4845-4210-9864-ec5746d8ebb4`: `#000000`
- `--token-d106202b-bc1b-4bf7-b26e-f3930c194656`: `#F0F0F0`
- `--token-e65d3206-e962-4815-ada9-65e1c1cb8004`: `#FFFFFF`
- `--token-0732798b-df5b-4142-aebe-adad2a3fc07e`: `#8ED1FC`
- `--token-6db12fdb-335e-4b7b-89c5-69559bef4e92`: `#FFFFFF`
- `--token-acab95db-3870-4e42-8284-819df70e63f8`: `#E94B5A`
- `--token-f0490ee5-9012-4e0f-b6ae-781196e07319`: `#EF6197`

### Typefaces

- Inter — on Google Fonts
- Montserrat — on Google Fonts
- Zilla Slab
- Fragment Mono
- Montserrat Placeholder
- Montserrat Bold
- Montserrat SemiBold
- Montserrat Medium

### Type scale (most-used sizes)

`48px` · `38px` · `31px` · `16px` · `12px`

### Letter-spacing

`.01em` (3)

### Corner radii (most-used)

`10px` · `100%` · `14px` · `4px` · `26px` · `8px`

### Shadows

- `0 .636954px .636954px -.9375px #0000001c,0 1.9316px 1.9316px -1.875px #0000001a,0 5.10612px 5.10612px -2.8125px #00000017,0 16px 16px -3.75px #0000000a`
- `inset 0 1px #ffffff29`
- `3px 3px 45px #0000001c`
- `4px 4px 45px #0000001c`
- `-1px 1px 15px #00000040`

### Breakpoints

809px · 810px · 1199px · 1200px