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

1. Branding

1.1 Logo

3oneseven.com logo
3oneseven.com logo

2. Typography

2.1 a Heading & Text

Century Gothic™ is based on Monotype 20th Century, which was drawn by Sol Hess between 1936 and 1947. Century Gothic maintains the basic design of 20th Century but has an enlarged x-height and has been modified to ensure satisfactory.
Century Gothic Font Family

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.

Calibri

Calibri is part of the ClearType Font Collection, a suite of fonts from various designers released with Windows Vista. All start with the letter C to reflect that they were designed to work well.

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

4. Icons

about milo
about the process
about the projects
about milo

5. Lists

One

  • Website design
  • Graphic design
  • Application design
  • Photo Retouche

One

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

One

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

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.

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.

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
Video
Style Guide 3oneseven

Video

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.





About

milo

400+ successfully launched Shopify shops are proof of my experience in best practices in eCommerce design.

Guides

Typography article

Typography builds brand recognition
Typography is a interface design element
UI/UX design Guide
Anatomy of a Typeface Character
Style Guide 3oneseven
Typography & CSS
Typography Theme

Start now

Custom work

Design

  • Design and integration of custom specifications
  • SEO optimized result
  • Developing custom functions to extend Shopify functionality

Installation

Professional

  • Setting up and tuning environment for SEO
  • Installing Shopify templates
  • Shopify Setup and Configuration
  • Configuring Shopify apps

Support

Management

  • Shopify Management Support
  • Backend management (code fixing, updates etc...)
  • Store management (roles changes, content update/import/exports, etc.)

Import

Migration

  • Migrating a Shopify install from an existing
  • Importing content into a Shopify install
  • Configuring content roles

3onesevenCategory

milo, a designer, developer and consultant with experience of 400+ successfully launched Shopify stores.
Design
milo

About

A designer, developer, consultant & approved Shopify expert with a five-star track record in the design, setup & optimization of Shopify shops.

milo 317

Search   Sitemap

Say hello