Desktop Text formatting:
H1 — Orpheus Pro — 68 / 70 — Sentence case — 0 Char spacing — Default (400 weight)
Page header
H2 — Orpheus Pro — 48 / 50 — Sentence case — 0 Char spacing — Default (400 weight)
Section Header
H3 — Orpheus Pro — 20 / 22 — ALL CAPS — 5px Char spacing — Medium (600 weight)
SUBHEADERS
H4 — Montserrat — 14 / 18 — ALL CAPS —5px Char spacing — Medium (600 weight)
EYEBROW / PREHEADERS
Body — Lato — 16 / 24 — Sentence Case — 0.5px Char spacing — Normal (400 weight)
Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
CTA TEXT — Montserrat — 16 / 22 — ALL CAPS — 5px Char spacing — Medium (500 weight)
BUTTON — 40px padding sides — 12px padding top/bottom.
Simple landing page headers
BRANDS NEEDED:
Snack Box, Boutique, Market, & Hello Kitty
COLOR OPTIONS:
No need for all color options. Just the four headers below.
GENERAL NOTES:
No menu or nav needed in this.
Image with text block
BRANDS NEEDED:
Snack Box, Boutique, Market, & Hello Kitty
COLOR OPTIONS:
All colors outlined in Figma Color blocks
TOGGLES NEEDED:
- Image placement on left/right?
- Hide secondary image
- Hide vertical japanese text
- Upload video in liu or image
GENERAL NOTES:
On mobile, image(s) should always live above text.
On mobile, hide vertical Japanese text always
SUB HEADER ALL CAPS
Title Case Header Goes Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3 column desktop + carousel mobile view
Title Case Headline
TITLE (ALL CAPS)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
TITLE (ALL CAPS)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
TITLE (ALL CAPS)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3 step section with icons
ALL CAPS SUBHEADER
Sentence case header here.
TITLE (ALL CAPS)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
TITLE (ALL CAPS)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
TITLE (ALL CAPS)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Full Width Banner (Desktop) + Full Height Image (Mobile)
SUB HEADER ALL CAPS
Title Case Header
Goes Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
CAPS EYEBROW COPY
Sentence case header here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Full Width Banner (Desktop) + Square Image (Mobile)
SUB HEADER ALL CAPS
Title Case Header
Goes Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
PREMIUM SUBSCRIPTION
Discover Japan
Through Snacks
Authentic snacks delivered to you monthly from Japan with free shipping!
Image Carousel with text headlines
Title Case Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Promo code callout banner
SAVE AMOUNT OFF YOUR FIRST BOX WITH CODE
CODE HERE
Product details section
ALL CAPS TITLE
ALL CAPS TITLE
Quote with image carousel below
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
– NAME HERE
Press logos
FEATURED BY
Sub Box panels header (layout with code field)
CHOOSE YOUR PLAN
Snack Box Subscription
SAVE AMOUNT OFF YOUR FIRST BOX WITH CODE CODE HERE
Sub Box panels (standard layout)
CHOOSE YOUR PLAN
Snack Box Subscription
Sub Box Panels with stacked toggles
MONTHS
$39.99
/MO
You save $120.00
6
MONTHS
$43.99
/MO
You save $36.00
3
MONTHS
$45.99
/MO
You save $12.00
1
MONTH
$49.99
/MO
FAQ accordions
Landing Page Footer
HAPPY SNACKING | BOKKSU 2022