Skip to Content
STYLE GUIDE

Bua style guide: simple, warm, direct.

Everything on the Bua site is built from the pieces below. Use them as they are, and the site stays consistent, whoever builds the next page.

Colour

Green and gold do the work. Use gold sparingly, never for body text.

Bua green#0E4D3C
Logo, headings, green band
Victory gold#F0B429
Buttons, accents, final band
Teal#2F7D67
Third card colour, supporting
Ink#14201B
Text, outlines, shadows
Mist#F4F7F5
Page background
Muted#55645D
Secondary text

Dark mode: background #0E1512, cards #18231E, text #E8EFEB, green becomes #5FC9A4. Gold stays the same.

Typography

Fraunces for headlines and questions, DM Sans for everything else. Both are free from Google Fonts. Sentence case throughout.

H1 · Fraunces 500
36–68px, line 1.08
One system for every process
H2 · Fraunces 500
30–50px, line 1.12
How we can help
H3 · Fraunces 500
24px, line 1.2
New implementation
Body · DM Sans 400
17px, line 1.6
Sales, stock, production and invoicing in one place, set up for Irish VAT. Keep lines under 70 characters.
Small · DM Sans 400
15px, muted
Odoo only · Fixed scope and timelines · Senior-led
Label · DM Sans 700
13px, 0.08em tracking
WHAT’S INCLUDED

Buttons

One main action per section. Fully rounded, gold with dark text. On a gold band, flip to green.

Book a demo
See how pricing works →
Book a call

Primary, text link, and the green button for use on gold. Focus state: 3px gold outline.

Tags and emphasis

A pill tag introduces each section. The gold underline picks out one phrase in a headline, never more than one.

SERVICES

Capitals, 2px outline, solid 3px offset shadow

Make Odoo actually work

border: 2px solid ink border-radius: 999px box-shadow: 3px 3px 0 ink

Cards

Service cards are quiet, with a gold top edge. Process and “what’s included” cards use a thick coloured border with a solid offset shadow.

Service card

Plain border, 6px gold top edge, radius 20px.

Learn more →
1

Process card

Number circle, dashed line, card with 8px offset shadow.

2

WHAT’S INCLUDED

  • Checklist item
  • Another item
Green
Gold
Teal

Rotate card colours in the order green, gold, teal. Number circles on gold use dark text.

Bands and points

Full-width bands break up the page. Use the green band for the demo, and the gold band for the final call to action.

Green band

White heading, soft green text, gold button.

Book a live walkthrough

Gold band

Dark heading, green button.

Book a demo

Gold-edged point

A 4px gold left border marks short, equal points such as “Odoo only”.

FAQ rows

Questions in Fraunces, answers in muted DM Sans. A green “+” turns into “×” when open.

What does an example question look like?

Short and plain, written the way a customer would ask it.

And an open one?

Answers stay under about 60 words, with no jargon.

Layout and detail

Content width1100px max, 24px side padding
Section spacing88px top and bottom (64px on mobile)
GridAuto-fit columns, min 270px, gap 28px
Corner radiusPills 999px, cards 20px and 28px, tiles 20px
Offset shadows3px on tags, 8px on cards, never blurred
Soft shadow0 6px 18px at 12% green, for tiles only
VAT
Peppol
Bank

Hero tiles

Generic labelled tiles, slightly rotated along a curve. No third-party logos unless you have permission.

Voice

Direct, practical and warm. Short sentences, plain words, real examples. Say what you will do and by when.

Do

  • “After a scoping call you get a fixed price.”
  • Name the module and the outcome.
  • Use sentence case and British spelling.
  • Only claim what is true today.

Don’t

  • “Digital transformation journey.”
  • Claim awards, partner tiers or years of experience you can’t back up.
  • Imply Bua is Odoo.
  • Use more than one gold underline per page.
Bua Technologies · Style guide v1 · Odoo is a trademark of Odoo S.A.