Marks and minimum sizes

The lockup is the parent mark. The hexagon stands for WHITEBOX, the asterisk for BLACKBOX. The cursive wordmark is fixed art. No live font matches it, so it is never re-set.

Lockup · parent mark

SVGPNG

Wordmark · fixed art

SVGPNG

Hexagon · WHITEBOX

SVGPNG

Asterisk · BLACKBOX

SVGPNG

Minimum sizes, shown actual size

96px wide · lockup

120px wide · wordmark

24px tall · hexagon, asterisk

Below these the cursive closes up and the hexagon reads as a blob. In print, treat the same numbers as millimeters at 300dpi. Clear space on every side is the height of the hexagon.

Incorrect use

Use the supplied files. The mark is black or white, nothing else. Put it on near-black or on white, never on a mid-tone or over a busy part of a photograph.

WHITEBOX and BLACKBOX

Every Artifice presentation is one or the other. WHITEBOX is the lab, BLACKBOX is the stage. The split is about what an audience is shown, not about medium or venue.

A work can move from one to the other between programs. It is filed under whichever format it was presented in, one at a time.

Two grounds, one accent

Carbon and chalk carry almost every surface. Cobalt is the only accent, used for links and focus states, never for emphasis or decoration. The ground is a soft black, never pure #000.

Gray is not a fourth color. Every quiet step below is chalk at reduced opacity on carbon, so the whole page stays in two colors.

Grayscale

Chalk on carbon, stepped down. These are the only grays. Click to copy.

Gradient

Carbon lifted toward gray. Grounds only: the cover plate and the footer. Never behind text.

One typeface: Helvetica Now Display

One family sets everything. Scale and case carry the hierarchy: sentence case for headings and body, uppercase for captions and labels. Tracking is −1% throughout, captions included. Never a weight swap to make a heading, never a second family. Redaction appears only where a title is set as display art.

Document the work and the room

Photograph what happened, in the light that was there. These are records first, so the rig, the cabling and the half-built version stay in frame.

Chapters, nodes, [ ENTER ]

Three active formats. Same marks, color and type across all three. What changes is who is in the room.

Chapters Public A numbered public program of performance and installation. Chapter 006 is in production for winter 2027.

nodes: Practitioners Development and demo nights for people building the work. Always lowercase, colon, roman numeral: nodes:ii.

[ ] [ ENTER ] Editorial A written dispatch on one artifact and its maker. Spaces inside the brackets.

Describe the work rather than praise it

Write as though the reader knows the field. Name the material, the place, the number. The warmth is in what you noticed, not in adjectives.

One button, three weights

Every call to action across Artifice surfaces is the same object: 34 pixels tall, 10 pixel uppercase label, a 4 pixel corner, and a face of chalk at 10% over whatever ground it sits on. What changes between a primary and a secondary is weight, never shape. The reference is the Submit signal control on the Index; every other button on the site was brought to it rather than the other way round.

The primary control at actual size. The face is flat — no gradient, no stroke, no inner lip. It reads as mid-grey on the Index footer only because the render behind it shows through; stated absolutely, it composites the same way on any ground.

The three weights

States

Focus is a 1 pixel white ring at 2 pixels offset, and it follows the element’s own corner. Every control gets one — a keyboard user who cannot see where they are has no way through the form.

Specification

:root {
  --ctl-face:       rgba(252, 250, 245, .10);
  --ctl-face-hover: rgba(252, 250, 245, .16);
  --r-sm: 4px;
}

.ctl {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; min-width: 150px; padding: 0 16px;
  font: 500 10px/1 'Helvetica Now Display', Helvetica, Arial, sans-serif;
  letter-spacing: .02em; text-transform: uppercase;
  color: #fcfaf5; text-decoration: none; cursor: pointer;
  background: var(--ctl-face);
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: color .15s, background-color .15s, border-color .15s;
}
.ctl:hover          { background: var(--ctl-face-hover); }
.ctl:focus-visible  { outline: 1px solid #fcfaf5; outline-offset: 2px; }
.ctl:disabled       { opacity: .45; cursor: default; }

.ctl--quiet         { background: none; border-color: #fcfaf5; }
.ctl--quiet:hover   { background: rgba(252, 250, 245, .10); }

.ctl--utility       { min-width: 0; min-height: 28px; padding: 0 10px;
                      font-weight: 400; color: #8f8f8f; background: none;
                      border-color: #262626; border-radius: 3px; }
.ctl--utility:hover { color: #fcfaf5; border-color: #fcfaf5;
                      background: rgba(252, 250, 245, .05); }

Live reference: the Submit signal drawer and the footer Subscribe control on index.artificenyc.org. If this page and that site disagree, this page is the specification and the site is the bug.

Production files

Every approved file, black and white. Use SVG wherever it is accepted. PNG is for slide decks and anything that will not take a vector. Do not modify these files. If you need a version that is not here, ask.

Helvetica Now Display is licensed per seat. Ask before installing it on a new machine. Redaction is free and open, used only for display titles.