Raycast
Raycast's marketing system reads like an extended product screenshot. Pure-near-black canvas (#07080a), hairline 1px borders, command-palette-style cards, Inter typography with ss03 stylistic set, white CTA pill.
Homepage Example
Color Palette (17)
Typography (9)
Components (5)
Border Radius
Design Philosophy
Overview
Raycast's marketing site reads like an extended product screenshot. The chrome IS the in-product command palette at marketing scale: pure near-black canvas (#07080a), hairline 1px borders, command-palette-style cards, Inter typography with the ss03 stylistic set enabled site-wide, a single white CTA pill.
Key Characteristics
- Single dark surface mode with a 4-step surface ladder: #07080a → #0d0d0d → #101111 → #121212
- White CTA pill (#ffffff) is the universal primary action
- Inter typography with font-feature-settings: "calt", "kern", "liga", "ss03"
- Hairline 1px borders carry every card edge
- Saturated category accents reserved for extension tile imagery
Do's and Don'ts
Render the entire site in one continuous dark mode. Use white pill for every primary CTA. Build elevation from the surface-color ladder. Enable ss03 stylistic set on Inter. Never use drop shadows on cards.
Design Insights
Industry Context
In the landscape of modern digital products, Raycast's design system stands out for its distinctive visual identity. Compared to peers, Raycast invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.
Industry Context
In the landscape of modern digital products, Raycast's design system stands out for its distinctive visual identity. Compared to peers, Raycast invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.
Industry Context
In the landscape of modern digital products, Raycast's design system stands out for its distinctive visual identity. Compared to peers, Raycast invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.
Related Design Systems
Explore similar design languages from the same category:
Frequently Asked Questions
Q. What are Raycast's brand colors?
The Raycast palette uses 17 colors, led by white (#ffffff), white-pressed (#e8e8e8), on-primary (#000000), ink (#f4f4f6), body (#cdcdcd). The primary brand color is white (#ffffff).
Q. What fonts does the Raycast design system use?
Display type is set in Inter at 64px / weight 600, while body and UI text uses Inter at 13px / weight 400.
Q. What kind of website is Raycast?
Raycast is a Developer Tools & IDEs brand. Its design system documents 17 colors, 9 type styles and a 7-step border-radius scale.
Q. What border radius values does Raycast use?
The radius scale runs from 0 (0px) to 16 (16px): 0 (0px), 4 (4px), 6 (6px), 8 (8px), 10 (10px), 16 (16px).
Q. Where can I see the Raycast design system?
This page shows Raycast's color palette, typography scale, components, border radii and design philosophy in English, Korean and Japanese.