Department of Information
Graphic Standards Manual

Issued by the Office of Public Awareness.
Department of Information Graphic Standards

Getting startedGraphic Standards Manual

Pencil Box

Pencil Box is the interface layer of the Department of Information identity: the tokens and components behind Department websites and tools. It takes the seal, color, type and grid from the Graphic Standards Manual and turns them into things you can build with.

Edit this page

Color tokensDark and light color roles built on the brand colors. Type scaleInterface sizes for Neue Haas Grotesk and Baskerville. LayoutA 4-point spacing scale, square corners, control heights. ComponentsButtons, inputs, selection controls, tags and badges.

Principles

  1. Black first. Department Black is the dominant color of any page, screen or object, so dark is the default. Manila is its natural complement and the light theme.
  2. Color with restraint. Beaurocracy Blue is for emphasis, attention or accessibility, in limited form. Embargo Red marks anomalous, otherworldly and strange information: errors, and the guide lines on diagrams. Safety Yellow and Ledger Green signal caution and approval.
  3. Contrast is paramount. Every text and color pairing meets WCAG AA. Assume the reader has a color vision deficiency: state never relies on color alone.
  4. No superfluous elements. Hairlines, square panels, flat color. The only circles are radio buttons, badges and the seal.

Using Pencil Box on a site

Load the Adobe Fonts kit and Libre Baskerville, the tokens, then the component styles. The site’s domain must be listed in the kit’s settings for the fonts to load. Everything else is plain HTML with doi- classes.

<link rel="stylesheet" href="https://use.typekit.net/hha1ptx.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap">
<link rel="stylesheet" href="https://brand.departmentofinformation.org/tokens/tokens.css">
<link rel="stylesheet" href="https://brand.departmentofinformation.org/assets/pencil-box.css">

<button class="doi-button">File a request</button>

Dark is the default: Department Black page, Manila text. To use Manila as the ground, put data-theme="light" on <html> or on any section. This guide’s Theme button does the same, and remembers your choice.

Downloads: tokens.css · tokens.json (W3C design-tokens format, for apps and other platforms) · pencil-box.css

Status

Pencil Box v0.1 is a first draft, built on the Graphic Standards Manual V.1.0. Still open:

  • Baskerville. The manual specifies Baskerville URW in Regular, Medium, Bold and Ultra Bold. The web uses Libre Baskerville (Regular, Bold, Italic) until a licensed web cut is chosen.
  • Neue Haas Grotesk Medium. The manual shows a Medium weight; the Adobe Fonts kit has Roman and Bold only.
  • Review. The manual predates the components; they follow its rules but have not been through the Office of Public Awareness.

Pencil Box is a working name and may change; class names use the doi- prefix so a rename won't break anything.