Style Guide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus nec purus vulputate molestie. Vivamus sagittis mattis nisl. Ut porttitor, augue vel elementum ultricies, lectus enim consequat libero.

Headings

Desktop
Mobile

H1 Main Heading

  • Desktop: 5.202rem (83.23px)
  • Mobile: 2.566rem (41.05px)
  • Letter-spacing: -5%

H2 Main Heading

  • Desktop: 4.11rem (65.75px)
  • Mobile: 2.281rem (36.49px)
  • Letter-spacing: -5%

H3 Sub Heading

  • Desktop: 3.247rem (51.96px)
  • Mobile: 2.027rem (32.44px)
  • Letter-spacing: -5%

H4 Sub Heading

  • Desktop: 2.566rem (41.05px)
  • Mobile: 1.602rem (25.63px)
  • Letter-spacing: -5%
H5 Sub Heading
  • Desktop: 2.027rem (32.44px)
  • Mobile: 1.424rem (22.78px)
  • Letter-spacing: -5%
H6 Sub Heading
  • Desktop: 1.266rem (20.25px)
  • Mobile: 1.125rem (18px)
  • Letter-spacing: -4%

Chunky Headings

  • Font weight: 800

Normal

Gold heading on white: gold (#806452)

Dark Mode

Breadcrumbs: light-grey-1

  • Gold heading on black/dark grey: light-gold-1 (#8A7165)
  • Background: dark-grey-2 (#1A1A1A)

Content

Content font sizes use the Major 2nd Scale. Font family: Roboto. Font weight: Light (300).

  • Ag
    0.625rem = 10 pixels
  • Ag
    0.79rem = 12.64 pixels
  • Ag
    0.889rem = 14.224 pixels
  • Ag
    1rem = 16 pixels
  • Ag
    1.125rem = 18 pixels
  • Ag
    1.266rem = 20.25 pixels

Paragraph Text Sizes

  • Desktop: 1rem / 16px | Mobile: 1rem / 16px
  • Font family: Roboto.
  • Font weight: 300.

Body copy is to be small and light, staying at 16px on desktop.

  • Smaller Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Normal Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa.

  • Large Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint.

Lists

Bullets

<ul className="bullets">

  • 2-channel performance all-in-one DJ system
  • Refined design and professional look
  • This is an example of a nested list:
    • Nested list item
    • Nested list item
    • Nested list item
  • Rapid browsing with Playlist Bank and Touch Preview
  • Accurate mixing, Phrase Display and 3Band Waveform
Squares

<ul className="squares">

  • 2-channel performance all-in-one DJ system
  • Refined design and professional look
  • This is an example of a nested list:
    • Nested list item
    • Nested list item
    • Nested list item
  • Rapid browsing with Playlist Bank and Touch Preview
  • Accurate mixing, Phrase Display and 3Band Waveform
Purple ticks

<ul className="tick-list purple">

  • 2-channel performance all-in-one DJ system
  • Refined design and professional look
  • This is an example of a nested list:
    • Nested list item
    • Nested list item
    • Nested list item
  • Rapid browsing with Playlist Bank and Touch Preview
  • Accurate mixing, Phrase Display and 3Band Waveform
Green Ticks

<ul className="tick-list green">

  • 2-channel performance all-in-one DJ system
  • Refined design and professional look
  • This is an example of a nested list:
    • Nested list item
    • Nested list item
    • Nested list item
  • Rapid browsing with Playlist Bank and Touch Preview
  • Accurate mixing, Phrase Display and 3Band Waveform

Colours

Click to a swatch to copy your colour!

Oranges
Greys
Others

Buttons and Links

Button sizes

Classes: xsml, sml, med, lrg.

Button Variants

Classes: solid, gold, outline, caps.

Links

Classes: text-link-btn, chevron left/right, inline-text-link.

  • Shop Nowtext-link-btn black med
  • Shop Nowtext-link-btn gold med chevron right

  • An inline text link appears like this.

    inline-text-link

  • Or it can be gold.

    inline-text-link gold