排版
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
--text-secondary for descriptions, captions and tertiary copy.--text-muted. Use sparingly for inline metadata.Bold uses medium 500 by default. Italic looks like this. A hyperlink uses the primary teal. Inline code sits at 12px. Use ⌘K to open the search.
You can highlight or strike old text. Footnotes use superscript or subscript. Abbreviations like CSS use a dotted underline.
Use small caps for compact metadata.
“Design is not just what it looks like and feels like. Design is how it works.”
- Concise list items at 13px
- Comfortable line-height of 1.6
- Bullet color matches body text
- First step in the sequence
- Second step continues from above
- Third step closes the loop
- Plan
- Business
- Seats
- 12 of 25 used
- Renewal
- May 28, 2026
Lead paragraph at 16/1.65 for product copy, blog intros, and onboarding screens. Keeps lines around 65–80 characters for comfortable reading.
Body paragraphs continue at 14/1.7 with secondary color. Notice how the spacing between paragraphs gives the eye a place to rest. Long-form articles can run to ~75 characters per line and stay readable on most desktop breakpoints.
Inline emphasis like links, bold accents, and italics all share the body line-height so vertical rhythm is preserved across the whole block.
Footnote. Smaller meta text (12.5/1.55) sits comfortably below dividers. Use this for source attributions, timestamps, and disclaimers.
// Add a chart factory to charts.js
function myChart(echarts, el, t) {
const chart = echarts.init(el);
chart.setOption({
series: [{ type: 'line', data: [12, 18, 24, 30] }]
});
return chart;
}
$ npm run build ✓ built in 4.9s $ npm run preview ➜ Local: http://localhost:4173/ $ █