Design Language

Typography

Our text styles combine typography tokens into predefined combinations for consistent type hierarchy across all interfaces.

Overview

At Enara Health, we've chosen Outfit as our primary typeface to embody the essence of our brand. Clean, modern, and approachable, Outfit reflects the professionalism and care that define our mission.

Text styles are composite tokens that bundle font family, size, weight, and line height into single, easy-to-use CSS custom properties. They ensure consistent typography without manually combining primitive tokens.

Aa Primary Typeface

Outfit

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!"#$%&/()@=?,-

Google Fonts

Display

Hero headlines and marketing content. Large, impactful text for first impressions.

60px - 128px

Title

Section headings and page titles. Establish content hierarchy and navigation.

24px - 48px

Body

Paragraphs, labels, and UI text. Optimized for readability at smaller sizes.

10px - 20px

Why Outfit?

By using Outfit as our typeface, Enara Health communicates with clarity, consistency, and an approachable professionalism that resonates with individuals and clinics alike.

Approachability

Outfit's rounded edges and balanced letterforms create a welcoming and friendly aesthetic, perfectly aligning with our commitment to compassionate care.

Modern Simplicity

Its sleek and contemporary design reflects Enara's focus on innovation and forward-thinking solutions in weight management.

Versatility

The font's clarity and adaptability make it suitable for a variety of applications — from personal health materials to professional clinic communications. It maintains a consistent look across digital and print platforms.

Legibility

Outfit ensures excellent readability across all sizes, making it accessible and clear, whether in headlines or body text.

Font Usage Guidelines

Headlines

Use medium, semi-bold, bold weights to draw attention and convey strength.

Subheadings

Use medium weight for structure and hierarchy.

Body Text

Use light or regular weight for clarity and comfort in reading longer passages.

Type Scale

Visual overview of all text styles from largest to smallest.

Display XL --text-display-xl-bold
Display LG --text-display-lg-bold
Display MD --text-display-md-bold
Display SM --text-display-sm-bold
Title XL --text-title-xl-semibold
Title LG --text-title-lg-semibold
Title MD --text-title-md-semibold
Title SM --text-title-sm-semibold
Body 2XL --text-body-2xl-regular
Body XL --text-body-xl-regular
Body LG --text-body-lg-regular
Body MD --text-body-md-regular
Body SM --text-body-sm-regular
Body XS --text-body-xs-regular
Body 2XS --text-body-2xs-regular

Display Styles

Display styles are designed for maximum visual impact. Use them for hero sections, landing pages, and marketing content where typography needs to make a strong first impression.

display-xl

8rem (128px)
The quick brown fox --text-display-xl-regular
The quick brown fox --text-display-xl-semibold
The quick brown fox --text-display-xl-bold

display-lg

6rem (96px)
The quick brown fox --text-display-lg-regular
The quick brown fox --text-display-lg-semibold
The quick brown fox --text-display-lg-bold

display-md

4.5rem (72px)
The quick brown fox --text-display-md-regular
The quick brown fox --text-display-md-semibold
The quick brown fox --text-display-md-bold

display-sm

3.75rem (60px)
The quick brown fox --text-display-sm-regular
The quick brown fox --text-display-sm-semibold
The quick brown fox --text-display-sm-bold
When to use: Landing page heroes, marketing banners, feature announcements, empty states with prominent messaging.

Title Styles

Title styles create clear content hierarchy. Use them for page headings, section titles, card headers, and modal titles.

title-xl

3rem (48px)
The quick brown fox jumps over --text-title-xl-regular
The quick brown fox jumps over --text-title-xl-medium
The quick brown fox jumps over --text-title-xl-semibold

title-lg

2.25rem (36px)
The quick brown fox jumps over --text-title-lg-regular
The quick brown fox jumps over --text-title-lg-medium
The quick brown fox jumps over --text-title-lg-semibold

title-md

1.875rem (30px)
The quick brown fox jumps over --text-title-md-regular
The quick brown fox jumps over --text-title-md-medium
The quick brown fox jumps over --text-title-md-semibold

title-sm

1.5rem (24px)
The quick brown fox jumps over --text-title-sm-regular
The quick brown fox jumps over --text-title-sm-medium
The quick brown fox jumps over --text-title-sm-semibold
When to use: Page titles (title-xl), section headings (title-lg/md), card headers (title-sm), dialog titles.

Body Styles

Body styles are optimized for readability. Use them for paragraphs, labels, descriptions, form text, and any content meant to be read at length.

body-2xl

1.25rem (20px)
The quick brown fox jumps over the lazy dog --text-body-2xl-light
The quick brown fox jumps over the lazy dog --text-body-2xl-regular
The quick brown fox jumps over the lazy dog --text-body-2xl-medium

body-xl

1.125rem (18px)
The quick brown fox jumps over the lazy dog --text-body-xl-light
The quick brown fox jumps over the lazy dog --text-body-xl-regular
The quick brown fox jumps over the lazy dog --text-body-xl-medium

body-lg

1rem (16px)
The quick brown fox jumps over the lazy dog --text-body-lg-light
The quick brown fox jumps over the lazy dog --text-body-lg-regular
The quick brown fox jumps over the lazy dog --text-body-lg-medium

body-md

0.875rem (14px)
The quick brown fox jumps over the lazy dog --text-body-md-light
The quick brown fox jumps over the lazy dog --text-body-md-regular
The quick brown fox jumps over the lazy dog --text-body-md-medium

body-sm

0.8125rem (13px)
The quick brown fox jumps over the lazy dog --text-body-sm-light
The quick brown fox jumps over the lazy dog --text-body-sm-regular
The quick brown fox jumps over the lazy dog --text-body-sm-medium

body-xs

0.75rem (12px)
The quick brown fox jumps over the lazy dog --text-body-xs-light
The quick brown fox jumps over the lazy dog --text-body-xs-regular
The quick brown fox jumps over the lazy dog --text-body-xs-medium

body-2xs

0.625rem (10px)
The quick brown fox jumps over the lazy dog --text-body-2xs-light
The quick brown fox jumps over the lazy dog --text-body-2xs-regular
The quick brown fox jumps over the lazy dog --text-body-2xs-medium
When to use: body-lg for primary content, body-md for secondary text and UI labels, body-sm/xs for captions and metadata, body-2xs for legal text only.

Usage

Text styles are available as CSS custom properties that set the complete font shorthand property.

CSS Usage

/* Apply a text style with the font shorthand */
.hero-title {
  font: var(--text-display-lg-bold);
  color: var(--foreground-base);
}

.section-heading {
  font: var(--text-title-lg-semibold);
}

.paragraph {
  font: var(--text-body-lg-regular);
  color: var(--foreground-muted);
}

.caption {
  font: var(--text-body-sm-medium);
  color: var(--foreground-muted);
}

Token Naming Pattern

--text-{category}-{size}-{weight}
  • category: display, title, body
  • size: xl, lg, md, sm (+ 2xl, xs, 2xs for body)
  • weight: varies by category (see above)

Guidelines

Do

  • Use text styles instead of combining primitive tokens manually
  • Maintain hierarchy: display > title > body
  • Use semibold/bold for headings, regular for body text
  • Limit display styles to 1-2 per page
  • Ensure sufficient contrast with background colors

Don't

  • Use display styles for body content
  • Skip heading levels (h1 > h3)
  • Use more than 3-4 different text styles per page
  • Use body-2xs for anything except legal/fine print
  • Override font properties after applying a text style

Recommended Combinations

Hero Section --text-display-lg-bold + --text-body-xl-regular
Article Page --text-title-xl-semibold + --text-body-lg-regular
Card Component --text-title-sm-semibold + --text-body-md-regular
Form Labels --text-body-md-medium + --text-body-sm-regular