Typography
HASH Sans for everyday reading and interaction, HASH Mono for technical text, and HASH Serif for occasional editorial emphasis. Text styles combine size, line height, and letter spacing.
Apply a text style
Every size, line height, and letter spacing is one token. Set it with textStyle and the three come together.
<p className={css({ textStyle: "sm", color: "fg.body" })}>Entity type saved.</p>Typeface
Use HASH Sans (KH Teka) for fonts.display and fonts.body, and HASH Mono (KH Teka Mono) for fonts.mono. HASH Serif (KH Giga) has an extremely limited role in marketing and sales material.
Our default for headings, interface text, and body copy.
View Typeface for HASH Sans (KH Teka)Occasional quotes and editorial callouts in marketing and sales material.
View Typeface for HASH Serif (KH Giga)Code, commands, token names, and identifiers.
View Typeface for HASH Mono (KH Teka Mono)Choosing a typeface
- HASH Sans is the default for page titles, headings, body copy, navigation, labels, and actions across our products and communications.
- Serif is for selected direct quotes from people, customer testimonials, and short editorial callouts in case studies, presentations, or campaign material. Keep these passages brief and generously sized. Set attribution, supporting copy, and interface controls in HASH Sans. Reserve Serif for a deliberate editorial exception rather than a general product text style.
- Mono is for code, commands, token names, and identifiers where exact characters matter. Use HASH Sans with tabular figures for numeric columns.
KH Giga is selected explicitly in the layouts that use it. The shared fonts.display, fonts.body, and fonts.mono tokens retain their existing families.
Google Docs exception
Use Geist in Google Docs
Google Docs is a documented exception to our usual typeface rules. When creating or editing documents in Google Docs, use:
- Geist Sans in place of HASH Sans for headings, body copy, labels, and quotations.
- Geist Mono in place of HASH Mono for code, commands, and identifiers.
Keep the same hierarchy, spacing, and readability guidelines. Use paragraph styles for consistent headings and body text. This substitution applies to Google Docs; use our ordinary brand typefaces in other design work.
Font stacks
The HASH font stacks include fallbacks for when a typeface is unavailable. Copy a stack where a token cannot be used.
| Token | Stack | Copy |
|---|---|---|
fonts.display | "KH Teka", ui-sans-serif, system-ui, sans-serif | |
fonts.body | "KH Teka", ui-sans-serif, system-ui, sans-serif | |
fonts.mono | "KH Teka Mono", ui-monospace, monospace |
Scale
4xl36/46.83xl30/392xl24/33.6xl20/28lg18/27base16/24sm14/22.4xs12/19.24xlPage titles on marketing pages3xlPage titles2xlSection titlesxlDialog and drawer titleslgLead paragraphsbaseLong-form readingsmDefault interface textxsSecondary text, captions, table metadata
Style
A style is a step of the scale with a job, a family, and a weight. Product titles use HASH Sans at medium with tight tracking; interface text and prose use HASH Sans; code uses HASH Mono. The occasional use of HASH Serif in marketing and sales material sits outside these product text styles.
| Role | Style | Family | Weight | Use |
|---|---|---|---|---|
| Display title | 4xl | KH Teka | 500 | Page titles on marketing pages |
| Page title | 3xl | KH Teka | 500 | Page titles |
| Section title | 2xl | KH Teka | 500 | Section titles |
| Dialog title | xl | KH Teka | 500 | Dialog and drawer titles |
| Lead | lg | KH Teka | 400 | Lead paragraphs |
| Body | base | KH Teka | 400 | Long-form reading |
| Interface | sm | KH Teka | 400 | Default interface text and labels; buttons at 500 |
| Caption | xs | KH Teka | 400 | Secondary text, captions, table metadata |
| Code | sm | KH Teka Mono | 400 | Code, commands, token names, and IDs |
- Use sentence case for headings, labels, and actions.
- Use tabular figures for numbers in columns.
- Mono is for code and identifiers, rather than dates, counts, or names.
- Links and rows change color on hover. Keep another visible cue, such as a link icon, where needed.
Type color
Choose type color for legibility first. Keep running text neutral; hierarchy comes from size, weight, and position. Color marks links, the primary action, and status. See Colors for the palettes.
Entity types describe the shape of the data they hold.
fg.body.A pink sentence for no reason.
fg.link for links, with the icon in the same color.Unable to save. Check your connection and try again.
status.error.fg.body here.textStyle: "sm"fg.body.| Use | Token | Example | Rule |
|---|---|---|---|
| Titles | fg.heading | Entity type saved. | Page and section titles. |
| Running text | fg.body | Entity type saved. | Copy, labels, values. The default for everything people read. |
| Secondary text | fg.muted | Entity type saved. | Secondary text. Check contrast at the intended size; use fg.body for small text if this falls below 4.5:1. |
| Placeholders | fg.subtle | Entity type saved. | Large secondary text only when contrast is at least 3:1. Use fg.body for small hints and placeholders; they still need 4.5:1. |
| Links | fg.link | Entity type saved. | Links and nothing else. A blue word is a promise that it is clickable. |
| On a solid fill | fg.onSolid | Entity type saved. | Text on bg.solid. Never a literal white. |
| Status | status.*.fg.body | infoerrorwarningsuccess | Colored text appears in alerts, badges, and validation, from the status palettes. |
- Do not tint running text with a palette. A colored paragraph reads as an alert.
- Disabled text uses its disabled state token, rather than opacity.
- Code is
fg.bodyin KH Teka Mono. Syntax color belongs to code blocks only.
Weights
Three weight tokens. KH Teka has no separate 600 weight in the site's font set, so semibold renders as Medium.
| Token | Value | KH Teka | Use |
|---|---|---|---|
fontWeights.normal | 400 | Entities link to types | Body and interface text, captions, code. |
fontWeights.medium | 500 | Entities link to types | Buttons, labels, and headings. |
fontWeights.semibold | 600 | Entities link to types | Emphasis, rendered in KH Teka Medium. |
Leading
Six line-height tokens. Each text style also supports tight (0.9×) and loose (1.1×) leading. Use tight in dense tables; loose for long reading.
| Token | Value | Use |
|---|---|---|
lineHeights.none | 1 | Single-line labels and badges |
lineHeights.tight | 1.25 | Display titles |
lineHeights.snug | 1.375 | Headings |
lineHeights.normal | 1.5 | Interface and body text |
lineHeights.relaxed | 1.625 | Long-form reading |
lineHeights.loose | 2 | Spaced lists and legal text |
License
KH Teka and KH Teka Mono are commercial typefaces. HASH has an unlimited license for any medium and any number of users and devices, including embedded mobile and desktop applications, print, and the web. No third party is granted rights to use them.
See HASH Sans, HASH Serif, and HASH Mono for usage guidance, character sets, OpenType features, language support, and the relevant licensing notices.
Last updated on 2026-10-31
Was this page helpful?