COMPONENT KITWIREFRAME PRIMITIVES · TRADITIONAL UI
V012026-08-21
Every traditional UI component rendered in the wireframe style: navy #13174E ink, solid 1.5px lines, sharp corners, gold #D5BD59 as the only accent. Reference taxonomy: Mobbin glossary.
01[ BUTTONS ]
PrimarySecondaryTertiaryDisabledSmall↗
one gold primary per screen · hard shadow marks the main action
02[ SEGMENTED + CHIP GROUP ]
One-wayReturnMulti-cityCruise
WebPhonePartner
Filter A ✕Filter BUnavailable
labels centered · equal min-width keeps the group rhythmic
03[ CHECKBOX · RADIO · TOGGLE ]
✕ Checked
Unchecked
- Indeterminate
Selected
Idle
Disabled
On
Off
04[ TEXT INPUTS ]
LabelValue
FocusedTyping
EmptyPlaceholder…
ZIP code0000
▸ 4 digits, one short. US ZIP is 5.
⌕Port, ship, or address…
Service level ▾
Notes
05[ STEPPER + SLIDER ]
bag count
−2+
declared value · $550
06[ TABS + ACCORDION ]
DetailsPricingHistory
What does the promise cover? ▴
Door to stateroom, timing, and handling · open state
!Price changed.Customs added a duty line. See the v2 diff.
✕Payment declined.Card was not charged. Try another method.
✓ Case saved · resume anywhere ✕
Why we ask: customsDeclared value ⓘ
11[ DROPDOWN · OPEN ]
Ship ▴
Aurora of the Seas ✓
Meridian Star
Pacific Crown
Vancouver, which one? disambiguate
12[ DATE PICKER ]
←SEP 2026→
M
T
W
T
F
S
S
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
gold = must-arrive date · shaded = ship-by window · dim = not bookable
13[ MODAL ]
Remove this leg? ✕
The return leg and its benefit come off the plan. Reprice shows before you confirm.
Keep itRemove
14[ CARD · LIST ITEM ]
PREFERRED
$XXX · arrives 1 day early
Select
◼ Case LF-1001 PAYABLE
◻ Case LF-1002 DRAFT
◻ Case LF-1003 SHIPPED
15[ TABLE ]
Leg
Service
Promise ▾
Price
BOS → Port
Preferred
1 day early
$XXX
Port → BOS
Standard
3 days early
$XXX
Benefit
Cruise line
at source
−$XX
gold row = selected · ▾ marks the sorted column
16[ SKELETON · EMPTY STATE ]
◻
No cases yet
A plan becomes a case when you select it.
Get a price
17[ AUTOCOMPLETE / COMBOBOX ]
The port and ship catalog is closed with exact-string matching (C2, C3): this component is where that constraint gets survivable.
Destination portvan
Vancouver, BC · Canada Place
Vancouver, WA · USAnot the cruise one
No match? Type the address instead →
18[ RADIO CARDS ]
Preferred · $XXX arrives 1 day early · benefit applied
BEST FIT
Standard · $XXX arrives 3 days early
19[ PAYMENT FIELDS ]
Card number#### #### #### 4242
ExpMM / YY
CVC•••
CardApple PayInvoice
✕Billing same as pickup address
charge happens once, in full, at Pay; say so next to the button
20[ PHONE + OTP ]
+1 ▾
Mobile(###) ### ####
resume code · replaces the one-cookie guest resume (C18)
47--
21[ FILE UPLOAD ]
⤒
Drop customs documents
or browse · PDF, JPG · max 10MB
▤ passport-scan.pdf 70%
22[ AVATAR · EXPERT HANDOFF ]
PDEXAI
AB+2
EX
Your expert edits this same case no re-entry, no copy
23[ TRACKING TIMELINE ]
Picked up · Boston, MAMon · signed by driver
Cleared customsWed · duty settled, see v2 diff
In transit to portnow · on promise
Delivered to stateroompromised 1 day before sailing
24[ DRAWER · BOTTOM SHEET ]
page stays visible
Case detailsClose
Edit pickup window
25[ STICKY PRICE BAR ]
Pinned to the viewport bottom in the real flow: the running total never leaves the screen.
$XXXtotal · v2BENEFIT −$XXContinue →
26[ RATING · NPS ]
stars
★★★★★
0-10 scale
0…78910
27[ CAROUSEL · SPINNER · DIVIDER · FAB ]
‹SLIDE 2/4›
Pricing your plan…
OR
+one per screen, if at all
28[ ANNOTATION HOTSPOT ]
Research notes are not design. Anchor a pulsing dot to the element the note is about; click reveals it as a popover. Use for evidence/constraint commentary instead of layout callouts.
One-way
The note opens here: bold the claim, keep the prose short, and close with the trace line below.E-XXX · C-XX
wrap the target in .spot-anchor · dot sits on a corner · one note open at a time · click anywhere to dismiss