Display
Tungsten
A condensed sans that holds the wall in signage, hero headlines, and brand marquees. Optical settings: Medium · Semibold · Bold · Black.
CSS:
05 / Typography
Typography
Two typefaces. Used with care, they do most of the work of holding the brand together.
Primary typefaces
Tungsten for display. Decimal for everything else.
Both are Hoefler & Co designs licensed to The Lumber Exchange. Tungsten is a condensed, all-purpose display sans — it gives us posture and presence at large sizes. Decimal is a humanist sans modeled on watch-face precision — it reads as warm, confident, and unmistakably modern at text sizes.
Text
Decimal
A humanist sans for body, UI, and most headlines under 32 px. Weight range: Book → Black. Italics available at Book and Semibold.
CSS:
Decimal in two registers
All caps for posture. Sentence case for prose.
Decimal carries a lot of personality in its capital forms — the geometry of the R, the angle on the K, the proportion of the G. We lean into those forms by setting Decimal in all caps more often than most brands would. The result reads as deliberate, dignified, and unmistakably ours. Reserve sentence case for prose, where Decimal becomes warm and conversational instead.
A All caps
WORK · HAYWARD
MAIN STREET
Use for: labels, eyebrows, wayfinding, signage, lockup-style headings, member-card faces, anywhere you want the form of the capitals to speak for the brand.
Decimal Bold · letter-spacing 0.04–0.12em · the larger the type, the lighter the tracking.
B Sentence case
A workday that earns the trip up north.
Use for: prose, body copy, headlines that should read warm and human, member emails, and any extended writing. Sentence case keeps Decimal hospitable, not declarative.
Decimal Book or Medium · letter-spacing 0 · line-height 1.5–1.6.
Type scale
The roles we use, in order of size.
All sizes are fluid — they scale with the viewport between the two bounds shown. Click var(--text-…) in a spec to copy it.
Display
Tungsten · 600 clamp(4rem → 8.5rem) lh 0.92
Reimagine the workday
Marquee headlines. Hero pages, section openers. Use rarely — when used, dominate the page.
H1
Tungsten · 600 clamp(3.25rem → 5.5rem) lh 0.95
A new dawn on Main Street
Page titles.
H2
Tungsten · 600 clamp(2.5rem → 3.75rem) lh 1.02
Built for the way you actually work
Section headings within a page.
H3
Tungsten · 600 clamp(1.5rem → 1.875rem) lh 1.1
Open Work Lounge
Subsection headings, card titles.
H4
Decimal · 700 clamp(1.125rem → 1.25rem) lh 1.3
For Hayward locals
Component labels, emphasis within prose.
Eyebrow
Decimal · 600 clamp(0.75rem → 0.8125rem) lh 1.4
Voice & Messaging
Section markers above headings, category tags.
Lede
Decimal · 400 clamp(1.25rem → 1.5rem) lh 1.45
A destination coworking experience in Hayward, WI.
Opening paragraph under a headline. Sets tone.
Body
Decimal · 400 clamp(1rem → 1.0625rem) lh 1.55
Step inside and the first thing you’ll notice is the inviting aroma of freshly brewed coffee.
Default paragraph.
Body Small
Decimal · 400 clamp(0.875rem → 0.9375rem) lh 1.55
Built with intention, ready to welcome.
Captions, secondary copy, table cells.
Caption
Decimal · 500 clamp(0.75rem → 0.8125rem) lh 1.5
Construction photo — Summer 2025
Image captions, fine print, metadata.
Weights
Use the ones we’ve licensed. Don’t synthesize.
Tungsten
- Medium weight: 500
- Semibold weight: 600
- Bold weight: 700
- Black weight: 900
Decimal
- Decimal Book weight: 400
- Decimal Medium weight: 500
- Decimal Semibold weight: 600
- Decimal Bold weight: 700
- Decimal Black weight: 900
Fallbacks & pairings
When Hoefler isn’t available.
Type rules
A few we’ll defend.
Do
- +Tungsten for display. 32 px / 2 rem and above.
- +Decimal Book or Medium for body. Sentence case keeps it warm.
- +Decimal Bold in all caps for labels. Lean into the capital forms.
- +Tight on display, generous on body. Line-height 0.92–1.0 vs 1.5–1.6.
Don’t
- —No Tungsten below 24 px. Its proportions thin and it stops reading as itself.
- —No stretching, condensing, or skewing either typeface in software. Pick the right weight or width.
- —No Decimal Italic for emphasis in headlines. Switch weight instead.
- —No pairing Tungsten with another display face. It’s the only one.