ASALA · Brand sheet

Type specimen

Two families. Big Shoulders Display, condensed and industrial, is set tall like signage on a building. Hanken Grotesk carries everything you read, with tabular figures for every column of numbers.

Elevation

Design Has Levels.

Big Shoulders Display facts
FamilyBig Shoulders Display by Patric King (XXIX) for the City of Chicago. SIL Open Font License.
AxisWeight 100–900, one variable file
RoleDisplay, headlines, level numbers, signage, single figures in display size. Always capitals.
SettingTall and tight: line-height 0.78–0.86, tracking +0.01em, never below 20 px.

Started asA headline font.

BecameSignage on a building: condensed capitals set tall, stacked like floors.

ProjectASALA · Elevation
Sheet title

Big Shoulders Display

SheetT-101
Scale1:1
Date
Weights
100Level 00 · Lobby
200Level 01 · What we make
300Level 02 · How we work
400Level 03 · Work
500Level 04 · Measure
600Roof · Credits
700Bay A · Brand
800Bay B · Interface
900Bay C · Production code

Floor +16.00

Started asA weight list.

BecameA ladder of nine weights from 100 to 900, each a floor. Thin weights are for big numerals; 800 is the house weight.

ProjectASALA · Elevation
Sheet title

Weights

SheetT-102
Scale1:1
Date

Identity, interface and production code from one studio.

ASALA is a boutique studio in the Bay Area. We brand web applications and build AI products. Body copy is Hanken Grotesk at 17 px on 1.55 leading, set ragged right with a measure of about 34 em.

The italic is for titles of things and the odd aside (“Black and white facade”, for example), never for emphasis in headings.

Hanken weights
300Survey before you build
400Survey before you build
500Survey before you build
600Survey before you build
700Survey before you build
400 iSurvey before you build

Hanken Grotesk by Alfredo Marco Pradil (Hanken Design Co.). SIL Open Font License. Weight 100–900, roman and italic.

Started asA body font.

BecameThe reading voice of the building: plain, warm, figures that line up in schedules.

ProjectASALA · Elevation
Sheet title

Hanken Grotesk

SheetT-103
Scale1:1
Date
Type scale
StepFaceSize / leadingSample
Lobby headlineBig Shoulders 800min(16vw, 230px) / 0.80Design has
Level numeralBig Shoulders 200104–250 px / 0.74 · Dove GreyL04
Floor titleBig Shoulders 80052–118 px / 0.84Measure
Sheet / table titleBig Shoulders 80028–48 px / 1.0Drawing register
LedeHanken 40018–21 px / 1.5Four stages, always in this order.
BodyHanken 40017 px / 1.55Survey and foundations first.
SmallHanken 400–50014–15 px / 1.45Scope is fixed in Specify.
LabelHanken 600 caps12 px · +0.14emL02 · How we work
CaptionHanken 50011 px · +0.04emPhoto: Verne Ho, CC0

Started asA type scale.

BecameNine steps, from a lobby-height headline to an 11 px photo credit. Display sizes are fluid; reading sizes are fixed.

ProjectASALA · Elevation
Sheet title

Scale

SheetT-104
Scale1:1
Date
Tabular: Hanken
LevelElevationSheet
Measure+16.00C-200
Stance+20.00S-400
Scope+24.00R-500
Shelf+28.00L-600

Hanken’s figures are tabular by default; every column of figures also sets font-variant-numeric: tabular-nums.

Display: Big Shoulders (proportional)

2,300

+04.00 +08.00

Big Shoulders figures are proportional: use them only one number at a time, never in columns.

Started asNumbers in a table.

BecameTwo kinds of figure: tabular Hanken for schedules that must align, tall proportional Big Shoulders for one big number at a time.

ProjectASALA · Elevation
Sheet title

Figures

SheetT-105
Scale1:1
Date

Big Shoulders Display 800

Hanken Grotesk 400

Started asA character map.

BecameThe set we use, cell by cell on the grid: capitals, lower case, figures, punctuation and the marks the drawings need (± ° × · “ ”).

ProjectASALA · Elevation
Sheet title

Glyphs

SheetT-106
Scale1:1
Date

Directory

BBedrock
L04MeasureL04
L03WorkL03
L02How we workL02
Level directory: black plate, Casper level numbers.
403 Issue
a brief L04 · Door 403
Door sign: paper on Dove Grey, 4.8:1.
L02 Going down · L02 · How we work
Lift landing indicator.

Pairing

How we work

Five stages, always in this order. Nothing goes up on ground we haven’t surveyed.

Rules

  • Big Shoulders in capitals only, 20 px and up
  • Hanken for anything longer than a line
  • Tabular figures for every column of numbers
  • Real quotes and the en dash: “ ” ’ –
  • Non-breaking space before units and in “3 day”
  • No Dove Grey small text on black

Started asSample text blocks.

BecameSignage: a level directory, a door sign and a lift indicator, set from the same two families as the site.

ProjectASALA · Elevation
Sheet title

Pairing & wayfinding

SheetT-107
Scale1:1
Date