Design Guide

Table of Contents

  1. Brand
  2. Typography
    1. Body Text
    2. Colours
    3. Headings
  3. Colour Palette
  4. Forms
    1. Form Controls
    2. Validation States
  5. Buttons
  6. Components
  7. Spacing
  8. Iconography
  9. Imagery
  10. Dos and Don'ts

1. Brand © RUDSAK {{ year }}. ALL RIGHTS RESERVED.

2. Typography

2.1 Body Text

Bacon ipsum dolor amet cupim alcatra tri-tip strip steak pork chop pastrami pig cow. Frankfurter pork loin spare ribs meatloaf, jowl bacon boudin beef capicola. Pork chop meatloaf salami picanha spare ribs chicken ground round strip steak landjaeger burgdoggen turducken tenderloin pastrami rump ham. Burgdoggen swine capicola drumstick cupim shoulder. Sausage corned beef swine beef meatloaf biltong andouille short ribs tail t-bone flank. Cow pork loin alcatra, fatback strip steak flank doner salami. T-bone meatloaf venison cupim tri-tip ribeye jerky.

<p>Bacon ipsum dolor amet cupim alcatra tri-tip strip steak pork chop pastrami pig cow. Frankfurter pork loin spare ribs meatloaf, jowl bacon boudin beef capicola. Pork chop meatloaf salami picanha spare ribs chicken ground round strip steak landjaeger burgdoggen turducken tenderloin pastrami rump ham. Burgdoggen swine capicola drumstick cupim shoulder. Sausage corned beef swine beef meatloaf biltong andouille short ribs tail t-bone flank. Cow pork loin alcatra, fatback strip steak flank doner salami. T-bone meatloaf venison cupim tri-tip ribeye jerky.</p>

Labels

Label Bold
Label Small
Label Large

2.2 Colours

Typography

$color--white: #ffffff
$color-text--black: #000000
$color-text--black-secondary: #2d2d2d

Background and other

$color-grey: #ececec
$color-red: #b10000

2.3 Headings

h1. Heading 1

<h1>h1. Heading 1</h1>

h2. Heading 2

<h2>h2. Heading 2</h2>

h3. Heading 3

<h3>h3. Heading 3</h3>

h4. Heading 4

<h4>h4. Heading 4</h4>
h5. Heading 5
<h5>h5. Heading 5</h5>
h6. Heading 6
<h6>h6. Heading 6</h6>

4. Forms

4.1 Form Controls

Radio
Swatch - Color:
Green
Turquoise
Swatch - Color--Large:
Teal
Aqua
Swatch - Color--Medium:
Red
Orange
Swatch - Color--Small:
Pink
Purple
Swatch - Color--Large - disabled:
Teal
Aqua
Swatch - Size:

4.2 Validation States

5. Buttons

Link

6. Components

7. Spacing

8. Iconography

9. Imagery

Static

Lazy Loaded with srcset

Full width

Liquid error: Could not find asset snippets/img_srcset.liquid

Variable widths

Liquid error: Could not find asset snippets/img_srcset.liquid

Note: The above image loads '1440:480,800:400,320' as the breakpoints, meaning it displays a 480px image for screens <= 1440px, 400px for screens <= 800px and 320px for screens <= 320px. This is useful for example for product tiles that should be 1/3 on desktop, 1/2 on tablet and 1/1 on mobile.

11. Modals

12. Flyouts

Example flyout

12. Iconography

Name Icon Class Code Sass Variable
arrow-black icon--arrow-black i class="icon icon--arrow-black" $icon-arrow-black
arrow-white icon--arrow-white i class="icon icon--arrow-white" $icon-arrow-white
check-black icon--check-black i class="icon icon--check-black" $icon-check-black
search-black icon--search-black i class="icon icon--search-black" $icon-search-black
facebook-logo icon--facebook-logo i class="icon icon--facebook-logo" $icon-facebook-logo
instagram-logo icon--instagram-logo i class="icon icon--instagram-logo" $icon-instagram-logo
youtube-logo icon--youtube-logo i class="icon icon--youtube-logo" $icon-youtube-logo
youtube-logo icon--youtube-logo i class="icon icon--youtube-logo" $icon-youtube-logo
youtube-logo icon--youtube-logo i class="icon icon--youtube-logo" $icon-youtube-logo
youtube-logo icon--youtube-logo i class="icon icon--youtube-logo" $icon-youtube-logo
search-white icon--search-white i class="icon icon--search-white" $icon-search-white
zendesk icon--zendesk i class="icon icon--zendesk" $icon-zendesk
email icon--email i class="icon icon--email" $icon-email
fit-fit icon--fit-fit i class="icon icon--fit-fit" $icon-fit-fit
fit-model icon--fit-model i class="icon icon--fit-model" $icon-fit-model
fit-size icon--fit-size i class="icon icon--fit-size" $icon-fit-size
leather-clean icon--leather-clean i class="icon icon--leather-clean" $icon-leather-clean
leather-protect icon--leather-protect i class="icon icon--leather-protect" $icon-leather-protect
leather-store icon--leather-store i class="icon icon--leather-store" $icon-leather-store
measurements icon--measurements i class="icon icon--measurements" $icon-measurements