Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-os/llms.txt

Use this file to discover all available pages before exploring further.

DevOS uses three purpose-built font families, each assigned to a distinct layer of the interface: system UI chrome, code and terminal output, and long-form reading content. All three are loaded from Google Fonts via a single @import statement at the top of main.css, and each is exposed as a Tailwind utility class for use anywhere in the component tree.

​
Google Fonts Import

The entire font stack is fetched in one request: 
/* assets/main.css */
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700
  &family=JetBrains+Mono:wght@400;500
  &family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400
  &display=swap";
The display=swap parameter means text renders immediately in a system fallback while the custom fonts load, preventing invisible-text flashes during boot.

​
The Three Font Families

​
font-ui — Inter

Inter is the UI system font. It covers all interactive and navigational text across the OS shell. 
.font-ui {
  font-family: Inter, sans-serif;
}
Loaded weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold).

​
font-code — JetBrains Mono

JetBrains Mono is the monospace font for everything that resembles a terminal or code editor — including the skill progress bars, which use it to reinforce a dev-tool aesthetic. 
.font-code {
  font-family: JetBrains Mono, monospace;
}
Loaded weights: 400 (regular), 500 (medium).

​
font-serif — Source Serif Pro

Source Serif Pro handles all long-form reading contexts inside the portfolio. Its italic variant is used for bylines and pull quotes. 
.font-serif {
  font-family: Source Serif Pro, serif;
}
Loaded variants: 400 regular, 600 semibold, 400 italic.

​
Where Each Font Is Used

ClassFontUsed in
font-uiInterTaskbar, window title bars, menus, desktop icon labels
font-codeJetBrains MonoTerminal app, skills percentage bars, Notepad status bar
font-serifSource Serif ProArticles reader, About bio tab, case study document body

​
Changing the Font Stack

To swap any of the three families:
  1. Replace the relevant family in the Google Fonts @import URL inside main.css.
  2. Update the fontFamily values in tailwind.config.js so the utility classes resolve to the new family:
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        ui:    ["Inter", "sans-serif"],
        code:  ["JetBrains Mono", "monospace"],
        serif: ["Source Serif Pro", "serif"],
      },
    },
  },
}
  1. Rebuild with npm run build.
All three fonts are loaded together in a single Google Fonts @import request. There is no performance penalty for including all three even if a given page only uses one — the browser fetches only the font files it actually renders, on demand.

Build docs developers (and LLMs) love

Get started for freeTalk to us