P1 Style Guide

Contents

Description of Service

Description

This website serves as an e-commerce shop for users to purchase different brands of computer mice. Users will be able to scroll through pages of different types of mice to view their features before making a purchase.

Colours

Oxford Blue

#102542

Used for background colour

Bittersweet

#F87060

Used for interactable items

Azure

#E9FFFD

Used for pop-up overlays

Grullo

#B3A394

Used for button hover states

White

#FFFFFF

Used for text and contrast

Fonts

Lato

Lato is used for the headings and any text that needs to be emphasized.

Mulish

Mulish is used for the body text and smaller interactable buttons.

Interactive Elements

Link in Paragraph

Click here to view more details on this mouse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut dui orci. Nulla ante justo, malesuada ut orci ut, fringilla laoreet ipsum. Nunc mattis tortor et sem maximus, vitae imperdiet neque aliquam. Nam porta ornare leo, sit amet hendrerit mauris interdum vitae. Fusce quis tortor erat. Suspendisse non erat mollis, mattis urna a, pretium enim. Sed lacinia accumsan vulputate. Nunc vestibulum quis dolor vitae lacinia. Maecenas in tortor ligula. Mauris eget porttitor justo. Phasellus lobortis ut dui at sollicitudin. Nunc eget consequat ipsum. Pellentesque porttitor, tortor ut feugiat lacinia, sapien lorem congue dui, eu tempus justo mauris sit amet mi.

Text Form

Text Elements

Headings

Heading 1 - Title

Heading 2 - Subheadings

Heading 3 - Features

Heading 4 - Other Elements

Paragraph

The new Logitech mouse sets new standards on speed, precision, and accuracy. Quisque nec dui finibus, eleifend tortor vitae, dictum tellus. Aenean suscipit, turpis et maximus lobortis, turpis mi laoreet metus, nec consequat libero quam eu felis. Sed eget elit vel dolor mollis placerat. In hac habitasse platea dictumst. Curabitur turpis ex, placerat quis diam vel, efficitur cursus urna. Etiam urna tellus, malesuada eu purus id, sagittis ullamcorper enim. Praesent eu elementum purus, quis posuere est.

List

How to connect your mouse to your computer

  1. Check for compatibility between your computer and the mouse you're planning to purchase.
  2. Install the required batteries in the wireless mouse. On most models, you can lift the top panel on the mouse to expose the battery compartment. AA batteries are typically used to power wireless mice.
  3. Plug the USB receiver bundled with the mouse into the port on the side of your computer.
  4. Press and hold the small button on the underside of the mouse and the button on the USB receiver simultaneously. Continue holding the buttons down until the tracking light on the underside of the mouse illuminates.
  5. Turn the mouse over and begin moving it to ensure that the cursor tracks properly.

Combined Elements

Main Navigation

Product Listing

Logitech G503 mouse

Logitech G305

Our newest addition to the gaming mice family.

$100.00

Citations