Lazy Vacations · Design System

Atoms

The smallest reusable pieces — every value token-driven. Components are composed from these; the header is the first to be rebuilt on them.

Button

Intent (brand · accent) × style (filled · outline · ghost). Corners follow --btn-radius; sizes md/sm. Hover, active & disabled are wired — hover any button to see it.

Filled Outline Ghost Brand Accent Size

Disabled

Inverse — on brand surface

Pill

Intent (brand · accent) × fill (filled · outline). Fully rounded. Clickable by default — hover wired. static removes hover: use for tags and labels.

Filled Outline Brand Show all Show all Accent Show all Show all Size

Show all Show all

Static Show all Show all

Inverse — on brand surface — filled · outline

Show all Show all Show all Show all

Link

Nav links use the ghost button; inline links use the text-link role.

Icon

Line glyphs, currentColor — inherit the text/button colour. Chat bubble shown.

Contact the host