Malevich

Type system

Role-based type tokens — NAMU 1930 for Display, NAMU Pro for Heading and Body, JuliaMono for code. Display sizes scale fluidly.

How it works

Each role bundles family, size, weight, line-height and letter-spacing at --font-{role}-*, with a matching .font-{role} utility class. Pick by role, not size — a landing headline is display-hero; an in-article H1 is heading-title. Display roles are fluid via clamp().

Display

ExampleSpecsComponentsUsage for
Hero
clamp 40–80lh 1.0track -0.035emw 900--font-display-hero
Hero
Landing hero — maximum impact. Fluid.
Statement
clamp 32–56lh 1.05track -0.025emw 700--font-display-statement
StateCTA
Section-level statement. Fluid.
Title
clamp 28–40lh 1.1track -0.025emw 700--font-display-title
Site-headerAvatar
Page-title emphasis. Fluid.

Heading

ExampleSpecsComponentsUsage for
Heading title
24pxlh 1.25track -0.01emw 600--font-heading-title
Quote-blockState
Main heading, default H1 in content.
Heading section
18pxlh 1.3track -0.005emw 600--font-heading-section
SheetSite-header
Section heading, default H2.
Heading subsection
16pxlh 1.35track 0w 600--font-heading-subsection
AccordionPopover
Subsection heading, default H3.
Heading group
16pxlh 1.5track 0w 600--font-heading-group
Field-group
Group heading, default H4 — field-group titles.

Body

ExampleSpecsComponentsUsage for
Lead paragraph — an emphasized intro.
18pxlh 1.5track 0w 400--font-body-lead
HeroSelect
Lead paragraph, emphasized intro.
Regular body copy for comfortable reading.
16pxlh 1.55track 0w 400--font-body-regular
ButtonAccordionToast
Standard body copy.
Supporting text and helper copy.
14pxlh 1.5track 0.005emw 400--font-body-support
ButtonBreadcrumbTagSelect
Supporting text, helper copy.

Special

ExampleSpecsComponentsUsage for
Caption — a small annotation.
12pxlh 1.45track 0.01emw 400--font-caption
TagForm-buttonAvatar
Figure captions, small annotations.
Overline
11pxlh 1.2track 0.12emw 700--font-overline
BadgeCode-blockHero
Eyebrow labels, ALL CAPS, wide tracking.
Eyebrow label
12pxlh 1.2track 0.04emw 700--font-eyebrow
Available
Mixed-case overline.
const x = 42;
14pxlh 1.5track 0w 400--font-code
Available
Inline code.
mono large
16pxlh 1.5track 0w 400--font-mono-l
Available
Block monospace — large.
mono medium
14pxlh 1.5track 0w 400--font-mono-m
Code-blockCodeKbd
Block monospace — medium.
mono small
12pxlh 1.5track 0w 400--font-mono-s
Available
Block monospace — small.