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 expresses its entire visual identity through six named color tokens. Rather than scattering raw hex values across components, every color decision in the codebase references one of these tokens via a Tailwind utility class. This page documents each token’s hex value, its generated CSS, and exactly where it appears in the OS interface.

​
Full Token Reference

TokenHexUsage
os-teal#0F766EWindow title bars, taskbar gradient, borders, focus rings, icon tint
os-cyan#22D3EEActive window icon, taskbar start button highlight, cursor hover
os-cream#F5F1E8Desktop background, window chrome, scrollbar track
os-window#FFFFFFWindow content area background
os-dark#111827Default text, body color
os-accent#14B8A6Terminal text color, boot screen text, animation accents

​
Token Color Values in CSS

The compiled utility classes from main.css confirm the exact RGB triples Tailwind resolves each token to: 
/* os-teal  → rgb(15 118 110) */
.bg-os-teal  { background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); }
.text-os-teal { color: rgb(15 118 110 / var(--tw-text-opacity, 1)); }
.border-os-teal { border-color: rgb(15 118 110 / var(--tw-border-opacity, 1)); }

/* os-cyan  → rgb(34 211 238) */
.bg-os-cyan  { background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1)); }
.text-os-cyan { color: rgb(34 211 238 / var(--tw-text-opacity, 1)); }

/* os-cream → rgb(245 241 232) */
.bg-os-cream  { background-color: rgb(245 241 232 / var(--tw-bg-opacity, 1)); }

/* os-window → rgb(255 255 255) */
.bg-os-window { background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }

/* os-dark  → rgb(17 24 39) */
.text-os-dark { color: rgb(17 24 39 / var(--tw-text-opacity, 1)); }

/* os-accent → rgb(20 184 166) */
.text-os-accent { color: rgb(20 184 166 / var(--tw-text-opacity, 1)); }

​
Window Shadow System

DevOS defines two box-shadow classes for the windowing system, both using os-teal as the shadow color tint: 
/* Unfocused window */
.window-shadow {
  box-shadow:
    4px 4px #0f766e33,               /* teal drop shadow at ~20% opacity */
    0 0 15px -3px rgba(0,0,0,0.1);  /* soft ambient shadow */
}

/* Focused (active) window */
.window-shadow-focused {
  box-shadow:
    8px 8px #0f766e66,                    /* teal drop shadow at ~40% opacity */
    0 10px 25px -5px rgba(0,0,0,0.2);    /* deeper ambient shadow */
}
The offset doubles (4px → 8px) and the teal opacity doubles (33 → 66) when a window receives focus, creating a clear visual hierarchy between stacked windows.

​
Semantic Usage

Tailwind utility classes group into four semantic roles within DevOS: Primary interactive 
<div class="bg-os-teal text-white border-os-teal">
  Window title bar, taskbar, active buttons
</div>
Highlighted / active state 
<div class="bg-os-cyan text-os-cyan">
  Start button hover, active icon tint, clock highlight
</div>
Surface / background 
<div class="bg-os-cream bg-os-window">
  Desktop, window content panels, scrollbar track
</div>
Body text 
<p class="text-os-dark">
  Default text across all windows and menus
</p>

​
Transparency Variants

Tailwind’s opacity modifier syntax (token/opacity) is used throughout the codebase for overlays, hover states, and tinted surfaces. All confirmed usages from main.css:
ClassResolved colorWhere used
bg-os-teal/20#0f766e33Selected desktop icon background
bg-os-teal/80#0f766eccSemi-opaque taskbar overlays
bg-os-cyan/30#22d3ee4dActive indicator tint
border-os-teal/30#0f766e4dSubtle window border on hover
border-os-cyan/30#22d3ee4dTerminal input border
text-os-teal/50#0f766e80Muted teal label text
text-os-teal/80#0f766eccSecondary teal text
Use hover:bg-os-teal/10 on desktop icon wrappers — it resolves to #0f766e1a, a very light teal wash (~10% opacity) that gives icons a clear hover affordance without obscuring the label text underneath.

Build docs developers (and LLMs) love

Get started for freeTalk to us