Inside the Freckle website design
Freckle is a technology website built with custom code, Next.js, and Three.js. Its pages are built from hero, editorial, features, and footer sections, shown here in full-page captures and a scroll recording. Typography: Diatype Rounded. Palette: #202000, #608080, #C0E0C0.
A kids phone built for real-world adventure Its visual style is minimal, playful, and product led, with primary button, carousel, and footer among its components.
Why we picked it
A chunky clay mascot and bouncy green bubble logo set a friendly tone before any text, so parents sense this is a kid's product right away. Generous white space between short, centered sections and photos of kids outdoors pace the long page into easy bites, while the rounded green device repeats the mascot's soft shapes for visual consistency.
What to look for
- Hero: a specific headline instead of a generic slogan
- Editorial: expressive typography with comfortable reading measure
- Features: benefits framed around what the user gets, not internal capability names
- Footer: grouped navigation with clear column headings
Questions designers ask
What fonts does Freckle use?
Freckle uses Diatype Rounded, read from the fonts loaded on the captured page.
What is the Freckle website built with?
The Freckle website is built with custom code, Next.js, and Three.js, detected when the page was captured.
What colours does the Freckle website use?
The captured palette includes #202000, #608080, and #C0E0C0.
What sections does the Freckle website have?
The Freckle website includes hero, editorial, features, and footer sections. Each one opens on its own page, so you can compare it with the same section on other websites.
Can I use Freckle's design for my own project?
Use it as a reference for structure, hierarchy, and style rather than something to copy. The DESIGN.md download summarises Freckle's typography, colours, and components for your team or an AI tool.
