Surface

Card.Boost

View in Figma

A compact wallet card surface that surfaces the user's active Boost reward. Displays a branded illustrated orb, a primary APY or reward label, and a secondary metadata line such as an expiry date.

Overview

A compact wallet card surface that surfaces the user's active Boost reward. Displays a branded illustrated orb, a primary APY or reward label, and a secondary metadata line such as an expiry date.

1.05x APYExpires in: 1d

Anatomy

CardBoost
1.05x APYExpires in: 1d
  1. 1Container  required
  2. 2Root  required
  3. 3Visual  required  Illustrated boost orb instance. Contains gradient ellipses, noise texture, and a boost icon. Not consumer-configurable.
  4. 4Container.Header  required
  5. 5Label.Title  required  Primary reward label, e.g. APY rate. Bound to labelTitle text property.
  6. 6Label.Meta  required  Secondary metadata line, e.g. expiry countdown. Bound to labelMeta text property.

Measurements

1.05x APYExpires in: 1d
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Container
Corner radius
radiusMd
12pt
Padding top and bottom (16px)
spacingPaddingXl
16pt
Padding left and right (8px)
spacingPaddingMd
8pt
Gap between Visual and Container.Header (8px)
spacingGapPositiveMd
8pt
Card background fill
colorBackgroundElevatedPrimary
#FFFFFF
Label
Label.Title text color
colorContentPrimary
#0C1828
Label.Meta text color
colorContentSecondary
#6D747E

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
labelTitletext1.05x APY
labelMetatextExpires in: 1d

Accessibility

Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.