W3C Styleguide & Brand Guidelines

Status: * Work in Progress * Team-only * Last updated : Feb, 2018 *

We are on GitHub: fork this document, or file issues on https://github.com/w3c/design.

1. Graphical Elements of the W3C Brand

[@@Add description@@]

1.2 Fonts

The font in the W3C logo is Base Twelve Sans from Emigre Graphics.

In print materials, we recommend Gill Sans and Gill Sans Bold from Adobe Systems. Walbaum may be used for a second font. Times Roman may be substituted for Walbaum.

There was a decision taken in March 2017 to change the font of the WAI and W3C website to Noto Sans.

[Note from Tanya: the fonts I've consistently used in the past year for both print + graphics have been Lato, Roboto, and Montserrat.]

1.3 Colors

We use different "W3C blues" on the Web and in print; see below for values and notes from IJ on colors and formats.

Logo Colors

W3C Blue

Web : #005A9C

Web : RGB(0,90,156)

Print : CMYK(100,56,0,0)

Print : Pantone PMS 293 C Blue / Reflex Blue

W3C White

Web : #FFFFFF

Web : RGB(255,255,255)

Print : CMYK(0,0,0,0)

Print : Pantone White

W3C Black

Web : #000000

Web : RGB(0,0,0)

Print : CMYK(0,0,0,100)

Print : Pantone Process Black / Black 6

Validator Yellow

Web : #FFCC66

Web : RGB(255,204,102)

Validator Checkmark Red

Web : #990000

Web : RGB(153,0,0)

Contrast Orange

Web : #CB6628

Web : RGB(203,102,40)

CMYK(16.08,69.02,99.61,3.53)

Stylesheet Colors

Team Site BG

Web : #FFEEC2

Web : RGB(255,239,194)

[team.css]

Member Site BG

Web : #E2EDFE

Web : RGB(226,237,254)

[member.css]

Public Site BG

Web : #FFFFFF

Web : RGB(255,255,255)

[base.css]

Headings

TR Pages

Web : #005A9C (W3C Blue)

Pubrules Stylesheet

Web : #0050B2

Notes from Fabrice/Marie/IJ discussion (Oct 2007):

  • In general, people use Adobe Illustrator to create our logos and use the '.ai' format. They should create three .ai files:
    • RGB mode for online use
    • CMYK mode (for 4-color print process, for most printing needs)
    • Pantone mode. Use for special printing needs, including forced separation (e.g., for hand-screened items such as plastic bags)
  • From those .ai files, we generate these formats:
    • RBG mode for PNG, GIF, SVG
    • CMYK mode for EPS
  • In general, Ivan generates all the formats using some scripts that he can run in batch mode using Illustrator. Ian sometimes uses (1) optipng to compress the PNG to level 3 and (2) convert overcome an Internet Explorer bug regarding PNG transparency.
  • Although we could distribute more than one EPS file (one for CMYK, one for Pantone), in general the CMYK one suffices for most printing applications.
  • There is no uniform translation from a Pantone color (such as 293 C) to a given RGB or CMYK value. So we have chosen (in our long history) one RGB value and one CMYK value; see below. Because there is not a single mapping, if you start with RGB, you can't get to CMYK automatically. So if you send an EPS file in RBG mode to a printer and ask for 4-color printing, there is no way to get the CMYK values we list below without saying "use these CMYK values". That is why we are creating EPS files in CMYK mode for printing. Note: As of Oct 2007, IJ thinks that almost all of our logo files in EPS are in RGB mode; IJ plans to remedy that situation, although that may take time.
  • Online, the CMYK colors look different than the RBG colors; don't be surprised.
  • In fact, we rarely print using a Pantone process, so Pantone 293 C is not something most people will have to deal with.
  • If only black is available, the entire foreground of the logo is to be produced in black.

More information on colors

This is one of the better descriptions of color usage in brand identity; Texas Tech's Identity suites are the best XHTML materials Janet has seen.

2. Toto

Dolor.

this that and that or that
item
 -
 -
 -
item
 -
 -
 -
Term

Description

  • element
  • element
  • element

2.1 Tutu

Sit amet.

2.2 Tata

Consectetur adipiscing elit.

3. Tetu

Sed do eiusmod tempor incididunt.