#Visual and interaction standard

Semantic colors, dimensions and spacing keep components consistent across light/dark appearance and comfortable/compact density. The full standard lives in DESIGN-STANDARDS.md in the repository.

Card's small, default and large sizes adjust spacing, heading typography and heading height together, with embedded Tabs following the card size by default. Tabs share the heading area: they sit beneath a title or fill the entire heading height with vertically centered labels when no title is provided. The divider runs only below the entire tab bar. Labels and content share the Card content edge and insets, while divided continues to control the footer treatment.

Warnings use a bright amber consistently for icons, field borders and status fills, with independently derived readable text colors. Customize the warning color through ConfigProvider's theme.tokens.warningColor.

Options share a neutral gray background for hover and keyboard candidates; selected values retain a primary tint, semantic text and checkmarks. Select, AutoComplete, Cascader, TreeSelect, time lists and menus follow this palette; AutoComplete, Mentions and CommandPalette candidates stay neutral. Moving backgrounds smoothly change position and color without stacking fills over selected rows. Disabled options receive no interaction feedback, and danger actions retain red accents. Colors follow the regional ConfigProvider theme and light or dark appearance.

Select, TreeSelect and Cascader share selected-tag sizes and spacing. Tags wrap by default; tagWrap={false} keeps one line and collapses overflow into +N. Long labels truncate while preserving room for search and actions. Folding affects presentation only, never selected values.

Solid and outlined buttons emit a wave that quickly expands outside their contour, then slowly fades, while the button and label remain stable; soft and link buttons do not emit a wave. Solid buttons brighten on hover and deepen on press; outlined buttons change text and border colors. Soft buttons use a subtle neutral surface, with a pale red surface and red text for danger actions; the background deepens on hover and press. Menus and tabs use color, opacity, borders and shadows for feedback; selected indicators may move to the selected item. Drawers slide smoothly; feedback enters as a unit without separate icon/text springs. Buttons omit the wave when regional motion is disabled or system reduced motion is enabled; the system preference takes precedence.

Radius, borders and type build the hierarchy together. Radii step down from the outside in: dialogs, drawers and popups use the large radius; content surfaces such as cards, alerts and choice cards use the medium radius; buttons, fields and table frames use the base radius; checkboxes and other small elements use the small radius; status tags use borderless fills and the base radius. Content surfaces are separated by hairline borders and muted fills, not shadows; shadows are reserved for layers that actually float, such as popups, dialogs, dragged items and slider handles. Type hierarchy comes from size and color: 14px body, 13px secondary text, weight 600 for Card titles and document headings, and 500 for other component titles, labels and buttons. Option group headings use a 12px tracked muted style.

Inset backgrounds use nested curves: inner radius = max(0px, outer radius - padding - border width). The default popup has a 16px outer radius, 6px padding and a 1px border, so options use 9px. Hover, selected and moving highlights share the same curve and follow theme changes. Unequal padding is calculated per direction; additional insets in nested structures are included. Small and square themes clamp to zero. Independent controls, calendar cells, tags and icons keep their semantic radii.

Menu navigation items, hover backgrounds and moving selection highlights use the same base radius as buttons, independent of menu padding. A Menu radius override updates these curves together. Selectable items change only text and icon colors on hover, keyboard focus and press, preserving their backgrounds. Submenu triggers use a subtle hover background that deepens on press. Ancestors retain their normal appearance when a descendant is selected. Submenus use muted text and 32px rows (26px in compact density); navigation popups share the same feedback.

Pagination defaults to outlined buttons, with a borderless alternative. Both follow control-height tokens and retain their geometry on press, with a moving selection background. Outlined controls change text and border color; ghost controls use neutral fills.

Card-style Tabs use matching inner radii for tabs and the moving selection background, derived from the bar radius minus its actual padding and border and clamped at zero. Regional themes and component radius overrides feed the same calculation. The bar fits its labels and its size includes borders and padding; content panels retain the available width. Card tabs use 3 px padding and gaps, neutral text and a raised selected surface; pressing never scales a tab. Set block for equal widths and omit item content for a header-only view switcher.

Tag provides borderless tinted and solid fills with the theme's base radius (10px by default). A component radius override takes precedence. Tag, CheckableTag and TagGroup use bold labels following the theme's headingWeight (600 by default). Set bold={false} for regular weight, or configure bold through regional component defaults.

Acceptance covers default, hover, pressed, focus-visible, selected, disabled, loading, error and empty states. Text or ARIA must also express state. Icon-only actions need accessible names. Align icons with labels and dialog form edges with footer actions.

Compact density suits pointer/keyboard interfaces and keeps body text readable. Prefer comfortable or larger explicit controls on touch; essential targets should be at least 24px, preferably 44px. Local component settings and explicit theme dimensions override density and defaults.

Button inline padding follows its actual height, and component-level padding applies to every size. Small Steps keep body-size labels; card and list choice groups share a quiet section heading. Card headings have equal top and bottom insets, without duplicate spacing where they meet the body. Modal keeps a heading icon and subtle section dividers. Confirm is a compact API prompt with a bare icon beside its explanation and spacing-based sections. Headers without a description have less vertical space; divided Card, Modal and Drawer actions share compact footer spacing; Confirm uses the same bottom inset.

Steps labels have transparent backgrounds, with horizontal connectors placed after the text. Avatars use a single 2px white border, including overlapping groups, without an extra outline shadow. DataTable defaults to borderless striped rows. Borderless tables have square corners and untinted headers. Bordered tables use the base radius and muted headers; both modes use body text color for headings. Borderless headers keep a 2px bottom divider; stripes hide row dividers, while striped={false} restores fine row dividers. Enable bordered for the outer frame and column dividers; stripes blend the muted and table surfaces equally, and hover adds a subtle 3% primary tint to each row's base background, including striped rows.

Link buttons have no background, border, padding or fixed control height. Hover and press change text color without a wave. Use Link for navigation and the Button link variant for text actions.