Overview
Use a polished desktop-ops language: dark purple hero stages, circuit-line framing, blue actions, rounded proof screenshots, and light documentation/product pages.
ToDesktop
ToDesktop is your end-to-end Electron partner — offering effortless deployment, robust security and seamless auto-updates.
5.0
17
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
ToDesktop Home design analysis
Use a polished desktop-ops language: dark purple hero stages, circuit-line framing, blue actions, rounded proof screenshots, and light documentation/product pages.
Colors
Use near-black purple for the dramatic marketing stage and white for practical docs and builder pages. Use blue only for decisive actions, app marks, and focus states.
Typography
Use a smooth grotesk with large 74px hero type and 64px section titles. Documentation should shift to tighter, denser body hierarchy.
Layout
Center marketing hero copy inside a thin technical frame. For docs, use a left sidebar, central article, and right page index. For product pages, use large centered hero copy followed by screenshots or cards.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Desktop Ops Nebula
A desktop release-platform design language with dark nebula hero stages, circuit-line framing, blue action buttons, translucent nav, light documentation shells, and rounded product/pricing cards.
Technical, polished, secure, and release-oriented.
Primary mode: mixeddesktop app deployment toolingui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Technical, polished, secure, and release-oriented.
Density
5
Variance
4
Motion
3
Signals
dark purple gradient hero · thin circuit lines · glowing app icon · blue primary CTA · light docs shell · rounded screenshots
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Nebula Black
#070218
Electric Blue
#0036FF
Soft White
#FFFFFF
Ink
#1C1C1F
Mist Panel
#F6F7FF
Muted Chrome
#A4A4A4
Usage rules
Use dark nebula only for product-platform drama; use white shells for docs and builder flows.
Keep blue as the primary action color.
Use line art and screenshots as the technical proof layer.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(24px, 6vw, 96px)
hero_padding
160px 32px 80px
section_gap
112px
card_padding
32px
button_padding
14px 24px
Token Radii
Corner radii tokens with a live surface sample.
pill
999px
button
14px
card
24px
screenshot
12px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Aeonik-style grotesk
wide, smooth, and launch-ready
Body
Inter
clear documentation and SaaS copy
Mono
System mono
badges, version numbers, and code-adjacent labels
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
74px/1.12
Hero
Section
64px/1.12
Section
Subhead
48px/—
Subhead
Docs title
48px/—
Docs title
Body
18px/1.55
Body
Nav
14px/1.2
Nav
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 1.12 |
section | 1.12 |
body | 1.55 |
nav | 1.2 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 500 |
docs | 700 |
body | 400 |
control | 600 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use large smooth display type on marketing pages. · Switch to dense, practical hierarchy in documentation.
Borders
Border tokens with resolved values.
Dark line
1px solid rgba(255, 255, 255, 0.08)
Light line
1px solid rgba(0, 0, 0, 0.10)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
Glow
0 24px 80px rgba(0, 54, 255, 0.28)
Card
0 20px 60px rgba(5, 6, 28, 0.10)
Borders
Resolved border token values.
| Property | Value |
|---|---|
dark_line | 1px solid rgba(255, 255, 255, 0.08) |
light_line | 1px solid rgba(0, 0, 0, 0.10) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
glow | 0 24px 80px rgba(0, 54, 255, 0.28) |
card | 0 20px 60px rgba(5, 6, 28, 0.10) |
Layout Principles
Center hero content inside a circuit-like frame.
Pair dark marketing stages with light docs/product pages.
Use screenshots as proof inside rounded frames.
Keep documentation three-column: sidebar, article, on-page index.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#0036FF
Text
#FFFFFF
Border
0
Radius
{tokens.radii.pill}->999px
Padding
{tokens.spacing.button_padding}->14px 24px
Min height
44px
Shadow
{tokens.shadows.glow}->0 24px 80px rgba(0, 54, 255, 0.28)
Typography
control
Buttons secondary
Base Attributes
Background
rgba(255, 255, 255, 0.12)
Text
#FFFFFF
Border
{tokens.borders.dark_line}->1px solid rgba(255, 255, 255, 0.08)
Radius
{tokens.radii.pill}->999px
Padding
{tokens.spacing.button_padding}->14px 24px
Min height
44px
Cards dark feature
Feature Card
Component preview content
Base Attributes
Background
rgba(255, 255, 255, 0.04)
Text
#FFFFFF
Border
{tokens.borders.dark_line}->1px solid rgba(255, 255, 255, 0.08)
Radius
{tokens.radii.card}->24px
Padding
{tokens.spacing.card_padding}->32px
Shadow
none
Cards light card
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#1C1C1F
Border
{tokens.borders.light_line}->1px solid rgba(0, 0, 0, 0.10)
Radius
{tokens.radii.card}->24px
Padding
{tokens.spacing.card_padding}->32px
Shadow
{tokens.shadows.card}->0 20px 60px rgba(5, 6, 28, 0.10)
Navigation dark
OverviewFeaturesDocs
Base Attributes
Background
rgba(255, 255, 255, 0.04)
Text
rgba(255, 255, 255, 0.72)
Radius
{tokens.radii.pill}->999px
Item padding
8px 12px
Navigation docs sidebar
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#1C1C1F
Active radius
8px
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not use generic flat SaaS blue on every surface.
- -Do not make docs dark.
- -Do not replace screenshots with abstract blobs.
- -Do not overuse glow outside hero/action moments.