Typography
HTML tags — no custom classes
<h1>
Harness Care
font-size: --text-heading-1 (33px)font-weight: --font-weight-semibold (600)line-height: 2.25rem (36px)
<h2>
Connected Accounts
font-size: --text-heading-2 (26px)font-weight: --font-weight-semibold (600)line-height: 2rem (32px)
<h3>
Insurance Coverage
font-size: --text-xl (20px)font-weight: --font-weight-semibold (600)line-height: 1.75rem (28px)
<h4>
Primary Care Provider
font-size: --text-lg (18px)font-weight: --font-weight-semibold (600)line-height: 1.5rem (24px)
<h5>
Coverage Details
font-size: --text-sm (14px)font-weight: --font-weight-semibold (600)line-height: 1.25rem (20px)
<h6>
LAST UPDATED
font-size: --text-heading-6 (13px)font-weight: --font-weight-semibold (600)line-height: 1rem (16px)text-transform: uppercaseletter-spacing: 0.05emcolor: --color-muted-foreground
<p>
Your healthcare data, unified and secure.
inherits body — font-family: --font-urbanist · color: --color-foreground · font-size: 1rem / 16px (browser default) · font-weight: 400 (browser default)<strong>
Link Now
font-weight: --font-weight-bold
<em>
Authorized by your provider
font-style: italic
<small>
Last sync: 12/12/2025 11:59 PM
font-size: --text-sm (14px)line-height: 1.25rem (20px)color: --color-muted-foreground
<a>
View full report
color: --color-linkfont-weight: --font-weight-semibold (600)text-decoration: underline
Variable definitions
| variable | value | note |
|---|---|---|
| --text-heading-1 | 2.0625rem | 33px — h1 |
| --text-heading-2 | 1.625rem | 26px — h2 |
| --text-xl | 1.25rem | 20px — h3 (Tailwind default) |
| --text-lg | 1.125rem | 18px — h4 (Tailwind default) |
| --text-base | 1rem | 16px — body text |
| --text-sm | 0.875rem | 14px — h5, small (Tailwind default) |
| --text-heading-6 | 0.8125rem | 13px — h6 |
| --font-weight-bold | 700 | strong |
| --font-weight-semibold | 600 | all headings, b, a |
| --color-link | var(--color-green-600) | #00897B |
Colors
Base (navy / grey scale)
base-0#FFFFFF
base-50#F7F9FC
base-100#EBEEF2
base-200#DEE2E9
base-400#838EA1
base-600#8B95A8
base-800#3A475D
base-900#3B465E
base-1000#152033
Green (brand teal)
green-200#D9F1ED
green-300#BEEDE4
green-400#9EE6D9
green-500#4DAC9B
green-600#00897B
green-700#095463
green-800#093841
green-900#052930
green-1000#062D33
Red (error / destructive)
red-50#FCF7F8
red-100#F0DBDD
red-300#F098AB
red-500#C50B33
Semantic aliases
primary→ green-400
destructive→ red-500
background→ base-0
foreground→ base-1000
muted→ base-50
accent→ base-50
border→ base-200
ring→ green-500
Inputs
Input — placeholder
We'll never share your email.
Input — error
This email is already in use.
Input — disabled
We'll never share your email.
Input — leading text (default)
This is a hint text to help user.
Input — leading text (error)
This is an error message.
Input — leading text (disabled)
This is a hint text to help user.
Input — Password
Icon positioned at the end.