Fonts — Harbour

Typography

Font systems for a calm SaaS interface

Harbour currently uses Manrope as its primary UI face. This page now loads modern web fonts for product UI, documentation, dashboards, editorial pages, and bolder marketing moments.

Current stack

Manrope carries the product.

The active Tailwind token is --font-sans, set to Manrope with system and emoji fallbacks. The other specimens are loaded only on this page from Google Fonts.

Primary UI Manrope

Linked examples Inter, Plus Jakarta Sans, DM Sans

Editorial examples Newsreader

Code fallback SFMono-Regular, Consolas, Menlo

Type scale preview

Build clean.

Use crisp headings, compact labels, and readable body copy so dense product screens still feel composed.

13px labels 16px body 48px display

01 Specimens

Loaded modern font directions

These families are linked on this page and chosen for common SaaS surfaces: dense product UI, modern marketing, docs, dashboard labels, and technical content.

Manrope

In use

Current Harbour product and marketing UI

Google Fonts 'Manrope', ui-sans-serif, system-ui, sans-serif

Harbour ships cleaner interfaces.

Teams use the component library to move from product sketch to production UI without rebuilding the same navigation, forms, tables, and status patterns.

Metric

98.4%

Sample

Aa Bb Cc 0123

Weight

Regular / Medium / Semibold

Best default for this app: clear numerals, quiet personality, and strong readability across forms, nav, tables, and marketing sections.

Inter

Common modern SaaS UI baseline

Google Fonts 'Inter', ui-sans-serif, system-ui, sans-serif

Harbour ships cleaner interfaces.

Teams use the component library to move from product sketch to production UI without rebuilding the same navigation, forms, tables, and status patterns.

Metric

98.4%

Sample

Aa Bb Cc 0123

Weight

Regular / Medium / Semibold

Very common for product interfaces because it is compact, readable, and predictable. Safe, but less distinctive because many SaaS products use it.

Plus Jakarta Sans

Modern marketing and premium dashboard surfaces

Google Fonts 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif

Harbour ships cleaner interfaces.

Teams use the component library to move from product sketch to production UI without rebuilding the same navigation, forms, tables, and status patterns.

Metric

98.4%

Sample

Aa Bb Cc 0123

Weight

Regular / Medium / Semibold

A contemporary geometric/humanist mix that gives landing pages and hero sections more presence than the default UI stack.

DM Sans

Docs, settings, and calm app workflows

Google Fonts 'DM Sans', ui-sans-serif, system-ui, sans-serif

Harbour ships cleaner interfaces.

Teams use the component library to move from product sketch to production UI without rebuilding the same navigation, forms, tables, and status patterns.

Metric

98.4%

Sample

Aa Bb Cc 0123

Weight

Regular / Medium / Semibold

Soft and readable with good interface rhythm. Useful when the app should feel approachable but still professional.

IBM Plex Sans

Technical dashboards and developer tools

Google Fonts 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif

Harbour ships cleaner interfaces.

Teams use the component library to move from product sketch to production UI without rebuilding the same navigation, forms, tables, and status patterns.

Metric

98.4%

Sample

Aa Bb Cc 0123

Weight

Regular / Medium / Semibold

A good fit for engineering-heavy products, logs, observability, and data-dense admin areas.

Sora

Distinctive marketing headings and product launches

Google Fonts 'Sora', ui-sans-serif, system-ui, sans-serif

Harbour ships cleaner interfaces.

Teams use the component library to move from product sketch to production UI without rebuilding the same navigation, forms, tables, and status patterns.

Metric

98.4%

Sample

Aa Bb Cc 0123

Weight

Regular / Medium / Semibold

More characterful and geometric. Best for campaign surfaces, big headings, and moments that need sharper brand recognition.

Newsreader

Editorial docs, essays, and founder notes

Google Fonts 'Newsreader', Georgia, ui-serif, serif

Harbour ships cleaner interfaces.

Teams use the component library to move from product sketch to production UI without rebuilding the same navigation, forms, tables, and status patterns.

Metric

98.4%

Sample

Aa Bb Cc 0123

Weight

Regular / Medium / Semibold

A modern serif for long-form pages where Harbour needs warmth, authority, and more reading texture than the product UI.

SF Mono / Consolas

Code blocks, API examples, one-time passwords, and logs

'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace

Harbour ships cleaner interfaces.

            Teams use the component library to move from product sketch to production UI without rebuilding the same navigation, forms, tables, and status patterns.
        
Metric
98.4%
Sample
Aa Bb Cc 0123
Weight
Regular / Medium / Semibold

Already aligned with Harbour email code blocks and ideal for terminal snippets, diffs, route names, and technical metadata.

02 Guidance

Where each stack belongs

A concise map for choosing the right type treatment without making every page feel unrelated.

Product UI

Use Manrope, Inter, or DM Sans for forms, tables, dashboards, and reusable components.

Marketing

Try Plus Jakarta Sans or Sora when landing pages need more presence than the core app UI.

Long-form

Use Newsreader for essays, policies, changelogs, and documentation-heavy pages.

Technical

Use the mono stack for command output, route names, config values, and code examples.