Novacene - Guidelines

Guidelines

Our design system helps us work together to build a great experience through all of our brand touchpoints.

Typography

Headings

These constrained set of typographic styles map as much as possible to functional roles so you know when each can be used.

Novacene

H1 - 96px - 140%

Novacene

H2 - 60px - 140%

Novacene

H3 - 48px - 140%

Novacene

H4 - 34px - 140%

Novacene

H5 - 26px - 140%

Novacene

H6 - 20px - 140%

Paragraphs & Captions

Work Sans is the standard typeface for Novacene on the web for paragraphs and captions and in the product.

Hyper intelligence for buildings. Map, measure and monitor your property health in a one-stop platform.

Body 1 - 18px

Hyper intelligence for buildings. Map, measure and monitor your property health in a one-stop platform.

Body 2 - 16px

Hyper intelligence for buildings. Map, measure and monitor your property health in a one-stop platform.

Caption 1 - 12px

Colours

Our main colour palette is Cerulean Blue to bring a sense of sophistication to our brand. This is complimented well with the Cerulean Blue to highlight clearly any important information such as CTA’s and USP’s. Sunset orange is mainly used in the product for easy navigation such as layer selection and pen tools.

Primary Colours

#96CAD8

#D3E9F0

#CAE5EC

#B4DAE4

#96CAD8

#8EBBC8

Cerulean Blue

#FFAC54

#FFD6AA

#FFC587

#FCBF7D

#FFAC54

#E29747

Sunset Orange

System Colours

Full black is mainly used in title and paragraphs. Greys are used backgrounds and dividers.

#FAFAFA

#121A33

#FAFAFA

#E3E5E8

#C9CBD0

#AFB2BA

#9599A3

#666B79

#394051

#252C3E

#121A2C

#0E121C

Novacene White - Dark Night