59 whole product screens in three sections, all of them 1440 x 960 and all of them on the same navigation. This page is about what that buys you and what it...
59 whole product screens in three sections, all of them 1440 x 960 and all of them on the same navigation. This page is about what that buys you and what it asks of you.
Every screen in all three sections instances one of two published components: Dashboard / Sidebar, 272 wide with a search field, six menu buttons, a Tasks count, Support, Settings and the user; or Dashboard / Sidebar · Rail, 72 wide with the same navigation collapsed to icons.
Nothing is redrawn. Rename a menu item, change an icon, add a row, and it reaches all 59 screens at once. That is usually the first thing to rot in a screen library, because most of them copy the chrome into every frame.
21 of the 59 screens are drawn on the rail rather than the full sidebar, so both states are already laid out for you rather than left as an exercise.
Ten screens also carry a second navigation column beside the sidebar, for products deep enough to need one: three in Informational pages and seven in Settings. They are built from the same SidebarMenuButton, so the two columns stay consistent with each other.
These are assembled from the kit, not drawn over it. Between them the 59 screens place 3,728 live instances, an average of 63 each, and the range is wide:
The count is instances placed on the screen, not the parts nested inside them. A screen showing 27 means 27 things you can swap a variant on, each still reporting its own properties.
A chart library dropped into a dashboard usually sits in a third of the space it was given. Every chart here is stretched to the inner width of the card it is in, and every table is refitted to the card around it.
That matters when you resize. The kit Table ships with five fixed 169 columns; on these screens the columns, the cells, each cell's divider, the header board, the footer and the caption have all been refitted together. If you widen a card, redo the same set rather than the columns alone, or the dividers will part company with the cells.
Charts behave differently by type: Area and Line scale their plot, Bar widens through its flex, and Radial and Radar are centred rather than scaled, because a circle stretched is a circle spoiled.
Unlike Pro Blocks, these ship at a single size. Every screen is 1440 x 960, with no mobile board, because a dashboard is not a responsive version of itself - a phone gets a different information design, not the same one narrowed.
Each screen sits on a showcase board of 1520 x 1040, so there is 40 of padding around it in the file. The component you place is the 1440 x 960 screen, not the board.
Acme Inc. and its people throughout: Olivia Martin, Sofia Davis, Jackson Lee and the rest, with matching email addresses. Companies in the tables are Northwind, Globex, Initech, Umbrella and Hooli. No third-party brands anywhere, including the integrations screens, whose apps have generic names and Tabler icons.
Where a screen needs a photograph or a map, it uses an Aspect Ratio placeholder rather than a stock image, so nothing has to be licensed and nothing looks like someone else's product.
Every component is named for its section, its number and what it is: Dashboard / 12 Balance, Informational page / 08 Calendar, Settings page / 17 Notifications. The number is the file's own, and the same number appears on this site, so a screen you pick here is the one you search for in Penpot.
Names repeat within a section on purpose - three Notifications, three Calendars, two Balances - because they are alternatives to choose between rather than different things. The number is what tells them apart.