Typography

Font loading, semantic type roles, hierarchy, density behavior, and practical usage guidance for Conscia products.

Saans · Source Sans 3 fallback

Primary typeface

Saans is the Conscia brand typeface. The package bundles Source Sans 3 as the fallback, because Saans is licensed.

Saans, with Source Sans 3

The font stack puts Saans first. Products that hold a Saans licence self-host it under the family name “Saans” and it takes over everywhere. Without it, the bundled Source Sans 3 renders the same three brand weights.

FONT STACK

"Saans", "Source Sans 3 Variable", "Source Sans 3", "Source Sans", "Aptos", "Segoe UI", Arial, sans-serif

Weight ladder

Use a small, intentional range instead of arbitrary weights.

380

Regular · The quick brown fox

Body copy and descriptions

570

Medium · The quick brown fox

Labels, controls, eyebrows, and emphasis

670

Semibold · The quick brown fox

Titles, card titles, and active navigation

Semantic type roles

Choose typography by purpose. The utilities resolve through density-aware tokens rather than fixed local values.

Role	Utility	Token	Rendered example
Display title	`ds-type-display-title`	`--ds-display-title`	Build with clarity
Page title	`ds-type-page-title`	`--ds-page-title`	Provider connections
Section title	`ds-type-section-title`	`--ds-section-title`	Routing configuration
Card title	`ds-type-card-title`	`--ds-card-title-size`	Connection health
Body	`ds-type-body`	`--ds-body`	Body copy explains the task and its operational context.
UI text	`ds-type-ui`	`--ds-ui-text-size`	Compact interface guidance and supporting labels
Metadata	`ds-type-metadata`	`--ds-metadata`	Updated 2 minutes ago
Eyebrow	`ds-type-eyebrow`	`--ds-eyebrow-size`	WORKSPACE

Display titleds-type-display-title

Build with clarity

--ds-display-title

Page titleds-type-page-title

Provider connections

--ds-page-title

Section titleds-type-section-title

Routing configuration

--ds-section-title

Card titleds-type-card-title

Connection health

--ds-card-title-size

Bodyds-type-body

Body copy explains the task and its operational context.

--ds-body

UI textds-type-ui

Compact interface guidance and supporting labels

--ds-ui-text-size

Metadatads-type-metadata

Updated 2 minutes ago

--ds-metadata

Eyebrowds-type-eyebrow

WORKSPACE

--ds-eyebrow-size

Hierarchy in context

A page should have one obvious reading path before color or decoration is considered.

PROVIDER CONNECTION

Amazon Bedrock

Route approved model traffic through the production AWS account. Credentials are healthy and available to twelve applications.

Connection health

All checks passed in eu-west-1.

Last checked 2 minutes ago

Usage rules

Keep the hierarchy consistent across product surfaces.

Use semantic roles

Select the shared utility that matches the content’s job, then let density tokens adapt it.

Keep body copy readable

Use body or UI roles for sentences. Reserve metadata and menu roles for genuinely secondary, short content.

Preserve heading order

Typography classes control appearance; semantic heading elements still communicate page structure.

Avoid one-off sizes

Do not add local clamp(), pixel sizes, or fractional weights when an existing role expresses the hierarchy.

Density comparison

Typography changes with the selected density while preserving the same semantic role names.

Comfortable

Inventory overview

The same semantic roles adapt to default product rhythm.

Updated just now

Compact

Inventory overview

The same semantic roles adapt to reduced spatial footprint.

Updated just now

Operational

Inventory overview

The same semantic roles adapt to dense admin and workspace surfaces.

Updated just now

Implementation

Import one published CSS entry point, then apply the semantic utility that matches the content role.

<h1 className="ds-type-page-title">Provider connections</h1>
<p className="ds-type-body text-text-secondary">Manage the providers available to this workspace.</p>
<span className="ds-type-metadata text-text-supporting">Updated 2 minutes ago</span>