iOS Decimal
Decimal, translated for iPhone and iPad. Structure follows the Apple Human Interface Guidelines; color, type, spacing and shape come from Decimal tokens. 54 components and patterns, each with a spec table and an interactive demo.
Color
Every mobile color is a Decimal semantic token from ui-components.css (theme cw-primary). Never use primitives such as --color-sky-80 directly. Values below resolve live from the CDN; use the dark mode toggle to see the dark set.
Surfaces
Page
--m-surface-page
color/surface/1 ·
Card / sheet
--m-surface-card
color/surface/0 ·
Sunken (search, tracks)
--m-surface-sunken
color/surface/2 ·
Brand tint
--m-surface-brand
color/surface/3 ·
Inverse (toast, tooltip)
--m-surface-inverse
color/surface/inverse ·
Text and icons
Prominent
--m-glyphs-prominent
color/glyphs/prominent ·
Default
--m-glyphs-default
color/glyphs/default ·
Secondary
--m-glyphs-secondary
color/glyphs/accent ·
Disabled
--m-glyphs-disabled
color/glyphs/disabled ·
On fill
--m-glyphs-on-fill
color/glyphs/knockout ·
Action / tint
--m-glyphs-action
color/glyphs/action/neutral/enabled ·
Action fills
Primary
--m-fill-primary
color/fill/action/primary/neutral/enabled ·
Primary pressed
--m-fill-primary-press
color/fill/action/primary/neutral/press ·
Constructive
--m-fill-constructive
color/fill/action/primary/constructive/enabled ·
Destructive
--m-fill-destructive
color/fill/action/primary/destructive/enabled ·
Buy
--m-fill-buy
color/fill/action/primary/buy/enabled ·
Sell
--m-fill-sell
color/fill/action/primary/sell/enabled ·
Selected control
--m-fill-control-selected
color/fill/controls/selected/enabled ·
Feedback
Info
--m-fill-info
color/fill/feedback/info ·
Success
--m-fill-success
color/fill/feedback/success ·
Warning
--m-fill-warning
color/fill/feedback/warning ·
Danger
--m-fill-danger
color/fill/feedback/danger ·
Success text
--m-glyphs-success
color/glyphs/feedback/success ·
Danger text
--m-glyphs-danger
color/glyphs/feedback/danger ·
Strokes
Divider
--m-stroke-divider
color/stroke/general/accent ·
Control
--m-stroke-control
color/stroke/controls/default/enabled ·
Focus
--m-stroke-focus
color/stroke/focus ·
Error
--m-stroke-control-error
color/stroke/controls/error/enabled ·
Charting (provisional)
Series 1
--m-chart-1
sky-50 ·
Series 2
--m-chart-2
patina-50 ·
Series 3
--m-chart-3
citrine-50 ·
Series 4
--m-chart-4
amethyst-50 ·
Series 5
--m-chart-5
copper-50 ·
Typography
Decimal type styles in Roboto (--font-family-base). Weights are only 400, 500 and 700. iOS Dynamic Type roles map to the closest Decimal style; support text scaling by mapping each style to a Dynamic Type text style in code.
Large title
Decimal Heading 4
Portfolio
28/36 · 500
Title 2
Decimal Heading 3
Joint brokerage
20/28 · 500
Headline
Decimal Heading 2
Holdings
16/24 · 700
Body
Decimal Body 2
Your transfer is scheduled for Oct 14.
16/24 · 400
Callout
Decimal Body 1
Markets close early on Nov 27.
14/20 · 400 · +0.16
Subheadline (emphasized)
Decimal Label 2 prominent
Transfer funds
14/18 · 500 · +0.16
Footnote
Decimal Label 1
Balances as of 4:00 PM ET
12/16 · 400 · +0.32
Tabular figures
Decimal Label 2 tabular numeric data
$142,318.40
14/18 · 400 · tnum
Spacing
Decimal fixed padding and gap tokens. Screen margin is 16 on both platforms.
--m-space-4 4px · padding/fixed/xxs--m-space-8 8px · padding/fixed/xs--m-space-12 12px · padding/fixed/s--m-space-16 16px · padding/fixed/m--m-space-24 24px · padding/fixed/l--m-space-32 32px · padding/fixed/xl--m-space-40 40px · padding/fixed/xxlCorners and elevation
Decimal cw-primary corners are small: buttons and fields 4px, cards 8px. Mobile buttons use corner-m (4px), one step softer than Decimal web buttons (2px). Sheets and dialogs use platform shape tokens (flagged for DS review).
| Token | Value | Use |
|---|---|---|
--m-corner-button | 4 | Buttons (style/corner/m; Decimal web buttons use corner-s 2) |
--m-corner-field | 4 | Fields, tooltips (style/corner/m) |
--m-corner-card | 8 | Cards, lists, banners, menus (style/corner/l) |
--m-corner-pill | 160 | Chips, pills, switches (style/corner/max) |
--m-corner-sheet | iOS 12 · Android 16 | Sheets, FAB (platform) |
--m-corner-dialog | iOS 14 · Android 16 | Alerts and dialogs (platform) |
Low · 0 1 2
Medium · 0 2 4
Extra high · 0 8 16
Platform metrics
Decimal has no mobile sizes yet. These are Apple Human Interface Guidelines values exposed as --m-* tokens under .platform-ios.
| Metric | Token | Value |
|---|---|---|
| Minimum touch target | --m-touch-target | 44 × 44pt |
| Status bar | --m-status-bar-height | 54pt (Dynamic Island) |
| Navigation / top app bar | --m-nav-bar-height | 44pt |
| Large / medium title | --m-large-title-height | 52pt |
| Tab bar / navigation bar | --m-tab-bar-height | 16pt top padding + 49pt + 34pt home indicator |
| System navigation | --m-home-indicator-height / --m-system-nav-height | 34pt home indicator |
| Toolbar / bottom app bar | --m-toolbar-height | 44pt |
| List row | --m-list-row-min-height | 44pt |
| Search field | --m-search-field-height | 36pt |
| Button (Mobile L) | --m-control-l | 48pt |
| Switch track | --m-switch-width | 51 × 31pt |
| FAB | --m-fab-size | n/a |
| Navigation rail | --m-nav-rail-width | n/a |
| Dialog width | --m-dialog-width | 270pt |
| Screen margin | --m-screen-margin | 16pt |
Actions
Button
Decimal source: decimal-button
Figma: Buttons/Standard/L Standard Button
- Primary: one per screen, usually full width at the bottom.
- Secondary: outlined, for alternatives. Tertiary: text only.
- Labels are sentence case, verb or verb + noun.
Mobile L (48) adds one unit step over Decimal web L (40). Corner is Decimal corner-m (4px): one step softer than Decimal web buttons (corner-s, 2px) and far from the 12px used in the previous kit.
| Property | Token | Value (pt) |
|---|---|---|
| Height · Mobile L | --m-control-l | 48 (Decimal web L is 40) |
| Height · Mobile M | --m-control-m | 40 visible, hit area extended to 44pt / 48dp |
| Horizontal padding | --m-space-16 / --m-space-12 | L 16 · M 12 (Decimal padding/fixed/m, s) |
| Corner | --m-corner-button | style/corner/m · 4px (cw-primary) |
| Label · L | --m-type-label-3-prominent | Label 3 prominent · 16/24 medium |
| Label · M | --m-type-label-2-prominent | Label 2 prominent · 14/18 medium · +0.16 |
| Primary fill | --m-fill-primary | color/fill/action/primary/neutral/enabled (sky-50) |
| Secondary stroke | --m-stroke-action | color/stroke/action/neutral/enabled · 1px |
| Disabled | --m-fill-primary-disabled | color/fill/action/primary/disabled + color/glyphs/disabled |
Hierarchy · Mobile L
Intent and size · Mobile M
Trading buttons
Decimal source: decimal-trading-button
- Buy and Sell only. Never reuse buy/sell colors for other meanings.
- Always pair with a confirmation step (sheet or review screen).
| Property | Token | Value (pt) |
|---|---|---|
| Height | --m-control-l | 48 |
| Buy fill | --m-fill-buy | color/fill/action/primary/buy/enabled |
| Sell fill | --m-fill-sell | color/fill/action/primary/sell/enabled |
| Pressed | --m-fill-buy-press / --m-fill-sell-press | …/press |
| Label | --m-type-label-3-prominent | Label 3 prominent · 16/24 medium |
AAPL · Apple Inc. · $227.48
Progressive button
Decimal source: decimal-progressive-button
- Shows a spinner in place of the label while the action runs; width stays fixed.
- Disable repeat taps while busy (aria-busy).
| Property | Token | Value (pt) |
|---|---|---|
| Spinner size | --m-icon-s | 16 |
| Spinner stroke | --m-stroke-m | 2px · color/glyphs/knockout |
| State | aria-busy | true while running |
Tap to see the busy state.
Button group
Decimal source: decimal-button-group
Figma: Button Groups/Labeled/L Labeled Button Group
- Pair a primary with a secondary action. Stack vertically when labels are long.
- Primary goes trailing (side by side) or on top (stacked).
| Property | Token | Value (pt) |
|---|---|---|
| Gap | --m-space-8 | 8 (padding/fixed/xs) |
| Layout | flex | equal width · stacked when > 2 or long labels |
Pull-down button
Decimal source: decimal-split-button
Figma: Buttons/Split · Buttons/Dropdown
- A button that opens a menu of related actions. iOS has no split button; the whole control opens the menu.
| Property | Token | Value (pt) |
|---|---|---|
| Height | --m-control-m | 40 (44pt / 48dp hit) |
| Divider | --m-stroke-s | n/a |
| Menu | --m-elevation-high | decimal-menu · corner-l 8 |
Icon button
Decimal source: decimal-icon-button
Figma: Buttons/Icon (Bound, Unbound) · Buttons/Badge Icon Buttons
- Unbound (no border) in bars; bound (outlined) on content surfaces.
- Always give an accessible label; badge counts are announced in the label.
| Property | Token | Value (pt) |
|---|---|---|
| Hit area | --m-touch-target | 44pt |
| Bound size | --m-control-m | 40 · corner-m 4 · 1px stroke |
| Icon | --m-icon-m | 24 |
| Badge | --m-fill-destructive | 16 high · Supplemental 2 · pill |
Bookmark and pin toggles
Decimal source: none (platform pattern)
Figma: Toggleable Buttons/Bookmark · Toggleable Buttons/Pin
- Icon toggle that keeps state (watchlist, pinned account). Use aria-pressed.
| Property | Token | Value (pt) |
|---|---|---|
| Hit area | --m-touch-target | 44pt |
| On | --m-glyphs-action | filled icon · color/glyphs/action/neutral/enabled |
| Off | --m-glyphs-secondary | outline icon · color/glyphs/accent |
Link
Decimal source: decimal-link
- Inline navigation within text (disclosures, help). Use a button for actions.
| Property | Token | Value (pt) |
|---|---|---|
| Color | --m-glyphs-action | color/glyphs/action/neutral/enabled · visited …/visited |
| Decoration | underline | 2px offset |
| Hit area | --m-touch-target | pad standalone links to 44pt / 48dp |
Review the Form CRS and fee schedule before you continue.
Filter buttons
Decimal source: none (platform pattern)
Figma: Badge Buttons/Filter/M Filter Button
- Horizontal scroll of filters above a list. Count badge shows active matches.
| Property | Token | Value (pt) |
|---|---|---|
| Height | --m-control-s | 32 (44pt / 48dp hit) |
| Padding | --m-space-12 | 0 12 |
| Corner | --m-corner-pill | style/corner/max |
| Selected | --m-fill-control-selected | color/fill/controls/selected + color/stroke/controls/default/selected |
| Count badge | --m-fill-primary | Label 1 prominent · pill |
Inputs
Text field
Decimal source: decimal-text-input, decimal-form-field
Figma: Fields/Text Input/L Text Input
- Label above, hint or error below. Use the right keyboard type (email, number, phone).
- Error text uses danger glyphs and never relies on color alone (icon + message).
Decimal fields keep the label above the box on both platforms (not the M3 floating label). Box height is Mobile L (48).
| Property | Token | Value (pt) |
|---|---|---|
| Height | --m-control-l | 48 (Decimal web L 40) |
| Padding | --m-space-12 | 0 12 (padding/fixed/s) |
| Corner | --m-corner-field | style/corner/m · 4px |
| Stroke | --m-stroke-control | 1px color/stroke/controls/default/enabled |
| Focus | --m-stroke-focus | 2px color/stroke/focus |
| Error | --m-stroke-control-error | color/stroke/controls/error/enabled |
| Label | --m-type-label-2-prominent | Label 2 prominent · 14/18 |
| Value | --m-type-body-2 | Body 2 · 16/24 (16 avoids iOS zoom-on-focus) |
| Hint | --m-type-label-1 | Label 1 · 12/16 |
Text view
Decimal source: decimal-textarea
- Notes and messages. Show a character count when there is a limit.
| Property | Token | Value (pt) |
|---|---|---|
| Min height | 96 | 96 (grows with content) |
| Other properties | see Text field | same as Text field |
Amount input
Decimal source: decimal-dollar-input, decimal-percent-input
Figma: Fields/Amount Input/L Amount Input
- Use for money and percentages. Show the decimal pad keyboard.
- Large tabular figures; show available balance as a hint.
| Property | Token | Value (pt) |
|---|---|---|
| Height | 64 | 64 (unit-800) |
| Value type | --m-type-heading-4 | Heading 4 · 28/36 · tabular numerals |
| Affix ($ / %) | --m-glyphs-prominent | same size as value |
| Other properties | see Text field | same as Text field |
Pop-up button (combo box)
Decimal source: decimal-dropdown, decimal-menu, decimal-multiselect-menu
- Short option lists (up to ~7) open a menu; longer lists push a selection screen with checkmarks.
- Inside forms, show the value in a field box so it reads as an input.
| Property | Token | Value (pt) |
|---|---|---|
| Field | see Text field | 48 · corner-m 4 · 1px stroke |
| Menu row | --m-touch-target | 44pt |
| Menu | --m-elevation-high | color/surface/0 · corner-l 8 |
| Selected | --m-glyphs-action | check icon + color/glyphs/action/neutral/enabled |
Account type
Date picker
Decimal source: decimal-date-picker, decimal-calendar
Figma: Fields/Date Picker/L Date Picker
- Compact style in forms (tap to expand inline calendar). Wheels only for times or birthdays.
| Property | Token | Value (pt) |
|---|---|---|
| Day cell | 40 | 44pt (square) |
| Selected | --m-fill-primary | color/fill/action/primary/neutral/enabled |
| Today | --m-glyphs-action | action color text |
| Header | --m-type-heading-2 / --m-type-heading-4 | Heading 2 |
| Corner | --m-corner-card / --m-corner-dialog | corner-l 8 |
Transfer date
October 2026
Wheel picker
Decimal source: none (platform pattern)
- Times, durations and short fixed lists. Use the system wheel; style follows Decimal type.
| Property | Token | Value (pt) |
|---|---|---|
| Row height | 36 | 36pt |
| Value type | --m-type-heading-3 / --m-type-heading-6 | Heading 3 regular |
| Selected | --m-fill-control-selected | color/surface/2 band |
- 7
- 8
- 9
- 10
- 11
- 15
- 30
- 45
- 00
- 15
- AM
- PM
Token field
Decimal source: none (platform pattern)
- Recipients or tags. Tap × to remove; backspace removes the last token.
| Property | Token | Value (pt) |
|---|---|---|
| Field | --m-control-l | min 48 · grows |
| Token | 28 | 28 high · pill · color/fill/controls/selected |
| Remove target | 24 | 24 icon inside a 44pt / 48dp row |
Share report with
Jordan Parker
Sam Reed
Slider
Decimal source: none (platform pattern)
- Approximate values (risk tolerance). Always show the value as text too.
| Property | Token | Value (pt) |
|---|---|---|
| Track / thumb | --m-fill-primary | color/fill/action/primary/neutral (accent-color) |
| Hit height | --m-touch-target | 44pt |
Selection controls
Checkbox (checkmark list)
Decimal source: decimal-checkbox, decimal-checkbox-group
- In lists, iOS uses trailing checkmarks for multi-select. Use boxes for consent and terms.
| Property | Token | Value (pt) |
|---|---|---|
| Box | 20 | 20 · corner-s 2 · 2px stroke |
| Checked | --m-fill-primary | color/fill/action/primary/neutral/enabled |
| Row height | --m-touch-target | 44pt |
Radio (single-select list)
Decimal source: decimal-radio-group
- iOS lists show a trailing checkmark on the selected row instead of radio circles.
| Property | Token | Value (pt) |
|---|---|---|
| Circle | 20 | 20 · 2px stroke · 10 dot |
| Selected | --m-fill-primary | checkmark · color/glyphs/action |
| Row height | --m-list-row-min-height | 44pt |
Dividends
- Reinvest
- Deposit to cash
Toggle
Decimal source: decimal-toggle-switch
- Settings that apply immediately. Do not use in forms that need a Save button.
iOS "on" uses Decimal constructive (success) fill to match the platform convention; Android uses the Decimal primary fill. DS team to confirm.
| Property | Token | Value (pt) |
|---|---|---|
| Track | --m-switch-width × --m-switch-height | 51 × 31pt |
| Thumb | --m-switch-knob | 27pt |
| On fill | --m-fill-constructive / --m-fill-primary | color/fill/action/primary/constructive |
| Off | --m-stroke-divider / --m-stroke-control | color/stroke/general/accent |
| Semantics | role="switch" | focusable button with aria-checked |
- Face ID sign-in
- Price alerts
Feedback and status
Banner
Decimal source: decimal-inline-notification
- Persistent, in-content messages. Info, success, warning, danger. Icon plus text, never color alone.
| Property | Token | Value (pt) |
|---|---|---|
| Padding | --m-space-12 / --m-space-16 | 12 × 16 |
| Corner | --m-corner-card | style/corner/l · 8px |
| Leading stroke | --m-stroke-l | 4px color/stroke/feedback/* |
| Fill | --m-fill-info … | color/fill/feedback/* |
| Title / text | --m-type-heading-1 / --m-type-body-1 | Heading 1 · 14/20 bold · Body 1 · 14/20 |
Market closes early
Markets close at 1:00 PM ET on Nov 27.
Transfer scheduled
$2,500 on Oct 14.
Your beneficiary info is out of date.
Order rejected
Insufficient buying power.
Toast
Decimal source: decimal-toast
Figma: Notifications/Toast Notification
- Brief confirmation that disappears (4 to 6 s). Never for errors that need action.
- Position above the tab bar or toolbar.
| Property | Token | Value (pt) |
|---|---|---|
| Fill | --m-surface-inverse | color/surface/inverse |
| Text | --m-type-body-1 | Body 1 · color/surface/0 |
| Action | --color-glyphs-action-neutral-inverse-enabled | Label 2 prominent |
| Corner | --m-corner-card | 8 |
| Elevation | --m-elevation-high | effect/dropshadow/extrahigh |
Added AAPL to watchlist
Status pill and badge
Decimal source: decimal-status-pill
- Short status labels on rows and cards (Pending, Filled, Action needed).
| Property | Token | Value (pt) |
|---|---|---|
| Padding | --m-space-2 / --m-space-8 | 2 × 8 |
| Type | --m-type-label-1-prominent | Label 1 prominent · 12/16 · +0.32 |
| Corner | --m-corner-pill | style/corner/max |
| Fills | --m-fill-info … | color/fill/feedback/* with matching color/glyphs/feedback/* |
DraftPendingFilledAction neededRejected
Activity and progress indicators
Decimal source: decimal-loading-comet, decimal-loading-shimmer
- Spinner for unknown duration; bar or ring for known progress; shimmer for loading layouts.
| Property | Token | Value (pt) |
|---|---|---|
| Spinner | 24 | 24 · 4px stroke · color/fill/action/primary/neutral |
| Linear track | 4 | 4 · pill · color/fill/controls/selected |
| Ring | 96 | 96 · 8 stroke |
| Shimmer | --m-surface-sunken | color/surface/2 → color/surface/0 sweep · respects reduced motion |
Loading positions…
Retirement goal72%
Empty state
Decimal source: decimal-empty-state
- Explain why it is empty and offer one next action.
| Property | Token | Value (pt) |
|---|---|---|
| Icon | 48 | 48 · color/glyphs/accent |
| Title | --m-type-heading-3 | Heading 3 · 20/28 |
| Text | --m-type-body-1 | Body 1 · color/glyphs/accent |
No watchlist yet
Save securities to follow their price here.
Overlays
Alert
Decimal source: decimal-modal
- Critical confirmations only. 2 actions side by side; preferred action bold; destructive in danger color.
| Property | Token | Value (pt) |
|---|---|---|
| Width | --m-dialog-width | 270pt |
| Corner | --m-corner-dialog | 14pt |
| Title | --m-type-heading-2 / --m-type-heading-3 | Heading 2 |
| Scrim | --m-scrim | slate A40 (Decimal has no semantic scrim yet) |
Cancel this order?
Your limit order for 10 AAPL will be withdrawn.
Sheet
Decimal source: decimal-drawer
- Focused sub-tasks (filters, quick trade). Grabber + Cancel/Done in the header.
decimal-drawer (side panel on web) becomes a bottom sheet on phones.
| Property | Token | Value (pt) |
|---|---|---|
| Top corners | --m-corner-sheet | 12pt |
| Grabber | --m-sheet-grabber-width × height | 36 × 5pt |
| Header | --m-nav-bar-height | 44pt |
| Fill | --m-surface-page / --m-surface-card | color/surface/1 |
Filters
Action sheet
Decimal source: decimal-menu
- A choice of actions tied to something the user did. Cancel is separate at the bottom.
| Property | Token | Value (pt) |
|---|---|---|
| Row height | 56 / --m-list-row-min-height | 56pt |
| Action type | --m-type-heading-3 | Heading 3 regular · action color |
| Destructive | --m-glyphs-destructive | color/glyphs/action/destructive/enabled |
| Corner | --m-corner-dialog / --m-corner-sheet | 14pt |
September statement
Popover / info tip
Decimal source: decimal-info-toggletip
- Tap an info icon to show a short explanation (no hover on touch). Dismiss on outside tap.
| Property | Token | Value (pt) |
|---|---|---|
| Fill | --m-surface-inverse | color/surface/inverse |
| Text | --m-type-label-2 | Label 2 · 14/18 |
| Max width | 240 | 240 |
| Corner | --m-corner-m | 4 |
Buying power includes settled cash and available margin.
Buying power
Data display
List (inset grouped)
Decimal source: decimal-list, decimal-list-item
- Inset grouped lists for settings and account details; plain lists for feeds.
- Swipe left for row actions; destructive action is red and last. Pull to refresh at the top.
| Property | Token | Value (pt) |
|---|---|---|
| Row min height | --m-list-row-min-height | 44pt |
| Padding | --m-space-16 | 8 × 16 |
| Primary text | --m-type-body-2 | Body 2 · 16/24 · color/glyphs/prominent |
| Secondary text | --m-type-label-1 / --m-type-body-1 | Label 1 · 12/16 |
| Divider | --m-stroke-divider | 1px inset 16 · color/stroke/general/accent |
| Group corner | --m-corner-card | style/corner/l · 8 |
| Swipe action width | 80 | 80 |
Accounts
- Joint brokerage•••• 4821$82,250
- Roth IRASwipe left$41,092
- Open an account
Card
Decimal source: decimal-card, decimal-outcome-card
- Group related content; whole card can be tappable. Outcome cards highlight a result with a colored leading edge.
| Property | Token | Value (pt) |
|---|---|---|
| Padding | --m-space-16 | 16 |
| Corner | --m-corner-card | style/corner/l · 8 |
| Stroke | --m-stroke-divider | 1px color/stroke/general/accent (raised: none) |
| Raised | --m-elevation-medium | effect/dropshadow/medium |
| Title | --m-type-heading-2 | Heading 2 · 16/24 bold |
Retirement goal
Data point and summary
Decimal source: decimal-data-point, decimal-data-summary
- Key numbers: label above, value below, optional change. Always tabular numerals.
- Up/down change uses success/danger glyphs plus a sign, never color alone.
| Property | Token | Value (pt) |
|---|---|---|
| Label | --m-type-label-1 | Label 1 · color/glyphs/accent |
| Value | --m-type-heading-3 | Heading 3 · 20/28 (hero: Heading 5 · 32/40) |
| Change | --m-type-label-2-prominent | color/glyphs/feedback/success | danger |
| Grid gap | --m-space-16 | 16 |
Total value$142,318.40+$1,204.18 (+0.85%) today
Cash$8,240.12
Buying power$16,480.24
YTD return+9.4%
Unrealized−$312.08
Holdings list (data table)
Decimal source: decimal-data-table
- Max 2 columns of data per row; sort via a header menu.
- Use landscape or iPad for full tables.
Data tables do not fit on phones. decimal-data-table maps to a 2-column row (name left, value right) with a sticky header; tap opens detail.
| Property | Token | Value (pt) |
|---|---|---|
| Header | --color-fill-data-header | Label 1 prominent · color/fill/data/header |
| Row padding | --m-space-12 | 12 × screen margin 16 |
| Symbol | --m-type-heading-2 | Heading 2 · 16/24 bold |
| Value | --m-type-numeric-2 | Label 2 tabular · 14/18 |
| Change | --m-glyphs-success / --m-glyphs-danger | Label 1 prominent |
HoldingValue / today
AAPL$22,748.00Apple Inc.+1.24%
VTI$41,092.55Vanguard Total Stock Mkt ETF+0.61%
BND$18,410.10Vanguard Total Bond Mkt ETF−0.18%
Masked value
Decimal source: decimal-masked-value, decimal-masked-account-number
- Account and tax numbers are masked by default; reveal requires a tap (and Face ID for SSN).
- Hide values when the app moves to the background (app switcher snapshot).
| Property | Token | Value (pt) |
|---|---|---|
| Type | --m-type-numeric-2 | Label 2 tabular |
| Toggle target | --m-touch-target | 44pt |
| Mask | •••• + last 4 | decimal-masked-account-number pattern |
- Account number
- •••• 4821
Info field
Decimal source: decimal-info-field
- Read-only label/value pairs on detail screens.
| Property | Token | Value (pt) |
|---|---|---|
| Row padding | --m-space-12 | 12 vertical |
| Label | --m-type-body-1 | Body 1 · color/glyphs/accent |
| Value | --m-type-label-2-prominent | Label 2 prominent · right-aligned |
- Account type
- Joint tenants (JTWROS)
- Opened
- Mar 3, 2019
- Advisor
- Alex Morgan
Regulatory disclosure
Decimal source: decimal-reg-block, decimal-footer
- Required disclosures at the end of screens that show performance or offers. Never truncate.
Disclosure copy must come from Compliance. This block only defines layout.
| Property | Token | Value (pt) |
|---|---|---|
| Fill | --m-surface-sunken | color/surface/2 |
| Type | --m-type-label-1 | Label 1 · 12/16 · color/glyphs/accent |
| Padding | --m-space-16 | 16 |
| Corner | --m-corner-card | 8 |
Securities and advisory services offered through LPL Financial, a registered investment advisor and broker-dealer. Member FINRA/SIPC.
Past performance is no guarantee of future results. Full disclosures
Avatar
Decimal source: decimal-avatar
- Initials when there is no photo. Decorative unless it is the only identifier.
| Property | Token | Value (pt) |
|---|---|---|
| Sizes | 32 / 40 / 56 | S 32 · M 40 · L 56 |
| Fill | --m-fill-control-selected | color/fill/controls/selected |
| Initials | --m-type-label-2-prominent | Label 2 prominent (L: Heading 3) |
Disclosure group
Decimal source: decimal-section
- Progressive disclosure for FAQs and secondary details.
| Property | Token | Value (pt) |
|---|---|---|
| Row height | --m-list-row-min-height | 44pt |
| Title | --m-type-label-3-prominent | Label 3 prominent · 16/24 |
| Body | --m-type-body-1 | Body 1 · 14/20 |
What is a limit order?
An order to buy or sell at a set price or better.
When do trades settle?
Most stock trades settle one business day after the trade date.
Carousel and page control
Decimal source: none (platform pattern)
- Swipe between a few peer items (insights, goals). Page control shows position.
| Property | Token | Value (pt) |
|---|---|---|
| Item width | 85% | 85% with snap |
| Gap | --m-space-12 | 12 |
| Dot | 8 | 8 · current color/glyphs/prominent |
Cash is earning 4.1%
Rebalance suggested
RMD due Dec 31
Charts
Decimal source: none (platform pattern)
Figma: ✺ Decimal Charting & Illustration Components
- Line for value over time, bars for comparisons, donut for allocation. Provide a text summary for VoiceOver.
Charting colors map to Decimal primitives until charting tokens ship on the CDN.
| Property | Token | Value (pt) |
|---|---|---|
| Series 1–5 | --m-chart-1 … --m-chart-5 | sky-50 · patina-50 · citrine-50 · amethyst-50 · copper-50 |
| Track | --m-chart-track | color/surface/2 |
| Line width | 2 | 2 |
| Legend | --m-type-label-1 | Label 1 |
Value over time
Allocation
Stocks 60%Bonds 30%Cash 10%
Patterns
Account overview
Decimal source: decimal-data-summary, decimal-data-table, decimal-list
- Top-level Portfolio tab: large title, hero value, range control, chart, holdings, disclosure.
| Property | Token | Value (pt) |
|---|---|---|
| Composition | see components | Nav bar · Data summary · Segmented · Chart · Holdings · Reg block · Tab bar |
Portfolio
Total value$142,318.40+$1,204.18 (+0.85%) today
HoldingValue / today
AAPL$22,748.00Apple Inc.+1.24%
VTI$41,092.55Vanguard Total Stock Mkt ETF+0.61%
BND$18,410.10Vanguard Total Bond Mkt ETF−0.18%
Values are delayed up to 15 minutes. Member FINRA/SIPC.
Trade ticket
Decimal source: decimal-trading-button, decimal-binary-switcher, decimal-dollar-input, decimal-modal
- Sheet over the security detail: side switcher, amount, order type, sticky review button, then a confirmation step.
| Property | Token | Value (pt) |
|---|---|---|
| Composition | see components | Sheet · Binary switcher · Amount input · Pop-up / dropdown · Info fields · Trading button |
Trade AAPL
- Order typeMarket
- AccountJoint •••• 4821
- Est. shares
- 4.3961
- Est. commission
- $0.00
Sign in with Face ID
Decimal source: decimal-text-input, decimal-button
- Offer Face ID after the first password sign-in. The system prompt is native; do not restyle it.
- Keyboard pushes the primary button up (keyboard inset).
| Property | Token | Value (pt) |
|---|---|---|
| Composition | see components | Text field · Button · system biometric prompt · keyboard inset |
Welcome back
Face ID
Split view (iPad)
Decimal source: decimal-list, decimal-card
- iPad regular width: master list leading, detail trailing. Collapses to push navigation on iPhone.
| Property | Token | Value (pt) |
|---|---|---|
| Master width | 136–320 | iPad 320pt (demo scaled) |
Parker household
Apple HIG coverage
Every component in the Apple Human Interface Guidelines catalog, mapped to its Decimal Mobile section.
| HIG component | Decimal Mobile | Status | Note |
|---|---|---|---|
| Action sheets | Action sheet | Documented | |
| Activity rings / gauges | Activity and progress indicators | Documented | |
| Activity views (share sheet) | — | Use system UI | Use UIActivityViewController unchanged. |
| Alerts | Alert | Documented | |
| Boxes | Card | Documented | |
| Buttons | Button, Trading buttons, Progressive button, Button group, Icon button, Bookmark and pin toggles, Link | Documented | |
| Charts | Charts | Documented | |
| Collections | Carousel and page control | Documented | |
| Color wells | — | Not needed | No color picking in this product. |
| Combo boxes | Pop-up button (combo box) | Documented | |
| Context menus | Context menu | Documented | |
| Disclosure controls | Disclosure group | Documented | |
| Labels | Info field, Status pill and badge | Documented | |
| Lists and tables | List (inset grouped), Holdings list (data table) | Documented | |
| Menus | Context menu, Pull-down button | Documented | |
| Navigation bars | Navigation bar | Documented | |
| Onscreen keyboards | Sign in with Face ID | Documented | |
| Page controls | Carousel and page control | Documented | |
| Path controls | Path (breadcrumbs) | Documented | |
| Pickers | Date picker, Wheel picker | Documented | |
| Popovers | Popover / info tip | Documented | |
| Pop-up buttons | Pop-up button (combo box) | Documented | |
| Progress indicators | Activity and progress indicators | Documented | |
| Pull-down buttons | Pull-down button | Documented | |
| Scroll views | List (inset grouped) | Documented | |
| Search fields | Search field | Documented | |
| Segmented controls | Segmented control, Tabs (use segmented control) | Documented | |
| Sheets | Sheet | Documented | |
| Sidebars | Sidebar (iPad) | Documented | |
| Sliders | Slider | Documented | |
| Split views | Split view (iPad) | Documented | |
| Steppers | Step tracker | Documented | Decimal step tracker. The HIG numeric +/− stepper is not used. |
| Tab bars | Tab bar | Documented | |
| Text fields | Text field, Amount input | Documented | |
| Text views | Text view | Documented | |
| Toggles | Toggle, Checkbox (checkmark list), Radio (single-select list) | Documented | |
| Token fields | Token field | Documented | |
| Toolbars | Toolbar | Documented | |
| Web views | — | Use system UI | Use SFSafariViewController for external links. |
| Widgets / Live Activities | — | Not needed | Out of scope for v1. |
Open questions for the Decimal DS team
Decisions this site made where Decimal has no mobile guidance yet, plus differences found between the Decimal Figma library and the CDN tokens.
- Typeface on iOS. Decimal
font/family/baseis Roboto. This site uses Roboto on iOS too; Apple apps usually use SF Pro. Keep Roboto for brand, or switch iOS to SF Pro? - Mobile control size. Decimal web L is 40px. Mobile L is 48 (one unit step up) so buttons and fields meet 44pt / 48dp targets. Should Decimal add an official mobile size?
- Figma vs CDN drift.
color/surface/2is #f2f3f5 in Figma but resolves to #E6E8EB (slate-10) on the CDN.utility/supplemental/1is 10/10 in Figma but 8/8 on the CDN. Glyph colors differ slightly (#2a2a2b vs #2B2B2B, #131313 vs #141414). Which is correct? - Drop shadow "high". CDN
effect/dropshadow/y/highis 40px with 12px blur, larger than extra-high (8px / 16px). Looks like a token error; this site uses low, medium and extra-high only. - Scrim. Decimal has no semantic scrim token. Using
--color-slate-A40-100. - Charting tokens. The Figma "Charting & Illustration" palettes are not on the CDN. Series colors temporarily map to primitives.
- Production CDN. Tokens load from a test S3 bucket (
tests3-cdn). What is the production Decimal token URL? - Sheet and dialog corners. Decimal corners max out at 8 (besides pills). Sheets and dialogs use platform-like 12–16 corners. Approve or override?
- Button: Mobile L (48) adds one unit step over Decimal web L (40). Corner is Decimal corner-m (4px): one step softer than Decimal web buttons (corner-s, 2px) and far from the 12px used in the previous kit.
- Text field: Decimal fields keep the label above the box on both platforms (not the M3 floating label). Box height is Mobile L (48).
- Toggle: iOS "on" uses Decimal constructive (success) fill to match the platform convention; Android uses the Decimal primary fill. DS team to confirm.
- Sheet: decimal-drawer (side panel on web) becomes a bottom sheet on phones.
- Holdings list (data table): Data tables do not fit on phones. decimal-data-table maps to a 2-column row (name left, value right) with a sticky header; tap opens detail.
- Regulatory disclosure: Disclosure copy must come from Compliance. This block only defines layout.
- Charts: Charting colors map to Decimal primitives until charting tokens ship on the CDN.