Multi-brand tokens

Actions

Button

Default
Small
Neutral
Ghost
Disabled

ButtonGroup

SplitButton

IconButton

Ghost accent Ghost neutral Ghost link
Filled md
Filled sm
Sizes
In use Growth fund Market value

Link

Questions about fees? Read the fee schedule or visit the company site (opens in a new tab).

View all accountsDownload archive (unavailable)

Button tones

Every Button variant has a tone: accent (the brand colour) or neutral (the same greys in every brand). Ghost has no fill until hover. Disabled looks the same in both tones. Applied to the Figma branch on 2026-09-26.

Variants × tone, 36 px

Small, 24 px

Hover and pressed are static samples. Buttons in the Default and Disabled columns are live.

Icon buttons next to their Button

IconButton md and sm use Button's size tokens, so they match Button default and sm in every density. xs (16 px) has no Button: it is for inline icons, so only ghost has it. Ghost also has a link tone for icons that open a page: it uses the shared link blue and never takes a fill. It has no Button equivalent, because a text link is used instead.

Form controls

Input

Fields marked with an asterisk are required.

TextArea

Slider

Switch

Checkbox

Statements to include

RadioButton

Statement delivery

DatePicker

AmountPicker

Balance

FileUpload

or drag and drop

PDF, PNG or JPG, up to 5 MB each. A file with "fail" in its name simulates a failed upload.

    Chip

    Filter chips toggle and show a check when selected. Input chips show an applied value you can remove.

    White chips sit on grey surfaces.
    Growth fund Last 30 days Over $1,000

    Breadcrumbs and Back

    Back to accounts

    Tabs

    Your portfolio is up 4.2% this quarter.

    Accordion

    Fees are a percentage of the assets we manage for you, billed quarterly in arrears.

    TreeView

      Drawer and Flyout

      Footer

      The page footer at the bottom uses the with links variant. The simple variant:

      2026 (©) | All rights reserved.

      Feedback and status

      Callout

      Tokens switch at runtimeSet data-brand, data-theme, data-density and data-shape on the html element.
      Transfer complete$2,500 moved from Cash to Income fund.
      Statement delayedYour Q3 statement will be available on October 15.

      MessageBar

      New tax documents are available for 2025.

      View documents

      Markets close early on Friday for the holiday.

      View trading hours

      Toast

      Badge

      DefaultSkyGrassBoredNegativeNeutralDark
      DefaultSkyBored SmallMediumLarge
      VerifiedNewPendingOverdueLockedWatchlist
      SmallMediumLarge

      Badge colours from Radix

      Six hues from Radix Colors, built like Radix's soft badge: fill at step 3, text at step 11 (step 12 where 11 is under 4.5:1), outline border at step 7.

      AmberLimeTealPurplePinkGold
      AmberLimeTealPurplePinkGold
      ReviewActiveScheduledPremiumPromoLegacy

      BadgeIcon

      ProgressBar

      Uploading statements

      Spinner and Skeleton

      Top holdings

      Last update

      • VTI$9,820
      • BND$7,410
      • VXUS$4,240

      ProgressCircle

      Data

      Table, ActionMenu and Pagination

      Accounts
      AccountStatusBalanceActions

      Carousel

      ScrollBar

        Typography

        Every text style reads its size, line height, weight and letter spacing from the Brand collection, so a brand can change font, scale and weights. Six brands use Inter; brand G uses Hind. Values update when you switch brand or density.

        Brand ramp

        Close account?

        Filters

        Account type
        Status