Design system
Foundations and shared components used by every Piqle Next product page.
System rules
Non-negotiable contracts for every shared component.
Components use named color, radius, spacing, and layer tokens. Raw values stay in the token source.
A border or divider belongs to one component. Embedded previews may not stack the same edge twice.
Tooltips, menus, and popovers render in the document overlay layer with collision handling.
Hover, focus, pressed, and loading states never move controls, labels, or icons.
Adjacent inputs, menus, and actions use the same semantic control size. The default mixed row uses medium controls throughout.
Independent primitives such as badges and avatars are documented and reviewed separately.
No product, component, helper, counter, or documentation text may render below 12px.
Headings begin with the heading itself. Small grey uppercase labels above headings are forbidden.
Every component ships with states, usage guidance, accessibility, embedding, and responsive checks.