1. Logo
Full color
On surface / light
Reversed
On dark
White
On brand / blue
2. Colors
Primary colors
Neutral 900
--color-gray-900 · #111927
Neutral 25
--color-gray-25 · #FCFCFD
Cerulean 400 (brand)
--color-cerulean-400 · #0B94F5
Secondary Brights
Cerulean 300
--color-cerulean-300 · #3BAEFF
Cyan 300
--color-cyan-300 · #52F3FF
Mint 300
--color-mint-300 · #60FEE1
Tertiary Brights
Use sparingly — only for infographics or internal usage where brand recognition is less of a priority (e.g. InfiniCamp event graphics).
Lemon 300
--color-lemon-300 · #FFDD7B
Orange 300
--color-orange-300 · #FFB074
Sherbert 300
--color-sherbert-300 · #FFA38B
Color Proportions
Color scales
#FCFCFD
#F9FAFB
#F3F4F6
#E5E7EB
#D2D6DB
#9DA4AE
#6C737F
#4D5761
#384250
#1F2A37
#111927
#F5FFFD
#EAFFFA
#CEFEF3
#9EFEE7
#60FEE1
#62D5D1
#0E9384
#107569
#0D5C52
#083D38
#052520
#F1FFFF
#DDFFFF
#C1FFFF
#9FFCFC
#52F3FF
#2AC7F6
#0597AD
#077790
#065D73
#043C52
#022535
#EAF8FF
#D8F2FF
#BEE9FF
#74C5FF
#3BAEFF
#0B94F5
#0483DD
#006EBD
#005A9C
#004780
#003060
#FFF6F1
#FFF0E7
#FFE8E1
#FFD7CC
#FFA38B
#FB886B
#E8644A
#C94930
#A33320
#7A2115
#52120C
#FFF4E9
#FFEAD3
#FFDFBB
#FFCD96
#FFB074
#FF9545
#E8722A
#C95518
#A33D0E
#7A2A08
#521905
#FFFCF5
#FFF8E5
#FFF1C7
#FFE7A3
#FFDD7B
#FFCC3A
#E6AE09
#C48A04
#9E6A02
#6F4901
#452C00
Brand Gradients
Gradient / Light
Gradient / Dark
Gradient / Cerulean to Cyan
Gradient / Mint to Lemon
Gradient / Cerulean to Mint
3. Typography
Inter (Inter var). Headings H1–H4 use Light 300, H5–H6 use Medium 500, body uses Regular 400. Sizes are responsive (mobile → tablet → desktop).
Heading & body scale .h1–.h6 · --fs-body-*
Desktop (XL)
H1 · Light · 72px · LH 79px · LS 0
The care exists. Infinitus makes sure it arrives.
H2 · Light · 56px · LH 62px · LS 0
Automate phone calls to patients, payors, and providers.
H3 · Light · 32px · LH 38px · LS 0.384px
Get patients onto therapy faster.
H4 · Light · 26px · LH 34px · LS 0.312px
One agentic platform. Every channel.
H5 · Medium · 18px · LH 23px · LS 0.216px
AI agents for clinical and administrative healthcare calls.
H6 · Medium · 16px · LH 21px · LS 0.192px
Safety-first voice AI for healthcare.
Body Large · Regular · 18px · LH 28px · LS 0
Infinitus handles the communication and coordination that sits between a patient and the care they need.
Body Default · Regular · 16px · LH 24px · LS 0
From first contact to long-term adherence, every call is automated, accurate, and on-brand.
Body Small · Regular · 14px · LH 20px · LS 0
Infinitus uses voice AI to automate phone calls, saving the US healthcare system hundreds of thousands of hours annually.
Tablet (MD)
H1 · Light · 48px · LH 53px · LS 0
The care exists. Infinitus makes sure it arrives.
H2 · Light · 40px · LH 44px · LS 0
Automate phone calls to patients, payors, and providers.
H3 · Light · 28px · LH 34px · LS 0.336px
Get patients onto therapy faster.
H4 · Light · 22px · LH 29px · LS 0.264px
One agentic platform. Every channel.
H5 · Medium · 16px · LH 21px · LS 0.192px
AI agents for clinical and administrative healthcare calls.
H6 · Medium · 16px · LH 21px · LS 0.192px
Safety-first voice AI for healthcare.
Body Large · Regular · 18px · LH 28px · LS 0
Infinitus handles the communication and coordination that sits between a patient and the care they need.
Body Default · Regular · 16px · LH 24px · LS 0
From first contact to long-term adherence, every call is automated, accurate, and on-brand.
Body Small · Regular · 14px · LH 20px · LS 0
Infinitus uses voice AI to automate phone calls, saving the US healthcare system hundreds of thousands of hours annually.
Mobile (SM)
H1 · Light · 36px · LH 40px · LS 0
The care exists. Infinitus makes sure it arrives.
H2 · Light · 30px · LH 33px · LS 0
Automate phone calls to patients, payors, and providers.
H3 · Light · 24px · LH 29px · LS 0.288px
Get patients onto therapy faster.
H4 · Light · 20px · LH 26px · LS 0.24px
One agentic platform. Every channel.
H5 · Medium · 16px · LH 21px · LS 0.192px
AI agents for clinical and administrative healthcare calls.
H6 · Medium · 16px · LH 21px · LS 0.192px
Safety-first voice AI for healthcare.
Body Large · Regular · 18px · LH 28px · LS 0
Infinitus handles the communication and coordination that sits between a patient and the care they need.
Body Default · Regular · 16px · LH 24px · LS 0
From first contact to long-term adherence, every call is automated, accurate, and on-brand.
Body Small · Regular · 14px · LH 20px · LS 0
Infinitus uses voice AI to automate phone calls, saving the US healthcare system hundreds of thousands of hours annually.
Body sizes (Large / Default / Small) use a single non-responsive scale today (--fs-body-lg, --fs-body, --fs-body-sm), so they render identically across all three columns above.
4. Form & Input Components
Static samples of the .ds-* control classes across every state. Not wired to submit, shown only to exercise the input tokens.
Light theme
Text Input
Textarea
Select
Checkbox
Radio
Toggle
Default
Focus
Filled
Error
Disabled
Dark theme
Text Input
Textarea
Select
Checkbox
Radio
Toggle
Default
Focus
Filled
Error
Disabled
5. Button Components
Primary / Secondary / Hyperlink across states and sizes (SM / MD / LG). State rows use the explicit .hover/.active/.focus modifier classes so every state is visible at once.
Light theme
Dark theme
6. Breakpoints
Small
Breakpoint: ≥320px
Left/right margins: 20px
Gutter: 20px
Columns: 2
Medium
Breakpoint: ≥768px
Left/right margins: 30px
Gutter: 30px
Columns: 6
Large
Breakpoint: ≥1025px
Left/right margins: 80px
Gutter: 30px
Columns: 12
Extra Large
Breakpoint: ≥1280px
Left/Right Margins: 100px
Gutter: 30px
Columns: 12
Max-width page: 1280px
7. Spacing Scale
The --space-* scale. Bars are sized with the live token, so a missing step renders zero-width.
Plus a Tailwind 18 step (4.5rem / 72px) available as gap-18 / p-18, sitting between --space-16 and --space-20.
8. Vertical Spacing
Section-to-section vertical rhythm. Values shown are desktop/laptop; they scale down on smaller breakpoints.
Small
Large Monitor 50px, Desktop/laptop 30px, tablet 30px, mobile 30px
Medium
Large Monitor 100px, Desktop/laptop 50px, tablet 50px, mobile 50px
Large
Large Monitor 150px, Desktop/laptop 100px, tablet 100px, mobile 50px
X-Large
Large Monitor 200px, Desktop/laptop 150px, tablet 100px, mobile 50px
Overlapping layouts (vertical spacing between sections above/below. Measuring from edge to edge of containers)
Large Monitor 200px, Desktop/laptop 150px, tablet 100px, mobile 50px
9. Border Radius
none
0px
xs
2px
sm
4px
md
8px
lg
24px
xl
36px
2xl
64px
3xl
96px
pill
9999px
Component usage: buttons & text inputs use pill; textarea uses 8px; checkboxes use sm (4px).
10. Elevation / Shadows
Elevation none
Elevation xs
0 1px 2px 6%
Elevation sm
0 2px 8px 8%
Elevation md
0 4px 16px 10%
Elevation lg
0 8px 24px 14%
Elevation xl
0 16px 40px 18%
