Typography

The Blue Water Design System uses Inter as its primary font family, with a comprehensive typography scale that ensures consistent text styling across applications.

Base Typography

The base font settings are defined in the root:

:root {
  font-size: 16px;
  font-family: Inter !important;
  font-weight: 400;
}

Heading Styles

The system provides six levels of headings (h1-h6) with carefully crafted font sizes and line heights:

Heading	Font Size	Line Height
h1	1.5rem	2rem
h1[boosted]	1.875rem	2.375rem
h2	1.25rem	1.875rem
h3	1.125rem	1.75rem
h4	1rem	1.5rem
h5	0.875rem	1.25rem
h6	0.75rem	1.125rem

Paragraph Styles

Paragraphs have two variants:

Variant	Font Size	Line Height
Default	0.875rem	1.25rem
Boosted	1rem	1.5rem

Small Text

Small text has two variants:

Variant	Font Size	Line Height
Default	0.75rem	1.125rem
Footer	0.625rem	0.875rem

Font Weights

The system provides four font weight options that can be applied to any text element:

Weight	Value	CSS Class/Attribute
Regular	400	[regular]
Medium	500	[medium]
Semi-Bold	600	[semi-bold]
Bold	700	[bold]

Font Sizes

Additional font size classes are available for flexible text sizing:

Size	Value	CSS Class/Attribute
2xs	0.625rem	[font-2xs]
xs	0.75rem	[font-xs]
sm	0.875rem	[font-sm]
md	1rem	[font-md]
lg	1.125rem	[font-lg]
xl	1.25rem	[font-xl]
2xl	1.5rem	[font-2xl]
3xl	1.875rem	[font-3xl]

Usage Examples

<!-- Basic heading -->
<h1>Main Heading</h1>

<!-- Boosted heading -->
<h1 boosted>Large Main Heading</h1>

<!-- Regular paragraph -->
<p>This is a regular paragraph text.</p>

<!-- Boosted paragraph -->
<p boosted>This is a boosted paragraph text.</p>

<!-- Small text -->
<small>This is small text.</small>

<!-- Footer text -->
<small footer>This is footer text.</small>

<!-- Custom font size -->
<span font-2xl>Large text</span>

<!-- Custom font weight -->
<span bold>Bold text</span>

Best Practices

1. Use heading levels (h1-h6) semantically to maintain proper document structure
2. Apply the [boosted] attribute to headings and paragraphs when you need larger text
3. Use small text variants for secondary information
4. Combine font size and weight classes for precise typography control
5. Maintain consistent spacing around text elements using the spacing utilities