91ÅÝܽ

MOOCHIE

Style Guide

At Moochie, we craft handmade mochi with love, care, and the finest ingredients to bring you the perfect balance of soft, chewy texture and delicious flavor. Whether you are craving a classic favorite or an exciting new twist, our mochi are made to satisfy your sweet tooth and add a little joy to your day.

Text Elements

CSS selector

h1 > h2 > h3 > p

Sample Code

<h1> Heading 1 </h1> <h2> Heading 2 </h2> <h3> Heading 3 </h3> <p> Paragraph </p>

Heading 1

Heading 2

Heading 3

Paragraph

Coiny

Coiny

Coiny

Comfortaa

48px

36px

24px

16px

Color

#523E30

#C1DD90

#FFD4DE

#CBA182

Numbered Lists

CSS selector

ol, li

Sample Code

<ol> <li> Product One </li> <li> Product Two </li> <li> Product Three </li> </ol>

Rendered Element

  1. Product One
  2. Product Two
  3. Product Three

Interactive Elements

In-text Link

CSS selector

.link

Sample Code

<ol> <a class="link" href="#"> Link </a>

Rendered Element

Link

Navigation Link

CSS selector

.button-nav

Sample Code

<a class="button-nav" href="#"> Default Button </a>

Rendered Element

Default Button

Text Input Field with Label

CSS selector

.button-nav

Sample Code

<label for = "Name"> Name: </label> <input type = "text" id = "Input">

Rendered Element

Image as Link

CSS selector

a, .image

Sample Code

<a href="https://i.pinimg
.com/736x/a9/dc/c7/a9dcc7
c8d8e2a8c133aaeb9cb5
3af7da.jpg"> <img src="img/product1.jpg" alt="cat-choco" style="width: 160px; height: 160px;" > </a>

Rendered Element

Premium Japanese Mochi

Combined Elements

Main Navigation

Product/Service Listing

Strawberry
Dream

filled with strawberry cream

$10.99/box

plus-icon-add-item

Purple
Delight

filled with taro cream

$10.99/box

plus-icon-add-item

Matcha
Melody

filled with vanilla cream

$12.99/box

plus-icon-add-item

Peach
Kiss

filled with peach cream

$10.99/box

plus-icon-add-item

Citations

  • Coiny (Font). Retrieved from
  • Comfortaa (Font). Retrieved from
  • Introduction Image. Retrieved from
  • Product 1 (Image). Retrieved from
  • Product 2 (Image). Retrieved from
  • Product 3 (Image). Retrieved from
  • Product 4 (Image). Retrieved from
  • Product 5 (Image). Retrieved from
  • Product 6 (Image). Retrieved from
  • Product 7 (Image). Retrieved from
  • Product 8(Image). Retrieved from
  • 91ÅÝܽ Us 1 (Image). Retrieved from
  • 91ÅÝܽ Us 2 (Image). Retrieved from
  • Social Media (Icons). Retrieved from
  • Coding Source. Retrieved from
  • Coding Source. Retrieved from
  • Coding Source. Retrieved from
  • Coding Source. Retrieved from
  • Coding Source. Retrieved from https://kinsta.com/blog/css-text-outline/
Go Home