← All foundations
Typography

Satoshi, one family, nine steps

Display and body are the same face. That single-family austerity is the brand’s own decision, not an oversight. This card renders the real cuts shipped in fonts/ — if the specimens below look like a system sans, the @font-face binding in colors_and_type.css has broken.

Family and fallbacks

Bound in colors_and_type.css from fonts/Satoshi-*.woff2 with .woff fallbacks. The mono stack is used only for token readouts and code, never for brand copy.

--font-sans Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif
--font-mono ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

Production uses only 400 and 700. The package binds real Light, Medium and Black cuts so nothing is faux-weighted, but designs should stay on 400/700 to match the shipped site.

Glyph set — real cut check

Satoshi’s single-storey a and flat-topped t are the quickest tell that the real face loaded.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ # % → — •

Weights shipped in fonts/

Satoshi Light — 300Satoshi-Light.woff2 · package only
Satoshi Regular — 400Satoshi-Regular.woff2 · production body
Satoshi Italic — 400Satoshi-Italic.woff2 · package only
Satoshi Medium — 500Satoshi-Medium.woff2 · package only
Satoshi Bold — 700Satoshi-Bold.woff2 · production headings, buttons, labels
Satoshi Black — 900Satoshi-Black.woff2 · package only

The scale

Named heading sizes come from the production Tailwind @theme block; the steps below --text-heading-sm are measured from the rendered site.

Build it once. Build it right. --text-heading-lg
56px / 130% / 700
hero headline, xl only
Words of appreciation --text-heading-md
44px / 115% / 700
section heading
Our expertise --text-heading-sm
32px / 110% / 700
eyebrow + lead pair, mobile hero
15+ --text-stat
36px / 40px / 700
stat figures
Cloud & DevOps --text-lg
24px / 32px
subsection heading, card title
Thank you for the feedback and for choosing to grow with us. --text-md
20px / 28px
intro copy
Yaroslav Zhmayev --text-sm
18px / 28px
names, labels
We scope, price and warranty the work before it starts, then hand you a plan with milestones you can hold us to. --text-base
16px / 24px
body and every button
14 Aug 2026 · 6 min read --text-caption
14px / 20px
captions, form labels

The eyebrow — the one signature move

A bold violet line stacked with a larger light lead line, opening nearly every section. Source: services/heading.astro, homepage/expertise.astro. It is one sentence broken across two colors — never two sentences. This is the system’s only typographic flourish; do not add a second.

Our expertise is part of their success

correct — light lead first, violet line second, one sentence

We build software. We also do design.

off-system — two separate sentences, order reversed