Clinia design system

01 · Foundation

Brand palette

Twenty-four named swatches across four families. Vital (#ff5c00) is the flagship accent — pair it only with Infinite text for AA contrast.

Infinite

Beige / Tan

Purple

Peach / Orange

Chart palette

02 · Foundation

Typography

Type scale mirrors the Figma styles. Display + Title use font-display (Gothia Serif); Body + Eyebrow use font-sans (CircularXX).

Font families

font-display

Gothia Serif

Headlines, display text

font-sans

CircularXX

UI, body text

font-mono

CircularXX Mono

Code, tokens

Type scale

Display XL

6rem

Aa

Display L

5.5rem

Aa

Display M

4.5rem

Aa

Display S

3.5rem

Aa

Title XL

5rem

Aa

Title L

4rem

Aa

Title M

2.5rem

Type scale

Title S

2rem

Type scale

Title XS

1.5rem

Type scale

Body XL

2rem

The quick brown fox

Body L

1.5rem

The quick brown fox

Body M

1rem

The quick brown fox jumps over the lazy dog

Body S

0.875rem

The quick brown fox jumps over the lazy dog

Body XS

0.75rem

The quick brown fox jumps over the lazy dog

Eyebrow L

1rem

SECTION LABEL

Eyebrow S

0.625rem

SMALL LABEL

03 · Foundation

Color tokens

Semantic tokens that switch with the active theme. Toggle light/dark above to see them update.

Background

--background

Primary

--primary

Secondary

--secondary

Accent

--accent

Muted

--muted

Card

--card

Destructive

--destructive

Success

--success

Warning

--warning

Intent tokens

Destructive

--destructive

Success

--success

Warning

--warning

04 · Foundation

Shape

Radius and shadow scales. All derived from --radius, which the style layer (Sera / Luma / default) overrides.

Radius

sm

md

lg

xl

2xl

3xl

4xl

full

Shadow

shadow-sm

shadow-md

shadow-lg

05 · Components

Button

Seven variants × four sizes. Tab to inspect focus rings. Sera style uppercases buttons.

Variants

Sizes

06 · Components

Form controls

Select

Slider

Progress

Upload progress

x

Processing

x

Complete

x

07 · Components

Display

Card

Patient lookup

New

Search across charts, claims, and care notes.

Find context across every system, ranked by relevance.

Search relevance

Last 7 days · semantic + keyword

94%+2.1pt

Up from 91.9% week-over-week.

Badge

DefaultSecondaryAccentOutlineDestructive

Avatar

MDMDEGCL

Alert

Information

Patient records updated. Sync completes in the background.

Error

Connection to the FHIR server failed. Retry in a moment.

Skeleton

Separator

Section A

Group of related controls.

Section B

A clean break for readability.

Docs

API

Status

08 · Components

Overlay & navigation

Accordion

A semantic + keyword hybrid search that spans charts, claims, and care notes — no terminology mapping required.

Tabs

Overview content — charts, summaries, and key metrics go here.

Dialog · Dropdown · Tooltip

09 · Components

Table

Responsive table with header, body, and status badges.

ID	Name	Status	Role	Last active
P-001	Marie Dupont	Active	Clinician	2024-01-15
P-002	James Okafor	Pending	Builder	2024-01-14
P-003	Sofia Reyes	Active	Admin	2024-01-12
P-004	Lena Müller	Inactive	Clinician	2023-12-30

Clinia design system

Brand palette

Typography

Font families

Type scale

Color tokens

Intent tokens

Shape

Radius

Shadow

Button

Variants

Sizes

Form controls

Input / Textarea

Checkbox

Radio group

Switch

Select

Slider

Progress

Display

Card

Badge

Avatar

Alert

Skeleton

Separator

Overlay & navigation

Accordion

Tabs

Dialog · Dropdown · Tooltip

Table

Brand palette

Typography

Font families

Type scale

Color tokens

Intent tokens

Shape

Radius

Shadow

Button

Variants

Sizes

Form controls

Input / Textarea

Checkbox

Radio group

Switch

Select

Slider

Progress

Display

Card

Badge

Avatar

Alert

Skeleton

Separator

Overlay & navigation

Accordion

What is the Clinia search API?

How does the design system handle dark mode?

What are the Sera and Luma shape systems?

Tabs

Dialog · Dropdown · Tooltip

Table