Secure your spot for our next CareerCon: Inside the Automotive Industry

Career CoPilot for Students - Claim 25 free places for your school or college

loading

Join the hundo community

You're in! Look out for weekly updates from hundo in your email inbox.

Oops! Something went wrong while submitting this form, please check your internet connection and try again.

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for experience, measurement and marketing (personalised ads) as specified in the cookie policy. With respect to advertising, we and 886 selected third parties, may use precise geolocation data, and identification through device scanning in order to store and/or access information on a device and process personal data like your usage data for the following advertising purposes: personalised advertising and content, advertising and content measurement, audience research and services development. You can freely give, deny, or withdraw your consent at any time by accessing the preferences panel. If you give consent, it will be valid only in this domain. Denying consent may make related features unavailable. Use the “Accept” button to consent. Use the “Reject” button to continue without accepting.

Reject

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

Your details have been successfully received!

Oops! Something went wrong while submitting this form, please check your internet connection and try again.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

buttons

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

examples of each font

giorgio sans Inter space mono matrix 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.