Typography

Families

Portal and docs use Aktiv Grotesk for all UI type (body, headings, display). Regular (400) and Medium (500) are self-hosted; there is no separate display or mono face. Load it from @sophic/fonts by applying brandFontClassNames on the document <body>:

Role	Face	CSS variable	Tailwind
Body / UI / headings / display	Aktiv Grotesk	`--font-sans`	`font-sans (default)`
Compat alias	Aktiv Grotesk	`--font-mono`	`font-mono → --font-sans`

import { brandFontClassNames } from "@sophic/fonts";

<body className={`${brandFontClassNames} font-sans antialiased`}>

{/* Large / hero — same face; display tokens tighten tracking */}
<p className="font-sans text-figure-md">…</p>

{/* Section titles — Medium */}
<h3 className="font-sans text-heading-md font-medium">Holdings</h3>

Without @sophic/fonts, tokens fall back to "Aktiv Grotesk", system-ui, sans-serif.

Scale

Rendered live from the shipped CSS variables. Figma's Text md (15px) is the body default and maps onto Tailwind's text-base. Leading and tracking are tuned for Aktiv Grotesk: body near normal, headings slightly tight (-0.01em … -0.03em on display). Weights shipped are Regular (400), Medium (500), and Semibold (600). Use font-semibold — there is no Bold cut (font-bold is mapped to 600).

Figure

Big numbers: prices, totals, amount entry. Regular, tight tracking.

text-figure-lg

Figure Large

font-family:: Aktiv Grotesk
font-weight:: Regular (400)
font-size:: 42px
line-height:: 1.05
letter-spacing:: -0.03em

text-figure-md

Figure Medium

font-family:: Aktiv Grotesk
font-weight:: Regular (400)
font-size:: 32px
line-height:: 1.1
letter-spacing:: -0.025em

text-figure-sm

Figure Small

font-family:: Aktiv Grotesk
font-weight:: Regular (400)
font-size:: 24px
line-height:: 1.15
letter-spacing:: -0.02em

Heading

Page, drawer and section card titles. Aktiv Grotesk Medium.

text-heading-xl

Heading XL

font-family:: Aktiv Grotesk
font-weight:: Medium (500)
font-size:: 24px
line-height:: 1.2
letter-spacing:: -0.015em

text-heading-lg

Heading Large

font-family:: Aktiv Grotesk
font-weight:: Medium (500)
font-size:: 20px
line-height:: 1.25
letter-spacing:: -0.0125em

text-heading-md

Heading Medium

font-family:: Aktiv Grotesk
font-weight:: Medium (500)
font-size:: 17px
line-height:: 1.25
letter-spacing:: -0.01em

text-heading-sm

Heading Small

font-family:: Aktiv Grotesk
font-weight:: Medium (500)
font-size:: 15px
line-height:: 1.45
letter-spacing:: normal

Text

Body copy and UI text. --font-sans: Aktiv Grotesk.

text-xl

Text XL Regular

font-family:: Aktiv Grotesk
font-weight:: Regular (400)
font-size:: 18px
line-height:: 1.4
letter-spacing:: -0.005em

text-xl font-medium

Text XL Medium

font-family:: Aktiv Grotesk
font-weight:: Medium (500)
font-size:: 18px
line-height:: 1.4
letter-spacing:: -0.005em

text-lg

Text Large Regular

font-family:: Aktiv Grotesk
font-weight:: Regular (400)
font-size:: 16px
line-height:: 1.45
letter-spacing:: -0.005em

text-lg font-medium

Text Large Medium

font-family:: Aktiv Grotesk
font-weight:: Medium (500)
font-size:: 16px
line-height:: 1.45
letter-spacing:: -0.005em

text-base

Text Base Regular

font-family:: Aktiv Grotesk
font-weight:: Regular (400)
font-size:: 15px
line-height:: 1.45
letter-spacing:: normal

text-base font-medium

Text Base Medium

font-family:: Aktiv Grotesk
font-weight:: Medium (500)
font-size:: 15px
line-height:: 1.45
letter-spacing:: normal

text-sm

Text Small Regular

font-family:: Aktiv Grotesk
font-weight:: Regular (400)
font-size:: 14px
line-height:: 1.4
letter-spacing:: normal

text-sm font-medium

Text Small Medium

font-family:: Aktiv Grotesk
font-weight:: Medium (500)
font-size:: 14px
line-height:: 1.4
letter-spacing:: normal

Families

Scale

Figure

Heading

Text

On this page