Style Guide for Project 1&2

A template you can use to start building out your own style guides with.

Interactive Elements

In-text link

CSS selector:

.intextLink-nav

this is a paragraph with a in text link link.

Navigation Link

CSS selector:

.button-nav

Rendered element:

Default Button

Text Input Field with Label

Image as a Link

CSS selector:

.img-nav

Rendered element:

link to official casetify web

View More

link to casetify web as an example

Text Elements

Headings

Css selector

.heads-levels

first heading/Banner

second heading

section heading

product name/collection details

Paragraphs

Css selector

.para-style

this is the font size of paragraph & product details will also be this size

Numbered Lists

  1. First item
    1. First sub-item
    2. Second sub-item
  2. Second item
  3. Third item

Combined Elements

Navigation Menu

main menu for the website

CSS selector:

.menu

link to official casetify web

View More

Product Filter

this if filter for choosing specfic items to be displayed

CSS selector:

.filter

product listing layout

CSS selector:

.product-nav

to product detail page

View More
iphone 15 Impact case: Floral & Butterfly

$60

single product listing, with name and price

Product/Service Listing

Brand: Casetify

Casetify is a Hong Kong company that produces phone cases and electronic accessories.It is known for its customizable and stylish phone cases, smartwatch bands, tech accessories like AirPods cases, MacBook sleeves, iPad covers, wireless chargers, and tech-themed lifestyle products such as water bottles and bags. Their products typically range from $25 to $100, with phone cases usually priced between $40 and $70. Casetify's emphasis on personalization and collaborations with artists and brands often influences the pricing of their products.

Image example

banner poster 1
example emage for banner,large fullscreen image with link to product collection page
banner poster 1
example image for product listing, a full image of phone case shwoing the patterns, also with clickable link to product detail page

Fonts and colors

color palettes and font demo

the prior font for the brand's website will be:Verdana

Verdana is a very modern but also cute font, which suits the brand scene. For colors, I choose these colours as the brand scene colour for the website is that the brand logo is all black and white, but there is a little pink in the logo, therefore to match that I have add a pink-ish red colour. The light yellow for menu hover is to add some colourfulness to the entire website.

Citations