KeyDennis Mechanical Keyboard web Style guide

- The images and content provided are inspired by the KeyChron Mechanical Keyboard website.

What is KeyDennis?

Introducing the keyDennis - where the precision of German engineering meets the sophistication of modern design. Crafted for both fervent typists and gaming enthusiasts, this mechanical keyboard offers a tactile response, durability, and an unparalleled aesthetic appeal. With its sleek frame, customizable LED backlighting, and a footprint that complements any desk setup, keyDennis is more than just a tool - it's a statement of elegance and functionality.

Style Guide

Colour Palettes:

Retro Vibe: Creamy white, rich navy, with subtle gold accents.

#F0E9D6

RGB(240, 233, 214)

HSB(36°, 11%, 94%)

#405169

RGB(64, 81, 105)

HSB(213°, 39%, 41%)

#F2CB91

RGB(242, 203, 145)

HSB(30°, 40%, 95%)

Font Selections:

  1. Title - Gabarito: A forward-facing font with clean lines, Avenir marries contemporary charm with timeless elegance.
  2. Subtitle - Raleway: Semi-bold or medium weights of Raleway provide a balanced look for subtitles, offering a modern touch without overpowering the main title or the body content.
  3. Body - Nunito Sans: With its characteristically rounded finishes, Nunito strikes an inviting balance between warmth and clarity.

Art Direction:

For the keyDennis, the art direction leans into a realm of sophisticated minimalism. Emphasis should be placed on the sleek design and precise details of the keyboard itself. Backgrounds should be muted, drawing the eye directly to the product, while shadows and highlights hint at the texture and finish of the keyboard. The use of space is critical - ample negative space will emphasize the product’s simplicity and elegance. Imagery should be crisp, with a focus on capturing the ambient light reflecting off the keyboard’s surface, highlighting its premium build. Every visual element, from fonts to layouts, should echo the keyboard's ethos: refined, efficient, and impeccably designed.

Potential Imagery

a picture of a KeyDennis Keyboard
a second picture of a KeyDennis Keyboard
a third picture of a keyDennis Keyboard

Interactive Elements

In-text link

The keyboard images is based from the KeyChron Keyboards

KeyChron Keyboards

Navigation Link

The overall aesthetic is going to be minimalistic. Therefore, The website will only have two styled buttons.

CSS selector:

.button-nav
.button-buy

Sample code:

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

Rendered element:

Default Button Order Button

Text Input Field with Label







Order Button
<form action="#" method="post">
<label for="form-name">YOU NAME:</label>
<input type="text" id="form-name" placeholder="FIRST, LAST">
<label for="form-subject">ADDRESS:</label>
<input type="text" id="form-subject" placeholder="Street, etc">
<label for="form-comment">CREDIT CARD:</label>
<input type="text" id="form-comment" placeholder="4500-0000-0000-0000">
<input type="Order" value="Order Now!">
</form>

Image as a Link

a picture of a custom keyboard

Text Elements

Heading 1

Heading 2

Heading 3

Heading 4

Body Text

Paragraph's example

Wireless & Wired Connect the keyboard with up to 3 devices via Bluetooth or to a single device with the USB Type-C wired option. Pair it up with your smartphone, laptop and iPad, and switch amongst the devices swiftly, that is best for home, office and light gaming uses.

Numbered List's example'

  1. KeyDennis K2 Wireless Mechanical Keyboard
  2. KeyDennis K4 Wireless Mechanical Keyboard
  3. KeyDennis K8 Wireless Mechanical Keyboard
  4. KeyDennis L3 Wireless Mechanical Keyboard

Combined Elements

Main Navigation

The main navigation will feature scrolling, images with links, buttons, a dropdown menu, and a search function. The dropdown menu will allow users to navigate through various products on the home page. Users can scroll for more details and information about the products and can access different pages by clicking on the buttons or images with links.

Product Listing

a picture of a KeyDennis K2 Wireless Mechanical Keyboard

KeyDennis K2 Wireless Mechanical Keyboard

a picture of a KeyDennis K4 Wireless Mechanical Keyboard

KeyDennis K4 Wireless Mechanical Keyboard
a picture of a KeyDennis K8 Wireless Mechanical Keyboard

KeyDennis K8 Wireless Mechanical Keyboard
HTML:

<div class="grid two-column three-column">
<div class="magnify-box">
<a href="https://www.keychron.com/products/keychron-k2-wireless-mechanical-keyboard" target="_blank">
<img src="img/Keychron_K2.png" width="360" height="360" alt="a picture of a KeyDennis K2 Wireless Mechanical Keyboard" class="magnify-image">
</a>
<p>KeyDennis K2 Wireless Mechanical Keyboard</p>
</div>

<div class="magnify-box">
<a href="https://www.keychron.com/products/keychron-k4-wireless-mechanical-keyboard-version-2" target="_blank">
<img src="img/Keychron_K4.png" width="360" height="360" alt="a picture of a KeyDennis K4 Wireless Mechanical Keyboard" class="magnify-image">
<p>KeyDennis K4 Wireless Mechanical Keyboard</p>
</a>
</div>

<div class="magnify-box">
<a href="https://www.keychron.com/products/keychron-k8-tenkeyless-wireless-mechanical-keyboard" target="_blank">
<img src="img/Keychron_K8.png" width="360" height="360" alt="a picture of a KeyDennis K8 Wireless Mechanical Keyboard" class="magnify-image">
<p>KeyDennis K8 Wireless Mechanical Keyboard</p>
</a>
</div>
</div>

CSS:

.magnify-box {
width: 640px;
height: 360px;
overflow: hidden;
position: relative;
background-color: black;
}

.magnify-image {
width: 100%;
height: auto;
display: block;
opacity: 0.7;
transition: opacity 0.4s, transform 0.4s;
}

.magnify-box:hover .magnify-image {
transform: scale(1.05);
opacity: 1;
}

.magnify-box p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
padding: 5px 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}

Citations