> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/guide/design-standards.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# 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.

| Foundation                            | Comfortable        | Compact            |
| ------------------------------------- | ------------------ | ------------------ |
| Control height                        | 36px               | 30px               |
| Popup option minimum height           | 32px               | 26px               |
| Body text / line height               | 14px / 1.6         | 14px / 1.6         |
| Spacing unit                          | 8px                | 6px                |
| Form row gap                          | 24px               | 16px               |
| Secondary text                        | 13px               | 13px               |
| Dialog block / inline padding         | 20px / 24px        | 16px / 20px        |
| Radius: small / base / medium / large | 6 / 10 / 12 / 16px | 6 / 10 / 12 / 16px |

Solid and outlined buttons emit a wave that quickly expands outside their contour, then slowly fades, while the button and label remain stable; ghost buttons do not emit a wave. Solid buttons brighten on hover and deepen on press; outlined buttons change text and border colors. 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 small 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 500 for component titles, labels and buttons, and 600 only for document headings. 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.

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.

Tag provides borderless tinted and solid fills, with a radius of five-sixths of the theme's small radius (5px by default). A component radius override takes precedence.

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.

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.