bon-ui
Text
Type scale
- xs11px / 1rem · --bon-text-xs
Whereas a common understanding of these rights and freedoms is
- sm13px / 1.5rem · --bon-text-sm
Whereas a common understanding of these rights and freedoms is
- base15px / 1.5rem · --bon-text-base
Whereas a common understanding of these rights and freedoms is
- lg17px / 1.5rem · --bon-text-lg
Whereas a common understanding of these rights and freedoms is
- xl20px / 2rem · --bon-text-xl
Whereas a common understanding of these rights and freedoms is
- 2xl24px / 2rem · --bon-text-2xl
Whereas a common understanding of these rights and freedoms is
- 3xl28px / 2.5rem · --bon-text-3xl
Whereas a common understanding of these rights and freedoms is
Baseline grid
8px zebra bands check whether mixed text lands on the vertical rhythm grid. Every line-height and gap in this stack is a multiple of 8px.
Cities · Lisbon · Weekend dispatch from the old town
A quiet square reopens after two years of work
The fountain is back, and with it the Saturday market. Stalls returned before sunrise, filling the square with fruit crates, bread, and the first arguments over who gets the corner nearest the water.
Shopkeepers say the first morning felt like a reunion. Neighbors who had walked around the fencing now cut straight through, stopping to talk in the shade of the new trees.
What changed on the ground
The paving follows the old paths, but the benches sit closer to the water. Children claimed the steps before noon. By late afternoon the square had the slow traffic of a place that already knows how it will be used.
A cafe owner on the east side left the door open. People kept asking if they could sit, she said, so she stopped answering and brought out chairs.
Reporting from Lisbon · 20 Aug 2026 · Filed after the Saturday market closed
By staff writers, with notes from shopkeepers on the east and west sides of the square
Overlay excludes panel padding. page title `3xl` 40px · caption `xs` 16px · section title `sm` 24px · body `base` 24px · tight 8px · default 16px · block 24px · section 32px
Baseline grid · 中文
同样的 8px 斑马条，用来看中文混排是否落在垂直节奏网格上。行高和间距仍是 8px 的倍数。
城市 · 里斯本 · 旧城区周末特稿
沉寂两年后，这座小广场重新开放
喷泉回来了，周六市集也回来了。天亮前摊位已经支起来，水果箱、面包，还有谁占靠水那一侧的第一轮争执。
店主们说，头一个早晨像重逢。以前绕着围栏走的邻里，现在径直穿过广场，在新种的树荫下停下来聊天。
地面上改了什么
铺装还顺着旧路，但长椅更靠近水边。中午前孩子已经占了台阶。到了傍晚，广场有了一种慢下来的人流，像是它已经知道自己会被怎样使用。
东侧一家咖啡馆把门开着。不断有人问能不能坐，老板说她后来不再回答，直接把椅子搬了出来。
里斯本报道 · 2026年8月20日 · 稿件在周六市集结束后发出
本报记者，并整理了广场东西两侧店主的口述
Overlay excludes panel padding. page title `3xl` 40px · caption `xs` 16px · section title `sm` 24px · body `base` 24px · tight 8px · default 16px · block 24px · section 32px
Text rhythm tokens
Keep font size and line-height focused on readability. Use the rhythm layer to constrain stacked text blocks to `8 / 16 / 24 / 32px` spacing.
- textStackTightstep 2 · 0.5rem · --bon-text-stack-tight
Tight text stack
Captions, metadata, eyebrow + label groups
Eyebrow
Section heading
Use rhythm tokens to control vertical layout, not ad-hoc margins between text elements.
- textStackstep 4 · 1rem · --bon-text-stack
Default text stack
Body copy, heading + short supporting text
Eyebrow
Section heading
Use rhythm tokens to control vertical layout, not ad-hoc margins between text elements.
- textBlockstep 6 · 1.5rem · --bon-text-block
Text block gap
Paragraph groups inside the same content block
Eyebrow
Section heading
Use rhythm tokens to control vertical layout, not ad-hoc margins between text elements.
- textSectionstep 8 · 2rem · --bon-text-section
Text section gap
Larger content groups or stacked text sections
Eyebrow
Section heading
Use rhythm tokens to control vertical layout, not ad-hoc margins between text elements.
Recommended pairings
Meta stack
Use `caption + 8px` rhythm.
Updated 2m ago
By bon-ui
Reading stack
Use `body + 16px` rhythm.
Paragraph rhythm should stay consistent inside the same content block.
Sixteen pixels is a good default for stacked prose without feeling loose.
Section intro
Use `heading + 24px` to body.
Docs
Vertical rhythm
Reserve larger gaps for transitions between text groups, not inside a single group.
Scale compatibility
Each size keeps its own font metrics, but stacked content should still use a constrained rhythm token. These demos cover `xs / sm / base / lg / xl`.
Recommended rhythm: 8px
Tiny metadata, helper copy, dense labels
XS sample
Compact stacks stay readable when the gap stays tight.
Keep the gap semantic, even when the font size changes.
Recommended rhythm: 8px
Captions, secondary descriptions, nav labels
SM sample
Small copy feels neat with an 8px rhythm.
Keep the gap semantic, even when the font size changes.
Recommended rhythm: 16px
Default paragraphs and reading content
BASE sample
Body text usually wants a calmer 16px rhythm.
Keep the gap semantic, even when the font size changes.
Recommended rhythm: 16px
Lead paragraphs and prominent supporting text
LG sample
Larger supporting copy still works well at 16px.
Keep the gap semantic, even when the font size changes.
Recommended rhythm: 24px
Hero intro, callouts, short marketing statements
XL sample
Display-like text needs a bit more room between lines.
Keep the gap semantic, even when the font size changes.
Heading + paragraph comparison
Real content usually mixes a title with one or two paragraphs. Compare a tighter stack with the recommended rhythm for each size pair.
sm heading + base paragraph
Compact docs and settings sections
Too tight · 8px
Designing with rhythm
A heading and paragraph need enough separation to feel related without becoming crowded.
The right gap depends on the text size, not only on visual instinct.
Recommended · 16px
Designing with rhythm
A heading and paragraph need enough separation to feel related without becoming crowded.
The right gap depends on the text size, not only on visual instinct.
lg heading + base paragraph
Standard section intro with stronger emphasis
A bit tight · 16px
Designing with rhythm
A heading and paragraph need enough separation to feel related without becoming crowded.
The right gap depends on the text size, not only on visual instinct.
Recommended · 24px
Designing with rhythm
A heading and paragraph need enough separation to feel related without becoming crowded.
The right gap depends on the text size, not only on visual instinct.
xl heading + lg paragraph
Hero intro, callout, or marketing statement
Still compact · 24px
Designing with rhythm
A heading and paragraph need enough separation to feel related without becoming crowded.
The right gap depends on the text size, not only on visual instinct.
Recommended · 32px
Designing with rhythm
A heading and paragraph need enough separation to feel related without becoming crowded.
The right gap depends on the text size, not only on visual instinct.
Rules
Prefer
`8 / 16 / 24 / 32px` gaps through semantic utilities or `TextStack`.
<TextStack gap="block">
<TextStack gap="tight">
<p className="text-caption">Eyebrow</p>
<h2 className="text-section-title">Section heading</h2>
</TextStack>
<p className="text-body">
Copy uses rhythm tokens, so stacks stay aligned.
</p>
</TextStack>Avoid
One-off `mt-*` / `mb-*` spacing that makes each text block drift.
<div className="flex flex-col">
<p className="text-caption mb-1">Eyebrow</p>
<h2 className="text-section-title mt-2">Section heading</h2>
<p className="text-body mt-3">
Copy uses one-off margins, so each block drifts.
</p>
</div>Note: line-heights snap to the 8px baseline (`16 / 24 / 32 / 40px`). Use rhythm tokens for the gaps between blocks so mixed stacks stay on the same grid.