Foundations / Typography

Type with a point of view.

Geist is the Rivelle default. Inter is available during rivelle init. Both use the same semantic scale, so switching the family never changes your component API.

Scale

Responsive display styles for product surfaces, with stable body styles for dense interfaces.

Display

Interface with intent.

Heading 1

A clear visual voice.

Heading 2

Designed for hierarchy.

Heading 3

Reusable by default.

Body

Rivelle uses a restrained type scale with deliberate rhythm, tight display tracking, and comfortable reading width.

Small

Supporting copy stays quiet without losing clarity.

CSS contract

Typography is exposed through Tailwind theme variables, while the selected family lives in one replaceable semantic token.

--font-family-sans: "Geist", ui-sans-serif, system-ui;
--text-display: clamp(3.5rem, 8vw, 7rem);
--text-h1: clamp(2.5rem, 5vw, 4.5rem);

<h1 className="text-h1 font-semibold">...</h1>