One scale, a real hierarchy
Every size of text is a step on one scale.
Design system
BridgeE Design System
The system every BridgeE page is built from: one type scale, four surfaces, and parts that fit whatever space they are given. Everything on these pages is made of it, and every example is real.
49components
39page sections
499design tokens
4surfaces
Six principles
What every part promises, so a thousand pages need no fixes of their own.
Surfaces, not colours
Parts never pick a colour. The surface answers.
Every part fits its space
Parts respond to the slot they are in, not to the device.
Nothing gets cropped
Pictures fit their frame in both directions.
Motion that explains, then rests
One clear movement per action, and a still frame for anyone who asks.
Proof is real, or it is not there
Real clients, real people, real pages.
How a page is built
Five layers, each made only of the one before it. A page is its words and a choice of sections; it never carries a style of its own.
-
01
Tokens
499 named values: the scale, the surfaces, space, shape, motion.
Foundations -
02
Layout
Sections, grids, splits and frames that size from their content, with no fixed widths.
Every part fits its space -
03
Components
49 parts, each one fitting the space it is given, on every surface.
Components -
04
Patterns
39 page sections composed only of components.
Patterns -
05
Page
The words and the choice of sections. Surfaces alternate down the page.
bridgee.in
Explore the system
- 4 surfacesFoundationsColour and surfaces, the type scale with its phone sizes, space, shape, material and motion, measured live.
- 49 partsComponentsEvery part, grouped by job, live on each surface and at every width.
- 39 sectionsPatternsWhole page sections, each shown with real content from bridgee.in.
- 6 principlesPrinciplesThe six ideas every part keeps, so a page needs no fixes of its own.