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: