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 is styled entirely through Tailwind CSS, extended with a small set of semantic design tokens that map directly to OS-level UI concepts — window chrome, desktop surfaces, terminal text, and interactive accents. Every visible element in the portfolio, from the taskbar gradient to the scrollbar thumb, references one of these tokens. That means rethinking the color scheme is a single-file change.

​
How Design Tokens Work in DevOS

Tailwind’s theme.extend.colors block in tailwind.config.js is where the custom os-* tokens are defined. Tailwind reads these at build time and generates every utility class — bg-os-teal, text-os-cyan, border-os-cream, and so on — automatically. The compiled output lives in assets/main.css. 
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        "os-teal":   "#0F766E",
        "os-cyan":   "#22D3EE",
        "os-cream":  "#F5F1E8",
        "os-window": "#FFFFFF",
        "os-dark":   "#111827",
        "os-accent": "#14B8A6",
      },
    },
  },
}

​
Core Color Tokens

TokenHexRole
os-teal#0F766EPrimary brand/accent — window title bars, borders, focus states
os-cyan#22D3EEHighlight — active icon tint, taskbar start button, clock
os-cream#F5F1E8Desktop background and window chrome
os-window#FFFFFFWindow content area background
os-dark#111827Default body text color
os-accent#14B8A6Terminal text color, boot screen text, animation accents

​
The Desktop Pattern

The dotted OS background is a single CSS class, bg-desktop-pattern, defined directly in main.css: 
.bg-desktop-pattern {
  background-image: radial-gradient(#0F766E22 1px, transparent 1px);
  background-size: 20px 20px;
}
The color #0F766E22 is os-teal at roughly 13% opacity. Changing os-teal in your config and rebuilding automatically updates the dot color. You can also edit the 22 alpha suffix or the 20px 20px grid pitch independently in main.css to change dot density without touching the color system.

​
Custom Cursors

DevOS ships with two custom cursor shapes defined as inline SVG url() data URIs in main.css:
  • Default cursor — a teal arrow SVG (fill: #0F766E, stroke: #FFFFFF) applied to body.
  • Pointer cursor — a teal crosshair SVG (fill: #14B8A6, stroke: #FFFFFF) applied via the .cursor-pointer utility.
/* Default arrow — body */
body {
  cursor: url("data:image/svg+xml;utf8,<svg ... fill='%230F766E' stroke='%23FFFFFF' ...>
    <path d='m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/>
  </svg>"), auto;
}

/* Pointer crosshair — .cursor-pointer */
.cursor-pointer {
  cursor: url("data:image/svg+xml;utf8,<svg ... fill='%2314B8A6' stroke='%23FFFFFF' ...>
    <path d='M14 4.1 12 6M4.1 14l1.9-2 ...'/>
  </svg>"), pointer;
}
The hex values in the SVG are percent-encoded (%23 = #). If you change os-teal or os-accent, update these inline data URIs manually — they are not driven by Tailwind variables.

​
How to Retheme DevOS

  1. Open tailwind.config.js and change any os-* hex values under theme.extend.colors.
  2. Rebuild the CSS:
npm run build
  1. Optionally update the two inline SVG cursor data URIs in main.css to match your new brand color.
  2. If you changed os-teal, also update the #0F766E22 stop in the bg-desktop-pattern rule.
Changing os-teal is the highest-leverage edit in the entire design system — it simultaneously updates every window title bar, taskbar gradient, border, focus ring, scrollbar thumb, and icon tint. It is the single primary brand token for DevOS.

Build docs developers (and LLMs) love

Get started for freeTalk to us