Stylesheet

Last updated:

Tuesday, April 8th 2025

This page is a comprehensive guide that covers all of the design elements used to create our website.

Branding

This section explains how Lloyd Tichio Productions' branding has been applied to our website.

Logo Design

On our website we use two versions of the Lloyd Tichio logo.

navbar-logo-wrapper

desktop

width: 100px

height: auto

navbar-logo-wrapper

mobile

width: 40px

height: auto

We also use our logo as the favicon and the webclip graphic. Both of these files are located in the Utility Graphics folder.

Webclip

width: 256px

height: 256px

Favicon

width: 32px

height: 32px

Colours

The website features all Lloyd Tichio brand colours.

Main Palette

#FFFFFF

#000000

Accent Palette

#00E1FD

#FC007A

#DFFF00

#7F00E9

#AF00D4

#3DBA1F

Fonts

The website features two licensed fonts, inline with Lloyd Tichio Productions' visual identity.

Proxima Nova

Type: Static

Role: Primary font

Primarily used for bodytext and non-interactive interface elements.

Doner

Type:Variable

Role: Secondary

Highly interactive, used for headlines, animations, logos, and more.

Interaction

This section covers all interactive elements, such as links, buttons, and more.

Buttons

Our library of buttons consists of three types - Primary, Secondary, Tertiary - and four sizes - Tiny, Regular, Large, Huge

Button

Primary

button

Button

Secondary

button

Button

Tertiary

button

Button

Primary

button

tiny

Button

Secondary

button

tiny

Button

Tertiary

button

tiny

Button

Primary

button

large

Button

Secondary

button

large

Button

Tertiary

button

large

Button

Primary

button

huge

Button

Secondary

button

huge

Button

Tertiary

button

huge

Links

Below are all other types of links used throughout the site.

menu-main-link

menu-small-link

social-icon-clip

Product Information

document-link

Hero Link.

This text shows when the user hovers over the hero link.

hero-link

Typography

How we apply text styles throughout the site.

Hero

hero-headline

Font: Secondary

Weight: 800

Size: 17vw

Line Height: 1-

Capitalised

Heading

regular-heading

Font: Secondary

Weight: 700

Size: 45px

Line Height: 1-

Capitalised

Heading

small-headline

Font: Secondary

Weight: 600

Size: 30px

Line Height: 1-

Capitalised

Subheading

small-subhead

Font: Primary

Weight: 400

Size: 22px

Line Height: 26px

Bodytext

Font: Primary

Weight: 400

Size: 14px

Line Height: 20px

UI Variables

Below is a list of all additional variables used to design the website's user interface and components. These do not include 'Branding' variables.

User Interface

Name

Value

var(--user-interface--black)

[Colour-Value]

var(--user-interface--white)

[Colour-Value]

var(--user-interface--dark-grey)

[Colour-Value]

var(--user-interface--medium-grey)

[Colour-Value]

var(--user-interface--light-grey)

[Colour-Value]

var(--user-interface--outer-cursor-size)

20px

var(--user-interface--inner-cursor-size)

10px

var(--user-interface--cursor-colour)

[Colour-Value]

var(--user-interface--scrollbar-thumb-colour)

[Colour-Value]

var(--user-interface--glass-blur)

20px

var(--user-interface--rounded-corners)

5px

var(--user-interface--posters-gap)

20px

var(--user-interface--ui-box-padding)

20px

Size

Name

Value

var(--size--page-padding)

3vw

var(--size--max-modal-width)

600px

var(--size--max-document-content-width)

700px

Stylesheet

Branding

Logo Design

Colours

Main Palette

Accent Palette

Fonts

Proxima Nova

Doner

Interaction

Buttons

Links

Typography

UI Variables

User Interface

Size

In this document

All documents

Search through our site