Inside the Badgey website design
Badgey is a productivity website built with custom code and Next.js. Its pages are built from navbar, hero, features, gallery, forms, FAQ, CTA, and footer sections, shown here in full-page captures and a scroll recording. Typography: Inter. Colours: background #F4F4F4, text #000000, surface #FFFFFF, secondary text #6C6C72.
A name badge app for iPhone: flip your phone on a lanyard and your badge turns to face the room; in a chest pocket your name stays on show. Share it by QR code. Its visual style is minimal, corporate, and soft, with navigation bar, hero, and floating product card among its components.
Why we picked it
Scattered badge cards in moody gradients frame a huge light headline, then a real iPhone mockup shows the badge in use so you grasp the product instantly. Soft pastel bands pace each use case, while a sudden black section and bold blue closer break the rhythm and keep the long scroll from feeling flat.
What to look for
- Navbar: a short menu: only the destinations visitors actually look for
- Hero: a specific headline instead of a generic slogan
- Features: benefits framed around what the user gets, not internal capability names
- Gallery: minimal interface around the images
Questions designers ask
What fonts does Badgey use?
Badgey uses Inter, read from the fonts loaded on the captured page.
What is the Badgey website built with?
The Badgey website is built with custom code and Next.js, detected when the page was captured.
What colours does the Badgey website use?
Measured from the captured page's CSS, the Badgey website uses #F4F4F4 for the background, #000000 for text, #FFFFFF for surfaces, and #6C6C72 for secondary text.
What sections does the Badgey website have?
The Badgey website includes navbar, hero, features, gallery, forms, FAQ, CTA, and footer sections. Each one opens on its own page, so you can compare it with the same section on other websites.
