Iconography

Why we use it:

This abstraction layer allows us to map a single token name to different raw values depending on the context. It is the architectural foundation that enables instant, system-wide theming (Light/Dark mode) and ensures accessible contrast ratios across all products without manual overrides.

Styles:

We utilize two distinct styles to communicate state and hierarchy:

• Linear (Outline):

  • Usage: The default state for navigation menus, action buttons, and list items.

  • Why: The stroke weight matches our Stroke-S (2px) borders, creating a cohesive visual texture without dominating the screen.

• Bold (Solid/Filled):

  • Usage: Active states (e.g., Selected Tab) or high-emphasis actions (e.g., FABs).

  • Why: Switching from Linear to Bold creates a "Shift in Weight" that is instantly recognizable to color-blind users, reinforcing the active context.

Sizing & Grid:

All icons are designed on a pixel-perfect grid to ensure sharpness at any scale.

• Icon-S (16px):

  • Usage: Inline with Text-S metadata (e.g., inside a "Time" badge or Input Field accessory).

  • Touch Target: Must still maintain a 24px click area.

• Icon-M (24px):

  • Usage: The system default. Used in Buttons, Navigation items, and Table Actions.

  • Grid: Built on a 24px bounding box with a 2px padding safety zone.

• Icon-L (32px):

  • Usage: Featured empty states or high-level dashboard headers.

Usage Guidelines:

• Optical Alignment: Icons should always be optically centered within their container, not just mathematically centered.

• Semantic Pairing: Icons must always be paired with a text label in navigation menus to ensure accessibility for complex financial terms.

• State Change: When a navigation item is selected, the icon must transition from Linear to Bold to signify "You are here."