Inside the SuperHi website design
SuperHi is an education website built with custom code and Next.js. Its pages are built from navbar, FAQ, other, hero, feature grid, CTA, testimonials, and product demo sections, shown here in full-page captures and a scroll recording. Typography: Haas Grot Disp (display text and headings), Haas Grot Text (body text), and Martian Mono (monospaced text). Colours: background #F0F6FF, text #111118, main buttons #2727E6, accent #16AB59.
Learn code, design, and project management skills with flexible online courses. Join a global community, and curate your creative career. Its visual style is playful, colourful, and bold, with navigation bar, hero, and logo strip among its components.
Why we picked it
Bold scattered shapes in primary colours and a huge black headline give the page a playful, creative energy that fits a design school. Each section down the page gets its own flat colour block (pink, green, orange, yellow) which breaks up a long scroll and makes it easy to tell course topics apart at a glance.
What to look for
- Navbar: a short menu: only the destinations visitors actually look for
- FAQ: questions written the way customers actually ask them
- Hero: a specific headline instead of a generic slogan
- Feature Grid: mixed card sizes that show priority
Questions designers ask
What fonts does SuperHi use?
SuperHi uses Haas Grot Disp for display text and headings, Haas Grot Text for body text, and Martian Mono for monospaced text, measured from the captured page's CSS.
What is the SuperHi website built with?
The SuperHi website is built with custom code and Next.js, detected when the page was captured.
What colours does the SuperHi website use?
Measured from the captured page's CSS, the SuperHi website uses #F0F6FF for the background, #111118 for text, #2727E6 for main buttons, and #16AB59 as an accent.
What sections does the SuperHi website have?
The SuperHi website includes navbar, FAQ, other, hero, feature grid, CTA, testimonials, and product demo sections. Each one opens on its own page, so you can compare it with the same section on other websites.
