Clinical Terminal
AboutSign in

Sully.ai design system

sully.ai

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

Corrections or removal: agent@clinicalterminal.com

Sully.ai homepage

Palette

Other named colors

Type

Headings
Archivo · closest free match for Season Mix-TRIAL

Sully.ai at a glance

Body
Archivo · closest free match for Avenir Next W1G

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

Shape & depth

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

Corner radii

Shadows

Gradients

Breakpoints: 809px · 810px · 1199px · 1439px · 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: "Sully.ai"
domain: "sully.ai"
colors:
  primary: "#456A94"
  onPrimary: "#FFFFFF"
  dark: "#242529"
  accent: "#416FA2"
  background: "#FFFFFF"
ground:
  mode: light
  hex: "#FFFFFF"
  ink: "#242529"
  accent: "#456A94"
fonts:
  heading: "Archivo"
  body: "Archivo"
radius:
  card: "4px"
  button: "4px"
---

# Design System — Sully.ai

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

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

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

## Type
- Headlines: **Archivo**. Body: **Archivo**. Both on Google Fonts.
- Sully.ai's site uses Season Mix-TRIAL / Avenir Next W1G; these are the closest free look-alikes.

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

## 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-cdd1147c-41e1-4b2b-a33b-dbf3ce2b53b4`: `#0C57F5`
- `--token-74e0497e-24fe-4838-b06f-c072015e3bf4`: `#12171F`
- `--token-4bbb6b84-6c9a-4ac4-b3ba-02906161b512`: `#F9C94E`
- `--token-0594631a-ce77-4483-9967-67e2ccbea94f`: `#00ABEC`
- `--token-d6239645-ec77-4ce5-bfc4-09d531770a1b`: `#FFFFFF`
- `--token-4f67d073-80d2-4c39-8f6c-2144244e809d`: `#F2F5F9`
- `--token-6659f8e4-d1d2-453b-a3b1-ae520f2711ff`: `#747B8B`
- `--token-541a1f60-e2ef-4ac1-90d7-28e65fedbfa3`: `#DBDBDB`
- `--token-1cbe5855-823c-4644-8527-448349560cc1`: `#696969`
- `--token-2328552b-397d-4c54-a1db-0fb03e340fc2`: `#ECECEC`
- `--token-57183380-027d-4749-9e49-4d425157bb64`: `#575757`
- `--token-8145ff2f-648d-48b5-8a35-def8a509e411`: `#121212`
- `--token-8b69cecb-f2c9-4daa-bb00-0481825813bf`: `#07123B`
- `--token-5caf81dd-de13-48b0-8cc0-cedb8ca74775`: `#374270`
- `--token-9a820f8d-6103-4461-86c3-392670c083e7`: `#E28122`
- `--token-d9eea16a-366d-4250-a261-04230ef4c4ab`: `#20568C`
- `--token-fb54bc7c-4edd-4040-805e-49420cc0b722`: `#FFB76F`
- `--token-419394a1-565d-4952-8ba3-b4f1eb92339c`: `#050505`
- `--token-c80acd1b-197e-4dd1-bbb1-d013d47e782f`: `#202020`
- `--token-aa8b7f6c-eb09-45c4-9fd0-cc0f0cd3f230`: `#202020`
- `--token-a188f442-a1e4-4b87-8d60-a4b736226cf3`: `#262626`
- `--token-3070c58f-25bc-4c11-bffd-3aa3b51a46cf`: `#F1EEEA`
- `--token-49d5e1f0-062c-434a-ae61-2ef62c392163`: `#0B345C`
- `--token-5e3b0112-3a82-4804-8952-143981b45ac2`: `#5B95CE`
- `--token-60010b67-549d-427f-bb7b-d4625d6e2253`: `#F5F5F5`
- `--token-5b04fb64-29b3-4304-88d3-734f169afd66`: `#FFCC9A`
- `--token-18333b22-640b-4584-ba63-9f52743be514`: `#E6A362`
- `--token-73fcf00b-9152-46d4-8668-4cf4b674a4d7`: `#E28122`
- `--token-006533d8-3a47-4ae5-a02b-742f6c86ae1e`: `#F7F6F0`
- `--token-cbf33519-41d7-44da-aab4-ac7c0eb13b3f`: `#C8C2B8`
- `--token-1df2f573-6ea3-48d3-a706-48161ea9398a`: `#282828`
- `--token-2b985739-edfd-4466-97fa-da62d6ab5bd4`: `#F1EEEA`
- `--token-5067ab0c-083a-4930-ac21-0c9eddfdbe02`: `#DFDAD2`
- `--token-5f74d0e7-4d6b-42c1-b66c-0d2eda7a6ad4`: `#6CAAE8`
- `--token-496d1ee5-9012-4fd9-a2fe-3202f697b90d`: `#20568C`
- `--token-4ba99cb4-dbc2-4e95-8f69-cfd57316bf08`: `#0B345C`
- `--token-1895767b-13cc-4114-b56c-38160fe4a6dd`: `#FFB76F`
- `--token-3442cc61-bced-40bb-bf93-6288d03f3647`: `#000000`
- `--token-4ca3f5bc-d0d1-42fd-8837-180ada1dde30`: `#E28122`
- `--token-90401d24-5707-49fd-9800-13b4c3df4f2d`: `#A45A12`
- `--token-0f92debd-5bf8-4456-865d-e467fd805e8b`: `#F7F6F0`
- `--token-1647d5b4-167d-4ba9-b7c2-f162af3fe05a`: `#EFECE8`
- `--token-c1756fc7-9a12-4552-848d-8f63cd2917ac`: `#DFDAD2`
- `--token-32152ba0-1a4b-48c9-8a49-a20a49536d9e`: `#8C8881`
- `--token-fb283af8-f2d5-4a5a-8429-c7395e868f82`: `#282828`
- `--token-20608b9f-0145-4a1e-b971-ee948ebbb015`: `#FFFFFF`
- `--token-84002464-baa0-40a1-a1a1-82899aec539a`: `#9BA1A5`
- `--token-54fbe6ca-60b1-4431-a556-3bdeb985788c`: `#2B2D2D`
- `--token-89c3e745-3800-4e50-9b21-a2997a5c7cae`: `#FFFFFF`
- `--token-ea690d84-0c2d-4322-885a-8bb8fee7e329`: `#666666`
- `--token-6a9d0790-4909-4689-b580-8b5febd3f26d`: `#F3F2F1`
- `--token-c5ba1af9-982c-4c70-a2c9-efbbeaa9ff24`: `#E6E6E6`
- `--token-4fce64f0-c733-472f-8110-262ee086c38b`: `#F7F7F7`
- `--token-fcb8c98a-6184-43a3-a4e3-4a210d18432c`: `#8C8C8C`
- `--token-f84f2295-7717-4432-8b18-f7e761458dfb`: `#D8F9B8`
- `--token-f195ea74-7512-4096-8d91-0e7c7e10d0ab`: `#D5DBE6`
- `--token-80e6b7f7-6d2b-4701-a1d6-198bd3ac81db`: `#282828`
- `--token-bf966309-2582-4df8-98f4-f091ce81e703`: `#131415`
- `--token-8aadb16e-e272-4238-9634-dbc743d9880f`: `#EDE9E3`
- `--token-328b3c9b-fc51-40b2-bedc-8e3f0c755c1b`: `#666B22`
- `--token-52c25400-a225-49c6-8891-6380d0430bd3`: `#31343B`
- `--token-617a0d77-e6ba-4821-bff5-7e921742c103`: `#0C111C`
- `--token-77619a83-ba0f-4304-9f0c-ddd33e277554`: `#747474`
- `--token-cdf6b2ef-41a8-4014-9bfe-d64622ab58bf`: `#FFFFFF`
- `--token-24e4c568-a089-4836-96f9-68371f3f5689`: `#FFFFFF`
- `--token-be505248-d756-48de-b74e-6bc221c9c4e0`: `#242529`
- `--token-78f55423-b22f-4df3-973d-1d4a91b04be6`: `#6B6C70`
- `--token-f04e3de0-e76f-443a-ab44-81846088df5e`: `#DEDEDA`
- `--token-57aa2928-c6ec-4660-92f6-024b0303aa9a`: `#335CFF`
- `--token-fcf4732d-6d75-41c3-bef3-0cd98463c403`: `#C4A0FD`
- `--token-ca9f0d60-93ed-40ca-b200-c6b56d4ff26e`: `#0E1D4F`
- `--token-367d5c85-aafe-4420-8926-eadcf3b71da8`: `#F1F1EE`
- `--token-0a26e290-d915-4f83-9468-72f0d40dcf68`: `#F3F3F1`
- `--token-77789465-6078-4935-ab10-80b217cff6e3`: `#E6E6E3`
- `--token-3e6fc912-f7ed-49ad-ba54-70496a147562`: `#D5D5D0`

### Typefaces

- Inter — on Google Fonts
- Inter Display
- Manrope — on Google Fonts
- Inter Variable
- Geist Mono
- Avenir Next W1G Regular
- Cascadia Mono
- Avenir Next W1G Medium

### Type scale (most-used sizes)

`116px` · `80px` · `76px` · `56px` · `30px` · `18px` · `17px` · `16px` · `15px` · `14px` · `13px` · `12px`

### Letter-spacing

`-.3px` (11) · `-.2px` (3) · `-.02em` (3) · `-.6px` (3) · `-0.035em` (2) · `-.7px` (1)

### Corner radii (most-used)

`2px` · `10px` · `999px` · `24px` · `12px` · `5px` · `4px` · `9px` · `50%` · `16px`

### Shadows

- `inset 0 0 0 2px rgba(255,255,255,.85)`
- `inset 0 0 0 .5px rgba(255,255,255,.18),0 6px 20px rgba(0,0,0,.16)`
- `inset 0 0 0 .5px rgba(255,255,255,.2)`
- `0 8px 28px rgba(0,0,0,.22)`
- `0 1px 1px rgba(36,37,41,0.03), 0 18px 40px -30px rgba(36,37,41,0.22)`
- `0 1px 2px rgba(36,37,41,0.06), 0 10px 22px -14px rgba(36,37,41,0.30)`

### Gradients

- `radial-gradient(75% 85% at 100%,#000 0%,#00000080 40%,#0000 85%)`
- `linear-gradient(90deg,#0000 0%,#000 12% 88%,#0000 100%)`
- `linear-gradient(#000 5%,#0000 45%)`
- `linear-gradient(#0000 55%,#000 100%)`
- `linear-gradient(#00000001 31%,#000 73%)`
- `linear-gradient(90deg,#111716bf 16%,#11171661 34%,#11171605 70%,#11171600 100%)`

### Breakpoints

809px · 810px · 1199px · 1439px · 1440px