Inside the Gradium website design
Gradium is an AI website built with custom code, Next.js, and Three.js. Its pages are built from hero, logo cloud, founder, features, CTA, and footer sections, shown here in full-page captures and a scroll recording. Typography: Favorit (display text and headings), IBM Plex Sans (body text), and IBM Plex Mono (monospaced text). Colours: background #121314, text #FFFFFF, accent #DAFF52, surface #AED2FF.
Low latency Text-to-Speech, Speech-to-Text, Voice Cloning and Voice Design. 50 ms to first audio, one API, start free. Its visual style is bold, typographic, and minimal, with announcement bar, navigation bar, and hero among its components.
Why we picked it
A massive particle-cloud ribbon wraps around huge grey and white type on a near-black background, giving a voice-data feel before the product interface even loads. Four-panel grids with matching dark cards let visitors scan each model type at a glance, while one bright blue band and a plain team photo break up the dark sections for pacing and trust.
What to look for
- Hero: a specific headline instead of a generic slogan
- Logo Cloud: a short label that says what the logos are: customers, partners, or integrations
- Founder: a genuine portrait rather than stock imagery
- Features: benefits framed around what the user gets, not internal capability names
Questions designers ask
What fonts does Gradium use?
Gradium uses Favorit for display text and headings, IBM Plex Sans for body text, and IBM Plex Mono for monospaced text, measured from the captured page's CSS.
What is the Gradium website built with?
The Gradium website is built with custom code, Next.js, and Three.js, detected when the page was captured.
What colours does the Gradium website use?
Measured from the captured page's CSS, the Gradium website uses #121314 for the background, #FFFFFF for text, #DAFF52 as an accent, and #AED2FF for surfaces.
What sections does the Gradium website have?
The Gradium website includes hero, logo cloud, founder, features, CTA, and footer sections. Each one opens on its own page, so you can compare it with the same section on other websites.
