Typography & Fonts

Keythings uses a single, shared typography system across the browser extension, example dapp, documentation site, and mobile wallet. The goal is to keep text crisp and familiar on every platform while staying future-proof for the Inter type family.

Primary Sans-Serif Stack

All product surfaces share the same primary sans-serif stack. Inter is the first choice when available, and we intentionally fall back to the native system UI font on each platform (SF Pro, Segoe UI, Roboto, etc.).

--font-sans: 'Inter', system-ui, -apple-system, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

Where this is used

• Extension wallet (monorepo): body and .popup-root usevar(--font-sans), so the popup UI is Inter + system by default.
• Example dapp: the app layout uses Tailwind's font-sans, which is backed by --font-sans.
• Docs site: navigation chrome and UI components use font-sans with the same stack.
• Mobile wallet: uses the native platform sans (SF Pro / Roboto) today, with a roadmap to optionally bundle Inter as a custom font in the future.

Monospace Stack

For code, addresses, and hashes we use JetBrains Mono where available, with a familiar monospace fallback stack. This keeps developer content highly readable while matching the overall brand tone.

--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

Type Roles & Scale

Across products we reuse a small, consistent set of type roles. Exact Tailwind classes may vary by surface, but the intent stays the same:

• Page Title: large, bold (e.g. text-4xl font-bold on the web).
• Section Title: medium heading (e.g. text-xl font-semibold).
• Body: default copy (e.g. text-base or text-sm).
• Caption / Meta: small supporting text (e.g. text-xs).
• Numeric / Balance: larger numerals using the same sans stack for consistency.

The browser extension and example dapp apply these roles with Tailwind classes. The mobile wallet mirrors the same hierarchy with React Native fontSize / fontWeight settings using the system font.

Implementation Guidelines

• Always use --font-sans / --font-mono (or the corresponding Tailwind utilities) instead of hard-coding font-family values.
• Prefer semantic roles (page title, section title, body, caption) over ad-hoc sizes when adding new UI.
• Keep addresses, hashes, and code in monospace to preserve alignment and legibility.
• On mobile, treat the platform system font as the "Inter" equivalent until we explicitly ship bundled Inter font files.