About Carbon

Name: carbon computers

Website: www.carbon.co

Industry: Consumer Technology, Personal Computing

Company Personality: Technical + Friendly Layperson

Customer Segment:

Primary - People who enjoy games but lack the knowledge of component selection, building a computer, or hardware performance
Secondary - People buying for others; don't know/care for the details, just roughly know what kind of games the computer is meant for
Tertiary - Enthusiasts that have the indepth technical knowledge, but lack the time or care to build a system

Value Proposition

Providing systems not based solely around specs, but offer/suggest its capabilities in experiences; games, workloads, etc.

In-text link

CSS selector:

.in-text-link

Sample code:

<a href="#" class="in-text-link">In-text link</a>

Rendered element:

In-text link

Navigation Button

CSS selector:

.button-nav

Sample code:


                    <nav> 

                     <ul> 

                      <li> 

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

                      </li>

                     </ul> 

                    </nav>

Rendered element:

Product Information Accordion

CSS selector:

.product-info-accordion

Sample code:


                    <button class="product-info-accordion">Section 1</button>

                    <div class="product-info-panel">

                     <p>Lorem ipsum...</p>

                    </div>

                    
                    <button class="product-info-accordion">Section 2</button>

                    <div class="product-info-panel">

                     <p>Lorem ipsum...</p>

                    </div>

                    
                    <button class="product-info-accordion">Section 3</button>

                    <div class="product-info-panel">

                     <p>Lorem ipsum...</p>

                    </div>

Rendered element:

Lorem ipsum...

CTA Button

CSS selector:

.cta-button

Sample code:

<a href="#" class="cta-button">CTA Button</a>

Rendered element:

CTA Button

Text Input Field

CSS selector:

#text-input-field, .input-field-label

Sample code:


                    <form>

                     <label for="text-input-field" class="input-field-label">Label</label>

                     <input type="text" id="text-input-field" placeholder="i.e. Text Sample">

                    </form>

Rendered element:

H1 Heading

CSS selector:

Sample code:

<h1>Heading 1</h1>

Rendered element:

Heading 1

H2 Heading

CSS selector:

Sample code:

<h2>Heading 2</h2>

Rendered element:

Heading 2

H3 Heading

CSS selector:

Sample code:

<h3>Heading 3</h3>

Rendered element:

Heading 3

Paragraphs

CSS selector:

Sample code:

<p>Paragraph</p>

Rendered element:

Paragraph

Bulleted Lists

CSS selector:

Sample code:


                    <ul>

                     <li>Bullet list 1</li>

                     <li>Bullet list 2</li>

                     <li>Bullet list 3</li>

                    </ul>

Rendered element:

Bullet list 1
Bullet list 2
Bullet list 3

Numbered Lists

CSS selector:

Sample code:


                    <ol>

                     <li>Bullet list 1</li>

                     <li>Bullet list 2</li>

                     <li>Bullet list 3</li>

                    </ol>

Rendered element:

Numbered list 1
Numbered list 2
Numbered list 3

Main Navigation

Product Listing

Rendered element:

Product Name

Starting at $999

Website Grid Structure

Product Name

Starting at $999

Product Name

Starting at $999

Product Name

Starting at $999

Product Name

Starting at $999

Note: Grid structure for the product listings page.

IAT 339: P02

Style Guide

About Carbon

In-text link

CSS selector:

Sample code:

Rendered element:

Navigation Button

CSS selector:

Sample code:

Rendered element:

Product Information Accordion

CSS selector:

Sample code:

Rendered element:

CTA Button

CSS selector:

Sample code:

Rendered element:

Text Input Field

CSS selector:

Sample code:

Rendered element:

H1 Heading

CSS selector:

Sample code:

Rendered element:

Heading 1

H2 Heading

CSS selector:

Sample code:

Rendered element:

Heading 2

H3 Heading

CSS selector:

Sample code:

Rendered element:

Heading 3

Paragraphs

CSS selector:

Sample code:

Rendered element:

Bulleted Lists

CSS selector:

Sample code:

Rendered element:

Numbered Lists

CSS selector:

Sample code:

Rendered element:

Main Navigation

Product Listing

Rendered element:

Product Name

Website Grid Structure

Product Name

Product Name

Product Name

Product Name

Website Colour Swatches

Palette 01

Palette 02