Style Tiles / MICHEL FOCH UI System

Typography

Subheading
Customizer Label: Subhead Large CSS Class: .subhead-large

EXAMPLE SUBHEAD

Desktop

Tablet

font-size: 18px;

Mobile

font-size: 16px;

Customizer Label: Subhead Medium CSS Class: .subhead-medium

EXAMPLE SUBHEAD

Desktop

Tablet

font-size: 14px;

Mobile

font-size: 12px;

Customizer Label: Subhead Small CSS Class: .subhead-small

EXAMPLE SUBHEAD

Desktop

Tablet

font-size: 12px;

Mobile

font-size: 10px;

Headings
Customizer Label: Heading 1 CSS Class: .h1

Example Headline

Desktop

font-size: 72px;

Tablet

font-size: 60px;

Mobile

font-size: 48px;

Customizer Label: Heading 2 CSS Class: .h2

Example Headline

Desktop

font-size: 48px;

Tablet

font-size: 40px;

Mobile

font-size: 32px;

Customizer Label: Heading 3 CSS Class: .h3

Example Headline

Desktop

font-size: 32px;

Tablet

font-size: 28px;

Mobile

font-size: 24px;

Customizer Label: Heading 4 CSS Class: .h4

Example Headline

Desktop

font-size: 24px;

Tablet

font-size: 22px;

Mobile

font-size: 18px;

Accent
Customizer Label: Accent 1 CSS Class: .accent-1

Example Accent

Desktop

font-size: 48px;

Tablet

font-size: 40px;

Mobile

font-size: 32px;

Customizer Label: Accent 2 CSS Class: .accent-2

Example Accent

Desktop

font-size: 32px;

Tablet

font-size: 28px;

Mobile

font-size: 24px;

Customizer Label: Accent 3 CSS Class: .accent-3

Example Accent

Desktop

font-size: 24px;

Tablet

font-size: 22px;

Mobile

font-size: 18px;

Customizer Label: Accent 4 CSS Class: .accent-4

Example Accent

Desktop

font-size: 20px;

Tablet

font-size: 18px;

Mobile

font-size: 16px;

Body
Customizer Label: Body Large CSS Class: .body-large

Example Body

Desktop

Tablet

font-size: 32px;

Mobile

font-size: 26px;

Customizer Label: Body Medium CSS Class: .body-medium

Example Body

Desktop

Tablet

font-size: 22px;

Mobile

font-size: 18px;

Customizer Label: Body Small CSS Class: .body-small (= base paragraph)

Example Body

Desktop

Tablet

font-size: 14px;

Mobile

font-size: 14px;

Customizer Label: Body Extra Small CSS Class: .body-extra-small (= small element)

Example Body

Desktop

Tablet

font-size: 10px;

Mobile

font-size: 10px;

Colors

Palette
global-black: #2A2A2A use for text color on light backgrounds
global-white: #FFFFFF use for primary light background fill, text color on dark backgrounds
global-neutral-1: #EEEEEE use for secondary light background fill
global-neutral-2: #CCCCCC use for borders
global-neutral-3: #FCFCFC use for light background fill
global-disabled: #757575 out of stock badges & disabled buttons
brand-highlight-1: use for primary CTA color and primary accent background fill
brand-highlight-2: use for badges and subtle UI accents
brand-neutral: use minimally as a tertiary light background color
Schemes
Accent

Heading

Paragraph

scheme 1: primary light

background: global-white

headings: global-black

text: global-black

borders: global-neutral-1

Accent

Heading

Paragraph

scheme 2: secondary light

background: global-neutral-1

headings: global-black

text: global-black

borders: global-neutral-2

Accent

Heading

Paragraph

scheme 3: tertiary light

background: brand-neutral

headings: global-black

text: global-black

borders: global-neutral-2

Accent

Heading

Paragraph

scheme 4: primary accent (dark)

background: brand-highlight-1

headings: global-white

text: global-white

borders: global-white

Accent

Heading

Paragraph

scheme 5: secondary accent

background: brand-highlight-2

headings: global-white

text: global-white

borders: global-white

accent elements: brand-highlight-1

UI Elements

Buttons (Light Schemes)

Large Primary

background: brand-highlight-1

text: global-white

borders: brand-highlight-1

padding: 10px 30px 10px 30px

height: 42px

Large Primary Hover

background: transparent

text: brand-highlight-1

borders: brand-highlight-1

Small Primary

padding: 8px 20px 8px 20px

height: 35px

Small Primary Hover
Large Secondary

background: transparent

text: brand-highlight-1

borders: brand-highlight-1

padding: 10px 30px 10px 30px

height: 42px

Large Secondary Hover

background: brand-highlight-1

text: global-white

borders: brand-highlight-1

Small Secondary

padding: 8px 20px 8px 20px

height: 35px

Small Secondary Hover
Large
Read More

color: brand-highlight-1

Large Hover
Read More

color: brand-highlight-2

Small
Read More

color: brand-highlight-1

Small Hover
Read More

color: brand-highlight-2

Buttons (Dark Schemes)

Large Primary

background: global-white

text: global-black

borders: global-white

padding: 10px 30px 10px 30px

height: 42px

Large Primary Hover

background: transparent

text: global-white

borders: global-white

Small Primary

padding: 8px 20px 8px 20px

height: 35px

Small Primary Hover
Large Secondary

background: transparent

text: global-white

borders: global-white

padding: 10px 30px 10px 30px

height: 42px

Large Secondary Hover

background: global-white

text: global-black

borders: global-white

Small Secondary

padding: 8px 20px 8px 20px

height: 35px

Small Secondary Hover
Large
Read More

color: global-white

Large Hover
Read More

color: global-neutral-2

Small
Read More

color: global-white

Small Hover
Read More

color: global-neutral-2

Form Fields (Light Schemes)

Input & Dropdown Default

background: global-white

text: global-black

borders: global-neutral-2

Input & Dropdown Focus

borders: global-black

Checkbox

selected state: brand-highlight-1

Radio Button

selected state: brand-highlight-1

Form Fields (Dark Schemes)

Input & Dropdown Default

background: global-white

text: global-black

borders: global-neutral-2

Input & Dropdown Focus

borders: global-black

Checkbox

selected state: brand-highlight-1

Radio Button

selected state: brand-highlight-1

Arrows (Light Schemes)
Large

background: brand-highlight-1

borders: brand-highlight-1

Small

background: brand-highlight-1

borders: brand-highlight-1

Arrows (Dark Schemes)
Large

background: transparent

borders: global-white

Small

background: transparent

borders: global-white

Badges
Text Badge
New Release

background: transparent

text: brand-highlight-2

borders: brand-highlight-2

Points Badge
96+ Points

background: brand-highlight-2

text: global-white

Variants
Default

background: transparent

text: global-black

borders: global-black

Hover

background: global-black

text: global-white

borders: global-black

Active

background: global-black

text: global-white

borders: global-black

Disabled

background: transparent

text: global-black

borders: global-neutral-2