For designers
Where to start designing with BigBang, how component pages are organised and the Figma variables.
What the system provides
Section titled “What the system provides”BigBang builds the screens of merchant online banking with one visual language and one set of behaviours. Colour, typography, spacing, shape and motion decisions are defined as tokens; components use those tokens, and screens are made of components. A customer brand only brings its own token file, while the structure and behaviour of the components stay the same.
Reading order
Section titled “Reading order”- Foundations: colour roles, the type scale, the spacing grid, shape, elevation and motion. Each foundation page shows the token values in light and dark mode.
- Tokens: the token layers (raw value, meaning, component) and how switching brands works.
- Components: the overview table shows the category, status and version of each component; search by name or category, then move on to the individual component pages.
- Patterns: solutions that combine several components into a workflow, such as form validation, filtering, empty states, loading and confirmation.
- Templates: the app shell, sign-in screen, print layout and ready-made screen blocks; start a new screen from here.
Reading a component page
Section titled “Reading a component page”Every component page has the same six tabs:
| Tab | Content |
|---|---|
| Examples | A live Storybook example and server-rendered variant examples |
| Usage | When to use and when not to use, anatomy, behaviour, do and don’t examples, content rules |
| Specs | States, measurements, tokens used, the motion table |
| Accessibility | Role, keyboard, focus, screen reader output, contrast and the WCAG 2.2 mapping |
| Code | Installation and the props table |
| Changelog | Release notes |
Brand and mode
Section titled “Brand and mode”Use the Appearance menu at the top right to switch brand and light or dark mode. Every example on this site is a real component and follows your choice straight away, so you can check how a design looks in both modes and in the test brand (Fixture).
For a new customer brand, the Theme generator produces a candidate brand file from the brand colours, checks contrast and shows the result on real components.
Figma variables
Section titled “Figma variables”The Specs tabs on this site are the single source for measurements and colours.
To bring token values into a Figma file, use the Figma variables file per brand on Downloads: colour ramps, semantic colours in light and dark mode, and spacing, corner, border and icon sizes. Icons are searched by name and keyword in the Icon gallery.
A new need
Section titled “A new need”For a need the existing components do not cover, follow the decision flow on the Contribute page. First we check whether it can be a variant of an existing component; a new component is proposed only after that, through the proposal process.