Jason Markk - Development Guidelines

Branding and colors

White $white #fff .bg-white var(--white)

Black $black #231F20 .bg-black var(--black)

Neutral $neutral-100 || $primary #F5EDDC .bg-primary var(--neutral-100)

Neutral 200 $neutral-200 || $bg-secondary #D6CCBE .bg-primary var(--neutral-200)

Neutral 300 $neutral-300 || $tertiary-bg #A7917B .bg-neutral-300 var(--neutral-300)

Neutral 700 $neutral-700 || $tertiary-bg-inverse #A7917B .bg-neutral-700 var(--neutral-700)

Neutral 800 $neutral-800 #332C27 .bg-neutral-800 var(--neutral-800)

Neutral 900 $neutral-900 || $body-bg-inverse #231F20 .bg-neutral-200 var(--neutral-900)

Neutral 100 a 20 $neutral-100-a20 || $secondary-color-inverse #F5EDDC33 .bg-neutral-100 style="--bs-bg-opacity: .2;" var(--neutral-100-a20)

Neutral 300 a50 $neutral-300-a50 || $neutral-300-a50 #A7917B80 .bg-neutral-300 style="--bs-bg-opacity: .5;" var(--neutral-300-a50)

Neutral 900 a25 $neutral-900-a25 || $secondary-color #231F2040 .bg-neutral-900 style="--bs-bg-opacity: .25;" var(--neutral-900-a25)

Neutral 900 a10 $neutral-900-a10 #231F201A .bg-neutral-900 style="--bs-bg-opacity: .10;" var(--neutral-900-a10)

Accent 1 $accent-1-bg #57724c .bg-accent-1-bg var(--accent-1-bg)

Accent 2 $accent-2-bg #1f6f73 .bg-accent-2-bg var(--accent-2-bg)

Accent 3 $accent-3-bg #3e5169 .bg-accent-3-bg var(--accent-3-bg)

Accent 4 $accent-4-bg #674451 .bg-accent-4-bg var(--accent-4-bg)

Accent 5 $accent-5-bg #735140 .bg-accent-5-bg var(--accent-5-bg)

Accent 6 $accent-6-bg #a35f27 .bg-accent-6-bg var(--accent-6-bg)

Accent 7 $accent-7-bg #996f30 .bg-accent-7-bg var(--accent-7-bg)

Typography

Search/d

Desktop - XL 64px/64px Mobile/tablet 24px/24px

h1 - Heading 1

Desktop - XL 72px/72px Mobile/tablet 40px/40px

h2 - Heading 2

Desktop - XL 40px/40px Mobile/tablet 32px/32px

h3 - Heading 3

Desktop - XL 32px/32px Mobile/tablet 24px/24px

h4 - Heading 4

Desktop - XL 20px/20px Mobile/tablet 18px/18px

h5 - Heading 5

Desktop/Mobile/Tablet - XL 16px/16px

h6 - Heading 6

Desktop/Mobile/Tablet - XL 14px/14px

Text

text-narrow-2 - Text Size Narrow 2

Desktop /Mobile/tablet - 40px

text-narrow-3 - Text Size Narrow 3

Desktop /Mobile/tablet - 32px

text-narrow-4 - Text Size Narrow 4

Desktop /Mobile/tablet - 24px

text-narrow-5

Desktop /Mobile/tablet - 16px

text-small - Text Size Small

Desktop - XL 14/1.3 Mobile/tablet 13px/1.3

text-regular - Text Size regular

Desktop - XL 16/1.3 Mobile/tablet 14px/1.3

Text Colors

.text-text-primary - $primary

.text-text-primary-inverse - $neutral-100

.text-text-placeholder style="--bs-text-opacity: .25;" $neutral-900-a25

.text-text-placeholder-inverse style="--bs-text-opacity: .2;" $neutral-100-a20

.text-white - $white

Icon Lists

PS : Icons will be implemented as snippets in shopify instead of icon font.

icon-account

icon-chevron-right

icon-chevron-left

icon-chevron-up

icon-chevron-down

icon-basket

icon-circle-exclamation

icon-triangle-exclamation

icon-close

icon-search

Icon Lists Social

Reusable Components

Normal Buttons

Button Primary

Button

                              
                                <a href="#" class="btn btn-primary btn-ring">
                                  <span>
                                    { % render 'icon-basket' -% }
                                    <span class="btn-text">Button</span>
                                    { % render 'icon-chevron-right' -% }
                                  </span>
                                </a>

Button Primary Inverse

Button

                              
                                <a href="#" class="btn btn-primary-inverse btn-ring">
                                  <span>
                                    { % render 'icon-basket' -% }
                                    <span class="btn-text">Button</span>
                                    { % render 'icon-chevron-right' -%}
                                  </span>
                                </a>

Button Secondary

Button

                              
                                <a href="#" class="btn btn-secondary btn-ring">
                                  <span>
                                    { % render 'icon-basket' -% }
                                    <span class="btn-text">Button</span>
                                    { % render 'icon-chevron-right' -%}
                                  </span>
                                </a>

Button Secondary Inverse

Button

                              
                                <a href="#" class="btn btn-secondary-inverse btn-ring">
                                  <span>
                                    { % render 'icon-basket' -% }
                                    <span class="btn-text">Button</span>
                                    { % render 'icon-chevron-right' -%}
                                  </span>
                                </a>

Forms

Custom Select

Textures

Source file @2x: 512x512px (high-res version)

Tileable/Seamless Pattern
Use with blend-mode: OVERLAY or HARD LIGHT with opacity on background colors

Texture Primary Paper
Background Primary
+
Paper Texture Opacity: 15%
Blend-mode: HARD LIGHT

Texture Secondary Paper
Background Secondary
+
Paper Texture Opacity: 70%
Blend-mode: OVERLAY

Texture Tertiary Paper
Background Tertiary
+
Paper Texture Opacity: 60%
Blend-mode: OVERLAY

Texture Primary Inverse Paper
Background Primary Inverse
+
Paper Texture Opacity: 90%
Blend-mode: OVERLAY

Texture Secondary Inverse Paper
Background Secondary Inverse
+
Paper Texture Opacity: 70%
Blend-mode: OVERLAY

Texture Tertiary Inverse Paper
Background Tertiary Inverse
+
Paper Texture Opacity: 70%
Blend-mode: OVERLAY

Texture Paper Accent 1
Background Accent Background 1
+
Paper Texture Opacity: 40%
Blend-mode: OVERLAY

Texture Paper Accent 2
Background Accent Background 2
+
Paper Texture Opacity: 40%
Blend-mode: OVERLAY

Texture Paper Accent 3
Background Accent Background 3
+
Paper Texture Opacity: 45%
Blend-mode: OVERLAY

Texture Paper Accent 4
Background Accent Background 4
+
Paper Texture Opacity: 40%
Blend-mode: OVERLAY

Texture Paper Accent 5
Background Accent Background 5
+
Paper Texture Opacity: 40%
Blend-mode: OVERLAY

Texture Paper Accent 6
Background Accent Background 6
+
Paper Texture Opacity: 40%
Blend-mode: OVERLAY

Texture Paper Accent 7
Background Accent Background 7
+
Paper Texture Opacity: 40%
Blend-mode: OVERLAY

Source file @2x: 512x512px (high-res version)

Tileable/Seamless Pattern
Use with blend-mode: OVERLAY or HARD LIGHT with opacity on background colors