Design system

How Builtwell is built

Everything Builtwell's pages are made of: the type, colour and voice, the components and blocks that build a page, and the prototypes that put them to work. All of it live, read from the same code the site runs on.

Guidelines
9
Type styles
24
Colours
14
Blocks
100

Four ways in

The guidelines for the why, the components and blocks for the what, the prototypes for how it feels.

  1. Aa

    01

    Guidelines

    Brand, voice, logo, type, colour, layout, imagery, icons and motion: the rules every Builtwell page follows.

  2. Email
    hello@builtwell
    ✓New
    Book a callPricing

    02

    Components

    The parts: buttons, fields, menus, dialogs and the AI Elements, live, with their props and guidance.

  3. header-13
    poster-8
    content-4
    pricing-3
    footer-1

    03

    Blocks

    Whole sections those parts make: headers, posters, content, pricing and footers, at every device width.

  4. A
    B
    C

    04

    Prototypes

    New pages and ideas, built with the system before they ship.