Loading

Design Kits

A kit holds the design decisions a site shares: colours, fonts, typography, defaults and custom styling.

Where to find it

Architect Panel → Layout & Pages:

  • Page Builder — documents, revisions and publishing
  • Pages — the site’s page structure

Architect Panel → Styling:

  • Logo — the wider application theme

What a kit holds

A named set of colours, fonts, typography settings, widget defaults and custom styling, with a revision so changes are tracked. One kit is the default.

Decide it once

The whole value. Colours and type chosen in the kit apply everywhere; the same decisions made per widget apply nowhere else and diverge immediately.

A site styled widget by widget is a site that cannot be rebranded.

Keep custom styling in the kit

Rather than on individual widgets and pages. Styling scattered across a site is styling nobody can find, and it is the reason a "simple" colour change turns into a week.

Fewer colours than you think

A primary, a secondary, a background, a text colour, and one or two for states. A palette of fifteen is a palette used inconsistently.

Check contrast properly

Text against its background, at the sizes actually used. A palette that looks elegant on a designer’s screen can be unreadable on a phone outdoors, and for many organisations accessible contrast is an obligation rather than a preference.

Typography carries most of the feel

Heading sizes, line height, spacing. Setting these deliberately in the kit is what makes a site look designed rather than assembled, and it costs one sitting.

Widget defaults save repetition

Where the kit sets a default, every new widget starts correct. That is worth more than it sounds — it means somebody building a page produces something consistent without knowing the rules.

Change the kit, not the pages

When the design changes. A rebrand should be a kit change that propagates, and if it is not, styling has leaked onto pages and that is the thing to fix.

Test a kit change broadly

It affects everything. Look at several pages of different kinds — a text page, a page with a form, an e-mail document — before considering a kit change finished.

Worked example

An organisation defined a five-colour palette and its typography in the kit, with all custom styling there rather than on pages. A rebrand was a kit change checked across six representative pages, and took an afternoon rather than a project.

Recommendations

  • All styling in the kit, none on pages.
  • Five or six colours, used consistently.
  • Check contrast at real sizes.
  • Test a kit change across several page kinds.