Navigation

Visual Style and Ambition

A visual signature for the look, and an ambition level for how far it pushes.

Step 3 settles how the site should feel, and it is the step with the most influence on the result. Two controls: a visual signature that gives Webby a reference for the look, and an ambition level that decides how far it pushes.

Pressing Generate Design System at the end of this step turns everything you have chosen so far into the design language the whole site is built from.

Steps

Choose a visual signature

The gallery shows signatures you can preview in full. Picking one tells Webby the kind of design you are after — the proportions, the density, the way sections are composed.

It is a reference, not a template. Webby takes influence from it rather than reproducing it, so your colours and type still drive the result.

You can also go without one and let your colour, type and ambition choices speak for themselves.

Set your ambition

The slider runs from 1 to 10 and names what each level means, from Very safe — clean and conventional at 1, through Balanced — personality within structure at 5 and Expressive — confident design choices at 6, up to Ambitious — award-worthy territory at 9 and Fearless — breaks every rule intentionally at 10.

It defaults to 6. Think about your audience rather than your taste. A site selling industrial equipment to procurement managers is better served around 3 or 4, where the design gets out of the way. A design studio's own site can afford 8.

High ambition is not better. It means less conventional, which also means more surprising — and a visitor who is surprised by your navigation is a visitor who has stopped reading.

Generate your design system

Generate Design System turns your colours, type, signature and ambition into one coherent set of rules: the colour roles, the type scale, spacing, border treatment, shadows and button styling.

This takes a moment, and it is a charged action — the cost is shown before it runs.

Review it, then accept

You are shown what was produced, including a contrast check on the colour combinations so you can see whether anything will be hard to read.

If it is not right, change a choice and generate again. If it is, Accept & Continue.

This is the moment to be fussy. Everything built afterwards is built to this, and while you can edit the design system later, pages already built need a nudge to pick up big changes.

Result

Your site has a design system: a named set of colours, fonts, spacing and component rules that every page will be built against. It is editable at any time in Site Settings > Design System.

Continue Reading

Was this article helpful?

NotebookLM Overviews