Style Guide

Chris Martens | Shop

This style gives you an overview of the current styles and standards for the Chris Martens | Shop website.

Typography

An overview of headings and body text type scale and styles

H1(--text-4xl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2(--text-3xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3(--text-2xl)

Heading 3 Regular

Heading 3 Medium

Heading 3 Bold

H4(--text-xl)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5(--text-l)

Heading 5 Regular
Heading 5 Medium
Heading 5 Bold

H6(--text-m)

Heading 6 Regular
Heading 6 Medium
Heading 6 Bold

Body Text(--text-m)

    Text m Regular

    Text m Medium

    Text m Bold

Small Text(--text-s)

    Text s Regular

    Text s Medium

    Text s Bold

XSmall Text(--text-xs)

    Text xs Regular

    Text xs Medium

    Text xs Bold

Heading Examples

  • This is a H1 Heading with a --text-4xl class

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • This is a H2 Heading with a --text-3xl class

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • This is a H3 Heading with a --text-2xl class

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • This is a H4 Heading with a --text-xl class

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • This is a H5 Heading with a --text-l class

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • This is a H6 Heading with a --text-m class

    Here goes your text ... Select any part of your text to access the formatting toolbar.

Color

An overview of the brand, neutral and status colors

Brand

--primary

Transparencies Variants

--primary-5
--primary-10
--primary-20
--primary-30
--primary-40
--primary-50
--primary-60
--primary-70
--primary-80
--primary-90

Shades

--primary-d-1
--primary-d-2
--primary-d-3
--primary-d-4

Tints

--primary-l-1
--primary-l-2
--primary-l-3
--primary-l-4

Brand

    --secondary

Transparencies Variants

    --secondary-5
    --secondary-10
    --secondary-20
    --secondary-30

Shades

    --secondary-d-1
    --secondary-d-2
    --secondary-d-3
    --secondary-d-4

Tints

    --secondary-l-1
    --secondary-l-2
    --secondary-l-3
    --secondary-l-4

Brand

    --tertiary

Transparencies Variants

    --tertiary-5
    --tertiary-10
    --tertiary-20
    --tertiary-30
    --tertiary-40
    --tertiary-50
    --tertiary-60
    --tertiary-70
    --tertiary-80
    --tertiary-90

Shades

    --tertiary-d-1
    --tertiary-d-2
    --tertiary-d-3
    --tertiary-d-4

Tints

    --tertiary-l-1
    --tertiary-l-2
    --tertiary-l-3
    --tertiary-l-4

Brand

    --dark

Transparencies Variants

    --dark-5
    --dark-10
    --dark-20
    --dark-30
    --dark-40
    --dark-50
    --dark-60
    --dark-70
    --dark-80
    --dark-90

Shades

    --dark-d-1
    --dark-d-2
    --dark-d-3
    --dark-d-4

Tints

    --dark-l-1
    --dark-l-2
    --dark-l-3
    --dark-l-4

Brand

    --light

Transparencies Variants

    --light-5
    --light-10
    --light-20
    --light-30
    --light-40
    --light-50
    --light-60
    --light-70
    --light-80
    --light-90

Shades

    --light-d-1
    --light-d-2
    --light-d-3
    --light-d-4

Tints

    --light-l-1
    --light-l-2
    --light-l-3
    --light-l-4

Brand

    --success

Transparencies Variants

    --success-5
    --success-10
    --success-20
    --success-30
    --success-40
    --success-50
    --success-60
    --success-70
    --success-80
    --success-90

Brand

    --error

Transparencies Variants

    --error-5
    --error-10
    --error-20
    --error-30
    --error-40
    --error-50
    --error-60
    --error-70
    --error-80
    --error-90

Button

An overview of all the buttons styles and sizes

Button defaultI am a button
Button secondaryI am a button
Button tertiaryI am a button
Button slightI am a button
Button ghostI am a button
Small Button defaultI am a button
Small Button secondaryI am a button
Small Button tertiaryI am a button
Small Button slightI am a button
Small Button ghostI am a button
Large Button defaultI am a button
Large Button secondaryI am a button
Large Button tertiaryI am a button
Large Button slightI am a button
Large Button ghostI am a button

Widths

An overview of all the widths.

max-width-10 (10rem)
max-width-20 (20rem)
max-width-30 (30rem)
max-width-40 (40rem)
max-width-50 (50rem)
max-width-60 (60rem)
max-width-70 (70rem)
max-width-80 (80rem)
max-width-90 (90rem)
max-width-100 (100rem)
max-width-110 (110rem)
max-width-120 (120rem)
max-width-130 (130rem)
max-width-140 (140rem)
full-width (100%)
max-site-width (width:100% / max-width:140rem)

Spacing

An overview of all the available spacing variables available in the default Core framework

  • --space-4xs
  • --space-3xs
  • --space-2xs
  • --space-xs
  • --space-s
  • --space-m
  • --space-l
  • --space-xl
  • --space-2xl
  • --space-3xl
  • --space-4xl

Spacing In Action

An example of all the spacing variables options applied to cards

  • Card with --padding-xs

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • Card with --padding-s

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • Card with --padding-m

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • Card with --padding-l

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • Card with --padding-xl

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • Card with --padding-2xl

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • Card with --padding-3xl

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • Card with --padding-4xl

    Here goes your text ... Select any part of your text to access the formatting toolbar.

Box Shadow

An overview of all the box shadow variables

--shadow-s
--shadow-m
--shadow-l

Border Radius

An overview of all the border radius variables

--radius-xs
--radius-s
--radius-m
--radius-l
--radius-full