Typography

Shared type roles and variable font axes give text a consistent rhythm.

A small set of type rules does most of the work. The same sizes, weights, and text colors apply to page titles, controls, and Markdown, so each piece keeps its place in the hierarchy.

Installation

One prompt for your coding agent to set up Reflow and use this system in Remix.

5 rules

Six shared type roles cover everything from page titles to the smallest annotation.
Regular is for body text, semibold is for headings and selected items, and bold is for page titles.
Use foreground and muted for text.
Set body text in Inter Variable. Use Inter, Geist Serif, or a selected Google Fonts family for headings.
Use one paragraph style across the site.

5 no-gos

Avoid uppercase for hierarchy. Use size and weight.
Leave letter spacing to Inter’s optical sizing.
Start a section with its title.
Give Markdown the same type roles and text colors as the rest of the site.
Use a text color token for hierarchy and leave opacity at full strength.

The scale

Each role pairs a font size with a line height. Press S outside a field to compare compact density.

A page titleDisplay · --rf-text-display

A section titleTitle · --rf-text-title

A subsection titleSubtitle · --rf-text-subtitle

A line of body textBody · --rf-text-body

A caption below a figureCaption · --rf-text-caption

A compact annotationMicro · --rf-text-micro

Heading font

Compare Inter and Geist Serif, or browse Google Fonts to try another family and weight in the specimen.

Getting started

Install the components you need

Body text stays in Inter, so only the hierarchy changes voice.

Markdown

Markdown uses the same type roles, including nested lists, to-dos, tables, and fenced code. Edit the source to see how the styles hold up.

Getting started with Reflow

Runtime Remix 3 · Styles CSS · License MIT

Setup

Install the type scale and styles
Add a dropdown and a dialog
Move every list to fluid hover
- Sidebar
- Command menu
Switch dense screens to compact

How it moves

Every component shares three motion tiers, and hover glides to the item under your cursor. A label gains weight without moving its neighbors. The motion page describes the tokens.

Shared motion keeps the interface feeling consistent.

What you get

Native Remix components
- Accessible keyboard behavior
- Form-aware controls
A size ladder of 36px and 28px
A skill for your coding agent

Motion tiers

Speed	Perceived duration	Used for
fast	80ms	Hover and focus
moderate	160ms	Menus and tabs
slow	240ms	Dialogs and drawers

Install

Use the workspace package and its stylesheet. Replace ~~duplicated controls~~ repeated markup with reusable components.

import { Button } from '@rtzll/reflow'
import '@rtzll/reflow/styles.css'

<Button>Continue</Button>

Next steps

Read the component examples
Install the skill
1. Let it inspect the project
2. Apply the relevant guidance
Review keyboard and motion behavior

Found an issue? Record a reproducible example.

Spacing

Give a new block its space above. The Markdown specimen uses these gaps, and the comparison lets you vary the paragraph spacing while its line height stays constant.

Markdown gap	Value	Placement
`Heading section`	28px	Above a second-level heading
`Heading subsection`	20px	Above a lower-level heading
`Block gap`	12px	Between consecutive blocks
`List item`	4px	Between list items
`Divider`	24px	Around a rule

A clear rhythm

Space belongs above the next block, where a new thought begins.

As content grows, the paragraphs retain their line height and alignment.

5 tweaks

Small adjustments keep labels steady, padding visible, and wrapped text even.

Weight without reflow

Reserve the heavier label width so selection keeps neighboring controls in place.

❌ Generic AI output

✓ With the skill

Steady numbers

Tabular figures keep counters aligned as their digits change.

Proportional figures

1099 events

Tabular figures

1099 events

Trimmed labels

text-box: trim-both cap alphabetic

Dashboard

Font box

Dashboard

Trimmed cap and baseline

Balanced headings

text-wrap: balance

A quieter place for your team to do its best work

Normal wrapping