Last update at 28 · 01 · by milo

‧‧‧ One of 810

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

mil

2. Typography

2.1 ^a Heading & Text

Playfair Display

Playfair lends itself to the late 18th century, period, and while it is not a revival of any particular design, it takes influence from the designs of John Baskerville and from ‘Scotch Roman’ designs.

Aa – Heading

Open Sans

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.”

The Open Sans font is currently the default typeface for Mozilla software. Like Roboto, Open Sans is considered a “humanist font,” as it was developed using oval shapes and stroke variations that give it a more human, familiar feel.

The Open Sans font consists of 10 styles: 300, 300italic, regular, italic, 600, 600italic, 700, 700italic, 800, 800italic and 7 charsets: greek-ext, cyrillic, vietnamese, greek, latin, cyrillic-ext, latin-ext.

This free typeface was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and is incredibly legible.

Arial

Arial is a neo-grotesque typeface: a design based on the influence of nineteenth-century sans-serifs, but made more regular and even to be more suited to continuous body text and to form a cohesive family of fonts.

Arial, sometimes marketed or displayed in software as Arial MT, is a sans-serif typeface and set of computer fonts. The Arial typeface was designed in 1982, by Robin Nicholas and Patricia Saunders, for Monotype Typography.

The Arial typeface comprises many styles: Regular, Italic, Medium, Medium Italic, Bold, Bold Italic, Black, Black Italic, Extra Bold, Extra Bold Italic, Light, Light Italic, Narrow, Narrow Italic, Narrow Bold, Narrow Bold Italic, Condensed, Light Condensed, Bold Condensed, and Extra Bold Condensed.

Arial contains more humanist characteristics than many of its predecessors and as such is more in tune with the mood of the last decades of the twentieth century. The overall treatment of curves is softer and fuller than in most industrial style sans serif faces.

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

4. Icons

5. Lists

One

Website design
Graphic design
Application design
Photo Retouche

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.

- R
  85
- G
  
  28
- B
  
  0
strong>RGB color chart
- C
  
  0
- M
  
  67
- Y
  
  100
- K
  
  15
CMYK color chart

● #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 triplet	d84800	`#d84800`
RGB Decimal	216, 72, 0	`rgb(216,72,0)`
RGB Percent	84.7, 28.2, 0	`rgb(84.7%,28.2%,0%)`
CMYK	0, 67, 100, 15
HSL	20°, 100, 42.4	`hsl(20,100%,42.4%)`
HSV (or HSB)	20°, 100, 84.7
Web Safe	cc3300	`#cc3300`

CIE-LAB	50.964, 54.192, 61.82
XYZ	30.638, 19.237, 2.1
xyY	0.589, 0.37, 19.237
CIE-LCH	50.964, 82.21, 48.762
CIE-LUV	50.964, 118.371, 42.12
Hunter-Lab	43.86, 47.932, 27.864
Binary	11011000, 01001000, 00000000

6.2 Color Schemes with #d84800

Complementary Color

#d80024
#d84800
```
#d84800 rgb(216,72,0)
```
#d8b400

Analogous Color

Split Complementary Color

Triadic Color

Tetradic Color

Monochromatic 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

#8f8019Protanopia1% of men
#a07a00Deuteranopia1% of men
#db4c4fTritanopia0.001% of the population

Trichromacy

#aa6c10Protanomaly1% of men, 0.01% of women
#b46800Deuteranomaly6% of men, 0.4% of women
#da4a32Tritanomaly0.01% of the population

milo 3oneseven, the owner and creative director of 3oneseven.com. An award winning brand & digital product designer, developer and consultant.

3oneseven

Say hello

Talk

Visit

Munich
Echinger str
80805
Germany
Office

milo 3oneseven, a brand & digital product designer, developer and consultant.

Style Guide 3oneseven

1. Branding

1.1 Logo

1.2 Logo Effects

2. Typography

2.1 ^a Heading & Text

Aa – Heading

2.2 ^b Quotes

3. Buttons

4. Icons

5. Lists

One

Two

Three

6. Colors

6.1 #d84800 Color Conversion

6.2 Color Schemes with #d84800

6.3 Alternatives to #d84800

6.4 #d84800 Preview

6.5 Shades and Tints of #d84800

6.6 Tones of #d84800

6.7 Color Blindness Simulator

3oneseven

Style Guide 3oneseven

Say hello

Talk

Visit

Follow

Good design just works

Find out more

How

Find out how

Inside

Work

milo 3oneseven, a brand & digital product designer, developer and consultant.

Style Guide 3oneseven

1. Branding

1.1 Logo

1.2 Logo Effects

2. Typography

2.1 a Heading & Text

Aa – Heading

2.2 b Quotes

3. Buttons

4. Icons

5. Lists

One

Two

Three

6. Colors

6.1 #d84800 Color Conversion

6.2 Color Schemes with #d84800

6.3 Alternatives to #d84800

6.4 #d84800 Preview

6.5 Shades and Tints of #d84800

6.6 Tones of #d84800

6.7 Color Blindness Simulator

3oneseven

Style Guide 3oneseven

Say hello

Talk

Visit

Follow

Good design just works

Find out more

How

Find out how

Inside

Work

2.1 ^a Heading & Text

2.2 ^b Quotes