Raycast
www.raycast.coma desktop command-tool rendered with OS-grade realism - a near-black, glass-panelled site where layered depth and smooth easeOutQuint motion make a productivity app feel like premium hardware.
Design tokens
- display
- Inter
- body
- Inter / SF Pro Text
- mono
- GeistMono
Do / Don't
Reference it for
- Selling a desktop app: render the product in a realistic OS environment with genuine depth.
- Translucent-white glass panels on a near-black field - the modern dark-glass aesthetic done right.
- Layered elevation (a rich box-shadow scale) as the depth strategy, not flatness.
- Bento grids of real product screenshots; smooth easeOutQuint (cubic-bezier(0.23,1,0.32,1)) motion.
Do not copy
- The specific near-black #07080a and the glass treatment - strongly Raycast/Apple-adjacent coded.
- The OS-realism only makes sense for a genuine desktop/native product.
- Heavy glass and 21 shadows demand real craft - done loosely it looks muddy.
Signature moves
product rendered with OS-grade realism in glass panels
a desktop app is rendered in a realistic OS environment with translucent-white glass panels on a near-black field (#07080a), depth coming from a rich layered box-shadow scale (21 shadows) rather than flatness.
bento screenshot grid with easeOutQuint motion
bento grids of real product screenshots are revealed with a smooth easeOutQuint (cubic-bezier(0.23,1,0.32,1)) at ~200ms, Inter for UI and Geist Mono for code.
Related references
Maven Clinic
strongHealth
a women's and family telehealth brand that wraps clinical credibility in warmth, a deep forest green base lit by an electric mint accent, Helvetica Now Display set huge with Ivar Display serif italics for the emotional words, and warm candid family photography carried full-bleed.
Mercury
flagshipFintech
a banking site that turns scale and aspiration into the brand - bespoke variable Arcadia/ArcadiaDisplay typography at intermediate weights (420/480), a glass-blur dark nav over a 1952px-wide light page, atmospheric mountain/space photography, and one electric-indigo CTA in a sea of refined neutrals.
Parsley Health
flagshipHealth
a functional-medicine telehealth clinic that earns trust through calm, a deep forest-teal and warm-cream palette, an EuclidCircularB-plus-Teodor-serif pairing, a long evidence-led page of credential blocks, comparison tables and measurable outcomes, all on a clean Next.js + Tailwind build.
Posthog
strongDeveloper Tool
personality as the strategy - a warm, cream-toned developer-analytics site that leans hard into a hedgehog mascot, playful animation and quirky copy to feel human in a sterile category.