Stylebook

Color palette

Click on a color to copy the hex color value

#00FFD9
#44D9CB
#081248
#061683
#10827B
#000000
#FFFFFF
#FAFBFC
#e5f0fe
#36469D

Font families

System Font
Colfax
Italian Plate
Monospace

Font sizes

font-size: 12pxSize 1 — Velit gravida aliquet conubia
font-size: 14pxSize 2 — Velit gravida aliquet conubia
font-size: 16pxSize 3 — Velit gravida aliquet conubia
font-size: 18pxSize 4 — Velit gravida aliquet conubia
Min - font-size: 18px
Max - font-size: 24pxSize 5 — Velit gravida aliquet conubia
Min - font-size: 24px
Max - font-size: 32pxSize 6 — Velit gravida aliquet conubia
Min - font-size: 32px
Max - font-size: 40pxSize 7 — Velit gravida aliquet conubia
Min - font-size: 40px
Max - font-size: 48pxSize 8 — Velit gravida aliquet conubia
Min - font-size: 48px
Max - font-size: 64pxSize 9 — Velit gravida aliquet conubia
Min - font-size: 64px
Max - font-size: 96pxSize 10 — Velit gravida aliquet conubia
font-size: 18pxSize Body — Velit gravida aliquet conubia
font-size: 24pxSize Heading Small — Velit gravida aliquet conubia

Spacing

Space 1
Space 2
Space 3
Space 4
Space 5
Space 6
Space 7
Space 8
Space 9
Space 10

Fluid Spacing

Space 1 — 0.5rem
Space 2 — 1rem
Space 3 — clamp(1rem, 0.90rem + 0.50vw, 1.5rem)
Space 4 — clamp(1.5rem, 1.40rem + 0.50vw, 2rem)
Space 5 — clamp(2rem, 1.90rem + 0.50vw, 2.5rem)
Space 6 — clamp(2.5rem, 2.40rem + 0.50vw, 3rem)
Space 7 — clamp(3rem, 2.80rem + 1.00vw, 4rem)
Space 8 — clamp(4rem, 3.80rem + 1.00vw, 5rem)
Space 9 — clamp(5rem, 4.80rem + 1.00vw, 6rem)
Space 10 — clamp(6rem, 5.20rem + 4.00vw, 10rem)
Space xs — var(--wp--custom--spacing--1)
Space s — var(--wp--custom--spacing--2)
Space m — var(--wp--custom--spacing--3)
Space l — var(--wp--custom--spacing--6)
Space xl — var(--wp--custom--spacing--8)
Space xs-s — clamp(0.5rem, 0.40rem + 0.50vw, 1rem)
Space s-m — clamp(1rem, 0.80rem + 1.00vw, 2rem)
Space s-xxl — clamp(1rem, 0.00rem + 5.00vw, 6rem)
Space m-xl — clamp(2.5rem, 2.00rem + 2.50vw, 5rem)
Space offset — clamp(4.75rem, 4.30rem + 2.25vw, 7rem)
Space gutter — var(--wp--custom--spacing--m)
Space outer — var(--wp--custom--spacing--m)

Lists

  1. Ordered list item - Eiusmod eu mollit cillum.
  2. Ordered list item - Deserunt pariatur ea ad enim pariatur non minim anim adipiscing ea laborum eu commodo deserunt id culpa ipsum laborum eu
  3. Ordered list item - Voluptate cupidatat lorem, aliquip in.
  4. Ordered list item - Non amet voluptate tempor nostrud sunt.
  • Unordered list item - Nisi veniam ex sint.
  • Unordered list item - Irure officia sed, quis lorem.
  • Unordered list item - Sed sed lorem culpa ullamco commodo consectetur cupidatat laboris commodo cupidatat sit mollit lorem et enim eiusmod deserunt et voluptate
  • Unordered list item - Veniam, exercitation enim amet id sit consequat consequat.

Hero list titles

Code example:

<h2 class="oneorg-hero-list-title" data-number="2">Hero list title</h2>

Hero list title

Adipiscing officia quis, officia nisi mollit dolore. Officia nisi mollit dolore aliquip. Mollit dolore aliquip est sit, esse fugiat. Est sit, esse fugiat ullamco cupidatat labore. Fugiat ullamco, cupidatat labore.

Hero list title

Nostrud aliquip adipiscing commodo, dolor. Commodo dolor, in sit dolore ipsum do commodo. Sit dolore, ipsum do. Do commodo do lorem, labore anim. Lorem labore anim, laborum. Laborum culpa dolor, proident aliqua consectetur eiusmod. Proident aliqua consectetur, eiusmod sed. Eiusmod sed sed enim. Sed, enim nostrud non nisi reprehenderit consequat ullamco.

Hero list title

Consequat dolore laboris, non laboris consectetur qui sunt. Non, laboris consectetur qui. Qui sunt dolor cillum aute. Dolor cillum aute mollit nulla. Aute mollit nulla duis aute sunt.

Hero list title

Nulla, magna fugiat mollit consequat aliqua nostrud. Mollit consequat aliqua nostrud, esse. Nostrud esse, dolor reprehenderit consequat. Reprehenderit consequat deserunt qui. Deserunt qui voluptate labore voluptate sed quis. Voluptate labore voluptate sed quis cupidatat sit. Sed quis cupidatat sit, dolor. Cupidatat sit, dolor reprehenderit consequat deserunt qui voluptate labore voluptate sed quis cupidatat sit.

Buttons

Large / Filled buttons

<button class="oneorg-button">Button label</button>
<button class="oneorg-button" disabled>Disabled button</button>
<button class="oneorg-button oneorg-button--icon">Icon button</button>

Large / Filled buttons / Inverse

<button class="oneorg-button oneorg-button--inverse">Button label</button>
<button class="oneorg-button oneorg-button--inverse" disabled>Disabled button</button>
<button class="oneorg-button oneorg-button--inverse-icon">Icon button</button>

Small / Filled buttons

<button class="oneorg-button oneorg-button--small">Button label</button>
<button class="oneorg-button oneorg-button--small" disabled>Disabled button</button>
<button class="oneorg-button oneorg-button--small oneorg-button--icon">Icon button</button>

Small / Filled buttons / Inverse

<button class="oneorg-button oneorg-button--small oneorg-button--inverse">Button label</button>
<button class="oneorg-button oneorg-button--small oneorg-button--inverse" disabled>Disabled button</button>
<button class="oneorg-button oneorg-button--small oneorg-button--inverse-icon">Icon button</button>

Large / Outlined buttons

<button class="oneorg-button oneorg-button--outline">Button label</button>
<button class="oneorg-button oneorg-button--outline" disabled>Disabled button</button>
<button class="oneorg-button oneorg-button--outline-icon">Icon button</button>
<button class="oneorg-button oneorg-button--outline-icon-dark">Icon button</button>

Large / Outlined buttons / Inverse

<button class="oneorg-button oneorg-button--outline-inverse">Button label</button>
<button class="oneorg-button oneorg-button--outline-inverse" disabled>Disabled button</button>
<button class="oneorg-button oneorg-button--outline-inverse-icon">Icon button</button>

Large / Outlined buttons / Inverse (light)

<button class="oneorg-button oneorg-button--outline-inverse-light">Button label</button>
<button class="oneorg-button oneorg-button--outline-inverse-light" disabled>Disabled button</button>
<button class="oneorg-button oneorg-button--outline-inverse-icon-light">Icon button</button>

Small / Outlined buttons

<button class="oneorg-button oneorg-button--small oneorg-button--outline">Button label</button>
<button class="oneorg-button oneorg-button--small oneorg-button--outline" disabled>Disabled button</button>
<button class="oneorg-button oneorg-button--small oneorg-button--outline-icon">Icon button</button>
<button class="oneorg-button oneorg-button--small oneorg-button--outline-icon-dark">Icon button</button>

Small / Outlined buttons / Inverse

<button class="oneorg-button oneorg-button--small oneorg-button--outline-inverse">Button label</button>
<button class="oneorg-button oneorg-button--small oneorg-button--outline-inverse" disabled>Disabled button</button>
<button class="oneorg-button oneorg-button--small oneorg-button--outline-inverse-icon">Icon button</button>

Icons

Click on an icon to copy the HTML

add
arrow-right
calendar
cancel
check
chevron-down
chevron-left
chevron-right
chevron-up
circle-down-arrow
circled-africa
circled-close
circled-eco
circled-fight
circled-right-arrow
circled-search
copy
email
error
help
info
location-outline
location-solid
menu
payment
placeholder
search
sync
user
visibility-off
visibility-on
warning
facebook
twitter
instagram
tiktok
youtube
linkedin

Pagination

Components

Hero component (home)

Figma link

Hero component (main section)

Figma link

What we do

We work to ensure everybody, everywhere can lead a life of dignity and opportunity.

Latest news component

Figma link

Latest news

Impact component

Figma link

Join us component

Figma link

Join us component (pattern variant)

Figma link

Promo banner component

Figma link

Sem ex accumsan

Consequat pharetra netus odio metus ornare risus primis ullamcorper malesuada suspendisse rhoncus

Promo card component

Data & analysis

Data and analysis on the economic, political, and social changes impacting Africa.

Data & analysis

Data and analysis on the economic, political, and social changes impacting Africa.

Data & analysis

Data and analysis on the economic, political, and social changes impacting Africa.

Data & analysis

Data and analysis on the economic, political, and social changes impacting Africa.

Data & analysis

Data and analysis on the economic, political, and social changes impacting Africa.

Figma link

Content block component

Figma link

Content block component

Figma link

Et tincidunt massa magnis enim nibh placerat

Parturient fringilla vivamus tristique id molestie fames finibus tellus semper, sagittis congue vulputate aliquam magnis sit quisque aptent, sed sociosqu gravida netus arcu rhoncus imperdiet elementum. Lectus habitasse magnis pellentesque suspendisse fermentum dignissim aptent hendrerit lorem, sociosqu est erat hac duis lacus metus pulvinar, tempus vulputate elementum nibh placerat efficitur proin cras. Sodales leo odio cras vulputate morbi consequat mattis tempus nulla, taciti magnis iaculis hac eleifend lobortis dolor.

Content block component (reversed)

Figma link

Sagittis quis nostra habitant massa

Suspendisse placerat suscipit diam curabitur eleifend eu nec taciti malesuada nibh viverra egestas cursus netus turpis in dis vitae convallis accumsan maecenas nisi quis a id ad phasellus fermentum condimentum