132 page designs in eleven types, drawn top to bottom rather than as sections you assemble. This page is about how they are put together and what that means...
132 page designs in eleven types, drawn top to bottom rather than as sections you assemble. This page is about how they are put together and what that means when you build a site out of them.
Every page in every type instances Website / Header (1440 x 72) and Website / Footer (1440 x 410). Both live on the About page / 00 board, which is the only board in the product that is not a design.
Change the navigation once and a whole site follows. That is the part that normally has to be done page by page, and the part that quietly goes out of sync when it is.
Unlike Pro Blocks and App UI, which are each a single Penpot page laid out in columns, every type here is its own page. Opening Pricing does not mean loading twenty landing pages with it, and each type has its own share link.
Nine of the eleven types are a whole page: 1440 wide and as tall as the content needs, from 1322 on a short contact page to 6318 on a customer-service landing page. One design per board, one component per design.
Log in and Sign up are the exception. They are drawn at both breakpoints, a 1440 x 960 desktop and a 390 x 844 mobile on one board, exactly as Pro Blocks does it. That is why those two types ship two components per design and the other nine ship one.
They are the exception for a reason rather than an oversight: a sign-in screen is the page people most often open on a phone, and a marketing page is the one a designer is most likely to want to re-flow themselves.
Nothing on these pages is drawn over the components. The plans are Card and Radio Button, the comparison tables are Table, the question lists are Accordion so a question opens rather than being drawn open, the article bodies are Rich Text so the prose follows the type scale, and the forms are Field with real Inputs and a Textarea.
Every colour, radius and text style comes from the kit's tokens, so a page follows both themes and any brand you apply, the same as everything else.
Acme Inc. and its people throughout, with the same names you will recognise from the app screens. No third-party brands anywhere, including the integrations and logo rows.
Where a page needs a photograph, a map or a product shot, it uses an Aspect Ratio placeholder rather than stock imagery, so nothing has to be licensed and no page looks like somebody else's product.
Every component is named for its page, its number and what it is: Landing page / 04 Banking, FAQ page / 07 Help center, Sign up page / 11 Sidebar dark. The number is the file's own and the same number appears on this site, so a page you pick here is the one you search for in Penpot.
Names repeat within a type on purpose - two pages called Company, two called Business cards, two called UX review - because they are alternatives to choose between rather than different things. The number is what tells them apart.