The 8pt grid and the fundamentals of a UI design system
Florent Dabernat
May 3, 2026
2 min read
In this article
A banking app that wants to modernize its interface while keeping a high level of accessibility needs to rely on solid fundamentals. The 8pt grid is one of them, and it structures the majority of professional interfaces today.
The 8pt grid and spacing
The 8pt grid ensures visual consistency and a regular rhythm, with spacing and sizes harmonized in multiples of eight, or half-steps of four when needed. Columns adapt to different breakpoints, while gutters stay stable from one screen to another. Some products even plan two densities, Comfort and Compact, to suit data-heavy uses like financial tables.
Colors, contrast and typography
The palette is organized around four families: primary, secondary, neutrals and status colors (success, warning, danger, information). Contrast must meet the AA level, i.e. 4.5:1 for normal text and 3:1 for large text. Light and dark themes are never just a simple inversion: they require recalibrating neutrals, saturation and surface elevation.
On the typography side, the modular scale ensures readable, well-hierarchized headings, while line length and line height are adjusted to support continuous reading. Tabular lining figures turn out to be particularly useful in numeric contexts, like tables or banking amounts.
On the redesign of a banking login screen, applying these principles increased successful first-attempt logins by 15%, with a 30% drop in input errors.
The design system as a source of truth
The design system organizes elements from simplest to most complex: atoms, molecules, organisms. It relies on components with variants and props, a shared library in Figma, and clear documentation, often in Zeroheight or Notion. Tokens are the source of truth for colors, spacing, typography and motion, ensuring a value change propagates everywhere without drift.
Every component has defined states (default, hover, visible focus, active, disabled, loading, success, error), with transitions of 150 to 300 milliseconds and gentle easing curves, respecting the user's reduced-motion preference when it's enabled.
Frequently asked questions
-
Why specifically an 8-point grid rather than 4 or 10?
- 8 offers a good compromise: enough flexibility to vary spacing, while staying easily divisible for fine adjustments (half-steps of 4), which isn't the case with mathematically less convenient bases.
-
Is a design system necessary for a small project?
- On a very small project, a simplified mini design system (colors, typography, a few components) can be enough. The full version with documented tokens becomes useful once several people work on the product.
-
How do you check that a contrast meets the AA level?
- Free tools like the WebAIM Contrast Checker let you quickly test a color combination and check whether it hits the required ratios for normal and large text.