Design Guide

1. Brand

2. Typography

2.1 Body Text

Default Body (Body - MD)

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>
```

Body - XS

Body - XS, Scto Grotesk B, Regular 12pt, Caracter 0.6. Line 18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<p class="body-xs">Body - XS, Scto Grotesk B, Regular 12pt, Caracter 0.6. Line 18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

Body - SM

Body - SM, Scto Grotesk B, Regular 14pt, Line 20. Scto Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<p class="body-sm">Body - SM, Scto Grotesk B, Regular 14pt, Line 20. Scto Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

Body - MD

Body MD - Scto Grotesk B, Light 15pt, Line 21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<p class="body-md">Body MD - Scto Grotesk B, Light 15pt, Line 21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

Body - LG

Body - LG, Scto Grotesk B, Light 18pt, Line 26. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<p class="body-lg">Body - LG, Scto Grotesk B, Light 18pt, Line 26. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel feugiat arcu, ut iaculis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

2.2 Colours

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>
```

Heading - XXL
```
<p class="heading-xxl">Heading XXL</p>
```
Heading - XL
```
<p class="heading-xl">Heading XL</p>
```
Heading - LG
```
<p class="heading-lg">Heading LG</p>
```
Heading - MD
```
<p class="heading-md">Heading MD</p>
```
Heading - SM
```
<p class="heading-sm">Heading SM</p>
```
Heading - XS
```
<p class="heading-xs">Heading XS</p>
```
Heading - XXS
```
<p class="heading-xxs">Heading XXS</p>
```

Heading - XXXS

<p class="heading-xxxs">Heading XXXS</p>

3. Colour Palette

Primary

$color-primary #1d1d1b
$color-primary-light #ececec

Secondary

$color-secondary #666666
$color-secondary-light #cccccc
$color-secondary-lighter #ffffff

Accent

$color-accent #395dff
$color-accent-alert #db231b

4. Forms

4.1 Form Controls

<form action="" method="get" class="form">
    <div class="form__field">
      <input id="example-text-input" type="text" placeholder="Text Input">
      <label for="example-text-input">Text Input</label>
    </div>
    <div class="form__field">
      <input id="example-text-error-input" type="text" placeholder="Text Input Error">
      <label for="example-text-error-input">Text Input Error</label>
      <p class="form__error">Error message</p>
    </div>
    <div class="form__field">
      <input id="example-email-input" type="email" placeholder="Email Input" autocomplete="email-input">
      <label for="example-email-input">Email Input</label>
    </div>
    <div class="form__field">
      <input id="example-search-input" type="search" placeholder="Search Input">
      <label for="example-search-input">Search Input</label>
    </div>
    <div class="form__field">
      <input id="example-password-input" type="password" placeholder="Password Input" autocomplete="current-password">
      <label for="example-password-input">Password Input</label>
    </div>
    <div class="form__field">
      <select id="example-form-control-select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <label for="example-form-control-select">Select</label>
    </div>
    <div class="form__field">
      <textarea id="example-form-control-textarea1" rows="5"></textarea>
      <label for="example-form-control-textarea1">Example textarea</label>
    </div>
    <div class="form__field">
      <input id="example-checkbox-input" type="checkbox" value="">
      <label for="example-checkbox-input">Checkbox</label>
    </div>
    <div class="form__field">
      <input id="example-checkbox-disabled-input" type="checkbox" value="disabled-checkbox" disabled>
      <label for="example-checkbox-disabled-input">Checkbox Disabled</label>
    </div>
    <div class="form__field">
      <input id="example-radio-input-1" type="radio" name="example-radio-group" value="option1" checked>
      <label for="example-radio-input-1">Radio Button 1</label>
    </div>
    <div class="form__field">
      <input id="example-radio-input-2" type="radio" name="example-radio-group" value="option2">
      <label for="example-radio-input-2">Radio Button 2</label>
    </div>
    <div class="form__field">
      <input id="example-radio-disabled-input" type="radio" name="example-radio-group" value="option3" disabled>
      <label for="example-radio-disabled-input">Radio Button Disabled</label>
    </div>
  </form>

<form action="" method="get" class="form form--design-guide">
    <div class="form__field form__field--reverse">
      <input id="example-text-reverse-input" type="text" placeholder="Text Input">
      <label for="example-text-reverse-input">Text Input</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-text-error-reverse-input" type="text" placeholder="Text Input Error">
      <label for="example-text-error-reverse-input">Text Input Error</label>
      <p class="form__error">Error message</p>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-email-reverse-input" type="email" placeholder="Email Input" autocomplete="email-input">
      <label for="example-email-reverse-input">Email Input</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-search-reverse-input" type="search" placeholder="Search Input">
      <label for="example-search-reverse-input">Search Input</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-password-reverse-input" type="password" placeholder="Password Input" autocomplete="current-password">
      <label for="example-password-reverse-input">Password Input</label>
    </div>
    <div class="form__field form__field--reverse">
      <select id="example-form-control-reverse-select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <label for="example-form-control-reverse-select">Select</label>
    </div>
    <div class="form__field form__field--reverse">
      <textarea id="example-form-control-reverse-textarea1" rows="5"></textarea>
      <label for="example-form-control-reverse-textarea1">Example textarea</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-checkbox-reverse-input" type="checkbox" value="">
      <label for="example-checkbox-reverse-input">Checkbox</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-checkbox-reverse-disabled-input" type="checkbox" value="disabled-checkbox" disabled>
      <label for="example-checkbox-reverse-disabled-input">Checkbox Disabled</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-radio-reverse-input-1" type="radio" name="example-radio-group" value="option1" checked>
      <label for="example-radio-reverse-input-1">Radio Button 1</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-radio-reverse-input-2" type="radio" name="example-radio-group" value="option2">
      <label for="example-radio-reverse-input-2">Radio Button 2</label>
    </div>
    <div class="form__field form__field--reverse">
      <input id="example-radio-reverse-disabled-input" type="radio" name="example-radio-group" value="option3" disabled>
      <label for="example-radio-reverse-disabled-input">Radio Button Disabled</label>
    </div>
  </form>

4.2 Validation States

5. Buttons

<button class="button button--primary">Primary</button>

<a href="#" role="button" class="button button--primary">Primary</a>

<button class="button button--primary" disabled>Primary Disabled</button>

<a href="#" role="button" class="button button--primary is-disabled">Primary Disabled</a>

<button class="button button--secondary">Secondary</button>

<a href="#" role="button" class="button button--secondary">Secondary</a>

<button class="button button--secondary" disabled>Secondary Disabled</button>

<a href="#" role="button" class="button button--secondary is-disabled">Secondary Disabled</a>

<button class="button button--alt">Alternative</button>

<a href="#" role="button" class="button button--alt">Alternative</a>

<button class="button button--alt" disabled>Alternative Disabled</button>

<a href="#" role="button" class="button button--alt is-disabled">Alternative Disabled</a>

<button class="button button--primary-reverse">Primary</button>

<a href="#" role="button" class="button button--primary-reverse">Primary</a>

<button class="button button--primary-reverse" disabled>Primary Disabled</button>

<a href="#" role="button" class="button button--primary-reverse is-disabled">Primary Disabled</a>

<button class="button button--secondary-reverse">Secondary</button>

<a href="#" role="button" class="button button--secondary-reverse">Secondary</a>

<button class="button button--secondary-reverse" disabled>Secondary Disabled</button>

<a href="#" role="button" class="button button--secondary-reverse is-disabled">Secondary Disabled</a>

<button class="button button--alt-reverse">Alternative</button>

<a href="#" role="button" class="button button--alt-reverse">Alternative</a>

<button class="button button--alt-reverse" disabled>Alternative Disabled</button>

<a href="#" role="button" class="button button--alt-reverse is-disabled">Alternative Disabled</a>

6. Components

Price

Small

Compare at $495.00 Sale price $349.99


<span class="price price--compare-at price--sm">
  <span class="price__label">Compare at</span>
  <span class="price__value">$495.00</span>
</span>
<span class="price price--final price--sm">
  <span class="price__label price__label--sale">Sale price</span>
  <span class="price__value">$349.99</span>
</span>

Medium

Compare at $495.00 Sale price $349.99


<span class="price price--compare-at price--md">
  <span class="price__label">Compare at</span>
  <span class="price__value">$495.00</span>
</span>
<span class="price price--final price--md">
    <span class="price__label price__label--sale">Sale price</span>
  <span class="price__value">$349.99</span>
</span>

Large

Compare at $495.00 Sale price $349.99


<span class="price price--compare-at price--lg">
  <span class="price__label">Compare at</span>
  <span class="price__value">$495.00</span>
</span>
<span class="price price--final price--lg">
    <span class="price__label price__label--sale">Sale price</span>
  <span class="price__value">$349.99</span>
</span>

Badge

Default

Pre-order flag


<span class="badge">Pre-order flag</span>

Discount

-50%


<span class="badge badge--discount">-50%</span>

Discount - Small

-25%


<span class="badge badge--discount badge--sm">-25%</span>

Discount - Medium

-25%


<span class="badge badge--discount badge--md">-25%</span>

Discount - Large

-25%


<span class="badge badge--discount badge--lg">-25%</span>

Free shipping on all orders

Your shopping bag is empty

Menu

Account

Rudsak

Reach Us

Design Guide

1. Brand

2. Typography

2.1 Body Text

Default Body (Body - MD)

Body - XS

Body - SM

Body - MD

Body - LG

2.2 Colours

2.3 Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

3. Colour Palette

Primary

Secondary

Accent

4. Forms

4.1 Form Controls

4.2 Validation States

5. Buttons

6. Components

Price

Small

Medium

Large

Badge

Default

Discount

Discount - Small

Discount - Medium

Discount - Large

7. Spacing

8. Iconography

Header logo & utilities

Other utilities

Product features

Social media

Payments

Flags

9. Imagery

Static

Lazy Loaded with srcset

10. Dos and Don'ts