Design system [NEW] · prefix n_
Style Guide
Every class on this page is bound to the [NEW] variable collections: Basic Values, Colors, Themes, Headings, Texts and Sizes. Use these on new and rebuilt pages; the old system is retired once no page uses it.
Headings
n_heading-style-h1 · Recoleta Light · 72 / 60 / 48px · line-height 90%
n_heading-style-h2 · Recoleta Light · 60 / 52 / 40px · line-height 90%
n_heading-style-h3 · Recoleta Light · 48 / 42 / 36px · line-height 90%
n_heading-style-h4 · Recoleta Light · 28 / 26 / 24px · line-height 130%
n_heading-style-h5 · Recoleta Light · 24 / 22 / 20px · line-height 130%
n_heading-style-h6 · Recoleta Light · 18 / 18 / 16px · line-height 130%
Text
n_text-size-large · Sofia Pro · 20 / 20 / 18px
Therapy that actually fits your life, with personalized therapist matching and flexible scheduling.
n_text-size-medium · Sofia Pro · 18 / 18 / 16px · default body size on n_page-wrapper
Therapy that actually fits your life, with personalized therapist matching and flexible scheduling.
n_text-size-small · Sofia Pro · 16px
Therapy that actually fits your life, with personalized therapist matching and flexible scheduling.
n_text-size-xsmall · Sofia Pro · 14px
Therapy that actually fits your life, with personalized therapist matching and flexible scheduling.
n_text-size-tiny · Sofia Pro · 12px
Therapy that actually fits your life, with personalized therapist matching and flexible scheduling.
n_text-weight-light · 300
Therapy that actually fits your life, with personalized therapist matching and flexible scheduling.
n_text-weight-semibold · 500 (Sofia Pro Medium)
Therapy that actually fits your life, with personalized therapist matching and flexible scheduling.
n_text-style-eyebrow · Recoleta Light 16px
Text colors
n_text-color-green · Themes: Text/Heading/3 → Green/900 #003138
In-network for 9 in 10 Americans
n_text-color-green-70 · Themes: Text/Heading/3 - 70%
In-network for 9 in 10 Americans
n_text-color-green-80 · Themes: Text/Body/3 - 80%
In-network for 9 in 10 Americans
n_text-color-teal · Themes: Text/Eyebrow/3 → Green/600 #065d69
In-network for 9 in 10 Americans
n_text-color-white · Themes: Text/Heading/2
n_text-color-white-80 · Themes: Text/Body/8 - 80%
Buttons
Button component · Variant: Secondary (default) · Themes: Button Secondary/*
Button component · Variant: Small · navbar size
Button component · Variant: Primary · Themes: Button Primary/*
n_navbar_link · Themes: Navbar/Link (88% white) · hover Navbar/Link - Hover
ProvidersLayout
n_padding-global
Sizes: Padding Global · 80 / 40 / 20px
n_container-large · n_container-medium · n_container-small
Sizes: Container/Large 1280px · Container/Medium 1024px · Container/Small 768px
n_padding-section-small · medium · large
Sizes: Padding Section/Small 112 / 80 / 48px · Medium 128 / 96 / 64px · Large 160 / 112 / 64px
Breakpoint modes
Headings [NEW], Texts [NEW] and Sizes [NEW] switch to their Tablet mode at 991px and Mobile mode at 767px automatically.
Cards
Stat Card (component)
Fast Start
Testimonial Card — Regular / Wide · Photo Card — Regular / Narrow (components)
Elizabeth was easy to connect with, I felt seen and heard. By the end of the session I felt a calmness I did not have at the beginning.
Elizabeth was easy to connect with, I felt seen and heard. By the end of the session I felt a calmness I did not have at the beginning.
n_heading-weight-semibold
Fast Start
n_text-color-white-70 · n_text-color-white-60 · n_text-color-caption
White 70% — Reviews aggregated on Trustpilot
White 60% — out of 5
Caption on dark — Aug. 2026
Layout & elements
Layout components (NEW / Layout) — Section [Light · Sand · White · Mint Fade · Teal · Dark · Image], Grid [1:2 · 1:1 · Bento] with Col1/Col2/Col3 slots, Card Grid [2 · 3 Columns], Carousel, Accordion [Default · Steps], Button Group [Left · Center], Spacer [Small · Medium · Large · XLarge · XXLarge], Resource Slider (Blog CMS, page-level). See Home [NEW] for how sections are composed.
Heading [Left · Center · Center Wide · Center Icon] + Caption [Left · Center]
Questions? Start Here.
Caption text
Button [Dark] in a Button Group
Accordion — FAQ Items
1. Does Tava Health take my insurance?
Tava Health is in-network with 200+ health plans, and many people with commercial insurance can use their coverage for in-person and online therapy. Add your insurance during sign-up to check your benefits and find online therapy that takes insurance.
1. Does Tava Health take my insurance?
Tava Health is in-network with 200+ health plans, and many people with commercial insurance can use their coverage for in-person and online therapy. Add your insurance during sign-up to check your benefits and find online therapy that takes insurance.
Proof Card + Check Pill [Small · Large] (dark sections)
insurance plans cover Tava Health.
