Clinical Terminal
AboutSign in

Suki design system

suki.ai

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

Corrections or removal: agent@clinicalterminal.com

Suki homepage

Palette

Color ramps

Color Gray
60
#D1D1D1
80
#959595
90
#646464
Color Yellow
60
#FFF9DA
80
#FFF394
100
#FFE148
Color Mint
60
#D8F4E6
80
#9DE4BF
100
#3FB679
Color Blue
60
#D1EEFF
80
#ADE1FF
100
#4FB3EE
Color Red
60
#FFE4E9
80
#FFB9C5
100
#E6506C

Other named colors

Type

Headings
Archivo · closest free match for General Grotesque

Suki at a glance

Body
Archivo · closest free match for ABC Monument Grotesk

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

Shape & depth

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

Corner radii

Breakpoints: 1024px · 1366px · 1440px

Voice

Tone: professional. Energy: low. Written for patients and healthcare professionals.

DESIGN.md

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

---
generator: clinical-terminal-brand-kit
company: "Suki"
domain: "suki.ai"
colors:
  primary: "#FFE148"
  onPrimary: "#1B1B1B"
  dark: "#1B1B1B"
  accent: "#FFF394"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#1B1B1B"
  accent: "#8F7200"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "0px"
  button: "8px"
---

# Design System — Suki

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

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

## Color
- **Accent on the ground: #8F7200** (4.59:1), adjusted from Suki's primary #FFE148 so it stays readable. Use it for kickers, key numbers and one highlight per screen, not for large fills.
- **Primary #FFE148** for filled shapes (buttons, chips, bars), with #1B1B1B text on it (13.22:1).
- Secondary accent #FFF394: charts and a second data series only.
- Quote every hex exactly as written above.

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Suki's site uses General Grotesque / ABC Monument Grotesk; these are the closest free look-alikes.

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

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

## Tokens from the site's stylesheets

### Color ramps

- **Color Gray** (`--color-gray-N`): 60 `#D1D1D1` · 80 `#959595` · 90 `#646464`
- **Color Yellow** (`--color-yellow-N`): 60 `#FFF9DA` · 80 `#FFF394` · 100 `#FFE148`
- **Color Mint** (`--color-mint-N`): 60 `#D8F4E6` · 80 `#9DE4BF` · 100 `#3FB679`
- **Color Blue** (`--color-blue-N`): 60 `#D1EEFF` · 80 `#ADE1FF` · 100 `#4FB3EE`
- **Color Red** (`--color-red-N`): 60 `#FFE4E9` · 80 `#FFB9C5` · 100 `#E6506C`

### Other named colors

- `--color-black`: `#1B1B1B`
- `--color-white`: `#FFFFFF`
- `--color-offwhite`: `#FFFBF0`
- `--color-cream`: `#FFFCF4`
- `--color-functional-error`: `#C52A41`
- `--media-primary-color`: `#1B1B1B`
- `--media-control-background`: `#FFFFFF`
- `--media-range-track-background`: `#FFFFFF`
- `--media-range-bar-color`: `#FFE148`
- `--controls-backdrop-color`: `#000000`

### Typefaces

- ABC Monument Grotesk
- General Grotesque

### Type scale (most-used sizes)

`58px` · `48px` · `18px`

### Letter-spacing

`-.04em` (7) · `-.01em` (2) · `.05em` (1) · `-.56px` (1)

### Corner radii (most-used)

`.25rem` · `4px` · `8px` · `100%`

### Breakpoints

1024px · 1366px · 1440px