Your rewards, mapped
$26,086–$50,959
2,618,000 points across 10 mapped holdings.
✓ Verified Jul 2801 · Tokens
One semantic layer, two themes.
Component code uses semantic names, never page-specific hex values. The locked coral remains the action color; deep evergreen is the button text because white on light coral does not clear AA at normal sizes.
Core color roles
Canvas
--cc-canvasSurface
--cc-surfaceInk
--cc-inkAction
--cc-actionProof/state
--cc-proofSuccess
--cc-successWarning
--cc-warningDanger
--cc-dangerType scale
52 · Display
34 · Page title
24 · Section
18 · Lead
16 · Body
14 · Supporting
12 · Meta
Spacing · 4px base
space-14pxspace-28pxspace-312pxspace-416pxspace-524pxspace-632pxspace-748pxspace-872px10px · controls
16px · rows
24px · panels
Elevation & motion
Elevation 1
Rows, menus, resting panels.
Elevation 2
Atlas cards, dialogs, sheets.
Motion
120ms controls · 180ms state · 260ms reveal · cubic-bezier(.2,.8,.2,1)
02 · Buttons
State is visible without changing the vocabulary.
Primary means commit or advance. Secondary means a meaningful alternative. Ghost means low-emphasis utility. All standard controls are at least 44px high.
Primary · every real state
Default
Hover
Focus-visible
Active
Disabled
Loading
Secondary states
Ghost states
Sizes & icons
03 · Cards & panels
Orientation, proof, and action each get a shape.
One move worth making
Move groceries after the Gold cap.
Venture X adds about $41 per month at this spend.
Plain panel
Methodology & data
Supporting information stays quiet until the user asks for depth.
Read the methodology →Wallet compass
2,618,000 points$26,086–$50,959 · floor → typicalHoldings10 mapped
FreshnessJul 28
Complete10 of 10
04 · Tables, rows & expansion
Summarize first; preserve the proof underneath.
Interactive program group · collapsed / expanded
| Value | Worth | ||
|---|---|---|---|
| Flying BlueExpires after 24 months of inactivity | 1,100,000 | 1.30–2.17¢ | $14,300–$23,870 |
| Delta SkyMilesSkyTeam | 130,000 | 1.10–1.34¢ | $1,430–$1,742 |
Balance row
Amex Membership RewardsAmex Gold · Platinum
700,000$4,200–$14,000
Row-level error
Flying Blue balance could not syncYour saved 1,100,000-mile balance is still shown. Try again.
Spending row · needs attention
Groceries$8,000/mo · Gold cap applies
Current14,250 pts$285
Best16,000 ptsVenture X · $326
Left+1,750 ptsabout +$41/mo
Sortable header states
Not sorted
Ascending
Descending
05 · Tabs, segmented controls & badges
Selection is explicit in shape and text—not color alone.
Tabs · Arrow keys also move selection
Balance groups and valuation proof.
Earned versus best-card category scorecard.
Segmented control
Pills & badges
✓ Verified Jul 28! Expires in 60 daysSync failedPoints-only10
06 · Forms & card picker
Every field explains what happened and what to do next.
Text & number inputs
Used to ground route and award advice.
#
Enter the balance shown by the program.Field states
Enter zero or a positive balance.
Disconnect sync to edit manually.
Interactive search / typeahead card picker
Cards, airlines, and hotels use the same search pattern.
Empty
Helper stays visible.
Typing / results
2 matching cards
Filled
✓ Venture X added
No results
No match for “Example”Request a missing card.
07 · Empty & loading
Absence still gives the next useful move.
&
Your wallet is ready to start.
Add one card or program. A guess is fine; you can edit it later.
?
No results for “Example.”
Try the issuer or program name, or tell us what is missing.
$
No monthly spend yet.
Add rough category totals to see your earned-versus-best scorecard.
Loading skeletons
Card
Row
Table
08 · Errors, confirmations & toasts
Feedback appears beside the action, then gets out of the way.
!
We could not save your wallet.
Your changes are still on this screen. Check the connection and try again.
✓
Wallet saved.
Strategy and Ask P&P AI now use the updated balances.
Inline confirmation + toast
✓ Venture X added to your wallet.
09 · Overlays
Native dialogs on desktop; task-focused sheets on mobile.
Every overlay has a labelled title, initial focus, a visible close path, Escape support, focus containment, and focus return through native <dialog>.
Desktop modal pattern
Centered, bounded, one task
520px maximum width. Primary action last. Focus begins at the heading or first field.
Mobile bottom-sheet pattern
Same semantics, reachable controls
At ≤640px, task pickers attach to the bottom, cap at 88dvh, and retain a visible close action.
11 · Interaction & accessibility rules
Non-negotiables for every port.
Touch and pointer
Every primary interactive target is at least 44×44 CSS pixels. Hover may enrich a state but never reveals the only path to an action.
Keyboard focus
Use a 3px proof-color ring with 3px offset. Never remove focus without a visible replacement. Closing an overlay returns focus to its opener.
Expand and collapse
The trigger is a real button with aria-expanded and aria-controls. Summary value remains visible in both states.
Add, edit, remove
Add and Edit are separate modes. Add never exposes removal controls. Remove always uses a named confirm step and offers an inline undo where practical.
Tabs and segments
Use tab semantics only when content swaps in place; Arrow Left/Right moves tabs. Use pressed buttons for filters or lens changes.
Forms and errors
Labels persist above fields. Errors use text, icon, and color; aria-invalid points to actionable error copy. Values remain intact after a failed save.
Dialogs and sheets
Desktop uses bounded modals. Mobile task pickers become bottom sheets without changing accessible names, focus order, Escape behavior, or completion actions.
Contrast and motion
Normal text clears 4.5:1; large text and non-text UI clear 3:1. Respect reduced motion. State changes do not rely on animation to become understandable.