Figma

Overview

Every component documented here has a matching layer structure in the Figma file, using the same naming, variants, and color tokens described in Theming. Use it to design new screens with components that map directly onto this codebase.

What's included

• Color styles for every token in the Theming page, light and dark
• Auto Layout components for buttons, inputs, and forms
• Typography styles matching the Typography page scale
• Ready-made page templates for common banking flows

Keeping design and code in sync

When a token changes in app/globals.css, update the matching color style in Figma so designs and the live components never drift apart.