---
title: "ToDesktop design system"
variant: extended
source: https://www.todesktop.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/todesktop-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# ToDesktop · Design System

> Crisp product UI against luminous blue gradients

**Theme:** light · **Industry:** devtools · **Source:** https://www.todesktop.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

ToDesktop pairs an airy, white SaaS landing page with a dramatic blue-gradient hero and polished software previews. Rounded calls to action, restrained typography, and product-focused sections make a technical service feel approachable.

## North star

Keep the content calm and legible on white, then use saturated blue gradients and real product UI to create focused moments of visual impact.

## Overview

The page contrasts a spacious white canvas with a dramatic, dark-to-blue gradient hero that continues into the customer-logo showcase. The gradient belongs to the visual backdrop and product presentation; the measured interface palette remains anchored by white, near-black text, muted gray, and a vivid blue CTA. Large centered headlines use Aeonik Pro with tight tracking, while Inter handles navigation, body copy, and buttons. Geist Mono marks small uppercase section labels and technical details, giving the page a subtle developer-tool character. Layout moves from a centered hero and large product preview into a compact logo band, then a generous feature-card grid. Later sections alternate broad product imagery, pricing, FAQ, and a softer Builder promotion. Rounded pills, understated hairlines, and restrained shadows keep cards and controls polished without making the mostly white sections feel dense.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and background for the navigation, feature, pricing, FAQ, and footer sections. |
| Soft Graphite | `#656565` | `--color-soft-graphite` | neutral | Muted body copy, secondary links, supporting descriptions, and lower-emphasis footer text. |
| Deep Ink | `#141414` | `--color-deep-ink` | neutral | Primary headings, navigation text, badges, and the inverse dark pricing-card surface. |
| Electric Cobalt | `#0036ff` | `--color-electric-cobalt` | brand | Primary pill-shaped trial and sign-up buttons; the key high-contrast interface accent. |
| Cloud Hairline | `#f2f2f2` | `--color-cloud-hairline` | neutral | Subtle card and badge borders, separators, and low-contrast structural edges. |
| Mint Trace | `#a6efe8` | `--color-mint-trace` | semantic | A very limited badge detail in measured content, not a defining page or brand color. |
| Link Blue | `#0093ff` | `--color-link-blue` | accent | Occasional link and inline accent text, distinct from the more common filled CTA blue. |
| Teal Marker | `#05898b` | `--color-teal-marker` | semantic | Tiny badge-level detail; treat as an incidental indicator rather than a surface color. |
| Status Red | `#ef4444` | `--color-status-red` | semantic | Small badge or interface-status detail only; not part of the page's main visual language. |
| Status Green | `#22c55e` | `--color-status-green` | semantic | Small status and badge detail, such as operational indicators, rather than a broad accent. |
| Sky Current | `#1096e5` | `--color-sky-current` | accent | Blue gradient stop used in prominent hero and product showcase backdrops. |
| Muted Pine | `#384642` | `--color-muted-pine` | neutral | Rare measured text shade; keep to isolated supporting copy rather than major headings. |
| Midnight Slate | `#242438` | `--color-midnight-slate` | surface | Dark product-card surface within interface previews, distinct from the white page canvas. |
| Blush Mist | `#fff4f4` | `--color-blush-mist` | surface | Pale tinted surface detected in a small card or gradient detail, not a recurring section band. |
| Silver Type | `#a4a4a4` | `--color-silver-type` | neutral | Low-emphasis text and heading details, including subtle footer or interface copy. |
| Pale Mint | `#e6fff7` | `--color-pale-mint` | surface | Light card or badge tint in minor UI details; use sparingly against the white page. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#141414` (Deep Ink) · `--color-surface-2` → `#242438` (Midnight Slate) · `--color-surface-3` → `#e6fff7` (Pale Mint) · `--color-surface-4` → `#fff4f4` (Blush Mist) · `--color-text` → `#141414` (Deep Ink) · `--color-text-muted` → `#656565` (Soft Graphite) · `--color-border` → `#f2f2f2` (Cloud Hairline) · `--color-accent` → `#0036ff` (Electric Cobalt) · `--color-accent-2` → `#0093ff` (Link Blue) · `--color-accent-3` → `#1096e5` (Sky Current) · `--color-on-accent` → `#000000`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#141414` | `#ffffff` | 18.42:1 | AAA |
| `#141414` | `#242438` | 1.21:1 | fail |
| `#141414` | `#e6fff7` | 17.56:1 | AAA |
| `#656565` | `#ffffff` | 5.83:1 | AA |
| `#656565` | `#141414` | 3.16:1 | AA-large |
| `#656565` | `#242438` | 2.6:1 | fail |
| `#656565` | `#e6fff7` | 5.55:1 | AA |
| `#0036ff` | `#ffffff` | 7.07:1 | AAA |
| `#0036ff` | `#141414` | 2.61:1 | fail |
| `#0036ff` | `#242438` | 2.15:1 | fail |

### Gradients

- `linear-gradient(0deg, rgb(255, 255, 255), rgb(230, 244, 247) 6.29%, rgb(128, 191, 239) 15.02%, rgb(68, 164, 233) 19.39%, rgb(48, 157, 231), rgb(16, 150, 229) 21.57%, color(xyz-d65 0.241 0.261 0.773), color(xyz-d65 0.23 0`
- `linear-gradient(353deg, rgb(255, 255, 255) -30.77%, rgb(230, 244, 247) -9.89%, rgb(128, 191, 239) 0.54%, rgb(68, 164, 233) 5.76%, rgb(48, 157, 231), rgb(16, 150, 229) 8.37%, color(xyz-d65 0.241 0.261 0.773), color(xyz-d6`
- `linear-gradient(114.58deg, rgb(209, 233, 255) -1.34%, rgba(255, 222, 253, 0.56) 24.05%, rgb(247, 247, 247) 74.82%)`
- `linear-gradient(to left, rgb(247, 247, 247), rgba(247, 247, 247, 0.9), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 700, 600 | Navigation, body copy, links, and CTA labels | Inter |
| Geist Mono | `--font-mono` | webfont | 500, 400 | Eyebrows, captions, and code-like interface labels | IBM Plex Mono |
| Aeonik Pro | `--font-display` | webfont | 500, 400 | Display headings and section titles | Manrope |

- **Inter:** Mostly regular weight; clear, compact interface copy with natural sentence case.
- **Geist Mono:** Small uppercase section markers and technical microcopy provide a restrained developer-tool accent.
- **Aeonik Pro:** Medium display weight, close tracking, and sentence case; large headlines are centered in key sections.

### Type scale — Perfect Fifth (ratio ≈ 1.516, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 74px | 500 | 1.14 | -0.015em | — | Aeonik Pro | Oversized hero headline and prominent display messaging. |
| h1 | 64px | 500 | 1.13 | -0.015em | — | Aeonik Pro | Primary page headline and major promotional heading. |
| h2 | 48px | 500 | 1.08 | -0.015em | — | Aeonik Pro | Main feature, pricing, FAQ, and promotional section titles. |
| h3 | 36px | 400 | 1.22 | -0.028em | — | Aeonik Pro | Card and subsection headings within product and feature content. |
| body | 14px | 400 | 1.57 | 0 | — | Inter | Feature descriptions, explanatory copy, and supporting paragraphs. |
| caption | 10px | 500 | 2.4 | -0.01em | — | Geist Mono | Compact technical captions and interface microcopy. |
| button | 14px | 400 | 1.5 | 0 | — | Inter | Trial, sign-up, and secondary action labels. |
| nav | 14px | 400 | 1.57 | 0 | — | Inter | Header navigation and product links. |
| link | 14px | 400 | 1.57 | 0 | — | Inter | Inline links and subdued secondary navigation. |
| eyebrow | 11px | 500 | 1.45 | 0.03em | uppercase | Geist Mono | Small uppercase section labels above headings. |
| code | 10px | 500 | 2.4 | -0.01em | — | Geist Mono | Code snippets and technical interface labels. |

OpenType features in use: `"ss02", "ss05", "ss10", "ss11"`, `"cv01", "ss01"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 6, 7, 8, 9, 10, 12, 14, 15, 16, 20, 23, 24 px.
- Section rhythm 120px · element gap 12px · card padding — · max content width 1128px.

A centered, spacious page uses a measured maximum content width of 1128px and generous separation between major sections. The hero centers its headline, supporting sentence, and paired actions above a wide product preview; the customer band follows before a centered feature grid. Later sections use broad product imagery, multi-column pricing and FAQ layouts, then a split Builder promotion and multi-column footer. The white sections stay visually calm, with compact text and generous whitespace around cards.

## Shape & elevation

- Radius: button `9999px` · card `14px` · media `50%` · badge `9999px` · nav `9999px` · link `9999px` · xs `4px` · sm `6px` · md `8px` · lg `10px` · xl `12px` · 2xl `14px` · pill `9999px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.12) 0px 1px 3px 0px inset, rgba(255, 255, 255, 0.12) 0px 0.5px 0.5px 0px inset, rgba(101, 101, 101, 0.16) 0px 4px 8px -2px, rgba(101, 101, 101, 0.12) 0px 2px 4px -1px, rgba(101, `
- Shadow `inset-2` (button, other): `rgba(255, 255, 255, 0.12) 0px 1px 2px -0.5px inset, rgba(255, 255, 255, 0.16) 0px 0.5px 0.5px 0px inset, rgba(255, 255, 255, 0.16) 0px 8px 24px -4px inset, rgba(9, 1, 20, 0.03) 0px 8px 8px -3px, rgba(`
- Shadow `md` (card): `rgba(0, 0, 0, 0.04) 0px 12px 12px -3px, rgba(0, 0, 0, 0.02) 0px 6px 6px -3px, rgba(0, 0, 0, 0.02) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.03) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px`
- Shadow `md-2` (media, other): `rgba(0, 0, 0, 0.06) 0px 12px 12px -3px, rgba(0, 0, 0, 0.04) 0px 6px 6px -3px, rgba(0, 0, 0, 0.02) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.03) 0px 1px 1px -0.5px`
- Shadow `inset-3` (button): `rgba(255, 255, 255, 0.08) 0px -4px 12px -4px inset, rgba(255, 255, 255, 0.06) 0px 1px 3px 0px inset, rgba(255, 255, 255, 0.12) 0px 0.5px 0.5px 0px inset, rgba(9, 1, 20, 0.06) 0px 8px 8px -3px, rgba(8,`
- Motion: standard transition `0.45s cubic-bezier(0.6, 0.6, 0, 1)` on interactive elements.

Most content sits directly on the white canvas, with faint hairline borders defining cards and FAQ rows. Product previews and selected cards use soft, layered shadows to lift them from the background. Rounded corners and inset interface highlights add depth to media and buttons without introducing heavy outlines.

## Imagery

Product interface imagery is the main visual asset: terminal windows, desktop-app previews, and dashboard-like screens appear in large framed compositions. The hero and infrastructure CTA place these previews over vivid blue gradients, while feature cards use smaller isolated UI illustrations. Customer app marks form a compact logo strip. Treat illustration colors as product artwork, not as additions to the core interface palette.

## Components

### Primary CTA

A vivid #0036ff pill with dark label text, subtle inset highlight, and a small directional icon on the trial action.

### Hero product preview

A wide desktop-interface image sits beneath centered messaging and actions, framed by a dark-to-blue gradient backdrop.

### Feature cards

A spacious multi-column grid pairs small product illustrations with concise headings and muted explanatory copy.

### Customer logo strip

A centered customer-app showcase combines a product preview with a row of compact app icons and short annotations.

### Pricing cards

Three plan columns contrast a dark featured option with light neighboring cards, concise benefit lists, and rounded actions.

### FAQ list

A centered title introduces two aligned columns of compact questions with subtle dividers and disclosure affordances.

### Builder promotion

A rounded pale promotional panel presents a low-code product, short benefit list, and primary and secondary actions.

### Measured component styles

- **Primary button** (“Start free trial”): background #0036ff · text #000000 · radius 999px · padding 7px 10px 7px 14px · 400 16px Inter · shadow rgba(255, 255, 255, 0.12) 0px 1px 2px -0.5px inset, rgba(255, 255, 255, 0.16) 0p
- **Secondary button** (“Start free trial”): background #ffffff · text #000000 · radius 999px · padding 13px · 400 16px Inter · shadow rgba(0, 0, 0, 0.04) 0px 8px 8px -3px, rgba(0, 0, 0, 0.04) 0px 3px 3px -1.5px, rg
- **Link** (“Start free trial”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter
- **Card** (“What is the difference between ToDesktop”): transparent background · text #000000 · border 1px solid #f1f1f1 · radius 14px · padding 0px · 400 16px Inter
- **Badge** (“Medium”): transparent background · text #141414 · border 1px solid #ebebeb · radius 999px · padding 3px 9px · 400 12px Inter
- **Navigation item** (“ToDesktop for Electron”): transparent background · text #141414 · radius 0px · padding 0px · 400 14px Inter

## Do

- Keep large content areas white and visually quiet.
- Use #0036ff for the principal conversion action.
- Reserve blue gradients for hero and product-showcase moments.
- Use Aeonik Pro for large, tightly tracked headings.
- Set developer labels and section eyebrows in Geist Mono.
- Give product previews room to breathe.
- Use borders and shadows sparingly to define cards.

## Don't

- Do not turn the whole page into a dark interface.
- Do not use saturated accents across every section.
- Do not let product mockup colors redefine the brand palette.
- Do not crowd cards with oversized body copy.
- Do not replace the rounded pill CTA with a sharp rectangular button.
- Do not add heavy borders or dramatic shadows to ordinary content.

## Agent prompt

Build a polished developer-tools SaaS page with a spacious #ffffff canvas, centered content, and generous separation between sections. Use Deep Ink (#141414) for headings and primary text, Soft Graphite (#656565) for supporting copy, and Electric Cobalt (#0036ff) for pill-shaped primary actions. Set large headlines in a close-tracked Aeonik Pro-like sans serif; use Inter for interface text and a restrained monospace for uppercase eyebrows and technical labels. Create a dramatic gradient backdrop only around hero and product showcase areas, using the measured blue accent family, and foreground real-looking desktop-app or terminal UI previews. Keep feature cards light with faint #f2f2f2 hairlines, soft elevation, and rounded corners. Alternate centered product sections with practical grids, pricing, FAQ, and a quiet footer. Preserve readable contrast and ample whitespace.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Navigation above centered hero copy, paired actions, benefits, and a wide product preview. | top navigation, primary and secondary CTA, benefit summary | gradient backdrop, large display heading, desktop UI preview, pill buttons |
| 2 | logo-cloud | Centered heading and product showcase above a compact horizontal app-logo strip. | social proof, customer app showcase | gradient section band, product screenshot, app icon row |
| 3 | feature-grid | Centered section introduction, large dashboard preview, then feature cards and capability notes. | feature discovery, technical capability overview | multi-column card grid, product UI illustration, muted labels |
| 4 | cta | Broad rounded product panel with left-aligned copy above a large interface preview. | trial conversion, secondary documentation action | blue gradient media, paired pill buttons, product screenshot |
| 5 | pricing | A short centered pricing introduction leads into the detailed plan comparison. | pricing orientation | centered title, plain white background |
| 6 | faq | Centered heading above two aligned columns of questions. | disclosure questions, contact support link | light dividers, compact question rows |
| 7 | feature-split | Centered introduction above a wide, softly tinted promotional card. | cross-product discovery, compare-products action | pale gradient panel, product identity, paired CTA buttons |
| 8 | footer | Brand and system status above four link columns and a low-emphasis legal row. | resource navigation, operational status | multi-column links, small brand mark, subdued legal text |

## Source CSS custom properties (selected)

```css
--tw-border-opacity: 1;
--tw-text-opacity: 1;
--body-light-bg-ghost: color(display-p3 0.2157 0.2157 0.2157 / 0.04);
--body-light-bg-muted: color(display-p3 0.2157 0.2157 0.2157 / 0.12);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/todesktop-com