Style Guide

Introduction

Overview

[Insert Company Name] is a retro sushi diner with a new creative spin to your typical traditional sushi restaurant. Inspired by the bustling cities of downtown Tokyo, it maintains a delicate balance between retro elegance and futurism. Check out one of our early inspirations in Tokyo over at Neo Shinjuku Atushi If you are looking to not only enjoy high quality sushi, but also the atmosphere of our retro sushi diner, come check out [Insert Company Name] today!

Typography

Typeface

Aa - Chivo Mono

Aa - Noto Serif JP

Headings

H1: Insert Heading Text

H2: Insert Heading Text

H3: Insert Heading Text

H4: Insert Heading Text

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Subtitle

An example of a highlighted subtitle.

Colour Palette

Primary: Space Cadet

Deep, muted blue with subtle hints of gray. This color has a strong, professional feel and can evoke feelings of calmness and stability. It’s often associated with depth and sophistication, Ideal for creating a sleek, modern aesthetic in websites.

Hex Code: #1F2646 | RGB: (31, 38, 70) | HSL: (210°, 40%, 20%)

Secondary: Cerise

Bold, lively pink with a striking presence. This color conveys a sense of playfulness and creativity, often associated with passion and warmth. It’s ideal for elements that aim to be eye-catching and dynamic.

Hex Code: #F44D9B | RGB: (244, 77, 155) | HSL: (340°, 89%, 57%)

Tertiary: White

Pure, bright white with a clean and timeless appeal. This color symbolizes simplicity and clarity, creating a sense of openness and spaciousness. It’s essential for enchancing the vibrancy of other colors.

Hex Code: #FFFFFF | RGB: (255, 255, 255) | HSL: (0°, 0%, 100%)

Accent: Fluorescent Cyan

Bright, refreshing cyan with a vibrant energy. This color exudes a sense of tranquility and clarity, toning into our elegance. It’s perfect for creating an uplifting and modern vibe.

Hex Code: #5FE7E7 | RGB: (95, 231, 231) | HSL: (180°, 92%, 61%)

Accent: Rose Bonbon

Rich, intense magenta with a dramatic flair. This color evokes strong emotions and is often linked to confidence and energy. It’s perfect for making a statement in our branding.

Hex Code: #EA285C | RGB: (234, 40, 92) | HSL: (348°, 85%, 47%)

Components

BUTTONS

Mail List

Product Listing

Dive into the delightful world of sushi with our curated product listing guide! Whether you’re a seasoned sushi lover or trying it for the first time, our selection of innovative rolls offers something for everyone. From traditional favorites to creative flavor combinations, each roll is crafted to tickle your taste buds and showcase the artistry of sushi-making. Get ready to embark on a culinary adventure as you discover the perfect sushi rolls to satisfy your cravings!

GameBoy Advance console

Prawn Wrap

Prawn and crab wrapped in nori and smoked salmon.

$7.99

Gameboy console

Salmon Roll

Classic salmon nigiri, avocado, and rice.

$5.50

Playstation 2 console

Tempura Creamcheese

Crab wrapped with cream cheese and avocado topped with tempura.

$14.99

Wii console

Green ROll

Salmon roe, crab, pepper wrapped in green fish skin.

$15.99

Promotion

Enjoy 20% off all menu items every Wednesday evening. Savor classic dishes inspired by the golden era of dining, from hearty comfort foods to nostalgic desserts, all served in a vibrant, retro atmosphere. Join us for an evening of great food, delightful music, and a chance to relive the charm of yesteryear. Don’t miss out—come create new memories with us!

Special Promotion

Retro Dining Lounge | October 10, 2024 @ 4PM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Navigation Menu

Art Direction and Inspiration

Our art direction embodies a blend of elegance and modernity, featuring elegant typography that maintains a high-class aesthetic despite its bold visual neon appeal. The use of neon line art introduces unique, futuristic visuals that offer minimal visual impact, allowing the design to feel both innovative and refined. To enhance the overall composition, we incorporate striking features with intentional vibrant colors, drawing attention to the products while preserving an organic feel. This approach ensures that our visuals are not only captivating but also align with our vision of creating a sophisticated yet forward-thinking brand identity.

Colour Palette & Use:

Image showing 5 different colours in this palette example of how these colours could look on a page wireframe company logo

Physical Ambiance Moodboard:

Image showing yellow cafe with drippy wall decor Image showing yellow wall tile decor Image showing tea in teacup with honeycomb Image showing to go coffee cup with quoted sleeve design Image showing yellow, orange, and blue wall art Image showing honeycomb bookshelf Image showing mirror honeycomb ceiling decor Image showing cozy cafe art Image showing vibrant gradient wall light from red to orange

Site Construction - 3 Main Takeaways:

  1. Elegant Typography:

    Despite having a bold visual appeal, we want to remain high class.

  2. Neon lineart:

    Provide unique, futuristic visuals with minimal visual impact.

  3. Striking features:

    Use intentional vibrant colours to draw attention to product.
Image showing black coffee UI for a website Image showing dark website with text highlighted by lamp Image showing floating objects on a website Image showing 2 posters with honeycomb and yellow designs Image showing 2 posters highlighting disticnt shapes and orange colours Image showing webpage divided into half white and half orange

Key words: futuristic, elegant, line art visual interest, organic

Citations

Fonts

Cadigan-Fried, S. (n.d.). Jersey 25. Google Fonts. Retrieved October 2, 2024, from URL.

Omnibus-Type. (n.d.). Chivo Mono. Google Fonts. Retrieved October 2, 2024, from URL.

Product Images

FrameRater. (2019). GameBoy Advance PNG. DeviantArt. Retrieved October 2, 2024, from URL.

Wikipedia. (2014). Game-Boy-FL. Wikipedia. Retrieved October 2, 2024, from URL.

Wikipedia. (2011). PS2-Fat-Console-Set. Wikipedia. Retrieved October 2, 2024, from URL.

Wikipedia. (2012). GameCube-Console-Set. Wikipedia. Retrieved October 2, 2024, from URL.

Reference Images

Western Canada’s largest Super Smash Bros tournament coming to Vancouver. (2023). Vancouver is Awesome. Retrieved October 2, 2024, from URL.

Arcade Club. (2022). Arcade Club Bury. Arcade Club. Retrieved October 2, 2024, from URL.

Sony Interactive Entertainment. (2018). Welcoming Evo into the PlayStation Family. Sony Interactive Entertainment. Retrieved October 2, 2024, from URL".

Super Potato – Retro Game Store in Akihabara & across Japan. (2023). Plan My Japan. Retrieved October 2, 2024, from URL.

Clerici, L. (n.d.). VHS Play Screen on Television. MotionArray. Retrieved October 2, 2024, from URL.

Elvidge, B. (n.d.). Arcade. Dribbble. Retrieved October 2, 2024, from URL.

Savic, A. (n.d.). Discovery loading... Dribbble. Retrieved October 2, 2024, from URL.

Das, O. (n.d.). Retro Console themed Poster. Dribbble. Retrieved October 2, 2024, from URL.

Code

Changing text to uppercase: URL

Adding gap between flexboxes: URL

Flex direction (row/column): URL

Hover pushing border text (border: solid transparent): URL

Fallback fonts: URL

Aligning items to the center in a flex container: URL

Form submit button: URL