Inside the Componine website design
Componine is a creative website built with custom code, Next.js, and Three.js. Its pages are built from hero, features, pricing, and footer sections, shown here in full-page captures and a scroll recording. Typography: playfairDisplay. Palette: #404020, #E0E0C0, #A0A080.
We make a diabolical website, product, and branding, that makes your competitors questioning their life choices. Its visual style is editorial, bold, and retro, with navigation bar, hero with background imagery, and logo strip among its components.
Why we picked it
A Renaissance-style painting of reaching hands sets a dramatic mood, while project shots hang in gallery frames on a lined wall, like artwork rather than screenshots. Dark chapters with capital headlines, a pricing block, and a red-circled painting slow the scroll into clear, memorable sections.
What to look for
- Hero: a specific headline instead of a generic slogan
- Features: benefits framed around what the user gets, not internal capability names
- Pricing: two to four plans with a highlighted recommendation
- Footer: grouped navigation with clear column headings
Questions designers ask
What fonts does Componine use?
Componine uses playfairDisplay, read from the fonts loaded on the captured page.
What is the Componine website built with?
The Componine website is built with custom code, Next.js, and Three.js, detected when the page was captured.
What colours does the Componine website use?
The captured palette includes #404020, #E0E0C0, and #A0A080.
What sections does the Componine website have?
The Componine website includes hero, features, pricing, 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 Componine'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 Componine's typography, colours, and components for your team or an AI tool.
