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

Ordered list item - Eiusmod eu mollit cillum.
Ordered list item - Deserunt pariatur ea ad enim pariatur non minim anim adipiscing ea laborum eu commodo deserunt id culpa ipsum laborum eu
Ordered list item - Voluptate cupidatat lorem, aliquip in.
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

Pagination

Components

Hero component (home)

Figma link

Join the fight against extreme poverty and preventable disease.

What we do

Hero component (main section)

Figma link

What we do

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

What we do

Latest news component

Figma link

Latest news

Button label

Impact component

Figma link

Section title

Helping secure
$38.2bn for global health initiatives

Tristique luctus morbi inceptos magna interdum porta

Suspendisse tortor fusce maximus non platea posuere litora himenaeos

Button label

Join us component

Figma link

Join ONE

If you believe everyone has the right to a life of opportunity and justice, no matter where they live, and if you believe ordinary people can change the world, then join us.

Sign up to receive occasional emails with news, updates and ways to get involved in the fight against extreme poverty.

You can unsubscribe at any time.

Not ? Click here.

Name

Email

Post/Zip code

Zip code

Phone

Country

Do you want to stay informed about how you can help fight against extreme poverty?

Sign up to receive emails from ONE and join millions of people around the world taking action to end extreme poverty and preventable disease. We'll only ever ask for your voice, not your money. You can unsubscribe at any time.

Yes, sign me up

No, I’m already signed up or I don’t want to be kept informed in future

By signing you agree to ONE's privacy policy, including to the transfer of your information to ONE's servers in the United States.

You agree to receive occasional updates about ONE's campaigns. You can unsubscribe at any time.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply

Join us component (pattern variant)

Figma link

Join ONE

If you believe everyone has the right to a life of opportunity and justice, no matter where they live, and if you believe ordinary people can change the world, then join us.

Sign up to receive occasional emails with news, updates and ways to get involved in the fight against extreme poverty.

You can unsubscribe at any time.

Not ? Click here.

Name

Email

Post/Zip code

Zip code

Phone

Country

Do you want to stay informed about how you can help fight against extreme poverty?

Sign up to receive emails from ONE and join millions of people around the world taking action to end extreme poverty and preventable disease. We'll only ever ask for your voice, not your money. You can unsubscribe at any time.

Yes, sign me up

No, I’m already signed up or I don’t want to be kept informed in future

By signing you agree to ONE's privacy policy, including to the transfer of your information to ONE's servers in the United States.

You agree to receive occasional updates about ONE's campaigns. You can unsubscribe at any time.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply

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.

Join Us

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

Stylebook

Color palette

Font families

Font sizes

Spacing

Fluid Spacing

Lists

Hero list titles

Hero list title

Hero list title

Hero list title

Hero list title

Buttons

Large / Filled buttons

Large / Filled buttons / Inverse

Small / Filled buttons

Small / Filled buttons / Inverse

Large / Outlined buttons

Large / Outlined buttons / Inverse

Large / Outlined buttons / Inverse (light)

Small / Outlined buttons

Small / Outlined buttons / Inverse

Icons

Pagination

Components

Hero component (home)

Join the fight against extreme poverty and preventable disease.

Hero component (main section)

What we do

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

Latest news component

Latest news

Impact component

Section title

Helping secure $38.2bn for global health initiatives

Tristique luctus morbi inceptos magna interdum porta

Suspendisse tortor fusce maximus non platea posuere litora himenaeos

Join us component

Join ONE

Privacy options

Disclaimer options

Join us component (pattern variant)

Join ONE

Privacy options

Disclaimer options

Promo banner component

Sem ex accumsan

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

Promo card component

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

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

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

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

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

Content block component

Content block component

Et tincidunt massa magnis enim nibh placerat

Content block component (reversed)

Sagittis quis nostra habitant massa

Helping secure
$38.2bn for global health initiatives