# Raycast homepage design spec (free) - Site: raycast.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Raycast. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Raycast's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Hero — diagonal photographic field **Evidence provenance:** Public page `https://www.raycast.com/`; desktop capture at 1440×900, scrollY 0, and same-page phone capture at 390×844, scrollY 0. Measurements are viewport coordinates from the supplied computed-style rows; the image captures establish the visible composition. No redirect observed. The hero continues beyond the desktop viewport; its lower boundary is unknown. **CRAFT ARCHETYPE:** photo-led ## The big idea Set a compact, centered message over a large, saturated diagonal image, framed by a nearly black page. The photograph carries the visual emphasis; keep copy and controls legible without covering its focal pattern. Treat each screenshot as a crop, not as proof of the hero’s full height. ## Layers At desktop, the heading occupies (450,370), 540×141px, in two centered lines. It is 64px/70.4px, weight 600. Supporting text begins at (327,543), measuring 786×42px, at 18px, weight 400, with 0.2px tracking. The light primary control is at (616,797), 207×36px; its surface is `rgb(230,230,230)`, radius 8px. A 12px monospaced detail begins at y=849; both it and the lower control area are close to the 900px crop. The photo’s exact bounds are unmeasured. Use the image evidence for its strong red/pink and cyan diagonal bands on black, not for a fabricated pixel-perfect asset. ## Type Use Inter or a metrically similar sans. Keep the headline white and semibold, with supporting copy smaller and regular. Preserve the measured line-height and centered alignment; do not reuse source copy. ## Colour Use near-black surroundings, white type, and let the image supply the saturated color. The measured light control uses `rgb(230,230,230)` with dark text `rgb(47,48,49)`. Background hex values are unknown. ## States and motion No hero animation or hover behavior is established. Motion is unknown. ## Do NOT copy or add Do not copy branding, wording, photo artwork, claims, platform labels, or unobserved controls. Do not infer the hero’s bottom from a viewport crop. ## Phone at 390px At 390×844, the heading is at (16,260), 358×79px, 36px/39.6px and weight 600, wrapping to two lines. Supporting text is at (16,371), 358×51px, 14px regular, 0.2px tracking, wrapping to three lines. The image’s vivid diagonal bands fill the central background behind the copy; dark space remains above and below. The header occupies roughly y=16–75. A centered outlined pill is at (94,584), 202×30px. The desktop download control and monospaced details are not shown; their phone placement is unknown. At y=844 the dark field continues, so the hero boundary and subsequent content are unknown. ## Checks you can run At desktop, verify headline (450,370), 540×141px, and supporting text (327,543), 786×42px. At phone width, verify heading (16,260), 358×79px, supporting text (16,371), 358×51px, and pill (94,584), 202×30px. Check both crops without assuming a section boundary. --- # Navigation — outlined desktop bar and compact phone header **Evidence provenance:** Public page `https://www.raycast.com/`; desktop capture at 1440×900, scrollY 0, and phone capture at 390×844, scrollY 0. Link and action measurements are from computed-style rows; outer bar and phone identity/menu placement are visual estimates from the images. No redirect observed. **CRAFT ARCHETYPE:** type-led ## The big idea Keep navigation visually subordinate to the hero: a thinly outlined, dark horizontal bar with a small identity area, muted links, and one light action at desktop. At phone width, show the compact identity/menu arrangement visible in the capture rather than forcing the desktop row into a narrow viewport. ## Layers The desktop screenshot shows the bar near x=84 and y=11, extending to approximately x=1356 and y=66; these outer edges are visual estimates, not computed measurements. Link rows are 41px high at y=34. Measured link boxes include x=406, width 53px; x=632, width 79px; x=970, width 64px; and x=1090, width 58px. The light action is at (1172,36), 117×36px, with 8px radius and 8px 12px padding. The identity mark sits at the left in the image; exact box dimensions are unavailable. At phone width, the visible outlined header runs approximately (16,16) to (374,75), or 358×59px, with identity on the left and a three-line menu glyph on the right. Do not treat extracted phone link boxes as proof that a menu drawer is visible: the screenshot shows no exposed link list. ## Type Desktop links use Inter, 14px, weight 500, 0.2px tracking, and muted `rgb(156,156,157)`. The light action uses 14px medium text, 16px line-height, and dark `rgb(47,48,49)`. Phone identity sizing is not measured. ## Colour Use a near-black bar, subtle charcoal outline, gray links, and a light gray action surface. Avoid unsupported accent colors. ## States and motion The supplied CSS rules establish nav links brightening on hover and a faint focus background; link transition is 0.2s ease-in-out. Desktop focus background is disabled by a min-width 720px rule. Menu-open behavior is unknown. ## Do NOT copy or add Do not reproduce source branding, labels, order, or button copy. Do not make the phone link list visible or invent a drawer transition. ## Checks you can run At desktop, verify 14px/500 links, 0.2px tracking, 41px row height, and the 117×36px action with 8px radius. At phone width, verify the approximate 358×59px bar at (16,16), identity left, menu glyph right, and no visible expanded link list. Treat outer bounds as visual estimates. --- # Signature component — framed product-interface showcase **Evidence provenance:** Public page `https://www.raycast.com/`; desktop captures at 1440×900, scrollY 900 (`below-900`) and scrollY 1800 (`below-1800`). Coordinates below are viewport-relative; the captures show the upper and lower portions of a large product-interface showcase. No redirect observed. **CRAFT ARCHETYPE:** product-UI-led ## The big idea Present a large, dark software interface as the signature visual: quiet centered introduction above a framed product artifact, with layered interface details and a vivid restrained glow. It is a showcase, not a generic card grid. Build only the states visible in the captures; do not imply working interaction from static imagery. ## Layers At scrollY 900, the centered heading and secondary line each measure 350×24px, at (545,515) and (545,539). The heading uses 20px/500 white; the next line is 20px/500 muted gray. The image element is 1300×733px at (70,637). The visible framed surface begins higher, around x=84 and y≈445, so do not confuse its apparent frame edge with the image element’s measured top. The screenshot shows a dark application window, narrow top chrome, a filter/search region, rows, and a red-lit central area; much of it falls below the viewport. At scrollY 1800, the large composition’s lower frame edge is around y=330. A central interface panel includes a metadata table and a compact action strip; below it, a centered row of five square icon controls is visible around y=255–310. The screenshot also shows a centered explanatory line around y=353. These are observed visual contents, not claims about functional controls. ## Type Use Inter for the introduction and dense interface labels. The measured intro is 20px/500. Interface examples include 12px table text, 13px compact controls, and 14px search text. Keep labels concise and invented; do not use captured wording or values. ## Colour Use near-black page and interface surfaces, fine charcoal borders, white primary labels, and subdued gray secondary labels. A red glow is visible in the showcase image; exact color values are unknown. Icon tiles in the supplied computed rows are 84×84px, radius 8px, with a translucent white surface near 5% opacity; do not assume every visible control uses that exact treatment. ## States and motion The captures do not establish interactive behavior or animation. Search, filtering, toolbar actions, and transitions are unknown; represent only the static visual state. ## Do NOT copy or add Do not copy source artwork, branding, interface labels, personal data, metadata values, or counts. Do not claim controls work or add unsupported behavior. ## Checks you can run At 1440px and scrollY 900, verify image element (70,637), 1300×733px, and intro boxes at (545,515) and (545,539), each 350×24px. At scrollY 1800, verify the lower frame edge near y=330, panel/action strip, five-control toolbar near y=255–310, and explanatory line near y=353. Preserve the dark framed showcase rather than replacing it with a generic grid.