Foundations
Spacing
Every distance between elements comes from spacing tokens on a 4-pixel grid. The same tokens are used for padding, gaps between elements and gaps between sections.
How it works
Section titled “How it works”The spacing scale has thirteen steps from 2 to 56 pixels. The first steps (2, 4, 6) are for tight relations such as an icon and its text; after that the scale grows in multiples of 4. The scale does not depend on brand or mode: every brand keeps the same rhythm.
In Tailwind the spacing tokens back utilities such as p-*, m-* and gap-*: p-lg gives 12 pixels of padding, gap-md an 8-pixel gap.
| Token | Value | Preview |
|---|---|---|
--bigbang-space-none | 0px | |
--bigbang-space-xxsIcon and its text | 2px | |
--bigbang-space-xsLabel and help text | 4px | |
--bigbang-space-sm | 6px | |
--bigbang-space-mdInline items, button groups | 8px | |
--bigbang-space-lgPadding inside a form field | 12px | |
--bigbang-space-xlBetween form fields | 16px | |
--bigbang-space-2xl | 20px | |
--bigbang-space-3xlCard padding | 24px | |
--bigbang-space-4xl | 32px | |
--bigbang-space-5xlBetween page sections | 40px | |
--bigbang-space-6xl | 48px | |
--bigbang-space-7xl | 56px |
Choose by relation
Section titled “Choose by relation”Related elements sit close together, unrelated ones further apart. In a form, a label and its field are xs apart, two fields xl, two form sections 4xl. The larger the gap, the weaker the relation; readers see the groups without needing lines.
Density
Section titled “Density”Merchant screens are mostly tables and forms. Table rows default to md padding, cards and panels to 3xl. On mobile the horizontal page margin is xl (16 pixels); on desktop the content grid uses 3xl and above.
Guidelines
Section titled “Guidelines”Use tokens, not pixels
Section titled “Use tokens, not pixels”gap-md px-lg py-mdgap-[7px] px-[13px]