Code & Craft

Developer-first design systems

Inter's systematic approach to UI typography meets JetBrains Mono's developer-focused precision. This pairing speaks the language of technical documentation, dashboards, and tools built by engineers, for engineers.

Developer-focused design system. Inter handles everything with JetBrains Mono for code snippets and technical accents.

saas uidashboardportfolio

Typefaces Used

Primarysans

Inter

The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Released 2016

Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900

Recommended Scale

Headline One

Inter · 700 · 44px · 1.15

Headline Two

Inter · 600 · 28px · 1.2

Headline Three

Inter · 600 · 20px · 1.3

Body

Body text for paragraphs and long-form content.

Inter · 400 · 16px · 1.7

Caption

Caption and metadata text

JetBrains Mono · 400 · 13px · 1.5

In Context

Design Essay · 12 min read

Code & Craft

Developer-first design systems

“First, solve the problem. Then, write the code.”
John Johnson

Developer Exports

Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">

CSS

h1 {
  font-family: "Inter", sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

h3 {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.body-text {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.caption {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

Tailwind Config

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        inter: [""Inter"", "sans-serif"],
        jetbrainsmono: [""JetBrains Mono"", "monospace"],
      },
      fontSize: {
        "h1": ["44px", { lineHeight: "1.15", fontWeight: "700" }],
        "h2": ["28px", { lineHeight: "1.2", fontWeight: "600" }],
        "h3": ["20px", { lineHeight: "1.3", fontWeight: "600" }],
        "body": ["16px", { lineHeight: "1.7", fontWeight: "400" }],
        "caption": ["13px", { lineHeight: "1.5", fontWeight: "400" }],
      },
    },
  },
};

export default config;

AI-Ready Exports

Copy these structured prompts to brief AI tools on your typography system. Paste directly into ChatGPT, Claude, or any LLM.

System Description

Explain this type system to an AI

Use this typographic system:

Headings:
  Inter, 700 weight
  Used for H1–H3
  The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Body:
  Inter, 400 weight
  Used for paragraphs and UI
  The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Tone:
  tech, minimal, modern
  Developer-focused design system. Inter handles everything with JetBrains Mono for code snippets and technical accents.

Use this scale:
  H1 — 44px / 1.15 / -0.02em
  H2 — 28px / 1.2
  H3 — 20px / 1.3
  Body — 16px / 1.7
  Caption — 13px / 1.5

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Inter — 700 — 44px — line-height 1.15 — letter-spacing -0.02em
H2 — Inter — 600 — 28px — line-height 1.2
H3 — Inter — 600 — 20px — line-height 1.3
Body — Inter — 400 — 16px — line-height 1.7
Caption — JetBrains Mono — 400 — 13px — line-height 1.5

Headings should feel tech and minimal.
Body text should feel readable and modern.

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.