Android Decimal — Decimal Mobile

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. Material type roles map to the closest Decimal style; use sp units so text scales with system font size.

Headline small

Decimal Heading 4

Portfolio

28/36 · 500

Title large

Decimal Heading 3

Joint brokerage

20/28 · 500

Title medium

Decimal Heading 2

Holdings

16/24 · 700

Body large

Decimal Body 2

Your transfer is scheduled for Oct 14.

16/24 · 400

Body medium

Decimal Body 1

Markets close early on Nov 27.

14/20 · 400 · +0.16

Label large

Decimal Label 2 prominent

Transfer funds

14/18 · 500 · +0.16

Label medium

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/xxl

Corners 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 Material Design 3 values exposed as --m-* tokens under .platform-android.

Metric	Token	Value
Minimum touch target	`--m-touch-target`	48 × 48dp
Status bar	`--m-status-bar-height`	24dp
Navigation / top app bar	`--m-nav-bar-height`	64dp
Large / medium title	`--m-large-title-height`	112dp (whole bar)
Tab bar / navigation bar	`--m-tab-bar-height`	80dp (16dp top padding)
System navigation	`--m-home-indicator-height / --m-system-nav-height`	gesture handle 16dp or 3-button bar 48dp
Toolbar / bottom app bar	`--m-toolbar-height`	80dp
List row	`--m-list-row-min-height`	56dp
Search field	`--m-search-field-height`	56dp
Button (Mobile L)	`--m-control-l`	48dp
Switch track	`--m-switch-width`	52 × 32dp
FAB	`--m-fab-size`	56dp
Navigation rail	`--m-nav-rail-width`	80dp
Dialog width	`--m-dialog-width`	312dp
Screen margin	`--m-screen-margin`	16dp

Navigation

Top app bar

Decimal component

Decimal source: decimal-header

Small top app bar for most screens; medium bar for top-level destinations.
Navigation icon on the leading edge, up to 3 action icons trailing.
Title uses Decimal Heading 3; medium title uses Heading 4.

Property	Token	Value (dp)
Bar height	`--m-nav-bar-height`	64dp
Large / medium title area	`--m-large-title-height`	112dp total
Title type	`--m-type-heading-2 / --m-type-heading-3`	Heading 3 · 20/28 medium
Large title type	`--m-type-heading-4`	Heading 4 · 28/36 medium
Background	`--m-surface-page`	color/surface/1
Action color	`--m-glyphs-action`	color/glyphs/action/neutral/enabled
Divider	`--m-stroke-divider`	none (tonal on scroll)
Touch target	`--m-touch-target`	48dp

Small

Medium (top-level destination)

Navigation bar

Platform native

Decimal source: none (platform pattern)
Figma: none (web uses side nav)

3 to 5 top-level destinations at the bottom of compact screens.
Selected item gets a pill indicator in color/fill/controls/selected.
Swap for a navigation rail on tablets (see Side navigation).
Below the bar, the device shows either the gesture handle or the 3-button system bar (back, home, recents), never both. The user picks the mode in system settings, so design for both: the 3-button bar takes 48dp more.

Property	Token	Value (dp)
Height	`--m-tab-bar-height`	80dp (includes 16dp top padding)
Top padding	`--m-tab-bar-padding-top`	16 (padding/fixed/m)
System navigation	`--m-home-indicator-height / --m-system-nav-height`	gesture handle 16dp · 3-button bar 48dp
Icon size	`--m-icon-m`	24
Label type	`--m-type-supplemental-2 / --m-type-label-1-prominent`	Label 1 prominent · 12/16 medium
Selected color	`--m-glyphs-action`	color/glyphs/action/neutral/enabled
Indicator	`--m-fill-control-selected`	64×32dp pill · color/fill/controls/selected
Badge	`--m-fill-destructive`	color/fill/action/primary/destructive

Gesture navigation

3-button navigation

Bottom app bar

Platform native

Decimal source: none (platform pattern)

Up to 4 actions plus an optional FAB.
Use on screens without a navigation bar.

Property	Token	Value (dp)
Height	`--m-toolbar-height`	80dp
Background	`--m-surface-card / --m-surface-sunken`	color/surface/2
Item color	`--m-glyphs-action`	color/glyphs/default
Touch target	`--m-touch-target`	48dp

Statement actions

Navigation drawer and rail

New for mobile

Decimal source: decimal-side-nav, decimal-sidebar, decimal-drawer

Rail on medium widths (tablets, foldables); modal drawer on compact when 5+ destinations.
Active item uses the selected-control pill.

Property	Token	Value (dp)
Width	`--m-nav-rail-width`	Rail 80dp · drawer 300dp (max 85%)
Item height	`--m-touch-target`	56dp
Item type	`--m-type-label-2-prominent`	Label 2 prominent · 14/18 medium
Selected	`--m-fill-control-selected`	color/fill/controls/selected
Corner	`--m-corner-pill / --m-corner-sheet`	pill · drawer 16dp trailing

Navigation rail (tablet)

Search bar

Decimal component

Decimal source: decimal-search-input

Pill-shaped bar at the top of list screens; leading menu or back icon.
Opens a full-screen search view on focus.

Property	Token	Value (dp)
Height	`--m-search-field-height`	56dp
Corner	`--m-corner-control / --m-corner-pill`	pill
Fill	`--m-surface-sunken`	color/surface/2
Text	`--m-type-body-2`	Body 2 · 16/24
Placeholder / icon	`--m-glyphs-secondary`	color/glyphs/accent

Tabs

Decimal component

Decimal source: decimal-tabs

Primary tabs under the top app bar to switch views of the same content.
Active indicator is 3dp, action color.

Property	Token	Value (dp)
Height	`--m-touch-target`	48dp
Label type	`--m-type-label-2-prominent`	Label 2 prominent · 14/18 medium
Active color	`--m-glyphs-action`	color/glyphs/action/neutral/enabled
Indicator	`--m-fill-primary`	3dp · color/fill/action/primary/neutral

Tap a tab

Segmented buttons

Decimal component

Decimal source: decimal-content-switcher, decimal-binary-switcher

2 to 5 options; selected segment shows a check icon.
Binary switcher (e.g. Buy / Sell) uses the same shape with 2 segments.

Property	Token	Value (dp)
Height	`--m-control-m`	40dp (48dp hit)
Corner	`--m-corner-control / --m-corner-pill`	pill
Track	`--m-surface-sunken`	transparent · 1px color/stroke/controls/default
Selected	`--m-fill-control-selected`	color/fill/controls/selected
Label type	`--m-type-label-2`	Label 2 · 14/18 (selected prominent)

Time range

Binary switcher

Breadcrumbs

Decimal component

Decimal source: decimal-breadcrumbs, decimal-hierarchical-breadcrumbs

Rare on phones; use in file or document hierarchies on tablets.

Property	Token	Value (dp)
Type	`--m-type-label-2`	Label 2 · 14/18
Link color	`--m-glyphs-action`	color/glyphs/action/neutral/enabled
Current page	`--m-glyphs-prominent`	color/glyphs/prominent · prominent weight
Touch target	`--m-touch-target`	48dp

Step tracker

Decimal component

Decimal source: decimal-step-tracker, decimal-section-tracker

Same as iOS. Pair with a full-width primary button pinned above the navigation bar.

Property	Token	Value (dp)
Dot size	`--m-icon-m`	24
Connector	`--m-stroke-m`	2px · color/stroke/general/accent (done: color/fill/action/primary/neutral)
Label type	`--m-type-label-1`	Label 1 · 12/16 (current prominent)
Done fill	`--m-fill-primary`	color/fill/action/primary/neutral/enabled

Client
2Address
3Review
4Submit

Step 2 of 4

Actions

Button

Decimal componentDS team to confirm

Decimal source: decimal-button
Figma: Buttons/Standard/L Standard Button

Same hierarchy as iOS. Primary maps to M3 "filled", secondary to "outlined", tertiary to "text".
Do not use M3 tonal or elevated buttons; Decimal has no equivalent.

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 (dp)
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

New for mobile

Decimal source: decimal-trading-button

Same as iOS. Place side by side in a button group or as a single sticky action.

Property	Token	Value (dp)
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

New for mobile

Decimal source: decimal-progressive-button

Same as iOS.

Property	Token	Value (dp)
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

New for mobile

Decimal source: decimal-button-group
Figma: Button Groups/Labeled/L Labeled Button Group

Same as iOS. In dialogs, use text buttons instead (see Dialog).

Property	Token	Value (dp)
Gap	`--m-space-8`	8 (padding/fixed/xs)
Layout	`flex`	equal width · stacked when > 2 or long labels

Split button

New for mobile

Decimal source: decimal-split-button
Figma: Buttons/Split · Buttons/Dropdown

Leading segment runs the default action; trailing segment opens a menu.

Property	Token	Value (dp)
Height	`--m-control-m`	40 (44pt / 48dp hit)
Divider	`--m-stroke-s`	1px · color/glyphs/knockout
Menu	`--m-elevation-high`	decimal-menu · corner-l 8

Icon button

Decimal component

Decimal source: decimal-icon-button
Figma: Buttons/Icon (Bound, Unbound) · Buttons/Badge Icon Buttons

Same as iOS. Bound maps to M3 "outlined icon button".

Property	Token	Value (dp)
Hit area	`--m-touch-target`	48dp
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

New for mobile

Decimal source: none (platform pattern)
Figma: Toggleable Buttons/Bookmark · Toggleable Buttons/Pin

Same as iOS. Maps to M3 toggle icon button.

Property	Token	Value (dp)
Hit area	`--m-touch-target`	48dp
On	`--m-glyphs-action`	filled icon · color/glyphs/action/neutral/enabled
Off	`--m-glyphs-secondary`	outline icon · color/glyphs/accent

Floating action button

Platform native

Decimal source: none (platform pattern)

One per screen, for the primary creative action (new trade, new transfer).
Extended FAB adds a label; collapse to icon on scroll.

Property	Token	Value (dp)
Size	`--m-fab-size`	56dp
Corner	`--m-corner-sheet`	16dp
Fill	`--m-fill-primary`	color/fill/action/primary/neutral/enabled
Elevation	`--m-elevation-high`	effect/dropshadow/extrahigh

FAB and extended FAB

Link

Decimal component

Decimal source: decimal-link

Same as iOS.

Property	Token	Value (dp)
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 chips

New for mobile

Decimal source: none (platform pattern)
Figma: Badge Buttons/Filter/M Filter Button

M3 filter chips. Selected chips use the selected-control fill.

Property	Token	Value (dp)
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 componentDS team to confirm

Decimal source: decimal-text-input, decimal-form-field
Figma: Fields/Text Input/L Text Input

Same as iOS. Do not use M3 filled or floating-label fields; they break Decimal consistency.

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 (dp)
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

Legal name EmailEnter a complete email address. Account numberSet by your advisor.

Multiline text field

Decimal component

Decimal source: decimal-textarea

Same as iOS.

Property	Token	Value (dp)
Min height	`96`	96 (grows with content)
Other properties	`see Text field`	same as Text field

Note to advisor35 / 500

Amount input

New for mobile

Decimal source: decimal-dollar-input, decimal-percent-input
Figma: Fields/Amount Input/L Amount Input

Same as iOS. Use inputmode="decimal".

Property	Token	Value (dp)
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

Transfer amount$Available to transfer: $18,240.12 Allocation%

Exposed dropdown menu

Decimal component

Decimal source: decimal-dropdown, decimal-menu, decimal-multiselect-menu

Field box with trailing caret opens a menu anchored to the field.
Multiselect opens a bottom sheet with checkboxes.

Property	Token	Value (dp)
Field	`see Text field`	48 · corner-m 4 · 1px stroke
Menu row	`--m-touch-target`	48dp
Menu	`--m-elevation-high`	color/surface/0 · corner-l 8
Selected	`--m-glyphs-action`	check icon + color/glyphs/action/neutral/enabled

Date picker dialog

New for mobile

Decimal source: decimal-date-picker, decimal-calendar
Figma: Fields/Date Picker/L Date Picker

Field opens the M3 modal date picker. Allow keyboard entry for far-away dates (date of birth).

Property	Token	Value (dp)
Day cell	`40`	40dp (48dp row)
Selected	`--m-fill-primary`	color/fill/action/primary/neutral/enabled
Today	`--m-glyphs-action`	1px action-color ring
Header	`--m-type-heading-2 / --m-type-heading-4`	Heading 4 headline
Corner	`--m-corner-card / --m-corner-dialog`	16dp dialog

Time picker

Platform native

Decimal source: none (platform pattern)

M3 time input: tap hour or minute to edit, AM/PM toggle on the side.

Property	Token	Value (dp)
Row height	`36`	n/a
Value type	`--m-type-heading-3 / --m-type-heading-6`	Heading 6 · 42/50
Selected	`--m-fill-control-selected`	color/fill/controls/selected

09:45

Input chips

Platform native

Decimal source: none (platform pattern)

M3 input chips inside a field box.

Property	Token	Value (dp)
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

Platform native

Decimal source: none (platform pattern)

Same as iOS.

Property	Token	Value (dp)
Track / thumb	`--m-fill-primary`	color/fill/action/primary/neutral (accent-color)
Hit height	`--m-touch-target`	48dp

Risk tolerance: Moderate

Selection controls

Checkbox

Decimal component

Decimal source: decimal-checkbox, decimal-checkbox-group

Leading checkbox in list rows; whole row is the hit area.

Property	Token	Value (dp)
Box	`20`	20 · corner-s 2 · 2px stroke
Checked	`--m-fill-primary`	color/fill/action/primary/neutral/enabled
Row height	`--m-touch-target`	48dp

Email me trade confirmations Paperless statements I agree to the Client Agreement

Radio button

Decimal component

Decimal source: decimal-radio-group

Leading radio in each row of a radio group.

Property	Token	Value (dp)
Circle	`20`	20 · 2px stroke · 10 dot
Selected	`--m-fill-primary`	dot · color/fill/action/primary/neutral
Row height	`--m-list-row-min-height`	56dp

Dividends Reinvest Deposit to cash

Switch

Decimal componentDS team to confirm

Decimal source: decimal-toggle-switch

Same as iOS. The thumb grows and shows on-state when checked.

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 (dp)
Track	`--m-switch-width × --m-switch-height`	52 × 32dp
Thumb	`--m-switch-knob`	16dp off · 24dp on
On fill	`--m-fill-constructive / --m-fill-primary`	color/fill/action/primary/neutral
Off	`--m-stroke-divider / --m-stroke-control`	2px color/stroke/controls/default
Semantics	`role="switch"`	focusable button with aria-checked

Fingerprint sign-in
Price alerts

Feedback and status

Banner

Decimal component

Decimal source: decimal-inline-notification

Same as iOS. Maps to M3 banner.

Property	Token	Value (dp)
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.

Snackbar

Decimal component

Decimal source: decimal-toast
Figma: Notifications/Toast Notification

M3 snackbar with optional single action (Undo). Above the navigation bar and FAB.

Property	Token	Value (dp)
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 component

Decimal source: decimal-status-pill

Same as iOS. Badge counts sit on icons (see Icon button).

Property	Token	Value (dp)
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

Progress indicators

Decimal component

Decimal source: decimal-loading-comet, decimal-loading-shimmer

Same mapping: circular indeterminate, linear determinate, shimmer skeleton.

Property	Token	Value (dp)
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 component

Decimal source: decimal-empty-state

Same as iOS.

Property	Token	Value (dp)
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

Dialog

Decimal component

Decimal source: decimal-modal

Title, supporting text, text-button actions trailing. Confirming action rightmost.

Property	Token	Value (dp)
Width	`--m-dialog-width`	312dp
Corner	`--m-corner-dialog`	16dp (Decimal-adjusted from M3 28dp)
Title	`--m-type-heading-2 / --m-type-heading-3`	Heading 3
Scrim	`--m-scrim`	slate A40 (Decimal has no semantic scrim yet)

Bottom sheet

Decimal componentDS team to confirm

Decimal source: decimal-drawer

Modal bottom sheet with a drag handle; dismiss by swipe or scrim tap.

decimal-drawer (side panel on web) becomes a bottom sheet on phones.

Property	Token	Value (dp)
Top corners	`--m-corner-sheet`	16dp
Grabber	`--m-sheet-grabber-width × height`	32 × 4dp
Header	`--m-nav-bar-height`	Heading 3 title
Fill	`--m-surface-page / --m-surface-card`	color/surface/0

Bottom sheet actions

Platform native

Decimal source: decimal-menu

Use a bottom sheet list of actions with icons.

Property	Token	Value (dp)
Row height	`56 / --m-list-row-min-height`	56dp
Action type	`--m-type-heading-3`	Body 2
Destructive	`--m-glyphs-destructive`	color/glyphs/action/destructive/enabled
Corner	`--m-corner-dialog / --m-corner-sheet`	16dp

Property	Token	Value (dp)
Min width	`200`	200
Row height	`--m-touch-target`	48dp
Corner	`--m-corner-card`	style/corner/l · 8px
Elevation	`--m-elevation-high`	effect/dropshadow/extrahigh

Tooltip

Decimal component

Decimal source: decimal-info-toggletip

Plain tooltip on long-press of icon buttons; rich tooltip for definitions.

Property	Token	Value (dp)
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

Data display

List

Decimal component

Decimal source: decimal-list, decimal-list-item

One-, two- and three-line items; leading icon or avatar, trailing meta.
Swipe actions are optional on Android; always provide the same action in an overflow menu.

Property	Token	Value (dp)
Row min height	`--m-list-row-min-height`	56dp (72dp two-line)
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`	Body 1 · 14/20
Divider	`--m-stroke-divider`	1px full width
Group corner	`--m-corner-card`	none
Swipe action width	`80`	80

Accounts

Joint brokerage•••• 4821$82,250
Roth IRASwipe left$41,092
Open an account

Card

Decimal component

Decimal source: decimal-card, decimal-outcome-card

Use outlined (default) or raised. Do not use M3 filled cards.

Property	Token	Value (dp)
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

Quarterly review

With Alex Morgan · Oct 22, 10:00 AM

On track

Retirement goal

Projected $1.2M by 2051

Data point and summary

New for mobile

Decimal source: decimal-data-point, decimal-data-summary

Same as iOS.

Property	Token	Value (dp)
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)

New for mobileDS team to confirm

Decimal source: decimal-data-table

Same as iOS.

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 (dp)
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

New for mobile

Decimal source: decimal-masked-value, decimal-masked-account-number

Same as iOS. Set FLAG_SECURE on screens showing full numbers.

Property	Token	Value (dp)
Type	`--m-type-numeric-2`	Label 2 tabular
Toggle target	`--m-touch-target`	48dp
Mask	`•••• + last 4`	decimal-masked-account-number pattern

Account number: •••• 4821

Info field

New for mobile

Decimal source: decimal-info-field

Same as iOS.

Property	Token	Value (dp)
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

New for mobileDS team to confirm

Decimal source: decimal-reg-block, decimal-footer

Same as iOS.

Disclosure copy must come from Compliance. This block only defines layout.

Property	Token	Value (dp)
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 component

Decimal source: decimal-avatar

Same as iOS.

Property	Token	Value (dp)
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)

Expandable list item

Decimal component

Decimal source: decimal-section

Same as iOS.

Property	Token	Value (dp)
Row height	`--m-list-row-min-height`	56dp
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

Platform native

Decimal source: none (platform pattern)

M3 multi-browse carousel; dots optional.

Property	Token	Value (dp)
Item width	`85%`	85% with snap
Gap	`--m-space-12`	12
Dot	`8`	8 · current color/glyphs/prominent

Cash is earning 4.1%

Insight 1 of 3

Rebalance suggested

Insight 2 of 3

RMD due Dec 31

Insight 3 of 3

Charts

Platform nativeDS team to confirm

Decimal source: none (platform pattern)
Figma: ✺ Decimal Charting & Illustration Components

Same as iOS (TalkBack).

Charting colors map to Decimal primitives until charting tokens ship on the CDN.

Property	Token	Value (dp)
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

New for mobile

Decimal source: decimal-data-summary, decimal-data-table, decimal-list

Same content with a medium top app bar and navigation bar.

Property	Token	Value (dp)
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%

Trade ticket

New for mobile

Decimal source: decimal-trading-button, decimal-binary-switcher, decimal-dollar-input, decimal-modal

Full-screen dialog with the same structure; the primary action stays pinned above the keyboard.

Property	Token	Value (dp)
Composition	`see components`	Sheet · Binary switcher · Amount input · Pop-up / dropdown · Info fields · Trading button

Trade AAPL

Amount$Buying power: $16,480.24 Order type

Est. shares: 4.3961
Est. commission: $0.00

Sign in with biometrics

Platform native

Decimal source: decimal-text-input, decimal-button

BiometricPrompt bottom sheet is system UI; keep app copy short.

Property	Token	Value (dp)
Composition	`see components`	Text field · Button · system biometric prompt · keyboard inset

Welcome back

User ID

List-detail (two-pane)

Platform native

Decimal source: decimal-list, decimal-card

Canonical list-detail layout on expanded widths.

Property	Token	Value (dp)
Master width	`136–320`	360dp (demo scaled)

Parker household

2 accounts · reviewed 3 days ago

Material 3 coverage

Every component in the Material Design 3 catalog, mapped to its Decimal Mobile section.

M3 component	Decimal Mobile	Status	Note
App bars: top	Top app bar	Documented
App bars: bottom	Bottom app bar	Documented
Badges	Icon button, Status pill and badge	Documented
Buttons (filled, outlined, text)	Button, Trading buttons, Progressive button, Button group, Link	Documented
Buttons: tonal / elevated	—	Not needed	No Decimal equivalent; use secondary.
Cards	Card, Data point and summary	Documented
Carousel	Carousel	Documented
Checkbox	Checkbox	Documented
Chips	Filter chips, Input chips	Documented
Date pickers	Date picker dialog	Documented
Dialogs	Dialog	Documented
Divider	List	Documented
FAB / extended FAB	Floating action button	Documented
Icon buttons	Icon button, Bookmark and pin toggles	Documented
Lists	List, Holdings list (data table), Info field, Expandable list item	Documented
Loading / progress indicators	Progress indicators	Documented
Menus	Menu, Exposed dropdown menu	Documented
Navigation bar	Navigation bar	Documented
Navigation drawer	Navigation drawer and rail	Documented
Navigation rail	Navigation drawer and rail	Documented
Radio button	Radio button	Documented
Search	Search bar	Documented
Segmented buttons	Segmented buttons	Documented
Sheets: bottom	Bottom sheet, Bottom sheet actions	Documented
Sheets: side	—	Not needed	Tablet only; use navigation drawer.
Sliders	Slider	Documented
Snackbar	Snackbar	Documented
Split button	Split button	Documented
Switch	Switch	Documented
Tabs	Tabs	Documented
Text fields	Text field, Multiline text field, Amount input	Documented	Decimal label-above field, not M3 floating label.
Time pickers	Time picker	Documented
Tooltips	Tooltip	Documented
Canonical layouts: list-detail	List-detail (two-pane)	Documented
Share sheet	—	Use system UI	Use Android Sharesheet unchanged.
WebView	—	Use system UI	Use Custom Tabs for external links.
App widgets	—	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/base is 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/2 is #f2f3f5 in Figma but resolves to #E6E8EB (slate-10) on the CDN. utility/supplemental/1 is 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/high is 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).
Switch: iOS "on" uses Decimal constructive (success) fill to match the platform convention; Android uses the Decimal primary fill. DS team to confirm.
Bottom 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.

Color

Surfaces

Text and icons

Action fills

Feedback

Strokes

Charting (provisional)

Typography

Spacing

Corners and elevation

Platform metrics

Navigation

Top app bar

Navigation bar

Bottom app bar

Navigation drawer and rail

Search bar

Tabs

Segmented buttons

Breadcrumbs

Step tracker

Actions

Button

Trading buttons

Progressive button

Button group

Split button

Icon button

Bookmark and pin toggles

Floating action button

Link

Filter chips

Inputs

Text field

Multiline text field

Amount input

Exposed dropdown menu

Date picker dialog

Time picker

Input chips

Slider

Selection controls

Checkbox

Radio button

Switch

Feedback and status

Banner

Snackbar

Status pill and badge

Progress indicators

Empty state

Overlays

Dialog

Bottom sheet

Bottom sheet actions

Menu

Tooltip

Data display

List

Card

Quarterly review

Retirement goal

Data point and summary

Holdings list (data table)

Masked value

Info field

Regulatory disclosure

Avatar

Expandable list item

Carousel

Cash is earning 4.1%

Rebalance suggested

RMD due Dec 31

Charts

Patterns

Account overview

Portfolio

Trade ticket

Trade AAPL

Sign in with biometrics