hundo Styleguide


Brand colours most commonly used are: off-black, white, blue, green, pink, purple
hundo colour system
Off black
Dark grey
Mid grey
Light grey
Off white
Primary white
Light blue
hundo Blue
Dark blue
Darker blue
Legacy Yellow
Dark yellow
Dark green
Dark pink
Dark purple
Accent orange
Light orange
Warning light red
Warning message red
Success light green
Success message green
Success dark green


Headings & text

font-size: 4.5rem;
line-hight: 0.8;

font-size: 3.5rem;
line-hight: 0.8;

font-size: 2.5rem;
line-hight: 0.9;

font-size: 1.8rem;
line-hight: 0.9;

font-size: 1rem;
line-hight: 1.4;

Heading 1
multiline test

Heading 2
multiline test

Heading 3
multiline test

Heading 4
multiline test

This is some text inside of a div block.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Form components

 max-width: 26rem
 height: 4rem;
 padding-top: 1.6rem;
 padding-right: 1.2rem;
 padding-bottom: 0.8rem;
 padding-left: 1.2rem;
 border: 2px;
 border-color: mid-grey;
 border-radius: 0.6rem;
 background-color: off-white;
 font-family: Inter (inherited from body);
Please confirm, by entering your email address you agree to our Terms of Use and Privacy Policy and consent to receive emails from hundo about news, events, offers and partner promotions. *
All required fields are marked *
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.



font-size: 2.2rem
letter-spacing: 0.2px
font-family: Giorgiosans (headings)
padding-top & bottom: 0.5rem;
padding-left & right: 1.6rem;


min-width: 14rem;
font-size: 2.3rem
letter-spacing: 0.5px
font-family: Giorgiosans (same as headings)
padding-top: 1.3rem;
padding-bottom: 1.4rem;
padding-left & right: 2rem;
drop-shadow: 10px (135 deg)

with tag


giorgio sans (headings)

This is the primary heavy font used across the site.
- Should always be written in all-caps.
- Should not be used at small sizes

- headings
- buttons
- marketing titles
- careercon branding titles (stylised as transparent with a glowing outline)

inter (body)

This is used for any small print and page body text.

- default body text
- small text printed in large blocks of text
- articles body
- article card title headers where space is limited (stylised bold)

Space mono (secondary)

Primary hundo accent font, can be used at small or large scales.
- can be used in either ALL-CAPS or Standard-Caps.

- secondary buttons
- nav bar links
- medium headers

Matrix sans (alt. 2nd)

Should be used very sparingly as an alternative secondary font.
- must always be stylised using the connected large pixel font variant.

- marketing assets for larger subheadings
- novelty assets

Socials & icons

As shown below, white icons are always used. If on a black background, then the individual dark-grey icon backgrounds are optional (but not recommended). Icons are from (forever royalty free), from the rounded material icons pack. Icons should hover their brand colour unless generic icon (ie. email, external url ect), then show a hundo-branded colour at a similar luminosity to the others.