HTML base element resets and theme tokens from preset.css (@layer base). No extra utility classes needed — these styles apply to native elements automatically.

Notes

All styles live in @layer base and require no extra classes to activate.
Theme tokens define spacing (4px base), border-radius, shadows, transitions, direction factors (LTR/RTL), and light/dark scheme thresholds.
Custom scrollbar (8px, desktop only), focus-visible outline, and placeholder styling are globally applied.
Forms, inputs, selects, textareas get unified height (32px), border, hover/focus states, and disabled opacity.

Typography

Heading levels

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Paragraph & inline text

Regular paragraph text using system UI font stack.

Bold and Strong — consistent weight.

Small text with proportional sizing.

H₂O (subscript) and E = mc² (superscript).

Monospace & keyboard

Inline code: npm install beautify

function hello() {
  console.log("monospace");
}

Keyboard: Ctrl+C + Ctrl+V

Links & Focus

Link

Default link (color: inherit)

Focus-visible

Tab through to see the outline:

Forms

Text inputs

Textarea

Select

Button & file

Checkbox & Radio

Option A Option B

Male Female

Date / Time

Range slider

Readonly / Disabled

Progress & Meter

Progress

70%

Complete

Indeterminate

Meter

Good (green)

Average (yellow)

Poor (red)

Lists

Unordered list

Item one
- Nested item
  - Deep nested
Item two
Item three

Ordered list

First step
1. Sub-step
Second step
Third step

Definition list

Beijing: Population: 21.8 million
Shanghai: Population: 24.7 million

Reset list

Use .reset-ul / .reset-dl to restore default browser styling:

No bullets
No indent

Quotes & Semantics

Blockquote

A blockquote with left accent border and subtle background.

Citation & emphasis

This is a citation with dashed underline.

This is emphasized text (circle dots under CJK text).

This is highlighted text.

Ruby annotation

中Zhong华Hua

Address & Time

Shenzhen, China

2024-04-08

Containers

Fieldset & Legend

Personal Info

Name:

Horizontal rule

Above

Below

Details / Summary

Click to expand

Hidden content here. Chevron icon rotates on open.

Dialog

Table

#	City	Population	Type
1	Beijing	21.8M	Capital
2	Shanghai	24.7M	Municipality
3	Guangzhou	18.7M	City
4	Shenzhen	17.6M	City

Scrollbar

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Line 11

Line 12

Line 13

Line 14

Line 15

Preset Styles