2 Core

Small pieces. Real possibilities.

Choose a control, show a value, communicate a state. Build with pieces that already belong together.

Button

Every action starts somewhere.

Chart

Give your numbers a shape.

Input

A clear place for the next thought.

Avatar

A little space for identity.

Message

Feedback, right when it matters.

Checkbox

A choice you can see.

Core contains the individual pieces you place in an interface. Each component has one focused job, a public API and states that can be understood on their own. They use Root’s type, colour and scale rather than introducing a separate design language.

Choose a piece

Need	Components
Trigger an action or choose a state	Button, Checkbox, Switch, Cycle.
Enter a value	Input, and in Unit a Select or a Calendar picker.
Communicate or identify	Text, Icon, Avatar, Tag, Tooltip.
Show data or emphasis	Chart, Stat, Progress, Message, Card.
Link or separate content	Link, Gap.

Icon includes the rendering component and its SVG collection. The drawings support that component; they are not another numbered layer.

Use the public API

Import and register the component before using its custom element. Configure documented properties, attributes, slots and scoped tokens; listen for its events to connect application behavior. A native button or field retained inside a component keeps the browser’s keyboard and form semantics. Follow the individual page for controlled state, disabled behavior and accessibility requirements.

Compose upwards

Use Root for shared foundations. Combine Core pieces into a Unit when they need a common interaction or layout, then arrange units in a Page.