Every core control at page level and in modals, with populated, empty, loading, error and success states.
A titled group of related fields + one action, recessed inside a card on the well material. Header row = icon + proper-scale title (+ optional caption) — never an inline-bold body line. Fields flex; the trailing action aligns to the input height. Destructive clusters use the .danger variant (tinted title + border, confirm action at the END of its row); planned-but-inactive ones use .pinstripe.disabled with the ◇ roadmap badge.
214 product(s) re-pointed, 3 variant(s) folded in.
Modals sit on a blurred scrim at e4. Same field components as page level — nothing restyled, only reflowed.
Add .speech to any alert and a triangular tail breaks the bottom border near (not at) the right corner, pointing at the speaker. Seat the speaker with .speech-group + .speech-who; the .ai variant is brand-tinted for system-authored messages and can wear a faint .backmark logo behind the text. Use it whenever the app itself is speaking — AI advice, assistant nudges — so machine voice never masquerades as a plain notification.
Striping AI content? Put .pinstripe on the containing surface, never on the speech alert itself — both draw with ::after and the tail loses.
When you book a stay it shows up here with its dates and directions.
Try widening the radius or clearing a filter.
Two sanctioned forms — pick by surface, never mix on one list. Numbered pages for console/data surfaces (tables, queues, positional search): a pressed-well track, current page as a raised matte chip in the brand hue, windowed to ≤7 slots, prev/next always rendered and disabled (never hidden) at the ends. Load more for guest browse surfaces (feeds, tile grids) where the list flows and position is meaningless. The vocabulary maps 1:1 to the shared Clixion.Common.Pagination contract: pageNumber · totalPages · hasPrevious/hasNextPage · firstRowOnPage–lastRowOnPage of totalCount · pageSize (picker options end at 100 — the contract cap).