UI/UX Style Guide

BY ANABELLA PAPUCCI

1) COLOURS

Colour Name

Colour Code

Colour Name

Colour Code

Colour Name

Colour Code

Colour Name

Colour Code

Colour Name

Colour Code

Colour Name

Colour Code

Colour Name

Colour Code

Colour Name

Colour Code

Colour Name

Colour Code

2) TYPOGRAPHY

Style Name

Font Name & Weight

Use

Colours

Heading 1

Font Name & Weight

Main headings

Heading 2

Font Name & Weight

Secondary headings

Heading 3

Font Name & Weight

Tertiary headings

Heading 4

Font Name & Weight

Tag Lines

Body Text

Font Name & Weight

Body Text

Button Text

Font Name & Weight

Buttons

Captions

Font Name & Weight

Buttons

3) BUTTONS

Click here

Primary Button

Used for positive actions, main CTA's

click here

GHOST

Used for secondary actions

4) FORMS

Name

Email

Dropdown

Option 1 Option 2 Option 3 Option 4 Option 5

Message

Send

Radio Options

Option 1 Option 2 Option 3 Option 4

Inline Radio Options

Option 1 Option 2 Option 3 Option 4

Checkbox Options

Option 1 Option 2 Option 3 Option 4

Inline Checkbox Options

Option 1 Option 2 Option 3 Option 4

Send

5) Logo Styles

REGULAR LOGO

INVERTED LOGO