---
version: alpha
name: Desktop FM
description: Toy-like, tactile minimalism — a flat slate-gray canvas with soft rounded "app card" surfaces, electric-blue accent, chunky 700-800 weight system type with tight negative tracking, and oversized squircle radii (25px cards, 20px buttons) that make the whole interface feel like a single physical object you can press.

colors:
  # Canvas + ink
  background: "#bec2c4"
  surface: "#dddddd"
  surface-dark: "#2d2d2d"
  ink: "#111111"
  ink-soft: "#2d2d2d"
  ink-on-canvas: "#f1f1f1"      # white @ 79% flattened over #bec2c4

  # Accent
  primary: "#0059ff"
  on-primary: "#ffffff"

  # Buttons
  button-secondary-bg: "#b5adad"
  button-secondary-hover: "#949494"
  pill-action-bg: "#dddddd"

  # Neutrals
  gray-700: "#333333"
  gray-500: "#949494"
  gray-400: "#b4b4b4"
  gray-300: "#cccccc"
  white: "#ffffff"

typography:
  display-title:
    fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, sans-serif"
    fontSize: 28px
    fontWeight: 800
    lineHeight: 1.10
    letterSpacing: -1px
  heading:
    fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: -0.5px
  button-label:
    fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -0.25px
  body:
    fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  pill-label:
    fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 7px
  md: 10px
  lg: 20px
  xl: 30px
  2xl: 40px

rounded:
  sm: 10px
  md: 13px
  lg: 20px
  xl: 25px
  circle: 9999px

components:
  # Primary dark action button
  button-primary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-label}"
    rounded: "{rounded.lg}"
    padding: 5px 20px
    height: 55px

  # Secondary muted button
  button-secondary:
    backgroundColor: "{colors.button-secondary-bg}"
    textColor: "{colors.ink}"
    typography: "{typography.button-label}"
    rounded: "{rounded.lg}"
    padding: 5px 20px
    height: 55px
  button-secondary-hover:
    backgroundColor: "{colors.button-secondary-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-label}"
    rounded: "{rounded.lg}"
    padding: 5px 20px
    height: 55px

  # The signature app-card surface
  landing-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.display-title}"
    rounded: "{rounded.xl}"
    padding: 10px

  # Floating header pill above the card
  header-pill:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.white}"
    typography: "{typography.pill-label}"
    rounded: "{rounded.md}"
    height: 26px
    padding: 0px 10px

  # Circular icon action button
  header-action:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.circle}"
    width: 26px
    height: 26px

  # Card title
  card-title:
    textColor: "{colors.ink-soft}"
    typography: "{typography.display-title}"
---

# Desktop FM Design System

## Overview

Desktop FM is a virtual-presence product ("Virtual interhuman connection") whose interface looks less like a website and more like a single physical object resting on a desk. The page is built on a flat, desaturated slate-gray canvas (`{colors.background}`) — no white, no gradient, just a calm neutral plane that lets one rounded "app card" float at the center of attention. Everything about the system is tactile and toy-like: oversized squircle radii, chunky type, and a button that visibly scales down when you press it.

The hero of the system is the landing card (`{components.landing-card}`) — a light `{colors.surface}` panel with a deep 25px corner radius and a soft ambient shadow (`0 0 40px rgba(51,51,51,.1)`) that makes it read as a hovering, pressable surface. Above it sits a floating dark header pill and a small circular icon action, the same vocabulary you'd find in a native app's title bar. The whole composition is centered, contained, and self-aware of being an interface-as-product.

Typography is unapologetically heavy. Desktop FM leans on the system font stack at 700-800 weights with tight negative tracking (`-1px` on the 28px title), giving headings a stout, friendly, almost rounded-button feel. There's no light text for display — weight IS the brand. Body copy sits at a comfortable 18px / weight 500, and tiny header pills use bold 12px uppercase-feeling labels.

Color is disciplined: a single electric blue (`{colors.primary}`) carries every accent, selection highlight, and spinner. Against the gray canvas, white text is rendered at ~79% opacity for a soft, non-harsh read (flattened to `{colors.ink-on-canvas}`), while on the light card surface text drops to near-black `{colors.ink}`. Buttons come in exactly two flavors — a confident dark `{colors.surface-dark}` primary and a muted dusty `{colors.button-secondary-bg}` secondary.

**Key Characteristics:**
- Flat slate-gray canvas (`{colors.background}`) — no white background anywhere
- Oversized squircle radii: 25px cards, 20px buttons, 13px pills, full circles for icons
- Heavy system-font type at 700-800 weight with tight negative tracking
- Single electric-blue accent (`{colors.primary}`) for selection, spinner, focus
- Interface-as-object: a floating app card with its own header pill and icon actions
- Press feedback (`transform: scale(.98)` on `:active`) — buttons feel physical
- White text rendered at ~79% opacity on canvas for soft contrast
- Ambient soft shadow (`0 0 40px rgba(51,51,51,.1)`) instead of hard borders

## Colors

### Canvas & Ink
- **Slate Canvas** (`{colors.background}`): The flat page background. Calm, desaturated gray.
- **Card Surface** (`{colors.surface}`): The light panel of the floating landing card.
- **Surface Dark** (`{colors.surface-dark}`): Dark header pill and primary button fill.
- **Ink** (`{colors.ink}`): Near-black text on the light card surface.
- **Ink Soft** (`{colors.ink-soft}`): Slightly softer dark for titles and the header pill.
- **Ink on Canvas** (`{colors.ink-on-canvas}`): White text @ ~79% opacity flattened over the gray canvas.

### Accent
- **Electric Blue** (`{colors.primary}`): The single accent — selection highlight, spinner, focus context.
- **On Primary** (`{colors.on-primary}`): White text on the dark primary button.

### Buttons
- **Secondary Fill** (`{colors.button-secondary-bg}`): Dusty muted gray for the secondary button.
- **Secondary Hover** (`{colors.button-secondary-hover}`): Darker gray on hover.
- **Pill Action Bg** (`{colors.pill-action-bg}`): Light fill for circular icon actions.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Spinner accent in dark contexts.
- **Gray 500** (`{colors.gray-500}`): Hover state, muted dividers.
- **Gray 400** (`{colors.gray-400}`): Inner card accent placeholder.
- **Gray 300** (`{colors.gray-300}`): Subtle separators.

## Typography

### Font Family
- **Primary**: native system stack — `-apple-system, system-ui, BlinkMacSystemFont, sans-serif`. No web font is loaded; the OS UI font IS the typeface, reinforcing the native-app feel.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-title}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-title` | 28px / weight 800 — card titles, hero impact |
| `heading` | 22px / weight 700 — section headings |
| `button-label` | 16px / weight 700 — button text |
| `body` | 18px / weight 500 — standard reading text |
| `pill-label` | 12px / weight 700 — floating header pill |

### Principles
- **Weight is the brand**: 700-800 everywhere there's emphasis. There is no light display weight.
- **Tight tracking**: Negative letter-spacing (`-1px` on titles, `-0.25px` on buttons) compresses the heavy type into stout, rounded shapes.
- **System font on purpose**: Using the OS UI font makes the web product feel like a native desktop app, matching the product's premise.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Notable: very tight component-internal gaps (5-10px) inside the card, with larger 20-40px rhythm around it.

### Grid & Container
- Single centered composition — one floating card on an empty canvas
- The card is the layout; there is no multi-column grid
- Full-viewport fixed overlay (`height: var(--vvh)`) keeps the card vertically centered on all devices

### Whitespace Philosophy
- **Object in space**: The gray canvas is intentionally empty so the single rounded card reads as a physical object.
- **Tight inside, loose outside**: Dense 5-10px gaps inside the card, generous emptiness around it.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Gray canvas |
| Ambient (Card) | `0 0 40px rgba(51,51,51,.1)` | The floating landing card |
| Backdrop Blur | `backdrop-filter: blur(60px)` | Modal/overlay state behind the card |

**Shadow Philosophy**: No hard borders anywhere. Depth comes from one soft, wide, low-opacity ambient shadow that makes the card hover, plus an optional heavy backdrop blur for overlay states. The effect is soft and physical rather than crisp and flat.

## Shapes

| Token | Value | Use |
|---|---|---|
| `sm` | 10px | Spinner, small inner elements |
| `md` | 13px | Floating header pill |
| `lg` | 20px | Buttons |
| `xl` | 25px | The landing card |
| `circle` | 50% | Icon action buttons |

Oversized squircle radii are the visual signature — nothing in the system has sharp or near-sharp corners.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.landing-card}`).

### Buttons
- **`button-primary`** — Dark `{colors.surface-dark}` fill, white text, 20px radius, 55px tall, scales to `.98` on press.
- **`button-secondary`** — Dusty `{colors.button-secondary-bg}` fill, dark text, darkens on hover.

### The Card
- **`landing-card`** — The signature surface: light `{colors.surface}` panel, 25px radius, ambient shadow, fully self-contained.
- **`header-pill`** — Dark floating pill above the card carrying a bold 12px label.
- **`header-action`** — Circular icon button beside the header pill.

### Distinctive Components
- **Press-to-scale buttons**: Every action button visibly compresses (`transform: scale(.98)`) on `:active`, giving the UI a physical, tactile response.
- **Floating header above card**: A dark pill + circular icon hover above the card like a native window title bar.
- **Bar spinner**: A 12-bar radial loading spinner tinted with the electric-blue accent.

## Do's and Don'ts

### Do
- Keep the canvas flat slate-gray (`{colors.background}`) — never white
- Use oversized squircle radii (20-25px) on cards and buttons
- Use heavy 700-800 type with tight negative tracking
- Limit accents to the single electric blue (`{colors.primary}`)
- Add press feedback (`scale(.98)`) to interactive elements
- Use soft ambient shadows instead of borders

### Don't
- Don't introduce hard 1px borders — depth is soft and shadow-based
- Don't use light font weights for display text
- Don't add a second accent color — blue carries everything
- Don't square off corners; every surface is a squircle
- Don't render white text at full opacity on the canvas — keep the ~79% softness

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Card fills most of the viewport, centered |
| Tablet | 600–1024px | Card sized to comfortable reading width |
| Desktop | >1024px | Card centered with generous surrounding canvas |

### Touch Targets
- Buttons are a generous 55px tall — comfortable tap targets
- Circular icon actions are 26px with surrounding gap
- `--vvh` custom property handles mobile dynamic viewport height

### Collapsing Strategy
- Single-card layout scales fluidly; no multi-column collapse needed
- The card stays vertically and horizontally centered at all sizes

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Desktop FM. Brand names and trademarks belong to their respective owners.