The SQD
.md for AI

Squad UI — Typography

Albra Grotesk — the official typeface for Squad UI

Font Family

Albra Grotesk

font-family: var(--sqd-font-family-sans)

Download Fonts

Light
.otf
Light Italic
.otf
Regular
.otf
Regular Italic
.otf
Medium
.otf
Medium Italic
.otf
Semi
.otf
Semi Italic
.otf
Bold
.otf
Bold Italic
.otf
Black
.otf
Black Italic
.otf

Weights

300Lightfont-light
400Regularfont-normal
500Mediumfont-medium
600Semifont-semibold
700Boldfont-bold
900Blackfont-black

Weights (Italic)

300iLight Italic
400iRegular Italic
500iMedium Italic
600iSemi Italic
700iBold Italic
900iBlack Italic

Type Scale

xs / 12pxThe quick brown fox jumps over the lazy dog
sm / 14pxThe quick brown fox jumps over the lazy dog
base / 16pxThe quick brown fox jumps over the lazy dog
lg / 18pxThe quick brown fox jumps over the lazy dog
xl / 20pxThe quick brown fox jumps over the lazy dog
2xl / 24pxThe quick brown fox jumps over the lazy dog
3xl / 30pxThe quick brown fox jumps over the lazy dog
4xl / 36pxThe quick brown fox jumps over the lazy dog

Paragraph

Albra Grotesk is a modern geometric sans-serif typeface designed for clarity and warmth. Its clean letterforms and generous spacing make it ideal for interfaces, headings, and body text.

With weights ranging from Light (300) to Black (900), and full italic support, Albra Grotesk provides the flexibility needed for a complete design system. It pairs well with monospace fonts for code blocks and technical content.

Numbers

0123456789
$1,234,567.89 — 99.7% — +1 (555) 012-3456

Alphabet

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

Keyboard Shortcuts (Kbd)

Single keys

⌘⇧⌥⌃⏎⌫⎋TabSpace

Key combinations

⌘C⌘V⌘⇧PCtrlAltDel

In context

Press ⌘K to open the command menu, or ⌘B to toggle bold.

Usage in Code

// CSS variable
font-family: var(--sqd-font-family-sans);
// Tailwind class
className="font-[var(--sqd-font-family-sans)]"
// Direct
font-family: "Albra Grotesk", sans-serif;