THE STARTER / FIELD GUIDE
A useful kit
of parts.
A living reference for the reusable sections, styles and editing controls in this demonstration.
01 / TYPOGRAPHY
Clear hierarchy.
A human rhythm.
Useful subheadings
Comfortable body copy with strong emphasis, an italic voice and a clear inline link.
Small supporting text stays readable.
One simple type system
The demo pairs a system sans-serif with a restrained Georgia italic accent. No extra webfont download is needed for the public design.
- One H1 per page
- H2 for main sections; H3 for their parts
- Body text at a readable measure
- Fluid headings with natural wrapping
02 / COLOUR
A calm, useful palette.
A helpful notice
Use a notice for information that changes what someone needs to do. Keep the message short and specific.
A short quotation can give an idea room to breathe.
04 / QUESTIONS
A few useful answers
Where do we begin?
Start with a conversation about your goals, audience and priorities. We can then agree a useful next step.
Can the approach grow with us?
Yes. Begin with the pages and content you need, then add useful material as your business develops.
Is this a real company website?
This is a demonstration with fictional content and original placeholder artwork. It is ready to adapt for a new client.
Can I send an enquiry from this demo?
No. The sample form shows the fields and styling, but sending is disabled until the project is deliberately configured.
05 / FORMS
Comfortable to complete.
Native EOS fields. Demo sending is disabled.
06 / BUILDING WITH EOS
Reusable, with a clear place to edit.
| Change | Admin location |
|---|---|
| Words, summaries and images | Collections → choose an item → edit |
| Home page sections | Layout Designer → WW — Home showcase |
| Header, footer and shared CTA | Layout Designer → named WW sub-layout |
| Navigation links | Menus → Main Menu / Footer Menu |
| Colours and typography | Site Colours / Site CSS → Base, Fonts and Colours |
| Form fields and configuration | Layout Designer → Contact Form |
The class contract
ww-contain constrains the immediate inner wrapper. ww-grid and a recipe such as ww-grid--3 arrange its direct children. Keep the cell’s inner wrapper enabled. ww-page-section supplies vertical rhythm; ww-fill--primary supplies a surface and its readable text colours.
Mobile: below 768px. Tablet: 768–1200px. Desktop: 1201px and above. Content stays in a logical source order.
NEXT CHAPTER
Something good
starts with a conversation.
Tell us where you are, and where you would like to go.