Normalization

Anta ships an opinionated reset + typography baseline in reset.css, so plain HTML (<h2>, <ul>, <a>, <table>…) renders in the same visual language as the components — no per-page restyling to make prose match a <Title> or a <Table>.

It’s a separate import, and every rule lives in a single cascade layer (@layer anta), so it’s easy to layer your own reset around it or override any piece. If you’d rather bring your own reset, just don’t import this one.

import '@antadesign/anta/tokens.css'   // design tokens
import '@antadesign/anta/reset.css'     // ← this page (optional)
import '@antadesign/anta/elements'      // web components (client-side only)

What it normalizes

Structural reset

• box-sizing: border-box on every element (and ::before / ::after).
• margin: 0 on everything — apps build spacing from explicit values.
• Replaced elements (img, picture, video, canvas, svg) → display: block + max-width: 100%, so a stray large asset can’t blow out the layout.
• Form controls (input, button, textarea, select) → font: inherit.
• overflow-wrap: break-word on paragraphs + headings; text-wrap: pretty on <p> and text-wrap: balance on headings.

Typography (Anta’s opinion)

This is not a neutral normalize — these defaults make raw markup match the components.

• Headings adopt the exact scale of <Title level={n}> — h1–h6 sizes, line-heights, and block margins, weight ≈585, letter-spacing: 0, color --text-1. (Kept in lockstep with a-title.css.)
• strong → font-weight: 600.
• Inline code → line-height: 1em so it doesn’t inflate the line box of surrounding prose.
• Lists (ul / ol): 3ch left padding so markers hug the text; a small bottom margin between items; markers toned to --text-5.
• menu is stripped to a clean semantic container (no disc markers / default padding).
• Links get --link-color with a hairline underline (75% alpha, 0.5px); hover only thickens it to 1px (no color repaint). Anchor-buttons (<a role="button">) are excluded so they keep button styling.
• ::selection → brand color at 15% alpha.
• Tables: border-collapse, tabular-nums, and a polite cell baseline; opt into a framed look with <table data-bordered> (outer frame + column dividers + rounded corners).

Everything above is defined in src/reset.css, inside @layer anta — read that file for the authoritative set (it’s short and commented). The headings block is duplicated in src/elements/a-title.css; the two are kept in sync.

Cascade layers — how to override

Anta declares this layer order once (in tokens.css):

@layer base, anta, components, utilities;

Everything Anta ships — this reset and the element styles — lives in @layer anta. That placement is deliberate:

• Above base — a framework preflight you drop into @layer base (e.g. Tailwind) won’t wipe Anta’s typography.
• Below components and utilities — your own component or utility CSS overrides Anta with no specificity battles.
• Unlayered CSS beats every layer — so any plain rule you write already wins over Anta’s reset, no !important needed.

Gotcha — don’t re-add a universal hard reset unlayered. Overriding a specific element unlayered is the intended escape hatch (below). But a blanket * { margin: 0 } / *, *::before, *::after { box-sizing: border-box } left unlayered also outranks Anta’s per-element defaults — its p, caption, and ul / ol margins — because unlayered wins over @layer anta regardless of specificity. Anta already runs that universal * reset itself, inside @layer anta, so the copy-pasted duplicate is redundant and harmful: delete it, or if you keep your own reset wrap it in @layer base { … } (below anta) so Anta’s element defaults still apply.

Override one thing

Write the rule unlayered (or in a layer after anta) — targeting a specific element, not *:

/* wins over Anta's @layer anta reset — no !important */
h2 { letter-spacing: -0.01em; }

Bring your own reset

Because reset.css is a separate import, you can simply not import it and let your own reset govern typography — keep the tokens and elements:

import '@antadesign/anta/tokens.css'   // keep — tokens
import '@antadesign/anta/elements'      // keep — components
// no '@antadesign/anta/reset.css'      // your reset is in charge

One dependency to keep: Anta’s elements don’t set their own box-sizing — they assume the global * { box-sizing: border-box } that this reset provides. Every common reset (normalize.css, Tailwind’s preflight, etc.) sets it too, so swapping resets is normally seamless; but if yours doesn’t, keep that one rule or component padding, max-width, and icon-button sizing will be slightly off.

Or import both and override only the pieces you want (unlayered, or in a later layer).

Why it’s opinionated

A blank-slate reset would leave headings, lists, links, and tables looking like raw browser defaults — out of step with the components beside them. Anta’s reset instead gives plain markup the same baseline as <Title>, <Table>, and the link styles, so a page mixing prose and components reads as one system. When you want a clean slate, opt out above.