# Desktop.fm — Style Reference
> Operating System Interface — clean-cut, functional, and digital.
**Theme:** light
This design system evokes a sense of digital minimalism, like an operating system interface. It uses a predominantly achromatic palette with subtle gradients on surfaces, creating depth without heavy shadows. The overall feel is one of understated functionality and quiet efficiency, utilizing precise typography and a singular vibrant accent for interactive elements.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Cloud Cover | `#f1f2f3` | `--color-cloud-cover` | Page backgrounds, neutral surfaces. |
| Graphite | `#111111` | `--color-graphite` | Primary text, prominent UI elements. High contrast for readability. |
| Light Steel | `#dddddd` | `--color-light-steel` | Button backgrounds, light interactive states. |
| Snow | `#ffffff` | `--color-snow` | Text on dark backgrounds, selected icons. |
| Dark Slate | `#2d2d2d` | `--color-dark-slate` | Secondary text, backgrounds for dark components, internal card surfaces. Offers good contrast against Snow. |
| Mid Grey | `#b4b4b4` | `--color-mid-grey` | Button backgrounds for less prominent actions. |
| Ash | `#777777` | `--color-ash` | Subtle stroke and icon details. |
| Neon Green | `#009942` | `--color-neon-green` | Accents for decorative elements and visual interest. Its vividness pops against the neutral palette. |
## Tokens — Typography
### -apple-system — Primary typeface for all UI text, headings, and buttons. Variable letter spacing maintains visual density across sizes, making UI feel compact and precise. · `--font-apple-system`
- **Substitute:** system-ui, sans-serif
- **Weights:** 500, 700, 800
- **Sizes:** 12px, 16px, 18px, 28px
- **Line height:** 1.25
- **Letter spacing:** -0.432, -0.256, -0.288, -1.008
- **Role:** Primary typeface for all UI text, headings, and buttons. Variable letter spacing maintains visual density across sizes, making UI feel compact and precise.
### monospace — Used for specific technical or code-like elements, offering a distinct visual break. The bold weight ensures it remains legible at small sizes. · `--font-monospace`
- **Substitute:** Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
- **Weights:** 800
- **Sizes:** 12px
- **Line height:** 1.25
- **Role:** Used for specific technical or code-like elements, offering a distinct visual break. The bold weight ensures it remains legible at small sizes.
## Tokens — Spacing & Shapes
**Density:** compact
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 20 | 20px | `--spacing-20` |
| 30 | 30px | `--spacing-30` |
### Border Radius
| Element | Value |
|---------|-------|
| cards | 25px |
| buttons | 20px |
| default | 1.5px |
### Layout
- **Section gap:** 30px
- **Card padding:** 0px
- **Element gap:** 2px
## Components
### Info Button
**Role:** Utility button
Circular button with a 50% border radius acting as an info icon. Background: Light Steel (#dddddd), text: Graphite (#2d2d2d). No internal padding specified, implies icon fitting tightly.
### Selected Info Button
**Role:** Active utility button
Circular button with a 50% border radius for active states. Background: Mid Grey (#b4b4b4), text: Snow (#ffffff). No internal padding, indicates a toggle or enabled state.
### Main Card
**Role:** Content container
A light content container with Cloud Cover (#f1f2f3) background and a 25px border-radius. Features a prominent shadow: rgba(51, 51, 51, 0.1) 0px 0px 40px 0px, suggesting an elevated, floating presence on the page.
## Do's and Don'ts
### Do
- Prioritize the achromatic palette with Cloud Cover (#f1f2f3) as background and Graphite (#111111) as primary text for core content.
- Apply a 25px border-radius to all primary content cards, reinforcing the soft, digital aesthetic.
- Use the specific letter-spacing values from the -apple-system font profiles (-0.0360em at 12px, -0.0160em at 16px, etc.) for all text to maintain visual density.
- Implement the rgba(51, 51, 51, 0.1) 0px 0px 40px 0px shadow for all elevated card components to create subtle depth.
- Reserve Neon Green (#009942) exclusively for decorative elements or non-critical accents in illustrations and icons.
- Use Dark Slate (#2d2d2d) for primary call-to-action buttons, with 5px vertical and 20px horizontal padding and 20px border-radius.
### Don't
- Avoid strong, saturated colors outside of the designated accent palette; maintain the dominant neutral scheme.
- Do not deviate from the specified border radii; avoid sharp corners or excessively rounded elements beyond the 20px/25px standard.
- Do not use generic shadows; adhere strictly to the defined card shadow for all elevated elements.
- Avoid large negative letter spacing on display type; only apply the precisely defined values for -apple-system.
- Do not introduce additional font families; stick to -apple-system (or its system-ui substitute) and monospace.
- Do not use more than two distinct button styles on a single screen without a clear hierarchy.
## Imagery
The site uses abstract 3D renders with strong reflections and geometric light lines. The central image of a reflective silver CD-ROM, bathed in dynamic blue-green light, is surrounded by thin, vivid Neon Green (#009942) laser-like lines that crisscross the background. Imagery serves a decorative and atmospheric role, establishing a futuristic, tech-oriented mood without direct product representation. The treatment is full-bleed for the background element, with a contained, center-stage main object.
## Layout
The layout is primarily centered and minimal, focusing on a single hero element. The page operates on a full-bleed model with a light gray background, presenting a single focal point (the 3D CD render) with interactive elements centered beneath it. Elements are stacked vertically with compact spacing, creating a dense yet clean presentation. There is no visible navigation or complex grid structure, suggesting a single-purpose landing page rather than a multi-page site.
## Agent Prompt Guide
### Quick Color Reference
- Text: #111111 (Graphite)
- Background: #f1f2f3 (Cloud Cover)
- CTA Background: #2d2d2d (Dark Slate)
- CTA Text: #ffffff (Snow)
- Accent: #009942 (Neon Green)
### 3-5 Example Component Prompts
1. Create a primary call to action button: 5px vertical padding, 20px horizontal padding, 20px border-radius, background Dark Slate (#2d2d2d), text Snow (#ffffff) in -apple-system 500, letter-spacing -0.256px (for 16px font).
2. Generate a main content card: background Cloud Cover (#f1f2f3), 25px border-radius, box-shadow rgba(51, 51, 51, 0.1) 0px 0px 40px 0px, with internal text Graphite (#111111) in -apple-system 500.
3. Design a small info button: circular (50% border radius), background Light Steel (#dddddd), text Graphite (#2d2d2d) in -apple-system 500. No specific padding.
## Similar Brands
- **Linear** — Shares a highly constrained achromatic palette with a single vibrant accent color and precise, compact typography.
- **Dropbox (new branding)** — Uses subtle shadows and rounded corners on cards combined with a light, airy, and functional aesthetic.
- **Raycast** — Features a strong focus on minimalist UI, functional iconography, and a digital tool aesthetic.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-cloud-cover: #f1f2f3;
--color-graphite: #111111;
--color-light-steel: #dddddd;
--color-snow: #ffffff;
--color-dark-slate: #2d2d2d;
--color-mid-grey: #b4b4b4;
--color-ash: #777777;
--color-neon-green: #009942;
/* Typography — Font Families */
--font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-monospace: 'monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Typography — Scale */
--text-xs: 12px;
--leading-xs: 1.25;
--text-base: 16px;
--leading-base: 1.25;
--text-lg: 18px;
--leading-lg: 1.25;
--text-2xl: 28px;
--leading-2xl: 1.25;
/* Typography — Weights */
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Spacing */
--spacing-5: 5px;
--spacing-8: 8px;
--spacing-10: 10px;
--spacing-20: 20px;
--spacing-30: 30px;
/* Layout */
--section-gap: 30px;
--card-padding: 0px;
--element-gap: 2px;
/* Border Radius */
--radius-sm: 1.5px;
--radius-xl: 13px;
--radius-2xl: 20px;
--radius-3xl: 25px;
/* Named Radii */
--radius-cards: 25px;
--radius-buttons: 20px;
--radius-default: 1.5px;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-cloud-cover: #f1f2f3;
--color-graphite: #111111;
--color-light-steel: #dddddd;
--color-snow: #ffffff;
--color-dark-slate: #2d2d2d;
--color-mid-grey: #b4b4b4;
--color-ash: #777777;
--color-neon-green: #009942;
/* Typography */
--font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-monospace: 'monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Typography — Scale */
--text-xs: 12px;
--leading-xs: 1.25;
--text-base: 16px;
--leading-base: 1.25;
--text-lg: 18px;
--leading-lg: 1.25;
--text-2xl: 28px;
--leading-2xl: 1.25;
/* Spacing */
--spacing-5: 5px;
--spacing-8: 8px;
--spacing-10: 10px;
--spacing-20: 20px;
--spacing-30: 30px;
/* Border Radius */
--radius-sm: 1.5px;
--radius-xl: 13px;
--radius-2xl: 20px;
--radius-3xl: 25px;
}
```

organized desktop, clean and bright
Minimalist digital console.

Deep-space observatory control…

Midnight Grid Console — where…
etched digital blueprint
Digital Blueprint on Vellum
Architectural blueprint on white…
High-contrast digital command…
Wireframe on parchment
Sky-bound clarity
Digital engineering lab

High-contrast geometric clarity

Minimalist digital gallery

Architectural blueprint on soft…

Celestial Command Center: A dark,…

Architectural Blueprint on White…
Architectural blueprint on…
Architectural blueprints on…
Monochromatic architectural…
Warm earth against dark steel