Skip to content
WaperDesign
BrandComponents
中文
Component directory

Foundations

ColourTypeSpacing and sizesRadiusShadow and bordersMotionIconsFocus

Components

ButtonsBadgesInputs and text areasSearch fieldSelectSwitch, checkbox, radioSegmented control and tabsFilter chipsAvatarsProgress, skeletons and spinnersNoticesEmpty statesCardsList rowsPage and section headersKey–valueBreadcrumbs and backTableKey hints and the wordmark

Overlays

Menus and submenusContext menuPopover, tooltip and an open selectDialog and confirmDrawersToasts and loading → done

WAPER / UI

List rows

Compact (40, radius 8) for members and menu-like lists; card (64, radius 16) for apps, skills and routines.

Light

Loading preview…

Dark

Loading preview…

Waper Design

Character, with consistency.

Explore Waper ↗
Card density · 64 (click to select)
Gmail
A row with a control in it isn’t a link
Compact density · 40 (hover for the menu)
AI pricing watch
2h
Morning brief
Daily
Investor update
Monthly
Hover (mock)
Card density · 64 (click to select)
Gmail
A row with a control in it isn’t a link
Compact density · 40 (hover for the menu)
AI pricing watch
2h
Morning brief
Daily
Investor update
Monthly
Hover (mock)