Typography
One scale, two names. Every Cloaked type style has an internal name used
on web and in Figma, and an iOS Dynamic Type alias used on-device. This
page is the canonical translation between them.
Faces
Three families, four surfaces
STK Bureau Sans is the Cloaked workhorse — dashboard, marketing, and
every Figma mock. SF Pro takes over on iOS so the interface matches
the operating system. Roboto plays the same role on Android. All three
surfaces share the same size and weight tokens; only the family
underneath changes.
Weights
Five weights ship with STK Bureau Sans. In product we lean on Medium,
SemiBold and Bold; Book is for editorial long-form on marketing only.
Book300
Regular400
Medium500
SemiBold600
Bold700
Name mapping
Cloaked ↔ iOS Dynamic Type
Designers reach for the Cloaked names (Headline 2, Semibold, 32px)
when mocking in Figma. Engineers reach for the iOS names
(.title1, .body) when implementing natively.
Every row here is the same text style rendered both ways so the handoff
is unambiguous.
Big Heading · 60 / SemiBold
Big Heading
Called them to
Big Heading, Emphasized (Semibold)
Big Heading
Numbers · 90 / Medium
1,248
Called them to
Headline 1 · 48 / Medium
Large Title
Called them to
Large Title, Emphasized (Bold)
Large Title
Headline 2 · 32 / SemiBold · H2.5 · 29 / SemiBold
Title 1
Title 1
Called them to
Title1, Emphasized (Semibold)
Title 1
Headline 2 · 32 / Regular · H2.5 · 29 / Regular
Title 1
Title 1
Called them to
Headline 3 · 24 / Bold
Title 2
Called them to
Title2, Emphasized (Bold)
Title 2
Headline 3 · 24 / Medium
Title 2
Called them to
Headline 4 · 20 / Bold
Title 3
Called them to
Title3, Emphasized (Semibold)
Title 3
Headline 4 · 20 / Medium
Title 3
Called them to
Headline 5 · 18 / Bold
Headline
Called them to
Headline, Emphasized (Semibold)
Headline
Headline 5 · 18 / Regular
Headline
Called them to
Headline, Regular
Headline
Headline 6 · 16 / Bold
Body
Called them to
Body, Emphasized (Semibold)
Body
Headline 6 · 16 / Medium
Body
Called them to
Body 2 · 15 / SemiBold
Callout
Called them to
Callout, Emphasized (Semibold)
Callout
Link / Inline CTA · 15 / SemiBold
Learn more
Called them to
Callout, Inline (Semibold)
Learn more
Body 3 · 14 / SemiBold
Subhead
Called them to
Subhead, Emphasized (Semibold)
Subhead
Body 3 · 14 / Regular
Subhead
Called them to
Body small · 13 / SemiBold
Footnote
Called them to
Footnote, Emphasized (Semibold)
Footnote
Body small · 13 / Medium
Footnote
Called them to
Footnote, Regular
Footnote
Link / Inline CTA · 13 / Medium
View details
Called them to
Footnote, Inline (Medium)
View details
Caption · 12 / Bold · Label · 12 / SemiBold
Caption
Label
Called them to
Caption1, Emphasized (Medium)
Caption 1
Caption · 12 / Medium · Link · 12 / Medium
Caption
Learn more
Called them to
Caption1, Regular
Caption 1
Label · 11 / Medium
Micro label
Called them to
Caption2, Regular
Caption 2
Why two names?
iOS Dynamic Type sizes come from Apple — they scale with the user's
accessibility settings. Cloaked's internal names are pixel-specific so
designers can be exact in Figma. On web, always cite the Cloaked name.
On iOS, always cite the Dynamic Type name. Never mix them in a single
spec.
Platform stack
Which family runs where
The name mapping above is the same in every surface — only the
underlying family swaps.
Guidance
How we use type
Do
Your address was exposed on 3 sites.
Cite the Cloaked name in web specs: Headline 3 · 24 / Bold.
Don't
Use .title2 in a web spec.
iOS names belong in the iOS codebase. Mixing them breaks the handoff and hides the actual pixel size.