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.
Interface with intent.
A clear visual voice.
Designed for hierarchy.
Reusable by default.
Rivelle uses a restrained type scale with deliberate rhythm, tight display tracking, and comfortable reading width.
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 Variable", "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>Global font
rivelle init imports the selected variable font and applies --font-family-sans to body. The managed rule intentionally sits outside a CSS layer so starter styles such as Next.js' Arial declaration cannot take precedence. To use a different family later, change the semantic token or place your own body rule after the Rivelle theme block.
:root {
--font-family-sans: "Geist Variable", "Geist", ui-sans-serif, system-ui;
}
body {
font-family: var(--font-family-sans);
}