Overview
Design product-marketing pages that feel fast, exact, and desktop-native. The personality should come from a dark command-center shell, a single red glow motif, and precise software windows that feel engineered rather than decorative.
Raycast
A collection of powerful productivity tools all within an extendable launcher.
4.0
25
Visits
Categories
Available Pages
Version History
Workflow Collections
Design Analysis
Raycast Home design analysis
Design product-marketing pages that feel fast, exact, and desktop-native. The personality should come from a dark command-center shell, a single red glow motif, and precise software windows that feel engineered rather th...
Image Direction
Use red glow fields and crisp product windows. The red light should feel like spectral motion on black metal, while screenshots and UI panels stay highly legible and almost monochrome. The page should resemble premium desktop hardware packaging more than a generic SaaS site.
Colors
Keep the palette dominated by black, charcoal, gray, and white. Red acts as the hero energy source, with only enough saturation to create focus. Buttons and nav trays should read like metal or polished plastic rather than colorful blocks.
Typography
Use a straightforward modern sans with bold weight for headlines. Supporting text should fall back to muted gray. Mono labels can punctuate technical cues like versions, install paths, or extension metadata.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Command Glow Black
A precision dark productivity system built from obsidian shells, metallic controls, and restrained red spectral glow.
focused, fast, and premium with quiet hardware-like polish
Primary mode: darkdesktop productivity marketingproduct-marketing
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
focused, fast, and premium with quiet hardware-like polish
Density
3
Variance
2
Motion
2
Signals
obsidian shell · red spectral glow · gray metallic controls · dense app windows
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Obsidian
#07080A
Signal Red
#E54857
Hot Coral
#FF6363
Steel Gray
#2F3031
Fog Gray
#9C9C9D
Frost White
#E6E6E6
Pure White
#FFFFFF
Usage rules
Keep the background nearly black so glow and product windows stay surgical.
Use red only where it creates focus or atmosphere.
Let buttons and panels feel metallic rather than colorful.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
10px
md
16px
lg
24px
section
96px
Token Radii
Corner radii tokens with a live surface sample.
sm
8px
md
12px
lg
20px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter
clean, powerful, and modern
Body
Inter
compact product copy
Mono
Geist Mono
command cues and install text
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4rem/—
Display
H2
2rem/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Keep headlines large, centered, and decisive. · Use muted gray for secondary copy so white headlines dominate. · Use mono for installer strings, versioning, and technical small print.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
140ms-240ms
Easing
cubic-bezier(.2,.8,.2,1)
Spring
stiffness 120, damping 20
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 140ms-240ms |
easing | cubic-bezier(.2,.8,.2,1) |
spring | stiffness 120, damping 20 |
Layout Principles
Center the hero and stack actions directly beneath it.
Treat every feature chapter like another app vignette on a dark desktop.
Keep sections clean and repeated so the product windows feel consistent and dependable.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#E6E6E6
Text
#2F3031
Border
1px solid #FFFFFF
Radius
8px
Padding
12px 20px
Min height
40px
Shadow
0 0 0 2px rgba(0,0,0,0.5)
Buttons secondary
Base Attributes
Background
transparent
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.25)
Radius
8px
Padding
12px 20px
Min height
40px
Navigation tray
OverviewFeaturesDocs
Base Attributes
Background
#121316
Text
#9C9C9D
Border
1px solid #2F3031
Radius
20px
Active text
#FFFFFF
Item padding
12px 16px
Cards app
Feature Card
Component preview content
Base Attributes
Background
#111214
Text
#FFFFFF
Border
1px solid #2F3031
Radius
20px
Padding
20px
Cards store
Feature Card
Component preview content
Base Attributes
Background
#0C0D0F
Text
#FFFFFF
Border
1px solid #2F3031
Radius
16px
Padding
16px
Labels install
Base Attributes
Background
transparent
Text
#9C9C9D
Radius
0px
Typography
mono
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -dark app windows
- -extension grids
- -feature demos
- -red spectral abstract
Subject patterns
- -desktop command surfaces
- -dense productivity panels
- -soft grainy red light
Composition logic
- -Keep one glow field behind the hero and crisp app windows elsewhere.
- -Frame screenshots like product objects, not casual images.
Treatment rules
- -Use red as a beam or aura, never a flat page fill.
- -Keep screenshots monochrome with tight contrast and subtle borders.
Generation cues
- -dark mac productivity launcher
- -red spectral diagonal glow
- -premium desktop software
Avoid
- -No rainbow gradient stacks.
- -No toy-like illustration style.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not inject playful startup gradients outside the red glow system.
- -Do not soften controls into oversized social pills.
- -Do not brighten the overall shell into light SaaS mode.