Powdered spices on stone tableware

Our Style Guide

This Style Guide is used by Shokudo to ensure visual consistency across our websites, marketing, communications, and products.

Colour Palette

Core Colours

Matcha
#95ae6f
Earthenware
#886f5b

Supplementary Colours

Caramel
#c86726
Cayenne
#c73e2c
Mustard
#ffc857
Eggplant
#614051

Interactive Elements

Buttons

CSS Selectors: .button (base), .standard (Standard), .prim (Primary), .cta (Call to Action), .cancel (Cancel), .disabled (Disabled)

<!-- HTML -->
<button class="button standard">Standard</button>
<button class="button prim">Primary Action</button>
<button class="button cta">Call to Action</button>
<button class="button cancel">Cancel</button>
<button class="button disabled">Disabled</button> /* Sample CSS (for Standard Button) */
.button {
  letter-spacing: 0.07em;
  padding: 0.45em 0.7em 0.45em 0.7em;
  border-radius: 0.4em;
  font-size: 1.1em;
  font-weight: 600;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}
.standard {
  color: #555;
  border-top: thin solid #ccc;
  border-right: thin solid #ccc;
  border-left: thin solid #ccc;
  border-bottom: 0.15em solid #ccc;
  background: #f0f0f0;
}
.button.standard:hover {
  background: #e5e5e5;
  border-top: thin solid #aaa;
  border-right: thin solid #aaa;
  border-left: thin solid #aaa;
  border-bottom: 0.15em solid #aaa;
  cursor: pointer;
} Standard In-text Link

CSS Selector: .link

<!-- HTML -->
<a href="" class="link">Standard In-text Link</a> /* CSS */
.link {
  font-size: 1.15em;
  color: #95ae6f;
  text-decoration: none;
  border-bottom: thin solid;
}
.link:hover {
  color: #000;
  transition: color 0.2s ease;
} In-text External Link

CSS Selector: .external

<!-- HTML -->
<a href="" class="link external">In-text External Link</a> /* CSS */
.external:after {
  display: inline-block;
  -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
  -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
  -o-transform: matrix(-1, 0, 0, 1, 0, 0);
  transform: matrix(-1, 0, 0, 1, 0, 0);
  content: "⇱";
  margin-left: 0.1em;
} Read More Link

CSS Selector: .readmoreLink

<!-- HTML -->
<a href="" class="readmoreLink">Read More Link</a> /* CSS */
.readmoreLink {
  color: #c86726;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.1em;
  font-weight: 600;
}
.readmoreLink:after {
  content: "►";
  margin-left: 0.5em;
  font-size: 0.7em;
  vertical-align: middle;
}
.readmoreLink:hover {
  border-bottom: thin solid #c86726;
} Sidebar Link

CSS Selector: .sidebarLink

<!-- HTML -->
<a href="" class="sidebarLink">Sidebar Link</a> /* CSS */
.sidebarLink {
  font-size: 1.1em;
  color: #886f5b;
  text-decoration: none;
}
.sidebarLink:hover {
  color: #000;
  border-bottom: thin solid #000;
  transition: color 0.2s ease;
}

Forms

CSS Selectors: .formLabel (label), .textInput (input field)

<!-- HTML -->
<label class="formLabel">Text Input</label>
<input class="textInput" type="text" id="form-subject" placeholder="Text Input Field"> /* CSS */
.formLabel {
  font-size: 1.15em;
  line-height: 1.6em;
  width: 8em;
  display: inline-block;
  vertical-align: middle;
}
.textInput {
  display: block;
  font-size: 1.15em;
  line-height: 1.6em;
  vertical-align: middle;
  padding: 0.3em 0.5em 0.3em 0.5em;
  border: thin solid #aaa;
  border-radius: 0.3em;
  width: 15em;
  height: 2.3em;
  background: #fafafa;
  margin-bottom: 0.5em;
}

CSS Selectors: .formLabel (label), .dropdownInput (input field)

<!-- HTML -->
<label class="formLabel">Dropdown Menu</label>
<select class="dropdownInput" name="recipe" id="recipe">
  <optgroup label="Breakfast">
    <option value="Pancakes">Pancakes</option>
    <option value="Cereal">Cereal</option>
  </optgroup>
  <optgroup label="Lunch">
    <option value="Sandwich">Sandwich</option>
    <option value="Wrap">Wrap</option>
  </optgroup>
  <optgroup label="Dinner">
    <option value="Steak">Steak</option>
    <option value="Seafood">Seafood</option>
  </optgroup>
</select> /* CSS */
.dropdownInput {
  display: block;
  font-size: 1.15em;
  line-height: 1.6em;
  vertical-align: middle;
  padding: 0.3em 0.5em 0.3em 0.5em;
  border: thin solid #aaa;
  border-radius: 0.15em;
  width: 15em;
  height: 2.3em;
  background: #fafafa;
  margin-bottom: 1em;
}

CSS Selectors: .formLabel (label), .textArea (text area)

<!-- HTML -->
<label class="formLabel">Text Area</label>
<textarea class="textArea" placeholder="Comment on this recipe..."></textarea> /* CSS */
.textArea {
  background: #fafafa;
  display: block;
  border: thin solid #aaa;
  border-radius: 0.3em;
  font-size: 1.15em;
  line-height: 1.6em;
  margin-bottom: 1em;
  padding: 0.3em 0.5em 0.3em 0.5em;
  width: 20em;
}

CSS Selectors: .checkboxLabel, .checkboxInput, .radioLabel, .radioInput

<!-- HTML -->
<label class="checkboxLabel"><input type="checkbox" class="checkboxInput" name="checkboxInput" value="Checkbox">Checkbox</label>
<label class="radioLabel"><input type="radio" class="radioInput" name="radioInput" value="Radio">Radio Button</label> /* CSS */
.checkboxLabel, .radioLabel {
  font-size: 1.15em;
  width: 10em;
  display: block;
  overflow: hidden;
}
.checkboxLabel:hover, .radioLabel:hover {
  cursor: pointer;
}
input[type=checkbox], input[type=radio] {
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  margin: 0.5em 1em 1em 0.5em;
}

CSS Selectors: .button (base), .prim (primary action button)

<!-- HTML -->
<button class="button prim submit">&#10003; Submit</button> /* CSS */
.button {
  letter-spacing: 0.07em;
  padding: 0.45em 0.7em 0.45em 0.7em;
  border-radius: 0.4em;
  font-size: 1.1em;
  font-weight: 600;
  text-transform: uppercase;
}
.prim {
  color: #fff;
  border-top: thin solid #95ae6f;
  border-right: thin solid #95ae6f;
  border-left: thin solid #95ae6f;
  border-bottom: 0.15em solid #95ae6f;
  background: #a3bd7c;
}
.button.prim:hover {
  background: #95ae6f;
  border-top: thin solid #728852;
  border-right: thin solid #728852;
  border-left: thin solid #728852;
  border-bottom: 0.15em solid #728852;
  cursor: pointer;
}

CSS Selectors: .button (base), .standard (standard button)

<!-- HTML -->
<button class="button standard">&#x21BA; Reset</button> /* CSS */
.button {
  letter-spacing: 0.07em;
  padding: 0.45em 0.7em 0.45em 0.7em;
  border-radius: 0.4em;
  font-size: 1.1em;
  font-weight: 600;
  text-transform: uppercase;
}
.standard {
  color: #555;
  border-top: thin solid #ccc;
  border-right: thin solid #ccc;
  border-left: thin solid #ccc;
  border-bottom: 0.15em solid #ccc;
  background: #f0f0f0;
}
.button.standard:hover {
  background: #e5e5e5;
  border-top: thin solid #aaa;
  border-right: thin solid #aaa;
  border-left: thin solid #aaa;
  border-bottom: 0.15em solid #aaa;
  cursor: pointer;
}

Text Elements

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

CSS Selectors: .pageHead1, .pageHead2, .pageHead3, .pageHead4

<!-- HTML -->
<h1 class="pageHead1">Heading Level 1</h1>
<h2 class="pageHead2">Heading Level 2</h2>
<h3 class="pageHead3">Heading Level 3</h3>
<h4 class="pageHead4">Heading Level 4</h4>
/* CSS */
.pageHead1 {
  letter-spacing: 0.05vw;
  font-size: 2em;
  color: #332a22;
  padding-top: 0.5em;
}
.pageHead2 {
  font-size: 1.7em;
  color: #886f5b;
  padding-top: 0.5em;
}
.pageHead3 {
  padding-top: 0.5em;
  font-size: 1.5em;
  color: #332a22;
}
.pageHead4 {
  color: #886f5b;
  font-size: 1.3em;
  padding-top: 0.5em;
}

Paragraphs

Opening Paragraph

This is an opening paragraph. This styling is used to denote the first paragraph of a section of content. Its font size is slightly larger than a standard paragraph and different in colour.

CSS Selector: .paraOpen

<!-- HTML -->
<p class="paraOpen">This is an opening paragraph. This styling is used to denote the first paragraph of a section of content. Its font size is slightly larger than a standard paragraph and different in colour.</p> /* CSS */
.paraOpen {
  font-size: 1.2em;
  line-height: 1.5em;
  color: #886f5b;
}

Standard Paragraph

This is a standard paragraph. It follows an opening paragraph in a section of content. Its font size is slightly smaller than an opening paragraph and is different in colour.

CSS Selector: .para

<!-- HTML -->
<p class="para">This is a standard paragraph. It follows an opening paragraph in a section of content. Its font size is slightly smaller than an opening paragraph and is different in colour.</p> /* CSS */
.para {
  color: #332a22;
  font-size: 1.1em;
  line-height: 1.5em;
}

Lists

Bulleted Lists

CSS Selector: .uList

<!-- HTML -->
<ul class="uList">
  <li>Balanced and nutritious recipes</li>
  <li>Organic, locally sourced ingredients</li>
  <li>Delivered fresh to your home</li>
</ul> /* CSS */
.uList li {
  display: list-item;
  list-style-type: none;
  list-style-position: inside;
  font-size: 1.1em;
  line-height: 1.5em;
}
.uList li:before {
  content: "\25A0";
  color: #886f5b;;
  margin-right: 1em;
  vertical-align: text-bottom;
}

Numbered Lists

  1. Balanced and nutritious recipes
  2. Organic, locally sourced ingredients
  3. Delivered fresh to your home

CSS Selector: .oList

<!-- HTML -->
<ol class="oList">
<li><span>Balanced and nutritious recipes</span></li>
<li><span>Organic, locally sourced ingredients</span></li>
<li><span>Delivered fresh to your home</span></li>
</ol> /* CSS */
.oList li {
  display: list-item;
  list-style-position: inside;
  font-size: 1.1em;
  line-height: 1.5em;
}
.oList li span {
  position: relative;
  left: 0.5em;
}

Pull Quotes

Pull quotes are used to make key excerpts from a piece of content stand out. For example, a short excerpt from an article about the importance of buying high-quality fish sauce can be presented in a pull quote.

CSS Selector: .pullQuote

<!-- HTML -->
<div class="pullQuote">Pull quotes are used to make key excerpts from a piece of content stand out. For example, a short excerpt from an article about the importance of buying high-quality fish sauce can be presented in a pull quote.</div> /* CSS */
.pullQuote {
  color: #332a22;
  font-size: 1.15em;
  line-height: 1.5em;
  border-radius: 0.3em;
  border-left: 0.25em solid #95AE6F;
  border-right: 0.25em solid #95AE6F;
  padding: 1em;
}

Combined Elements

SHOKUDO Logo
BREAKFAST LUNCH DINNER
SHOP

Product Listing

garlic

Organic Colossal Garlic

Product#: 20165581001

$0.99 / 10g

Grid Structure

1/1
1/2
1/2
1/6
1/6
1/6
1/6
1/6
1/6