Design Guide
1. Brand
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 class="text-body">
Bacon ipsum dolor amet cupim alcatra tri-tip strip steak pork chop pastrami pig cow.
<strong>Frankfurter pork loin spare ribs meatloaf, jowl bacon boudin beef capicola.</strong>
<em>Pork chop meatloaf salami picanha spare ribs chicken ground round strip steak landjaeger burgdoggen</em>
<strong><em>turducken tenderloin pastrami rump ham. Burgdoggen swine capicola drumstick cupim shoulder.</em></strong>
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>
2.2 Text Small
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 class="text-body-sm">
Bacon ipsum dolor amet cupim alcatra tri-tip strip steak pork chop pastrami pig cow.
<strong>Frankfurter pork loin spare ribs meatloaf, jowl bacon boudin beef capicola.</strong>
<em>Pork chop meatloaf salami picanha spare ribs chicken ground round strip steak landjaeger burgdoggen</em>
<strong><em>turducken tenderloin pastrami rump ham. Burgdoggen swine capicola drumstick cupim shoulder.</em></strong>
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>
2.3 Subheading
My Subheading
2.4 Caption
My Caption
2.5 Headings
h1. Heading 1
<h1 class="heading-xl">h1. Heading 1</h1>
h2. Heading 2
<h2 class="heading-lg">h2. Heading 2</h2>
h3. Heading 3
<h3 class="heading">h3. Heading 3</h3>
h4. Heading 4
<h4 class="heading-sm">h4. Heading 4</h4>
h5. Heading 5
<h5 class="heading-xs">h5. Heading 5</h5>
h6. Heading 6
<h6 class="heading-2xs">h6. Heading 6</h6>
2.6 Prose
Paragraph with strong and
- List item 1
- List item 2
- List item 3
- Ordered list item 1
- Ordered list item 2
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
3. Colour Palette
3.1 Color Schemes
-
Text
#352714
-
Background
#faf8f6
-
Alternative Text
#5d5243
-
Alternative Background
#ede5dc
-
Primary button
#352714
-
Primary button text
#ffffff
-
Primary button hover
#5d5243
-
Secondary button
-
Secondary button hover
#352714
-
Secondary button text hover
#ffffff
-
Border
#e8ded3
3.2 Badge
-
Text
#ffffff
-
Background
#81613c
3.3 Other
-
Sale
#dc291e
-
Success
#5ec762
-
Error
#bd2020
-
Disabled text
#696969
-
Disabled background
#f6f6f6
4. Forms
4.1 Form Controls
<form action="" method="get">
<div class="mb-4">
<label for="example-text-input">Text Input</label>
<input id="example-text-input" type="text" placeholder="Text Here"/>
</div>
<div class="mb-4">
<label class="label-required" for="example-required-text-input">Required Input</label>
<input id="example-required-text-input" type="text" placeholder="Text Here" required/>
</div>
<div class="mb-4">
<label for="example-email-input">Email Input</label>
<input id="example-email-input" type="email" placeholder="Email Here">
</div>
<div class="mb-4">
<label for="example-password-input">Password Input</label>
<input id="example-password-input" type="password" placeholder="Password Here">
</div>
<div class="mb-4">
<label for="example-number-input">Number Input</label>
<input id="example-number-input" type="number" value="1">
</div>
<div class="mb-4">
<label for="example-form-control-select">Select</label>
<select id="example-form-control-select">
<option>1</option>
<option disabled>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="mb-4">
<label for="example-form-control-textarea1">Example textarea</label>
<textarea id="example-form-control-textarea1" rows="3"></textarea>
</div>
<div class="mb-4">
<label>
<input type="checkbox" value="">
Example checkbox
</label>
</div>
<div class="mb-4">
<label>
<input type="checkbox" value="" disabled>
Example disabled checkbox
</label>
</div>
<div class="mb-4">
<label>
<input type="radio" name="exampleRadios" id="example-radios1" value="option1" checked>
Example Radio Button 1
</label>
<label>
<input type="radio" name="exampleRadios" id="example-radios2" value="option2">
Example Radio Button 2
</label>
</div>
</form>