logo

Style Guide

A curated set of design principles, visual assets and pre-built components that form the visual foundation of this template. Use this guide to keep every page consistent as the site grows.

Color Styles

Primary Colors
Secondary Colors

Typography

heading-style-h1

Heading style

heading-style-h1 + is-center (centres the heading text).
heading-style-h2

Heading style

heading-style-h2 + is-center (centres the heading text).
heading-style-h2 + is-white (changes the heading text color to white).
heading-style-h3

Heading style

heading-style-h3 + is-white (changes the heading text color to white).
heading-style-h4

Heading style

heading-style-h5
Heading style
heading-style-h6
Heading style
text-size-large
OpenNeux works alongside leadership teams to turn difficult choices into a focused plan, and that plan into results you can measure, within one quarter.
text-size-large + is-center (centres the heading text).
text-size-large + is-white (changes the heading text color to white).
text-size-medium
OpenNeux works alongside leadership teams to turn difficult choices into a focused plan, and that plan into results you can measure, within one quarter.
text-size-medium + is-black (changes the heading text color to black).
text-size-medium + is-center (centres the heading text).
text-size-medium + is-white (changes the heading text color to white).
text-size-small
OpenNeux works alongside leadership teams to turn difficult choices into a focused plan, and that plan into results you can measure, within one quarter.
text-size-small + is-white (changes the heading text color to white).
text-size-small + is-black (changes the heading text color to black).
text-size-small + is-center (centres the heading text).
text-size-small + is-tag (turns the small text into a tag: it adds a background colour and makes the text white).
button_text
OpenNeux works alongside leadership teams to turn difficult choices into a focused plan, and that plan into results you can measure, within one quarter.
button_text + is-bold (Bold text).
button_text + is-hover (Hover text).
button_text + is-small (Small text).
button_text + is-white (White text).
tagline_text
OpenNeux works alongside leadership teams to turn difficult choices into a focused plan, and that plan into results you can measure, within one quarter.
tagline_text + is-center (centres the heading text).
tagline_text + is-white (changes the heading text color to white).
paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
rich_text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

block_link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

system_link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
list
  • Item 1
  • Item 2
  • Item 3
list_item
  • Item 1
  • Item 2
  • Item 3

Buttons

button
Book a strategy call
Book a strategy call
button_mobile
Book a call

Spacing System (Paddings and Margins)

This template uses a deliberate spacing system to keep visual balance and hierarchy. Instead of hard-coding values into components, it relies on global spacing classes, giving every section consistent vertical breathing room and a unified layout.
name
Space XS
Base Mode
1.25 REM
Tablet
1.25 REM
Mobile L
0.938 REM
Mobile
0.938 REM
1440px
1.25 REM
1920px
1.25 REM
name
Space S
Base Mode
3.125 REM
Tablet
1.875 REM
Mobile L
1 REM
Mobile
1 REM
1440px
3.125 REM
1920px
3.125 REM
name
Space M
Base Mode
5 REM
Tablet
4 REM
Mobile L
3.5 REM
Mobile
3 REM
1440px
5 REM
1920px
5 REM
name
Space L
Base Mode
6.25 REM
Tablet
5 REM
Mobile L
4.5 REM
Mobile
4 REM
1440px
6.25 REM
1920px
6.25 REM
name
Space XL
Base Mode
8.125 REM
Tablet
6.25 REM
Mobile L
5.5 REM
Mobile
5 REM
1440px
8.125 REM
1920px
8.125 REM

Grid & Flexbox System (Gaps)

This template uses a deliberate gap system to keep visual balance and hierarchy inside structural layouts. Instead of hard-coding values into grids and flex containers, it relies on global gap classes, giving every component consistent horizontal and vertical spacing and a unified, responsive alignment.
name
Gap M
Base Mode
1.875 REM
Tablet
1.625 REM
Mobile L
1.5 REM
Mobile
1.25 REM
1440px
1.875 REM
1920px
1.875 REM
name
Gap XS
Base Mode
0.625 REM
Tablet
0.625 REM
Mobile L
0.5 REM
Mobile
0.5 REM
1440px
0.625 REM
1920px
0.625 REM
name
Gap XXXL
Base Mode
6.25 REM
Tablet
5 REM
Mobile L
4.5 REM
Mobile
4 REM
1440px
6.25 REM
1920px
6.25 REM
name
Gap L
Base Mode
2.5 REM
Tablet
2 REM
Mobile L
1.75 REM
Mobile
1.5 REM
1440px
2.5 REM
1920px
2.5 REM
name
Gap S
Base Mode
1.25 REM
Tablet
1.125 REM
Mobile L
1 REM
Mobile
1 REM
1440px
1.25 REM
1920px
1.25 REM
name
Gap XL
Base Mode
3.125 REM
Tablet
2.5 REM
Mobile L
2.25 REM
Mobile
2 REM
1440px
3.125 REM
1920px
3.125 REM
name
Gap XXL
Base Mode
5 REM
Tablet
4 REM
Mobile L
3.5 REM
Mobile
3 REM
1440px
5 REM
1920px
5 REM
name
Gap XXS
Base Mode
0.313 REM
Tablet
0.313 REM
Mobile L
0.313 REM
Mobile
0.313 REM
1440px
0.313 REM
1920px
0.313 REM

Border Radius

name
Radius Small
Base Mode
0.438 REM
Tablet
0.438 REM
Mobile L
0.438 REM
Mobile
0.438 REM
1440px
0.438 REM
1920px
0.438 REM
name
Radius Large
Base Mode
5.625 REM
Tablet
5.625 REM
Mobile L
5.625 REM
Mobile
5.625 REM
1440px
5.625 REM
1920px
5.625 REM