Inside the The Raycast Keyboard website design
The Raycast Keyboard is a hardware website built with custom code, Next.js, and Three.js. Its pages are built from hero, feature card, other, and footer sections, shown here in full-page captures and a scroll recording. Typography: Inter (display text, headings, and body text) and Geist Mono (monospaced text). Colours: background #07080A, text #FFFFFF, main buttons #E6E6E6, secondary text #9C9C9D.
A low-profile mechanical keyboard designed for instant access to your favorite commands. Its visual style is photographic, bold, and dark mode native, with navigation bar, hero, and feature card among its components.
Why we picked it
A near-black background with warm red key lighting lets the keyboard photography do the talking, while a circular ring of custom keycaps and an exploded switch diagram explain the hardware without dense paragraphs. Small mono-style spec tables for force, travel and weight give a dense product page an easy scanning path for anyone comparing details.
What to look for
- Hero: a specific headline instead of a generic slogan
- Feature Card: one idea per card
- Footer: grouped navigation with clear column headings
Sections from The Raycast Keyboard
Questions designers ask
What fonts does The Raycast Keyboard use?
The Raycast Keyboard uses Inter for display text, headings, and body text, and Geist Mono for monospaced text, measured from the captured page's CSS.
What is the The Raycast Keyboard website built with?
The The Raycast Keyboard website is built with custom code, Next.js, and Three.js, detected when the page was captured.
What colours does the The Raycast Keyboard website use?
Measured from the captured page's CSS, the The Raycast Keyboard website uses #07080A for the background, #FFFFFF for text, #E6E6E6 for main buttons, and #9C9C9D for secondary text.
What sections does the The Raycast Keyboard website have?
The The Raycast Keyboard website includes hero, feature card, other, and footer sections. Each one opens on its own page, so you can compare it with the same section on other websites.
