Styleguide

Welcome to the Genero styleguide and media page. Last updated July, 2016 with Material Icons.

Typography

Primary Headings:

NOTE: For page headings use a font weight of 600. For page content headings use font weight 200.

Titillium Web

Heading Level 1

60px. 200 / 600 weight

Heading Level 2

48px. 200 / 600 weight

Heading Level 3

36px. 200 / 600 weight

Heading Level 4

30px. 200 / 600 weight

Heading Level 5

24px. 200 / 600 weight

Heading Level 6

18px. 200 / 600 weight

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
Alternative Headings:

NOTE: Only to be used for a max of 5 words for in-page content. To be used as a secondary option in context with the Primary page heading styles.

Titillium Web

Alt Heading 1

60px. 200 / 600 weight

Alt Heading 2

48px. 200 / 600 weight

Alt Heading 3

36px. 200 / 600 weight

Alt Heading 4

30px. 200 / 600 weight

Alt Heading 5

24px. 200 / 600 weight

Alt Heading 6

18px. 200 / 600 weight

Alt Heading 1

Alt Heading 2

Alt Heading 3

Alt Heading 4

Alt Heading 5
Alt Heading 6
Example:

To get started, you can: Primary: H2, 200 weight

Post a brief Alternative: H3, 600 weight

You can start with filmmakers submitting either creative ideas or fully-produced videos:

To get started, you can:

Post a brief

Paragraphs:

Open Sans

Example 1:

14px. #5e5e5e. Regular. Line Height 24px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper metus. Mauris non iaculis odio, non laoreet magna. Donec pulvinar risus eget erat iaculis, quis tincidunt justo venenatis. Pellentesque consectetur sed dui et interdum. Aenean efficitur metus ut mauris congue, ut suspicit justo dictum. Donec rutrum, est a aliquam tincidunt, nisl dui convallis est, eu rhoncus nibh leo porttitor libero.

Example 2:

12px. #919191. Regular. Line Height 18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper metus. Mauris non iaculis odio, non laoreet magna. Donec pulvinar risus eget erat iaculis.

2 Column:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper metus. Mauris non iaculis odio, non laoreet magna. Donec pulvinar risus eget erat iaculis, quis tincidunt justo venenatis. Pellentesque

2 Column:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper metus. Mauris non iaculis odio, non laoreet magna. Donec pulvinar risus eget erat iaculis, quis tincidunt justo venenatis. Pellentesque

3 Column:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper metus. Mauris non iaculis odio, non laoreet magna. Donec pulvinar risus eget erat iaculis, quis tincidunt justo

3 Column:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper metus. Mauris non iaculis odio, non laoreet magna. Donec pulvinar risus eget erat iaculis, quis tincidunt justo

3 Column:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper metus. Mauris non iaculis odio, non laoreet magna. Donec pulvinar risus eget erat iaculis, quis tincidunt justo

4 Column:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper

4 Column:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper

4 Column:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper

4 Column:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lorem rutrum, faucibus felis eu, semper

Buttons

Standard
Rollover
Disabled
Cancel
Rounded

Open Sans
Padding top / bottom: 15px

Standard
Disabled
Cancel
Rounded
Play All
Play All

Open Sans
Regular
12pt
Padding top / bottom: 10px
Border 2px, d4d4d4

Play All
$5,000
Buy This Video
Buy
$5,000
Sold

Open Sans
Bold
Padding top / bottom: 20px
Corner radius: 5px

$5,000
Buy This Video
Buy
$5,000
Sold
Call to Action
Call to Action

Titillium
Bold
Padding top / bottom: 30px

Call to Action
Call to Action
Ghost Button 1
Ghost Button 2

Titillium
Bold
Padding top / bottom: 30px
Border: 3px

Ghost Button
Icon Button

Open Sans
Regular
Padding top / bottom: 25px

Icon Button

Forms

$('.icheck-me').iCheck({ checkboxClass: 'input-wrapper icheckbox_square-blue', radioClass: 'input-wrapper iradio_square-blue' });

Colours

Primary:
Secondary:
Background / Borders:
background #e7e7e7
background #eeeeee
background #f6f6f6
borders / lines: #d4d4d4
Text:

heading text: #303030

paragraph text: #5e5e5e

placeholder text: #919191

Link colour: #059cb1

Link rollover colour: #50c9de

Ranking Badges:

Badges / Labels

Labels:
Finalist
Runner Up
Winner
Staff Pick
Badges:

Video: Client Selection ()

Video: Client Selection ()

Video: Client Selection ()

1

Video: Client Selection (1)

Video: Finalist ()

Video: Finalist ()

Video: Finalist ()

3

Video: Finalist (3)

Video: Staff Pick ()

Video: Staff Pick ()

Video: Staff Pick ()

1

Video: Staff Pick (1)

Video: Runner Up ()

Video: Runner Up ()

Video: Runner Up ()

1

Video: Runner Up (1)

Client Commissions ()

Client Commissions ()

Client Commissions ()

1

Client Commissions (1)

Shortlisted Pitch ()

Shortlisted Pitch ()

Shortlisted Pitch ()

1

Shortlisted Pitch (1)

Store Sale ()

Store Sale ()

Store Sale ()

2

Store Sale (2)

Genero Award Winner ()

Genero Award Winner ()

Genero Award Winner ()

1

Genero Award Winner (1)

Material Icons