Denim City Amsterdam — Typography Spec — Topol + Apercu
0 — Type scale
Hero
clamp(72–128px)
Denim
4xl
56px
Make your own jeans
2xl
32px
The full story of denim
base
16px
Body copy — where warmth and approachability live
sm
14px
→ Navigation · Arrow links · UI labels
xs
12px
28 Mar 2026 · 19:00 · €15 · Metadata
Hero → 4xl jump: 2.3×
4xl → 2xl jump: 1.75×
2xl → xl jump: 1.33×
xl → base jump: 1.5×
base → sm jump: 1.14×
sm → xs jump: 1.17×
Topol range: Hero → 2xl
Apercu Pro range: xl → sm
Apercu Mono range: xs only
Uppercase: Hero → sm (structure)
Sentence case: base only (reading)
The boundary: where structure ends and content begins
1 — Wordmark level
font-family: Topol
font-weight: 700
font-size: clamp(72px, 10vw, 128px)
line-height: 0.9
letter-spacing: -0.02em
text-transform: uppercase
color: #0000A5
"AMS" font: Apercu Mono 400 — thinner, same scale
"AMS" color: #FF2B2B
Principle: name (Topol) vs. context (Mono) — typeface distinguishes, not scale
Origin: 2018 Denim City Style Guide v.02 — Logo as System
2 — Tagline tension
Denim City AMS
Towards a brighter blue
Line 1 font: Topol 700
Line 2 font: Apercu Mono 400
font-size: clamp(36px, 5vw, 56px)
line-height: 1
letter-spacing: -0.02em
text-transform: uppercase
Line 1 color: #0000A5
Line 2 color: #FF2B2B
Gap: 8px
3 — Section title
font-family: Topol
font-weight: 700
font-size: 56px
line-height: 1.1
letter-spacing: -0.01em
text-transform: uppercase
color: #0000A5
4 — Label + title combination
Education
Make your own jeans
Label font: Apercu Mono 400
Label size: 12px
Label tracking: 0.1em
Label transform: uppercase
Label color: #0000A5 @ 50%
Label → title gap: 12px
Title font: Topol 700
Title size: 56px
Title line-height: 1.1
Title tracking: -0.01em
5 — Body text
Connecting the next generation with the forefront of the denim world. We strive to create a place where knowledge, craftsmanship, and innovation in denim come together.
A place to learn, to make, and to rethink what this material can be. From the 6-meter jeans wall to the laser lab — strictly offline.
font-family: Apercu Pro
font-weight: 400
font-size: 16px
line-height: 1.6
letter-spacing: normal
max-width: 560px
paragraph gap: 1em (16px)
color: #0000A5
accent phrases: #FF2B2B, same font
6 — Metadata
font-family: Apercu Mono
font-weight: 400
font-size: 12px
letter-spacing: 0.1em
text-transform: uppercase
color: #0000A5
Role: dates, times, prices, durations, specs — factual only
Never use for: body copy, titles, or navigation
7 — Navigation + arrow links
Academy
Workshop
Lab
Archive
→ Store
Events
Partners
Contact
→ Make your own jeans
→ View all courses
→ Explore the store
→ Book a tour (Commercial)
font-family: Apercu Pro
font-weight: 400
font-size: 14px
text-transform: uppercase
letter-spacing: 0.06em
color default: #0000A5
color hover/active: #FF2B2B
Active prefix: → in accent
No filled buttons: arrow links only
8a — Pull quote
“After this tour, denim will never be the same again.”
font-family: Apercu Pro
font-weight: 700 (Bold) + 400 (Regular) mixed — bold carries the key phrase
font-size: clamp(56px, 6vw, 80px)
line-height: 1.1
letter-spacing: -0.02em
text-transform: uppercase
alignment: left (never centered — centered reads as decoration)
color: #0000A5
max-width: 800px
Role: carries someone’s voice, not structure — same font, different intent
8a+ — Display type — three voices
The Store.
072C — the voice
Brighter Blue
White — the light
Denim City
Black — the weight
Denim City
De Hallen, Amsterdam
“After this tour, denim will never be the same again.”
“After this tour, denim will never be the same again.”
Denim City
Print · stamps · favicon
072C (#0000A5): the daily voice — all text, all UI, the default
Denim White (#FFF): the light — fresh, open, editorial
Denim Black (#000): the weight — architectural, heavy, formal
Scale: display only — 48px minimum for white and black
On pink: all three — 072C default, white for light, black for weight
On surface: white and black
On indigo: white display + 072C tone-on-tone
On black: white only
Never: white or black type at body size (16px)
8b — Testimonials
“I came in to buy a pair of jeans. I left understanding how they’re made. That changes what you reach for.”
Maria S. — Store visitor
“Five days, one pair of jeans. I’ve never worn anything that felt this much like mine.”
Thomas K. — Academy participant
Quote font: Apercu Pro Italic 400
Quote size: 20px
Quote line-height: 1.5
Quote color: #0000A5
Attribution font: Apercu Mono 400
Attribution size: 12px
Attribution tracking: 0.1em
Attribution color: #0000A5 @ 50%
Quote → attribution gap: 16px
Role: personal voice — italic signals “someone else is speaking”
vs. Pull quote: Bold = the brand’s voice amplified. Italic = a visitor’s voice remembered.
8c — Rotated section labels
Store
The Store.
Strictly offline.
font-family: Apercu Pro
font-weight: 400
font-size: 14px
text-transform: uppercase
letter-spacing: 0.06em
color: #0000A5 @ 50%
writing-mode: vertical-rl
transform: rotate(180deg) — reads bottom to top
Column width: 48px
Position: left edge of section, separated by 1px border
Origin: 2018 Denim City Style Guide v.02
9 — Vertical rhythm
Academy
Make your own jeans.
If you find us, you book. 90% of the time. Five days, your own hands, one pair of jeans — from pattern to finish. We strive to create a place where knowledge, craftsmanship, and innovation in denim come together.
→ View all courses
Label → Title: 12px
Title → Body: 24px
Body → Link: 32px
All gaps on: 8px grid
Section padding-top: 48px
The gaps tighten: upward (label→title close) and loosen downward (body→link open)
10 — Color interaction
1. Pink is the world
The Store.
Everything lives on pink. All body text, all titles, all UI — kobalt on pink is the default.
Tue–Sat 10:00–18:00
2. Kobalt is the voice
Friday Talk
All typography is kobalt (#0000A5). On pink and on surface. Kobalt is never a background — it is always the letter.
28 Mar 2026 · 19:00
3. Red is the emphasis
Denim City AMS
A few words turn red within kobalt text. Strictly offline. Never a background, never a title — always an accent within a sentence.
4. White is the light
Brighter Blue
Display type at 48px+ goes white on pink, surface, indigo, or black. The fresh element. Never at body size — it disappears.
5. Indigo is the depth
Denim City
White display on indigo. Rare — special moments only.
6. Kobalt on indigo
Denim City
Kobalt display on indigo. Rare — special moments only.
7. Black is the formal
Denim City
When color is not available. Print, stamps, favicon.
Backgrounds: pink, surface, indigo, black
Never as background: kobalt, red
Kobalt (#0000A5): always a type color, never a fill
Red (#FF2B2B): always an accent within text, never standalone
White (#FFF): display type (48px+) on any background
Rule: never more than 3 colors in any viewport
11a — Full section mock — image on pink
Academy
Make your own jeans.
If you find us, you book. 90% of the time. Five days, one pair of jeans. Your own hands, from pattern to finish. A pair of jeans that fits the way nothing off a rack ever will.
→ View all courses
Image bg: #F5D0CB (surface pink)
Photo sits in: the same warmth as the page
Effect: continuous, immersive — no separation
11b — White image frame
White frame: outline: 4px solid #FFFFFF
Usage: image frame only — never as background fill
When to use: when image tones are close to pink and need edge definition
When not to use: when contrast between image and pink is already high
11c — Section mock values
Label: Apercu Mono 400 / 12px / uppercase / 0.1em
Title: Topol 700 / 56px / 1.1 / -0.01em / uppercase
Body: Apercu Pro 400 / 16px / 1.6 / sentence case
Link: Apercu Pro 400 / 14px / uppercase / 0.06em
Grid split: 45% text / 55% image
Text column gap: 48px right padding
Label → Title: 12px
Title → Body: 24px
Body → Link: 32px
12a — Core palette — backgrounds
DC Pink
#FFE0DB
DC Surface
#F5D0CB
Indigo
#101A38
Pink (#FFE0DB): the world — the default background
Surface (#F5D0CB): cards, panels, deeper pink for layering
Indigo (#101A38): depth — special moments, rare
These are surfaces: things live on them
12a+ — Core palette — type colors
072C
#0000A5
Denim White
#FFFFFF
Denim Black
#000000
DC Red
#FF2B2B
072C (#0000A5): the voice — all body text, titles, UI, the default
Denim White (#FFF): the light — display type (48px+) on any background
Denim Black (#000): the weight — display type (48px+), architectural
DC Red (#FF2B2B): the emphasis — AMS, accent phrases, pills, hover. Never standalone
These are letters: they live on surfaces
12b — Blue Hues — institutional spectrum
Denim Black
#000000
Denim Dark Blue
#101A38
Denim Electric Blue
#0000A5
DC Kobalt
#0000A5
Denim Light Blue
#3E8BF7
Denim White
#FFFFFF
Source: 2018 Denim City Style Guide v.02 — Main Palette Blue Hues
Denim Black (#000): logotype negative, high contrast
Denim Dark Blue (#101A38): indigo — kobalt type on indigo bg for special moments
Denim Electric Blue (#0000A5): institutional, Pantone Blue 072C
DC Kobalt (#0000A5): primary — all typography, the default
Denim Light Blue (#3E8BF7): Pantone 2935C — digital accent, sparingly
Denim White (#FFF): display type + frames — the fresh element
Principle: choose contrasting blues for playful combinations (2018 guide)
12c — Location accents
AMS — Brick Red
#FFE0DB / #FF2B2B
SP — Bahia Green
#DBEBE7 / #90EB8F
IST — TBD
TBD
Principle: background color identifies the location before you read a word
AMS: pink background + red accent (active)
SP: green background + green accent
IST: to be determined
Rule: do not mix location palettes — one location per page/post
13 — Components
Location pills
font: Apercu Pro / 12px / uppercase / 0.06em
padding: 2px 10px
border: 1px solid #0000A5
border-radius: 999px
active: bg #FF2B2B, text white, border #FF2B2B
hover: border #FF2B2B, text #FF2B2B
Arrow links
→ Explore the store
→ Explore the store
font: Apercu Pro / 14px / uppercase / 0.06em
default: #0000A5
hover: #FF2B2B
prefix: → (always present, not just on hover)
rule: no filled buttons anywhere on the homepage
Section divider + rotated label
Store
Section content begins here
line: 1px solid #0000A5, full viewport width
margin: none — the line is the spatial signal
label column: 48px wide
label: Apercu Pro / 14px / uppercase / 0.06em / vertical-rl
Agenda card
28 Mar 2026
Friday Talk: The Future of Natural Indigo
Strictly offline
→ More info
background: #F5D0CB (surface)
border: 1px solid #0000A5
border-radius: 0
padding: 24px
date: Apercu Mono / 12px / uppercase
title: Apercu Pro / 16px
tag: Apercu Mono / 11px / muted
14 — Clip text — photo through letters
font-family: Topol 700
font-size: clamp(80px, 12vw, 160px)
line-height: 0.85
letter-spacing: -0.03em
text-transform: uppercase
technique: background-clip: text — photo visible through letterforms
background-image: url(’../LEX11796-2.jpg’)
background-size: cover
background-position: center
-webkit-background-clip: text
-webkit-text-fill-color: transparent
When to use: hero moments, social posts — max 1 per 9 in a grid
When not to use: body text, small scale — minimum 80px to read the photo
Photo: high-contrast denim imagery works best
15 — Do’s and don’ts
Do
- Use Topol at display scale (32px and above) for structure and headlines
- Use Apercu Pro Regular at 16px for body copy in sentence case
- Use Apercu Mono at 12px for metadata, dates, times, and specs
- AMS always in Apercu Mono — typeface distinguishes context from name
- Left-align pull quotes — they carry voice, not decoration
- Maintain the uppercase/sentence case boundary at 16px
- Use bold+regular mixed weight in pull quotes to emphasize the key phrase
- Keep compositions to 2 type families maximum
- Use Apercu Pro Italic for testimonials to signal “someone else is speaking”
- White type only at display scale (48px+), never at body size
- Kobalt on indigo only for special moments, max 1 per 12 posts
- The logo is a system: DENIM CITY (Topol) + context (Mono) — typeface distinguishes, not scale
Don’t
- Never use Topol at body scale (16px or below) — it loses its architectural quality
- Never use Mono for titles — it is factual, not structural
- Never set AMS in Topol — AMS is always Apercu Mono
- Never center pull quotes — centered reads as decoration, not voice
- Never use sentence case at display scale (except body copy at 16px)
- Never mix more than 2 type families in one composition
- Never set testimonials in bold — italic separates visitor voice from brand voice
- Never use Apercu Pro Bold for body copy — bold is reserved for pull quotes at display scale
- Never introduce a typeface outside this system
- No colored background blocks as layout device — no Mondrian
- Never use white type at body size (16px) — unreadable on pink
