suppo

Design System

Foundations · Atoms · Molecules · UI-organisms

Colors

Primitives (palette, unique values)

grey-light

#F3F2EE

app background, large surfaces

grey-medium

#DDDCD6

dividers, borders, inactive UI

grey-dark

#6B6B6B

secondary text, labels (AA, затемнён 2026-07-18)

beige

#DFD7D7

tertiary surfaces

green

#77763E

secondary text/icons, primary role

lime

#DEE343

selected / active, focus-ring

orange

#FF7F4A

lab above range, accents (фон + тёмный текст поверх)

orange-dark

#C0480A

AA сигнальный текст на белом + белый текст на alert-кнопке

pink

#F6DBF6

lab below range, soft warnings

text-primary

#000000

primary text (black)

white

#FFFFFF

white surfaces, cards

button-primary

#605F25

text on primary/secondary buttons (olive-deep)

grey-tint

#F0F0EC

inactive tab background (off-palette — debt)

grey-tint-hover

#EFEFEC

inactive tab hover (off-palette — debt)

Roles · Surface → primitive (references)

background

→ grey-light

foreground

→ grey-dark

border

→ grey-medium

input

→ grey-medium

ring

→ lime

Roles · Brand → primitive (references)

Aa

primary

→ green

Aa

secondary

→ grey-medium

Aa

accent

→ orange

Roles · Semantic → primitive (references)

Aa

destructive

→ pink

Aa

muted

→ grey-medium

Gradients (lab range scales)

gradient-pink-lime

gradient-orange-lime

Typography

h1
Inter · 60 / 60 · Light · −2pxSuppo health hub
h1-accidental
PF Regal Display · 60 / 60 · ItalicSuppo health hub
h2
Inter · 40 / 44 · Light · −1.2pxSuppo health hub
h2-accidental
PF Regal Display · 40 / 44 · ItalicSuppo health hub
h3
Inter · 30 / 34 · Light · −0.8pxSuppo health hub
h3-bold
Inter · 30 / 34 · Medium · −0.8pxSuppo health hub
h4
Inter · 20 / 24 · Light · −0.4pxSuppo health hub
h4-bold
Inter · 20 / 24 · Bold · −0.4pxSuppo health hub
body
Inter · 16 / 20 · LightSuppo health hub
body-semibold
Inter · 16 / 20 · SemiboldSuppo health hub
text-small
Inter · 14 / 16 · RegularSuppo health hub
text-small-bold
Inter · 14 / 16 · BoldSuppo health hub
icon-text
Inter · 12 / 12 · MediumSuppo health hub

Spacing

xxs · 8px
xs · 12px
s · 16px
m · 20px
l · 30px
xl · 40px
xxl · 70px

Usage — see DESIGN.md → Layout: xxs/xs inside a component · s/m between elements · l card padding · xl between blocks · xxl between sections

Corner radiuses

xs

2px · rounded-xs

s

10px · rounded-md

m

14px · rounded-m

l (pill)

99px · rounded-pill

Plus a shadcn-compat layer: rounded-sm 8 / rounded-md 10 / rounded-lg 12 (debt — needs unifying, see DESIGN.md)

Elevation

Shadow — only on modals, popups and dropdown menus. Cards, pages and everything else static are flat, no shadows.

flat

cards, pages

modal

Dialog / AlertDialog

popup · dropdown

0 4px 24px / 10%

Button

Variants

One size — md, 50px. Not varied in the design; a new size goes into Figma → DESIGN.md first.
variant
disabled
<Button variant="primary">Save changes</Button>

Input

States

Hover and focus are real CSS states (border/text green), not a mockup. Hover the cursor or click into the field below in Playground to see it.

invalid
disabled
leftIcon (search)
search line
<Input placeholder="Search athletes..."
  leftIcon={<Icon name="search" variant="line" width={20} height={20} />} />

Textarea

Sizes

States

size
invalid
showCount (maxLength 200)
0/200
<Textarea size="sm" maxLength={200} showCount placeholder="Write your note here..." />

Checkbox

States

unfilled — прозрачная заливка вместо белой, для чекбокса на frosted-подложке (lab-results header)

checked
disabled
<Checkbox label="High" checked={true} onChange={setChecked} />

Label

Variants

required
<Label htmlFor="email" required>Email</Label>

Icon

By category — variant=line (основной вариант в приложении: 63 использования против 1 default / 4 green)

Navigation

menu linemenu
menu-dots linemenu-dots
close lineclose
arrow-up linearrow-up
arrow-down linearrow-down
arrow-left linearrow-left
arrow-right linearrow-right

Actions

plus lineplus
pen linepen
delete linedelete
download linedownload
attach lineattach
open lineopen
search linesearch
settings linesettings
pin linepin
zoom-in linezoom-in

Status

done linedone
pending linepending
archived linearchived
alert linealert
notification linenotification

Content

doc linedoc
note linenote
diagram linediagram
person lineperson

Text formatting

bold linebold
italic lineitalic
underline lineunderline
bullets linebullets
link linelink

Variants — default · green · white (на тёмном) · line. Градиентный «active» убран (в приложении не используется). У doc / attach / plus нет green-варианта (в Figma).

Default

done defaultdone
delete defaultdelete
download defaultdownload
alert defaultalert
notification defaultnotification
diagram defaultdiagram
close defaultclose
archived defaultarchived

Active (залитая оливковая плашка)

done activedone
delete activedelete
download activedownload
alert activealert
notification activenotification
diagram activediagram
close activeclose
archived activearchived

White (on dark background)

done whitedone
delete whitedelete
download whitedownload
alert whitealert
notification whitenotification
diagram whitediagram
close whiteclose
archived whitearchived

Line

done linedone
delete linedelete
download linedownload
alert linealert
notification linenotification
diagram linediagram
close lineclose
archived linearchived
name
variant
search line
<Icon name="search" variant="line" width={30} height={30} />

Icon Button

States

Обычное · disabled (opacity-50 + cursor-not-allowed). Hover 70% — только у активной, через enabled:. Фона и рамки у обёртки нет: рамка — часть SVG-иконки. aria-label обязателен на уровне типа — текста у кнопки нет.
name
disabled
<IconButton aria-label="notification">
  <Icon name="notification" variant="line" width={30} height={30} />
</IconButton>

Coming Soon

ComingSoon (shared/ui/coming-soon, 2026-07-21) — tooltip-обёртка для кнопок, выключенных до бэкенда/дизайна. Наведи, чтобы увидеть подсказку.

Обёртка — TooltipProvider + span-триггер вокруг disabled-кнопки: сам disabled-элемент гасит mouse-события браузером, поэтому hover ловит span, а кнопке нужен disabled:pointer-events-none (уже в Button/IconButton), чтобы клик/hover не перехватывался ею поверх span.
<ComingSoon>
  <Button variant="secondary" disabled>Add result</Button>
</ComingSoon>

Avatar

Variants (fallback background color + paired text color, Figma 725:40652)

lime→green · pink→orange · orange→pink. Without an explicit `color` — stable by name hash.

initials — свои буквы вместо автогенерации из name (чаты с короткими названиями, напр. «Alarm!!!» → «Al»)

Sizes

States

fallback initials (title in the name is dropped: "AH")with an image
size
color
name
<Avatar size="md" name="Dr. Amanda Haffa" src={athlete.avatar} />

Spinner

Sizes

LoadingLoadingLoading
size
label
Loading…
<Spinner size="md" label="Loading…" />

Skeleton

Variants

variant
<Skeleton variant="rectangular" className="…" />

Top Navigation

Top Navigation (components/layout/top-nav, реальный — навигация и logout рабочие)

suppo

Notes Header Bar

Notes Header Bar

Tabs

Variants

States

Equal-width group (login specialization)

multiSelect
<TabGroup items={items} defaultActive="overview" onActiveChange={setActive} />

StatusChip

States (clickable)

checked
disabled
<StatusChip checked={true} onChange={setChecked} />

FormField

States

Clinician's work email

Enter a number greater than zero

required
error

Clinician's work email

<FormField label="Email" required htmlFor="email" hint="Work email">
  <Input id="email" type="email" />
</FormField>

Card

Variants

Iron

Stable

101 mg/dL

Blood Glucose

High

177 mg/dL

Vitamin D

Low

28 ng/ml

default — white, neutral value. alert — lime→orange gradient, high value / attention / dangerous. status — lime→pink gradient, low value / status. The pin icon actually unpins the card — clickable.

Program start:29 April, 2025

James Glassdor

Athlete Profile Card — one more example of card content, same flat white surface as default.

Nutrition Plan

Plan High Protein 3000 Kcal

Protein180 g
Carbs300 g
Fats70 g

Weekly checklist

Meals logged3/7
Water glasses2/7
Supplements3/7

Nutrition Plan Card — same flat white surface, different content layout.

Injuries & problems

Symptoms

Health Snapshot Card — frosted surface (bg-white/40) grouping injuries + symptoms under one header.

Structural variants (header / content / footer)

outlined

Slots: header / content / footer

footer
interactive

Slots: header / content / footer

footer

Sizes

auth

Responsive width, capped at 450px.

variant
Nutrition plan

Updated 2 days ago

<Card variant="default">
  <CardHeader>…</CardHeader>
  <CardContent>…</CardContent>
</Card>

Key Indicators

Key Indicators Row (entities/athlete — актуальная раскладка профиля: высокий тайл Heart rate + стопка Stress/Weigh, 3 статичных тайла с mesh-градиентами)

Heart rate

124Heart rate active
62Heart rate resting

Stress

64Stress

Weigh

97Weigh (kg)

BMI 28.7 overweight

Document Item

Document Item

Lab-Result-Apr.xlsxUploaded today • 2.4 MB
MRI-knee-right.pdfUploaded yesterday • 5.8 MB
Ultrasound-20-10-24.pngUploaded 3 days ago • 34 MB

Injury Map

Injury Map

Height 182 cmWeight 98 kg
front body
back body

Tooltip

Variants (placement)

States (hover / click)

placement
<Tooltip content="Vitamin D · 18 ng/mL" placement="top">
  <button>…</button>
</Tooltip>

Note cards

TodoCard — обложка заметки (Recent notes на /dashboard, welcome), 4 варианта фона

NoteListRow — строка списка (My notes без аватара · Linked с аватаром клиента)

Weekly protocol draft

Jul 21

Review lab results

Linked with Aline Willas

NoteBanner — цветная обложка модалки заметки (4 варианта, иконка справа переключает цвет)

Add note

Dashboard Calendar

WeekSchedule — неделя пн–вс с событиями (левая колонка «My calendar» на /dashboard). Клик по событию открывает модалку.

17Mon
18Tue
19Wed
20Thu
21Today
22Sat
23Sun

MiniMonthCalendar — месяц (правая колонка «My calendar»); «Add event» неактивна (Coming soon — бэкенда нет)

August
Mon
Tue
Wed
Thu
Fri
Sat
Sun
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6

Form inputs

ClientLinkField — привязка заметки к клиенту (поиск по имени, попап совпадений)

TagInput — мульти-тег (гости события): чип на имя, автокомплит по suggestions, Enter/запятая добавляет

James Glassdor

DatePicker — поповер выбора даты (форма правки события)

TimeSlotSelect — выбор времени из готовых часовых интервалов (форма события)

FileAttachmentCard — карточка прикреплённого файла (модалки заметок), меню Open/Download/Delete. На белом фоне — как в модалке (сама карточка grey-light, на сером фоне кита сливалась).

X-Ray_Lower_Back.jpg1.7 MB

RichTextEditor + FormattingToolbar — поле заметки с форматированием (Bold / Italic / Underline / List / Link)

AlertDialog

Variants (actually opens; click outside is blocked)

<AlertDialog open={open} onOpenChange={setOpen} variant="destructive"
  title="Delete note?" confirmLabel="Delete" onConfirm={handleDelete} />

Table

rowAction (row menu)
empty (no data)
Test name05.10.202503.08.2025
Vitamin D
18 ng/mL
↓ Low
12 ng/mL
↓ Low
Cholesterol
195 mg/dL
130 mg/dL
Blood Glucose
177 mg/dL
↑ High
No result
<Table columns={columns} data={rows} rowKey={(r) => r.id}
  rowAction={(r) => <MenuButton row={r} />}
  emptyState={<EmptyState title="No results yet" … />} />

Cell variants: TableStatusCell / TableActionIconsCell (clients table)

ClientStatus
James Glassdor
Active
Amanda Haffa
Pending
Erik Kessler
Archived

TableActionIconsCell: адаптивный overflow — при узкой колонке хвост группы уходит в «…» (≥2 в меню)

260px
200px
150px
90px
{/* label обязателен: тултип + aria-label + текст пункта меню.
   При нехватке ширины хвост группы уходит в overflow-меню «…»
   (последний прячется первым; меню — при ≥2 скрытых). */}
<TableActionIconsCell
  actions={[
    { icon: <Icon name="pin" variant="line" />, label: 'Pin', onClick: togglePin },
    { icon: <Icon name="pen" variant="line" />, label: 'Edit' },
    { icon: <Icon name="note" variant="line" />, label: 'Note' },
  ]}
  trailing={{ icon: <Icon name="delete" variant="line" />, label: 'Delete', onClick: handleDelete }}
/>

Toast

States (auto-close 4s + swipe + close button)

    <ToastProvider swipeDirection="right">
  <Toast open={open} onOpenChange={setOpen} duration={4000}>
    <ToastTitle>Note saved</ToastTitle>
    <ToastDescription>…</ToastDescription>
  </Toast>
  <ToastViewport />
</ToastProvider>

    EmptyState

    icon
    action
    person line

    No athletes yet

    Add your first athlete to see their card here

    <EmptyState
  icon={<Icon name="person" variant="line" width={40} height={40} />}
  title="No athletes yet"
  description="…"
  action={<Button variant="primary">Add athlete</Button>} />

    Form (zod validation)

    States (submitting with empty fields shows errors)

    const form = useZodForm(schema, { defaultValues })

<Form form={form} onSubmit={handleSubmit}>
  <FormField label="Email" required error={form.formState.errors.email?.message}>
    <Input type="email" invalid={!!form.formState.errors.email} {...form.register('email')} />
  </FormField>
  <Button type="submit">Submit</Button>
</Form>

    Lab Results Section

    Lab Results Table (entities/lab-result, реальный пример композиции — макет 1059:20659): frosted-подложка, Compare-фильтр (Status + Dates), референс возле названия, меню строки Pin/Show diagram/Add note/Remove

    Lab results

    <LabResultsTable
  panels={['12.07.2026', '20.02.2026', '05.09.2025']}
  results={[{ id: '1', name: 'Vitamin D', reference: '30–100 ng/mL', values: { '12.07.2026': { value: '16 ng/mL', status: 'low' } } }]}
  onShowDiagram={handleDiagram}
  onAddNote={handleAddNote}
/>

    Team Activities (Chat)

    TeamChat (entities/chat) — блок «Team activities» на профиле клиента: слева список чатов, справа переписка; вкладка Care team. Полностью интерактивен (выбор чата, отправка, вкладки, add/remove участника).

    Team activities

    search line

    Calendar Event Modal

    CalendarEventModal (entities/calendar) — карточка события с /dashboard: встреча (ссылка-созвон, время, гости) ↔ ивент-заметка (цветной баннер). «…» → Edit (пикеры даты/времени) / Delete.