Raycast
A productivity launcher that transforms complex workflows into instant keyboard shortcuts. Raycast combines a dark, technical aesthetic with precise, minimal UI to deliver speed and reliability.
Colors
Typography
- display
- fontFamily: Inter · fontSize: 64px · fontWeight: 600 · lineHeight: 72px · letterSpacing: -0.02em
- headline-lg
- fontFamily: Inter · fontSize: 40px · fontWeight: 600 · lineHeight: 48px · letterSpacing: -0.01em
- headline-md
- fontFamily: Inter · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: 0em
- title-lg
- fontFamily: Inter · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0.01em
- body-lg
- fontFamily: Inter · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
- body-md
- fontFamily: Inter · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
- label-md
- fontFamily: Inter · fontSize: 14px · fontWeight: 500 · lineHeight: 20px · letterSpacing: 0.01em
- label-sm
- fontFamily: Inter · fontSize: 13px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.1px
Design guidance
Overview
Raycast is a command launcher designed for developers and power users who demand speed, precision, and extensibility. The design system embodies "Technical Minimalism"—a philosophy that strips away ornament while maintaining visual hierarchy through careful use of contrast, typography weight, and strategic color accents. The brand personality is direct and efficient: no unnecessary flourishes, no animations that don't serve a purpose, no colors that don't communicate. The UI evokes the precision of a terminal combined with the polish of modern software, creating an experience that feels both powerful and approachable. Voice: terse, confident, action-oriented. Example: "Search, execute, repeat. Your workflow, accelerated."
Colors
The color system centers on a near-black canvas (#07080a) paired with a light neutral primary (#e6e6e6) for maximum contrast and readability. Secondary accent #56c2ff (a cool cyan) provides visual interest on interactive elements and highlights, while tertiary #ff6363 (a warm red) signals destructive actions and errors. The surface stack progresses from #07080a (surface-dim) through #111214 (surface-container) to #2f3031 (surface-container-highest), creating subtle depth without sacrificing the dark aesthetic. All interactive elements use rgba(255, 255, 255, 0.05) to rgba(255, 255, 255, 0.1) for hover states, maintaining visual continuity. Primary (#e6e6e6) is reserved for CTAs and high-emphasis buttons; secondary (#56c2ff) highlights search results and focus states; tertiary (#ff6363) app
Typography
The type system uses Inter exclusively, a geometric sans-serif optimized for screen legibility at all sizes. Display (64px, 600 weight) anchors hero sections with -0.02em letter-spacing for visual tightness; headline-lg (40px, 600) and headline-md (28px, 600) establish section hierarchy with consistent 600 weight to signal importance. Body text (16px–18px, 400 weight) maintains 24–28px line-height for comfortable reading; label-md (14px, 500) and label-sm (13px, 500) are used for UI labels, buttons, and metadata. All labels use 0.01em to 0.1px letter-spacing to enhance legibility in dense interfaces. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm) when overlaid on colored backgrounds to ensure contrast. The weight progression (400 → 500 → 600) creates clear visu
Layout
The layout uses a 12-column grid with a max-width of 1200px, centered on the viewport. Sections use lg spacing (40px) for vertical separation, md spacing (24px) for component padding, and sm spacing (12px) for internal element gaps. The gutter is fixed at 24px on desktop, collapsing to 12px on mobile. Container padding follows the pattern: 24px horizontal on desktop, 12px on mobile. Search and modal overlays use a fixed 20% top margin with max-width 500px for optimal focus. The design favors generous whitespace over density—components are never packed tighter than 12px apart. Responsive breakpoints: 640px (tablet), 1024px (desktop). The grid maintains consistent alignment even when content varies in height, using flexbox for vertical centering of interactive elements.
Elevation & Depth
Depth is conveyed through layered shadows and subtle borders rather than color shifts. Level 1 (Base): solid background #07080a with no shadow. Level 2 (Cards/Modals): inset 0 1px 0 0 rgba(255, 255, 255, 0.05) border + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for subtle lift. Level 3 (Floating panels/Search): backdrop-filter: blur(10px) + radial-gradient background + inset border at rgba(255, 255, 255, 0.06) + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2). Hover states increase inset border opacity to rgba(255, 255, 255, 0.1) and add a 0.2s transition. No drop shadows exceed 8px blur radius; all
Shapes
The shape language is "Technical Precision"—sharp corners where they serve function, rounded corners where they soften interaction. Buttons use 6px (DEFAULT) or 8px (md) border-radius for a slightly softened but still technical feel. Cards and containers use 20px (xl) for a more approachable, less utilitarian appearance. Search boxes and modals use 8px (md) to balance precision with usability. Input fields use 6px (DEFAULT) to align with button styling. The full (9999px) radius is reserved for badges and pill-shaped elements. Small utility elements (3px sm) are used sparingly for micro-interac
Components
Action Elements Buttons come in three primary variants: light (primary action), dark (secondary action), and danger (destructive). Light buttons use #e6e6e6 background with #2f3031 text, 36px height, 8px 12px padding, and 8px border-radius. On hover, background shifts to #ffffff with enhanced box-shadow (0 0 14px 0 rgba(255, 255, 255, 0.19)). Active state uses #cdcece background. Dark buttons use a linear gradient (rgba(255, 255, 255, 0.03) to rgba(255, 255, 255, 0.1)) with inset borders at rgba(255, 255, 255, 0.05) and rgba(255, 255, 255, 0.25). Danger buttons use #2c1617 background with #ff6363 text and a 1px border at #833637. All buttons support a 0.1s ease-in-out transform on active press (scale: 0.98). Disabled state applies opacity: 0.3 and cursor: not-allowed.
Containers &
Do's and Don'ts
**Do**
- Do use the light button (#e6e6e6) for primary CTAs—it commands attention and drives conversion.
- Do maintain 24px gutter spacing on desktop and 12px on mobile; consistency builds trust.
- Do apply 0.2s transitions on all interactive state changes (hover, focus, active); instant feedback feels broken.
- Do use the cyan secondary (#56c2ff) sparingly for highlights and focus states; overuse dilutes impact.
- Do layer inset borders (rgba(255, 255, 255, 0.05–0.1)) on all glass surfaces; they define edges in dark environments.
**Don't**
- Don't use pure white (#ffffff) as a background; it breaks the dark aesthetic and causes eye strain. Use #e6e6e6 for light surfaces.
- Don't apply shadows deeper than 8px blur or darker than rgba(0, 0, 0, 0.2); the design relies on subtle depth, not dramatic contrast.
- Don't mix border-radius values within a component family (e.g., buttons at 6px and 8px in the same section); consistency signals polish.
- Don't use the red tertiary (#ff6363) for non-destructive actions; reserve it for errors and confirmations only.
- Don't animate non-interactive elements; every motion must serve a functional purpose (feedback, state change, or guidance).
Edit, then copy or download.