Style Guide ↓
Style guides aren’t just about how things look. They help make things make sense.
Typography
Typography isn’t decoration. It’s structure.
Far more than picking a nice font, typography is a system grounded in scale, proportion and rhythm — built on mathematical 📐 principles that help the 🧠 process information more easily. A clear typographic hierarchy signals what matters most, what supports it and what’s detail.
Typographic hierarchy
Heading level 2
Heading level 3
Display size large
Display size medium
Display size small
Preamble
Body text ...
When done right, typography improves legibility and scan-ability, strengthens storytelling and ensures content is read in the right order — by people, screen readers, search engines, bots and now AI agents.
In Bright Build, typography is deliberate, consistent and accessible by design. Because when type works properly, everything else works harder.
We ❤️ typography.
Colour Palette
Colour isn’t decoration. It’s communication.
Colour in Bright Build isn’t decorative — it’s structural. Rooted in fundamental colour theory, our palette balances contrast, harmony and accessibility to help content feel clear and intentional. Different background colours allow us to segment information, highlight key messages and create visual rhythm across a page. Primary tones draw attention. Secondary and neutral shades provide space and hierarchy. Accent colours can signal emphasis or interaction. Used consistently, these background options help guide the eye, reduce cognitive load and make content easier to scan, understand and act on.
Light
#ffffff
Supplementary
#f6f6f6
Dark
#000000
Bright
#ffd93e
Iconography
Icons aren’t extras. They’re signals.
Icons are visual shortcuts that help people navigate, interpret and act without overthinking. A strong iconography system defines style, weight and meaning so symbols are consistent, recognisable and purposeful. Used well, icons reduce cognitive load, reinforce hierarchy and support accessibility. In Bright Build, our icon set is deliberate and cohesive — designed to guide behaviour, not distract from it.
arrow-down
arrow-up
arrow-right
arrow-left
search
calendar
plus
tick
x
location
menu
chevron-left
chevron-right
chevron-up
chevron-down
close
telephone
play
pin
youtube
generic
doc
docx
csv
xls
webp
jpg
ppt
txt
rtf