Embrace

Embrace is a B2B creative agency, and its own website has to sell its design. I designed the site, and the system it’s built from.

That system is a Figma file that works the way their Bootstrap and Umbraco code does, so designers and developers build from the same parts.

The grid

Embrace’s designers drew pages freely, and developers rebuilt them in Bootstrap, guessing at every width and margin.

So I rebuilt Bootstrap’s grid in Figma, with column widths set to exactly what Bootstrap renders. Picking a layout means picking a Bootstrap class.

Breakpoint

Row

col/xl/8736px

col/xl/4356px

page framesection padding12 columnsthis row’s cols

Bootstrap’s grid, to scale. Pick a breakpoint and a row layout.

Every colour, font, size and space is a variable, named for where it’s used.

A fixed layer styles the file; a brand layer holds Embrace. Rebranding means changing one set of values, not every component.

Components mirror the options a developer exposes: type, size, state, breakpoint. Each sits beside notes for the developers who build it.

Wireframes are made of the real sections, so a finished page is its wireframe with the content dropped in: the same rows, the same spacing.

thisisembrace.com was built straight from the file, and Embrace’s designers now start every page from its templates and sections.

To writeA real figure would be stronger.