Journal · 04 · 26
♥ 23

Last update at 26 · 04 ·

‧‧‧ One of 787
The Style Guide for my website 3oneseven.com is a set of standards for the writing and design of documents for general use on 3oneseven.com and across all milo’s website presence.
Style guides focus on specific topic areas such as graphic design, including typography.
The 3oneseven.com Website style guide covers visual and technical aspects along with text.

1. Branding

1.1 Logo

1.2 Logo Effects

2. Typography

2.1 a Heading & Text

Didot

Aa – Heading

Didot is a group of typefaces named after the famous French printing and type producing Didot family. The classification is known as modern, or Didone.

Open Sans

The name & logo of milo 317 originates from my graffiti tag, drawn in the complex style of “wildstyle”, a form of graffiti usually involving interlocking letters & connecting points.
These pieces are often hard to read by non-graffiti artists as the letters merge into one another in an often-undecipherable manner.
Located in Munich, milo offers design for best-practices in eCommerce design, usability & accessibility across browsers, users and mediums. Specialized in creating responsive web sites for eCommerce.
Milo is a true professional. Very polite, 100% client focused and, perhaps most importantly, brilliant at what she does. During the design process she was in contact with me at all times and was on hand to answer any queries or questions I had without hesitation.

Open Sans is a sans-serif typeface designed by Steve Matteson and commissioned by Google. According to Google, it was developed with an “upright stress, open forms and a neutral, yet friendly appearance” and is “optimized for legibility across print, web, and mobile interfaces.”

Helvetica

The name & logo of milo 317 originates from my graffiti tag, drawn in the complex style of “wildstyle”, a form of graffiti usually involving interlocking letters & connecting points.
These pieces are often hard to read by non-graffiti artists as the letters merge into one another in an often-undecipherable manner.
Located in Munich, milo offers design for best-practices in eCommerce design, usability & accessibility across browsers, users and mediums. Specialized in creating responsive web sites for eCommerce.
Milo is a true professional. Very polite, 100% client focused and, perhaps most importantly, brilliant at what she does. During the design process she was in contact with me at all times and was on hand to answer any queries or questions I had without hesitation.

Helvetica or Neue Haas Grotesk is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger with input from Eduard Hoffmann.

2.2 b Quotes

I’m a firm believer in fair pricing, and manage 3oneseven to
work in such a way that allows my services to be affordable.

3. Buttons

A Button
A Button
A Button

4. Icons

about milo
about the process
about the projects
about milo

5. Lists

One

Two

  • Native App Development
  • Cross Platform App
  • Mobile Web
  • Mobile eCommerce

Three

  • eCommerce Development
  • Multi-Channel Retailing
  • PCI Data Security Standard

6. Colors

hex #d84800 is composed of 84.7% red, 28.2% green and 0% blue. In a CMYK color space, it is composed of 0% cyan, 66.7% magenta, 100% yellow and 15.3% black.
Hue angle is 20 degrees, a saturation of 100% and a lightness of 42.4%.
#d84800 color hex is obtained by blending #ff9000 with #b10000.

● #d84800 color description : Strong orange.

6.1 #d84800 Color Conversion

The hexadecimal color #d84800 has RGB values of R:216, G:72, B:0 and CMYK values of C:0, M:0.67, Y:1, K:0.15.
Its decimal value is 14174208.

Hex tripletd84800#d84800
RGB Decimal216, 72, 0rgb(216,72,0)
RGB Percent84.7, 28.2, 0rgb(84.7%,28.2%,0%)
CMYK0, 67, 100, 15
HSL20°, 100, 42.4hsl(20,100%,42.4%)
HSV (or HSB)20°, 100, 84.7
Web Safecc3300#cc3300
CIE-LAB50.964, 54.192, 61.82
XYZ30.638, 19.237, 2.1
xyY0.589, 0.37, 19.237
CIE-LCH50.964, 82.21, 48.762
CIE-LUV50.964, 118.371, 42.12
Hunter-Lab43.86, 47.932, 27.864
Binary11011000, 01001000, 00000000

6.2 Color Schemes with #d84800

Complementary Color

Analogous Color

Split Complementary Color

Triadic Color

6.3 Alternatives to #d84800

Below, you can see some colors close to #d84800.
Having a set of related colors can be useful if you need an inspirational alternative to your original color choice.

Similar Colors

6.4 #d84800 Preview

Text with hexadecimal color #d84800

This text has a font color of #d84800.

<span style="color:#d84800;">Text here</span>
#d84800 background color

This paragraph has a background color of #d84800.

<p style="background-color:#d84800;">Content here</p>
#d84800 border color

This element has a border color of #d84800.

<div style="border:1px solid #d84800;">Content here</div>
CSS codes

.text {color:#d84800;}
.background {background-color:#d84800;}
.border {border:1px solid #d84800;}

6.5 Shades and Tints of #d84800

A shade is achieved by adding black to any pure hue, while a tint is created by mixing white to any pure color. In this example, #000 is the darkest color, while #fff2ec is the lightest one.

Shade Color Variation

Tint Color Variation

6.6 Tones of #d84800

A tone is produced by adding gray to any pure hue. In this case, #746964 is the less saturated color, while #d84800 is the most saturated one.

Tone Color Variation

6.7 Color Blindness Simulator

Below, you can see how #d84800 is perceived by people affected by a color vision deficiency.
This can be useful if you need to ensure your color combinations are accessible to color-blind users.
Monochromacy

  • #6b6b6bAchromatopsia0.005% of the population
  • #816456Atypical Achromatopsia0.001% of the population
Dichromacy

Trichromacy

  • #aa6c10Protanomaly1% of men, 0.01% of women
  • #b46800Deuteranomaly6% of men, 0.4% of women
  • #da4a32Tritanomaly0.01% of the population
3oneseven.com

Gallery

Video
3oneseven.com

Style Guide

A style guide establishes and enforces style to improve communication. To do that, it ensures consistency within a document and across multiple documents and enforces best practice in usage and in language composition, visual composition, orthography and typography.

3oneseven

milo 3oneseven, the owner and creative director of 3oneseven.com. An award winning brand & digital product designer, developer and consultant.
Home 3oneseven > CSS & UX/UIStyle Guide 3oneseven