Typography

Squad uses Albra for display headings, Albra Grotesk for body (with Inter as an interchangeable fallback), and a system mono stack for code — exposed as --font-heading, --font-grotesk, --font-sans, and --font-mono.

Albra — Heading
Display typeface. Use for page titles, hero headlines, and section headers.

The quick brown fox jumps over the lazy dog

Light · 300

The quick brown fox jumps over the lazy dog

Regular · 400

The quick brown fox jumps over the lazy dog

Medium · 500

The quick brown fox jumps over the lazy dog

Semi · 600

The quick brown fox jumps over the lazy dog

Bold · 700

The quick brown fox jumps over the lazy dog

Black · 900

The quick brown fox jumps over the lazy dog

Albra Grotesk — Body
Workhorse body typeface. Use for paragraphs, UI copy, and descriptions.

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Light · 300

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Light Italic · 300 · italic

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Regular · 400

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Regular Italic · 400 · italic

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Medium · 500

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Semi · 600

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Bold · 700

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Bold Italic · 700 · italic

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Black · 900

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Inter — interchangeable body
Google's workhorse UI face. Use when Albra Grotesk isn't available (legacy apps like prf4, external embeds, quick prototypes) — it reads similarly at UI sizes and covers the same body/display roles.

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Regular · 400

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Medium · 500

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Semi · 600

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Bold · 700

Squad builds tooling to help teams move faster without losing craft — from shared components to internal AI agents and data pipelines.

Mono — code & data
Reserved for code snippets, inline tokens, keyboard shortcuts, and tabular numeric data. Uses the system stack ui-monospace, Roboto Mono, SFMono-Regular, Menlo, Monaco, Consolas — no download required.
const squad = { brand: "Squad", primary: "#7A6BFF" };
export function greet(name: string) {
  return `Hello, ${name}! — from ${squad.brand}`;
}

1,234.56 · $99.00 · 420ms · 93% · v2.7.1