Nooxit
Foundations

Typography

Aspekta, and the 99 text styles from the Figma kit.

Nooxit uses Aspekta for all interface text, including case numbers, amounts and times. It replaced DM Sans on 2026-10-01, chosen over Overused Grotesk after a client review.

There is no brand monospace. Code samples and <code> use the operating system's monospace font, and nothing in the product interface does.

The Figma kit names its text styles text-{size}/leading-{line height}/{weight}, which maps one to one onto Tailwind utilities. The tables below print the Tailwind classes that reproduce each style.

The scale

Letter spacing follows the kit: -2.5% (tracking-tight) at 30px and above, -0.6px at 20 and 24px, and none below that.

Display

text-9xl/leading-none/normal128px / leading-none / 400 / -2.5%text-9xl leading-none font-normal tracking-tight

Nooxit

text-9xl/leading-none/medium128px / leading-none / 500 / -2.5%text-9xl leading-none font-medium tracking-tight

Nooxit

text-9xl/leading-none/semibold128px / leading-none / 600 / -2.5%text-9xl leading-none font-semibold tracking-tight

Nooxit

text-9xl/leading-none/bold128px / leading-none / 700 / -2.5%text-9xl leading-none font-bold tracking-tight

Nooxit

text-9xl/leading-none/extrabold128px / leading-none / 800 / -2.5%text-9xl leading-none font-extrabold tracking-tight

Nooxit

text-8xl/leading-none/normal96px / leading-none / 400 / -2.5%text-8xl leading-none font-normal tracking-tight

Nooxit

text-8xl/leading-none/medium96px / leading-none / 500 / -2.5%text-8xl leading-none font-medium tracking-tight

Nooxit

text-8xl/leading-none/semibold96px / leading-none / 600 / -2.5%text-8xl leading-none font-semibold tracking-tight

Nooxit

text-8xl/leading-none/bold96px / leading-none / 700 / -2.5%text-8xl leading-none font-bold tracking-tight

Nooxit

text-8xl/leading-none/extrabold96px / leading-none / 800 / -2.5%text-8xl leading-none font-extrabold tracking-tight

Nooxit

text-7xl/leading-none/normal72px / leading-none / 400 / -2.5%text-7xl leading-none font-normal tracking-tight

Nooxit

text-7xl/leading-none/medium72px / leading-none / 500 / -2.5%text-7xl leading-none font-medium tracking-tight

Nooxit

text-7xl/leading-none/semibold72px / leading-none / 600 / -2.5%text-7xl leading-none font-semibold tracking-tight

Nooxit

text-7xl/leading-none/bold72px / leading-none / 700 / -2.5%text-7xl leading-none font-bold tracking-tight

Nooxit

text-7xl/leading-none/extrabold72px / leading-none / 800 / -2.5%text-7xl leading-none font-extrabold tracking-tight

Nooxit

text-6xl/leading-none/normal60px / leading-none / 400 / -2.5%text-6xl leading-none font-normal tracking-tight

Nooxit

text-6xl/leading-none/medium60px / leading-none / 500 / -2.5%text-6xl leading-none font-medium tracking-tight

Nooxit

text-6xl/leading-none/semibold60px / leading-none / 600 / -2.5%text-6xl leading-none font-semibold tracking-tight

Nooxit

text-6xl/leading-none/bold60px / leading-none / 700 / -2.5%text-6xl leading-none font-bold tracking-tight

Nooxit

text-6xl/leading-none/extrabold60px / leading-none / 800 / -2.5%text-6xl leading-none font-extrabold tracking-tight

Nooxit

text-5xl/leading-none/normal48px / leading-none / 400 / -2.5%text-5xl leading-none font-normal tracking-tight

Nooxit

text-5xl/leading-none/medium48px / leading-none / 500 / -2.5%text-5xl leading-none font-medium tracking-tight

Nooxit

text-5xl/leading-none/semibold48px / leading-none / 600 / -2.5%text-5xl leading-none font-semibold tracking-tight

Nooxit

text-5xl/leading-none/bold48px / leading-none / 700 / -2.5%text-5xl leading-none font-bold tracking-tight

Nooxit

text-5xl/leading-none/extrabold48px / leading-none / 800 / -2.5%text-5xl leading-none font-extrabold tracking-tight

Nooxit

Headings

text-4xl/leading-10/normal36px / 40px / 400 / -2.5%text-4xl leading-10 font-normal tracking-tight

Sustainable homes, built to last

text-4xl/leading-10/medium36px / 40px / 500 / -2.5%text-4xl leading-10 font-medium tracking-tight

Sustainable homes, built to last

text-4xl/leading-10/semibold36px / 40px / 600 / -2.5%text-4xl leading-10 font-semibold tracking-tight

Sustainable homes, built to last

text-4xl/leading-10/bold36px / 40px / 700 / -2.5%text-4xl leading-10 font-bold tracking-tight

Sustainable homes, built to last

text-4xl/leading-none/normal36px / leading-none / 400 / -2.5%text-4xl leading-none font-normal tracking-tight

Sustainable homes, built to last

text-4xl/leading-none/medium36px / leading-none / 500 / -2.5%text-4xl leading-none font-medium tracking-tight

Sustainable homes, built to last

text-4xl/leading-none/semibold36px / leading-none / 600 / -2.5%text-4xl leading-none font-semibold tracking-tight

Sustainable homes, built to last

text-4xl/leading-none/bold36px / leading-none / 700 / -2.5%text-4xl leading-none font-bold tracking-tight

Sustainable homes, built to last

text-3xl/leading-9/normal30px / 36px / 400 / -0.75pxtext-3xl leading-9 font-normal tracking-tight

Sustainable homes, built to last

text-3xl/leading-9/medium30px / 36px / 500 / -2.5%text-3xl leading-9 font-medium tracking-tight

Sustainable homes, built to last

text-3xl/leading-9/semibold30px / 36px / 600 / -2.5%text-3xl leading-9 font-semibold tracking-tight

Sustainable homes, built to last

text-3xl/leading-9/bold30px / 36px / 700 / -2.5%text-3xl leading-9 font-bold tracking-tight

Sustainable homes, built to last

text-3xl/leading-none/normal30px / leading-none / 400 / -2.5%text-3xl leading-none font-normal tracking-tight

Sustainable homes, built to last

text-3xl/leading-none/medium30px / leading-none / 500 / -2.5%text-3xl leading-none font-medium tracking-tight

Sustainable homes, built to last

text-3xl/leading-none/semibold30px / leading-none / 600 / -2.5%text-3xl leading-none font-semibold tracking-tight

Sustainable homes, built to last

text-3xl/leading-none/bold30px / leading-none / 700 / -2.5%text-3xl leading-none font-bold tracking-tight

Sustainable homes, built to last

text-2xl/leading-8/normal24px / 32px / 400 / -0.6pxtext-2xl leading-8 font-normal tracking-tight

Sustainable homes, built to last

text-2xl/leading-8/medium24px / 32px / 500 / -0.6pxtext-2xl leading-8 font-medium tracking-tight

Sustainable homes, built to last

text-2xl/leading-8/semibold24px / 32px / 600 / -0.6pxtext-2xl leading-8 font-semibold tracking-tight

Sustainable homes, built to last

text-2xl/leading-8/bold24px / 32px / 700 / -0.6pxtext-2xl leading-8 font-bold tracking-tight

Sustainable homes, built to last

text-2xl/leading-none/normal24px / leading-none / 400 / -0.6pxtext-2xl leading-none font-normal tracking-tight

Sustainable homes, built to last

text-2xl/leading-none/medium24px / leading-none / 500 / -0.6pxtext-2xl leading-none font-medium tracking-tight

Sustainable homes, built to last

text-2xl/leading-none/semibold24px / leading-none / 600 / -0.6pxtext-2xl leading-none font-semibold tracking-tight

Sustainable homes, built to last

text-2xl/leading-none/bold24px / leading-none / 700 / -0.6pxtext-2xl leading-none font-bold tracking-tight

Sustainable homes, built to last

text-xl/leading-7/normal20px / 28px / 400 / -0.6pxtext-xl leading-7 font-normal tracking-[-0.6px]

Sustainable homes, built to last

text-xl/leading-7/medium20px / 28px / 500 / -0.6pxtext-xl leading-7 font-medium tracking-[-0.6px]

Sustainable homes, built to last

text-xl/leading-7/semibold20px / 28px / 600 / -0.6pxtext-xl leading-7 font-semibold tracking-[-0.6px]

Sustainable homes, built to last

text-xl/leading-7/bold20px / 28px / 700 / -0.6pxtext-xl leading-7 font-bold tracking-[-0.6px]

Sustainable homes, built to last

text-xl/leading-none/normal20px / leading-none / 400 / -0.6pxtext-xl leading-none font-normal tracking-[-0.6px]

Sustainable homes, built to last

text-xl/leading-none/medium20px / leading-none / 500 / -0.6pxtext-xl leading-none font-medium tracking-[-0.6px]

Sustainable homes, built to last

text-xl/leading-none/semibold20px / leading-none / 600 / -0.6pxtext-xl leading-none font-semibold tracking-[-0.6px]

Sustainable homes, built to last

text-xl/leading-none/bold20px / leading-none / 700 / -0.6pxtext-xl leading-none font-bold tracking-[-0.6px]

Sustainable homes, built to last

text-lg/leading-7/normal18px / 28px / 400text-lg leading-7 font-normal

Sustainable homes, built to last

text-lg/leading-7/medium18px / 28px / 500text-lg leading-7 font-medium

Sustainable homes, built to last

text-lg/leading-7/semibold18px / 28px / 600text-lg leading-7 font-semibold

Sustainable homes, built to last

text-lg/leading-7/bold18px / 28px / 700text-lg leading-7 font-bold

Sustainable homes, built to last

text-lg/leading-none/normal18px / leading-none / 400text-lg leading-none font-normal

Sustainable homes, built to last

text-lg/leading-none/medium18px / leading-none / 500text-lg leading-none font-medium

Sustainable homes, built to last

text-lg/leading-none/semibold18px / leading-none / 600 / -2.5%text-lg leading-none font-semibold tracking-tight

Sustainable homes, built to last

text-lg/leading-none/bold18px / leading-none / 700text-lg leading-none font-bold

Sustainable homes, built to last

Body

text-base/leading-7/normal16px / 28px / 400text-base leading-7 font-normal

Sustainable homes, built to last

text-base/leading-7/medium16px / 28px / 500text-base leading-7 font-medium

Sustainable homes, built to last

text-base/leading-7/semibold16px / 28px / 600text-base leading-7 font-semibold

Sustainable homes, built to last

text-base/leading-7/bold16px / 28px / 700text-base leading-7 font-bold

Sustainable homes, built to last

text-base/leading-6/normal16px / 24px / 400text-base leading-6 font-normal

Sustainable homes, built to last

text-base/leading-6/medium16px / 24px / 500text-base leading-6 font-medium

Sustainable homes, built to last

text-base/leading-6/semibold16px / 24px / 600text-base leading-6 font-semibold

Sustainable homes, built to last

text-base/leading-6/bold16px / 24px / 700text-base leading-6 font-bold

Sustainable homes, built to last

text-base/leading-6/underline16px / 24px / 400text-base leading-6 font-normal underline

Sustainable homes, built to last

text-base/leading-6/medium-underline16px / 24px / 500text-base leading-6 font-medium underline

Sustainable homes, built to last

text-base/leading-none/normal16px / leading-none / 400text-base leading-none font-normal

Sustainable homes, built to last

text-base/leading-none/medium16px / leading-none / 500text-base leading-none font-medium

Sustainable homes, built to last

text-base/leading-none/semibold16px / leading-none / 600text-base leading-none font-semibold

Sustainable homes, built to last

text-base/leading-none/bold16px / leading-none / 700text-base leading-none font-bold

Sustainable homes, built to last

text-base/leading-none/underline16px / leading-none / 400text-base leading-none font-normal underline

Sustainable homes, built to last

text-base/leading-none/medium-undeline16px / leading-none / 500text-base leading-none font-medium underline

Sustainable homes, built to last

text-sm/leading-6/normal14px / 24px / 400text-sm leading-6 font-normal

Sustainable homes, built to last

text-sm/leading-6/medium14px / 24px / 500text-sm leading-6 font-medium

Sustainable homes, built to last

text-sm/leading-6/semibold14px / 24px / 600text-sm leading-6 font-semibold

Sustainable homes, built to last

text-sm/leading-6/bold14px / 24px / 700text-sm leading-6 font-bold

Sustainable homes, built to last

text-sm/leading-6/medium-underline14px / 24px / 500text-sm leading-6 font-medium underline

Sustainable homes, built to last

text-sm/leading-5/normal14px / 20px / 400text-sm leading-5 font-normal

Sustainable homes, built to last

text-sm/leading-5/medium14px / 20px / 500text-sm leading-5 font-medium

Sustainable homes, built to last

text-sm/leading-5/semibold14px / 20px / 600text-sm leading-5 font-semibold

Sustainable homes, built to last

text-sm/leading-5/bold14px / 20px / 700text-sm leading-5 font-bold

Sustainable homes, built to last

text-sm/leading-5/underline14px / 20px / 400text-sm leading-5 font-normal underline

Sustainable homes, built to last

text-sm/leading-none/normal14px / leading-none / 400text-sm leading-none font-normal

Sustainable homes, built to last

text-sm/leading-none/medium14px / leading-none / 500text-sm leading-none font-medium

Sustainable homes, built to last

text-sm/leading-none/semibold14px / leading-none / 600text-sm leading-none font-semibold

Sustainable homes, built to last

text-sm/leading-none/bold14px / leading-none / 700text-sm leading-none font-bold

Sustainable homes, built to last

text-xs/leading-4/normal12px / 16px / 400text-xs leading-4 font-normal

Sustainable homes, built to last

text-xs/leading-4/medium12px / 16px / 500text-xs leading-4 font-medium

Sustainable homes, built to last

text-xs/leading-4/semibold12px / 16px / 600text-xs leading-4 font-semibold

Sustainable homes, built to last

text-xs/leading-4/bold12px / 16px / 700text-xs leading-4 font-bold

Sustainable homes, built to last

Numbers

Aspekta has proportional digits and no tabular figures, so tabular-nums has no effect. Do not add it. In tables, right-align amounts and times so a column still shares a right edge. Aspekta also has no italic; the browser slants the upright instead.

Removed: DM Mono

The six DM Mono styles were removed on 2026-10-01 by client decision: text-base/leading-6/mono, text-base/leading-none/mono, text-sm/leading-5/mono, text-sm/leading-5/mono-semibold, text-xs/leading-4/mono and text-xs/leading-4/uppercase. Each has a sans twin at the same size and line height. Where an uppercase label is still wanted, add uppercase to a sans style.

Font variables

--font-sans: var(--font-brand, 'Aspekta'), ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

font-heading is a third alias that also resolves to Aspekta. It exists so headings can be moved to a different family later without touching every component. font-mono is for code only.

Colors

The Nooxit primitives and the semantic tokens built from them.

Spacing

The 4px spacing rhythm the components are built on.

On this page

The scaleDisplayHeadingsBodyNumbersRemoved: DM MonoFont variables