Inside the Pp Frama website design
Pp Frama is a creative website built with Framer. Its pages are built from navbar, hero, and other sections, shown here in full-page captures and a scroll recording. Typography: PP Frama Variable Thin (display text and body text) and PP Frama Black (headings). Colours: background #FFFFFF, text #000000, main buttons #FF6E00, accent #5278D9.
Frama is a geometric typeface by Pangram Pangram, built for clarity, structure, and performance across text, display, and variable font systems. Its visual style is typographic, brutalist, and bold, with navigation bar, hero, and primary button among its components.
Why we picked it
A huge round outlined wordmark sits over a surreal cantilevered house photo, echoing the typeface's circular letterforms before any text is read. Down the page, orange swatches, hardware diagrams and a metal pipe photo keep breaking up long black panels, pacing the scroll and making an abstract geometric font feel like a tangible engineered product.
What to look for
- Navbar: a short menu: only the destinations visitors actually look for
- Hero: a specific headline instead of a generic slogan
Questions designers ask
What fonts does Pp Frama use?
Pp Frama uses PP Frama Variable Thin for display text and body text, and PP Frama Black for headings, measured from the captured page's CSS.
What is the Pp Frama website built with?
The Pp Frama website is built with Framer, detected when the page was captured.
What colours does the Pp Frama website use?
Measured from the captured page's CSS, the Pp Frama website uses #FFFFFF for the background, #000000 for text, #FF6E00 for main buttons, and #5278D9 as an accent.
What sections does the Pp Frama website have?
The Pp Frama website includes navbar, hero, and other sections. Each one opens on its own page, so you can compare it with the same section on other websites.
