Alexander Blackman

Web
Style Guide

  1. Type
  2. Colour palette
  3. Colour contrast
  4. Headings
  5. Paragraphs
  6. Lists
  7. Text Level Semantics
  8. Code
  9. Tables
  10. Images and Figures

Type

Whitney

Whitney is the primary typeface designed by Hoefler & Co. Originally designed for the Whitney Museum, Whitney is a highly legible and compact typeface intended for signs and editorial design.

Whitney Book

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
\?!@£$%&1234567890

Whitney Medium

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
\?!@£$%&1234567890

Whitney Semibold

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
\?!@£$%&1234567890

Whitney Black

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
\?!@£$%&1234567890

Scale

Ratio is 3:4, the perfect fourth or 1.333. The base font-size is 22px set on the <html> element.

a a a a a a a a a a a a a a a a a a a a

Modular scale rem Pixels
−3 0.580 rem 9 px
−2 0.7730 rem 12 px
−1 1.031 rem 16 px
0 1.375 rem 22 px
1 1.833 rem 29 px
2 2.444 rem 39 px
3 3.259 em 52 px
4 4.346 rem 70 px
5 5.794 em 93 px
6 7.726 rem 124 px
7 10.301 rem 165 px
8 13.734 rem 220 px
9 18.313 rem 293 px
10 24.417 rem 391 px
11 32.556 rem 521 px
12 43.408 rem 695 px
13 43.408 rem 695 px
14 43.408 rem 695 px
15 43.408 rem 695 px
16 43.408 rem 695 px

Colour palette

  • Primary
  • Based on traditional printers reds such as Vermillion. Particular hue is slightly paler and less orange than print equivalents as screens render colour more vibrantly.
  • #e14e4e
  • RGB 225, 78, 78
  • $colour-primary
  • Text
  • Eigengrau is the colour seen by the eye in perfect darkness. It's not quite black and has a slight blue hue.
  • #16161D
  • RGB 22, 22, 29
  • RGBa 2, 2, 11, 0.92
  • $colour-text
  • Ground
  • #fcfcfc
  • RGB 252, 252, 252
  • RGBa 255, 255, 255, 0.99
  • $colour-ground

Tints and shades

  • #fceded RGB (252, 237, 237)
    90%
  • #f7d3d3 RGB (247, 211, 211)
    75%
  • #f0a6a6 RGB (240, 166, 166)
    50%
  • #e87a7a RGB (232, 122, 122)
    25%
  • #e45f5f RGB (228, 95, 95)
    10%
  • #e14e4e RGB (225, 78, 78)
  • #cb4646 RGB (203, 70, 70)
    10%
  • #a93b3b RGB (169, 59, 59)
    25%
  • #712727 RGB (113, 39, 39)
    50%
  • #381414 RGB (56, 20, 20)
    75%
  • #170808 RGB (23, 8, 8)
    90%

Colour contrast

The minimum colour contrast ratio recommended by the W3C for text is 4.5:1 and is given a AA rating.

Text colour is either RGBa (2, 2, 11, 0.92) or RGBa (255, 255, 255, 0.99).

Transparency is used as it is more flexible then opaque colour values.

  • #fceded RGB (252, 237, 237)
    16.0 AAA
  • #f7d3d3 RGB (247, 211, 211)
    13.4 AAA
  • #f0a6a6 RGB (240, 166, 166)
    9.6 AAA
  • #e87a7a RGB (232, 122, 122)
    6.9 AA
  • #e45f5f RGB (228, 95, 95)
    5.7 AA
  • #e14e4e RGB (225, 78, 78)
    5.0 AA
  • #cb4646 RGB (203, 70, 70)
    4.6 AA
  • #a93b3b RGB (169, 59, 59)
    6.1 AA
  • #712727 RGB (113, 39, 39)
    10.2 AAA
  • #381414 RGB (56, 20, 20)
    16.2 AAA
  • #170808 RGB (23, 8, 8)
    19.2 AAA

Headings

Heading or title

Whitney Black 39/39 .heading

Subheading

Whitney Semi-bold 39/39 .subheading or no class

Subheading alternative

Whitney Book Uppercase 39/39 .subheading--alt

Subheading, running header, navigation

Whitney Book Small Caps 39/39 .subheading--sc

Paragraphs

Normal

If you’re hungry to learn about making your design process more suited for today’s websites and applications, and how the latest technologies and techniques will make them more responsive, then this is the book for you.

Whitney Book 18/25

Lead

If you’re hungry to learn about making your design process more suited for today’s websites and applications, and how the latest technologies and techniques will make them more responsive, then this is the book for you.

Whitney Book 22/30

Margin and footnotes, aside, folios

This is a placeholder image, with supporting caption.

Measure

abcdefghijklmnopqrstuvwxyz­­abcdefghijklmnopqrstuvwxyz­­abcdefghijklm

Lists

Ordered list

  1. This is an ordered list.
  2. This is the final item on this list.

Unordered list

Poundland, formerly known as the United Kingdom of Great Britain and Northern Ireland

  • England
  • Scotland
  • Wales
  • Northern Ireland

Channel Islands

  • Bailiwick of Guernsey
  • Bailiwick of Jersey

Definition list

This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
Here is a defined term.
dt terms may stand on their own without an accompanying dd, but in that case they share descriptions with the next available dt. You may not have a dd without a parent dt.

List of links

Text Level Semantics

em, strong, i, b, abbr, cite, code, del, ins, dfn, mark, sup and sub

Inline text HTML elements are used within other elements. They include: em and strong for semantic emphasis, i and b for presentational formatting, abbr abbreviations, cite citations, code example, strikethrough, ins for visibly deleted and inserted content, dfn definitions, mark for highlighted passages, sup superscript and sub subscript. Inline quotes. Keyboard keys such as press ⌘ Cmd + ⇧ Shift + 3 to take a screen shot.

Links and anchors

Horizontal Rule


Pre-formatted text

 ! " # $ % & ’ ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [  ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

Blockquotes

Proper punctuation is both the sign and the cause of clear thinking

Lynne Truss in Eats, Shoots and Leaves

Code

Inline

When you call the activate() method on the robotSnowman object, the eyes glow.

Code block

function getJello() {
echo $aDeliciousSnack;

Code block with line numbers

1. <?php
2. echo 'Hello World!’;
3. ?>

Tables

The Very Best Eggnog
Ingredients Serves 12 Serves 24
Milk 1 quart 2 quart
Cinnamon Sticks 2 1
Vanilla Bean, Split 1 2
Cloves 5 10
Mace 10 blades 20 blades
Egg Yolks 12 24
Cups Sugar 1 ½ cups 3 cups
Dark Rum 1 ½ cups 3 cups
Brandy 1 ½ cups 3 cups
Vanilla 1 tbsp 2 tbsp
Half-and-half or Light Cream 1 quart 2 quart
Freshly grated nutmeg to taste

Images and Figures

Images

Figure caption heading

Images are rendered as greyscale using a CSS filter.

Example Image
Back to start Previous: Curriculum Vitae Next: Colophon