Theme Styles
Symbols

TEDxHultLondon Style guide

Welcome to our style guide, where you can learn more about our  colous, blocks and so much more.

Colors

Primary Colors

Blue should only be used on large areas where red is too aggressive for the eye and text should always follow the Primary/Titles and Paragraphs style. Red is only acceptable to make words stand out.

Primary/TED Red
#E62B1E
Primary/Acent
#F9424B
Primary/Titles
#1A1C47
Primary/Paragraphs
#5E5F79

Secondary Colors

Secondary/TED Red
#BB190D
Secondary 1
#323582
Secondary 2
#1A4CCC

Neutral Colors

Neutral 300
#C0C1D1
Neutral 200
#E6E7F3
Neutral 100
#FBFBFD
White
#FFFFFF

Typography

Font Type

The font we use for everything is called Plus Jakarta Display. Only the TEDx logo in images should be Helvetica.

Special Text

Display 1 Text

Display 1 - 64px/1.098em

Display 2 Text

Display 2 - 48px/1.333em

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 64px/1.297em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 48px/1.333em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 27px/1.259em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 22px/1.364em
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px/1.333em
Heading H6 - Aa Bb Cc Dd
Heading 6 - 16px/1.375em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Default - 18px/1.667em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Large - 24px/1.5em

Bold - Lorem ipsum dolor sit amet

Bold Text

Bold - Lorem ipsum dolor sit amet

Italic Text
Lorem ipsum dolor sit amet, consectetur
Block Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Block Quote
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit enim tu.
  • Lorem ipsum dolor sit amet.
Bullet List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit enim tu.
  4. Lorem ipsum dolor sit amet.
Numbered List

Buttons

Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large

Cards

Discover latest
Marketing Trends

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dictum sollicitudin diam ac lorem cras tellus facilisis ut. Morbi dictum ut sed.

18+ Hours of Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dictum sollicitudin diam ac.