Skip to main content
AI CareerCon available on-demand - Adapt, Innovate, Thrive: Mastering Careers in the AI Era
Career CoPilot for Students - Claim 25 free places for your school or college

loading

hundo Styleguide

Colours

Brand colours most commonly used are: off-black, white, blue, green, pink, purple
hundo colour system
Black
#000000
Off black
#111111
Dark grey
#828282
Mid grey
#999999
Light grey
#e0e0e0
Off white
#f4f4f4
Primary white
#ffffff
Light blue
#ddf8fe
hundo Blue
#55dafc
Dark blue
#338397
Darker blue
#284d57
Legacy Yellow
#f0f01f
Dark yellow
#979729
Green
#10dfc7
Dark green
#0a8677
Pink
#f877e0
Dark pink
#954786
Purple
#bf88f2
Dark purple
#725291
Accent orange
#f9a659
Light orange
#feedde
Warning light red
#ffebed
Warning message red
#cc1d1f
Success light green
#e9f9ed
Success message green
#1aba46
Success dark green
#1c8b3b

Logos

Headings & text

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

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

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

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

BODY PARAGRAPH
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

FORM FIELD
  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);

First name *

Last name *

Email address *

Date of birth (optional)

About you (optional)

Organisation name (optional)

How did you hear about us (optional)

Job role (optional)

Message (optional)

By continuing, you agree to our Terms of Use & Privacy Policy. For more information, contact us.
I would like to receive emails from hundo about news, events, offers and partner promotions. (optional)
By continuing, you agree to our Terms of Use & Privacy Policy, and agree to receiving emails from hundo about news, events, offers and partner promotions. For more info, contact us.
Your details have been successfully received!
Oops! Something went wrong while submitting this form, please check your internet connection and try again.
Dropdown
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.

buttons

standard

font-size: 2.2rem
letter-spacing: 0.2px
font-family: Giorgiosans (headings)
padding-top & bottom: 0.5rem;
padding-left & right: 1.6rem;‍
button
black
white
dark purple
secondary
black secondary

campus

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)
button
white
pink
green
purple
black

with tag

Launching Soon!
button
Become a part of the CareerCon community
button
Become a part of the CareerCon community

typefaces

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
‍
Examples:
- 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.

Examples:
- 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.

Examples:
- 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.
‍
Examples:
- marketing assets for larger subheadings
- novelty assets
giorgio sansInterspace monomatrix sans

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 icons8.com (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.