Design a Food Delivery App in Penpot

Design a 2-screen mobile app in Penpot using systematic spacing, typography, and color rules.

Introduction

30 Second Summary

Every food delivery app you use looks effortless. Clean cards, consistent spacing, colors that guide your eye to the right button. Behind that polish is a system of rules that any developer can learn.

In this project, you will design a two-screen mobile food delivery app in Penpot using systematic, rule-based design principles that translate directly to CSS.

What You'll Build

A mobile app design called "BiteBuddy" with a Home screen and a Restaurant Detail screen, built using an 8-point grid, a typography scale, and a limited color palette so every decision is rule-based rather than artistic.

By the end of this project, you'll have:

A design system page with defined colors, typography scale, and spacing tokens based on the 8-point grid.
A two-screen mobile app design (Home and Restaurant Detail) with consistent visual hierarchy, Flex Layout, and reusable components.
An interactive prototype connecting both screens, with inspectable CSS output ready to inform front-end implementation.
Secret Mission: Add a dark mode version of your Home screen using Penpot's design tokens to swap your color palette automatically.

Are there any prerequisites?

You need a basic understanding of HTML/CSS (particularly CSS Flexbox). No prior design experience is needed.

Set Up Your Design Project

Every good design starts with a structured workspace. Before drawing a single shape, you need a project that separates your reusable design system from your actual app screens.

In this step, you'll create your Penpot project, set up mobile-sized boards for both screens of the app, and add grid guides that enforce consistent spacing throughout the design.

In this step, get ready to:

Create a project and file with two organized pages.
Set up two mobile-sized boards for the Home and Restaurant Detail screens.
Apply 8px grid guides to both boards for consistent spacing.

Create a new project and file in Penpot

Penpot organizes your work into projects (folders) and files (design documents). You'll create one project for the entire app and one file that holds all your design pages.

In your Penpot dashboard, click the + New project button.
Name the project BiteBuddy and press Enter to confirm.
Inside your new BiteBuddy project, click the + button to create a new file.
Name the file App Design and press Enter.
The file opens in the workspace. You'll see a page tab at the bottom-left called Page 1.

Now you need two pages to keep things organized: one for your design system and one for the actual screens.

Double-click the Page 1 tab name and rename it to Design System.
Right-click the page tab area and select the option to add a new page.
Name the new page Screens.

Why two pages?

The Design System page will hold your color palette, typography scale, and spacing tokens. The Screens page is where you'll build the actual app layouts.

Separating them keeps your workspace clean and makes it easy to reference your system while designing.

Don't see the page tabs?

Page tabs appear at the bottom-left of the workspace. If you can't find them, make sure you're inside the file (not still on the dashboard).

help me find the page tabs in Penpot

Set up the mobile frames

Boards in Penpot are fixed-size containers that represent screens. You'll create two boards sized to match an iPhone 14 screen.

Click the Screens page tab to switch to it.
Press B on your keyboard to activate the Board tool (you can also click it in the toolbar at the top).
Click and drag anywhere on the canvas to create a board of any size.
In the Design panel on the right, find the width (W) and height (H) fields.
Set the width to 390 and the height to 844.
Double-click the board's name on the canvas (it will say something like "Board 1") and rename it to Home.

Now create the second board for the Restaurant Detail screen.

Press B again to activate the Board tool.
Click and drag on the canvas to the right of your first board to create a second one.
Set its width to 390 and height to 844 in the Design panel.
Double-click the board name on the canvas and rename it to Restaurant Detail.

Why 390 x 844?

These are the dimensions of an iPhone 14 screen in logical pixels. Designing at this size gives you a standard mobile viewport that works well for food delivery apps.

You should now see two equally-sized boards on your Screens page, labeled Home and Restaurant Detail.

Board created at the wrong size?

Click on the board to select it. In the Design panel on the right, check the W and H fields. You can type exact values there at any time to resize the board precisely.

help me resize my board in Penpot

Add a layout guide to enforce the 8pt grid

The 8-point grid is a spacing system where all measurements use multiples of 8. Adding a grid guide makes this visible on your canvas so you can snap elements to consistent positions.

Click on the Home board to select it.
In the Design panel on the right, scroll down to the Guides section.
Click the + button to add a new guide.
Set the guide type to Square (this creates an even grid in both directions).
Set the size to 8 (pixels).
Now click on the Restaurant Detail board to select it.
Repeat the same process: click + in the Guides section, set type to Square, and set size to 8.

Both boards should now display a faint grid overlay with 8px squares. This grid is only visible while designing. It never shows up in exports.

What is the 8-point grid?

The 8pt grid is an industry-standard spacing system used by Google Material Design, GitHub, and Atlassian. Every padding, margin, and gap in your design uses a multiple of 8 (8, 16, 24, 32, 40, 48).

A 4px half-step is allowed for tight cases. This removes guesswork from spacing decisions and ensures your design translates cleanly into CSS.

Don't see the grid on your board?

Make sure you have the board itself selected (not a layer inside it). The Guides section only appears in the Design panel when a board is selected.

If guides are hidden, press Ctrl+' (macOS: Cmd+') to toggle guide visibility.

help me show the grid guides on my Penpot board

Your workspace is ready. Next up, you'll define the design system that powers every visual decision in the app.

Define Your Design System

Your boards are set up with grid guides, so every element you place will snap to consistent intervals. But without predefined colors, fonts, and spacing values, you would still be guessing at every visual decision.

A design system solves this by giving you a fixed set of rules to follow. In this step, you will define the exact colors, typography styles, and spacing tokens that every screen in BiteBuddy will use.

In this step, get ready to:

Build a color palette with six named colors and save them to your file library.
Define a typography scale with five text styles using the Inter font.
Document a spacing scale based on the 8-point grid.

Build your color palette

Professional designs assign colors to roles rather than picking them at random. Each color has a job: one draws attention to buttons, another recedes into backgrounds, another communicates success.

You will create six colors and save each to your file's local library so you can reuse them across every screen.

Switch to the Design System page using the page list in the left sidebar.
Press R to activate the Rectangle tool and draw a small square (about 80x80px) on the canvas.
With the rectangle selected, click the fill color swatch in the right Design panel to open the color picker.
Type FF5A1F into the hex field and press Enter.
In the color picker, select File Library from the libraries dropdown menu.
Click the + button to add this color to your local file library.
In the Assets panel (left sidebar), find the new color under Local library and rename it to Primary.

Repeat this process for the remaining five colors. Draw a new rectangle for each, set its fill to the hex value, and save it to the library with the name shown below:

Surface with hex #FFFFFF (white backgrounds).
Surface Variant with hex #F5F5F5 (card backgrounds).
Text Primary with hex #1A1A1A (headings).
Text Secondary with hex #6B7280 (body text and descriptions).
Accent with hex #10B981 (ratings and success states).

You should now have six labeled color rectangles on your Design System page and six colors saved in your file library.

Why assign roles to colors?

When every color has a named role, you never have to ask "what shade of gray was that?" again. Changing your brand orange later means updating one library color, and every screen updates with it.

These roles also map directly to CSS custom properties in code. Your Primary becomes --color-primary and your Surface Variant becomes --color-surface-variant.

Don't see your colors in the Assets panel?

Make sure you selected File Library from the dropdown inside the color picker before clicking the + button. If you skipped this step, the color may not have saved to your library.

You can also open the Assets panel with Alt+I (Windows/Linux) or Option+I (macOS) to check the Colors section.

Why aren't my colors showing in the Penpot file library?

Define your typography scale

A typography scale creates a clear visual hierarchy. Readers instantly know which text is a heading, which is body copy, and which is a caption. You will define five text styles using the Inter font, which is available in Penpot's built-in Google Fonts catalog.

Press T to activate the Text tool and click on an empty area of your Design System page to create a text layer.
Type Heading 1 as the sample text.
In the right Design panel, set the font family to Inter.
Set the font size to 24, the font weight to Bold, and the line height to 32.
Open the Assets panel in the left sidebar.
With the text layer still selected, click the + icon next to the Typographies section to save the style.
Rename the new typography style to Heading 1 in the Assets panel.

Repeat this process for the remaining four styles. Create a new text layer for each, set its properties, and save it to the library:

Heading 2: Inter, 20px, Semibold, line-height 28px.
Body: Inter, 16px, Regular, line-height 24px.
Body Small: Inter, 14px, Regular, line-height 20px.
Caption: Inter, 12px, Regular, line-height 16px.

You should now have five text samples on your canvas and five typography styles in your library.

Why these specific sizes?

The line heights (32, 28, 24, 20, 16) are all multiples of 4 or 8. This means your text will always align with the 8-point grid you set up in Step 1.

The 16px body size is the recommended minimum for mobile readability. Each step up (20px, 24px) creates a clear jump in visual hierarchy without being excessive.

Typography style not saving the right properties?

Make sure the text layer is selected (click on it with the Move tool, not double-clicked into edit mode) before clicking the + in the Typographies section. If you are in text editing mode, Penpot may not capture all properties.

Help me save typography styles to my Penpot library

Document your spacing scale

The 8-point grid gives you a ruler, but you still need to decide which multiples to use. A spacing scale locks in a small set of values so every gap, margin, and padding in your design comes from the same menu of options.

Press R to select the Rectangle tool.
Draw a small square and set its width and height to 4 in the Design panel on the right.
Press T to add a text label next to it that reads 4px (tight).
Repeat for each spacing token, creating a square whose width and height match the value:

8px (xs) square.
16px (sm) square.
24px (md) square.
32px (lg) square.
48px (xl) square.

Arrange the six squares in a horizontal row on your Design System page so you can reference them as a visual cheat sheet.

Why limit yourself to six spacing values?

Constraints make design faster. When you reach for padding, you only have six choices instead of infinite pixels. This eliminates the "should this be 13px or 15px?" debates and keeps everything aligned.

These values are also the only ones you will use when building your Home and Restaurant Detail screens in the next steps.

Your Design System page should now show three sections: color swatches, typography samples, and spacing token squares.

Your design system is locked in. Every decision from this point forward pulls from these defined values. Next up, you will use these colors, fonts, and spacing tokens to build the Home screen.

Design the Home Screen

Your design system is locked in. You have colors, typography, and spacing rules that eliminate guesswork from every decision you make.

Now it's time to put those rules to work. In this step, you'll build the Home screen for BiteBuddy, starting from the top and working down. Every element will use your defined spacing tokens, color library, and type styles.

In this step, get ready to:

Build the top section with a greeting and search bar using Flex Layout.
Add horizontal category filter pills.
Create restaurant cards with image placeholders, ratings, and tags.

Build the top section

The top section of a mobile app sets the context for the user. You'll create a status bar area, a greeting message, and a search bar, then wrap them in a vertical Flex Layout so the spacing stays consistent.

Switch to the Screens page and double-click the Home board to enter it.
Press R to activate the Rectangle tool.
Draw a rectangle at the very top of the board, spanning the full width (390px) with a height of 48px.
In the Design panel on the right, set the fill to your Surface color (#FFFFFF) from your library.
Rename this layer to Status Bar in the Layers panel on the left.

Why start with a status bar?

Mobile screens reserve the top 44-48px for the system status bar (time, battery, signal). You're not designing the actual status bar content, just reserving the space so your layout starts at the right position.

Press T to activate the Text tool.
Click below the status bar area and type Good evening, Alex.
Select the text layer and apply the Heading 2 style from your text library (20px, Semibold, 28px line-height).
Set the text color to Text Primary (#1A1A1A) from your color library.

Press R again and draw a rectangle below the greeting text.
Set the width to fill the available space (around 358px, leaving room for padding) and the height to 48px.
In the Design panel, set the fill to Surface Variant (#F5F5F5).
Set the border radius to 8 in the border radius field (all four corners).
Press T and add placeholder text inside the rectangle, such as Search restaurants....
Style the placeholder text with Body (16px, Regular) and set its color to Text Secondary (#6B7280).

Now wrap these elements in a Flex Layout to control their spacing automatically.

Select all three elements (status bar, greeting text, search bar) by holding Ctrl (Windows) or Cmd (macOS) and clicking each one.
Right-click the selection and choose Add Flex Layout.
In the Design panel, set the direction to Column (vertical stacking).
Set the gap to 16 (this is the space between each child element).
Set the horizontal padding (left and right) to 16.

What is Flex Layout in Penpot?

Penpot's Flex Layout is built directly on CSS Flexbox. The properties you set here (direction, gap, padding) map 1:1 to the CSS you would write in code. This means your design decisions translate directly into front-end implementation without a translation layer.

Your top section should now show the status bar, greeting, and search bar stacked vertically with even 16px spacing between them.

Elements not stacking vertically?

Make sure the direction is set to Column in the Flex Layout options, not Row. Row stacks horizontally. Column stacks vertically.

If the elements disappeared or look collapsed, check that each child element has a defined height. The status bar should be 48px and the search bar should be 48px.

Why aren't my elements appearing inside the Flex Layout?

Add category filter pills

Category pills give users a quick way to filter restaurants. You'll create a horizontal row of rounded buttons where one is visually "active" using your Primary color.

Press R and draw a small rounded rectangle for the first pill.
Set the width to approximately 56px (it will vary by text length), height to 36px.
Set the border radius to 20 to create a pill shape.
Set the fill to Primary (#FF5A1F) for the active state.
Press T and type All inside the pill.
Apply the Caption text style (12px, Regular) and set the text color to white (#FFFFFF).
Set horizontal padding inside the pill to 16px on each side.

Duplicate the pill four times (Ctrl+D on Windows or Cmd+D on macOS).
Change the text in each duplicate to: Pizza, Sushi, Burgers, Healthy.
For these four inactive pills, change the fill to Surface Variant (#F5F5F5).
Change their text color to Text Secondary (#6B7280).

Select all five pills.
Right-click and choose Add Flex Layout.
Set the direction to Row (horizontal).
Set the gap to 8.

Why 8px gap for the pills?

The 8px gap comes directly from your spacing scale (the "xs" token). Tight horizontal elements like filter pills use smaller spacing so they feel grouped together. The 16px gap you used for the top section is for separating distinct sections vertically.

You should now see a horizontal row of pill-shaped buttons. The first pill ("All") appears in orange with white text, while the rest are light grey with grey text.

Pills overlapping or stretching?

Check that each pill has a fixed height of 36px. If the pills are stretching vertically, set align-items to Center in the Flex Layout options.

If the pills are overlapping, confirm the gap is set to 8 and that the direction is Row, not Column.

Help me fix my category pills layout in Penpot

Create restaurant cards

Restaurant cards are the main content of the Home screen. Each card is a self-contained unit with an image, name, rating, and tags. You'll build one card and then duplicate it.

Press R and draw a rectangle for the image placeholder.
Set the width to fill the card area (around 358px) and height to 120px.
Set the fill to Surface Variant (#F5F5F5) as a placeholder color.
Set the border radius. Only the top-left and top-right corners should be 8. Leave the bottom corners at 0. You can set individual corners in the Design panel by clicking the corner radius expand icon.

Press T and add the restaurant name below the image placeholder.
Type a name like Bella Napoli and apply the Heading 2 text style.
Set the text color to Text Primary (#1A1A1A).

Add a rating row below the restaurant name using the Text tool.
Type ⭐ 4.8 followed by a separator and 25-35 min.
Apply the Body Small text style (14px, Regular) and set the color to Text Secondary (#6B7280).

Add cuisine tags below the rating row.
Type something like Italian • Pizza • Pasta.
Apply the Caption text style (12px, Regular) and set the color to Text Secondary (#6B7280).

Now wrap all card elements into a Flex Layout to create the card structure.

Select the image placeholder, restaurant name, rating row, and cuisine tags.
Right-click and choose Add Flex Layout.
Set the direction to Column (vertical).
Set the gap to 0.
Set the padding to 12 on all sides.
The overall card height should be approximately 200px. Adjust if needed.
Rename this Flex Layout container to Restaurant Card in the Layers panel.

Why 0px gap with 12px padding?

The 0px gap means the text elements sit right against each other. The 12px padding gives breathing room between the card content and its edges. This is a common card pattern: tight internal spacing with generous padding around the border.

In CSS, this translates to gap: 0 and padding: 12px on the flex container.

Select the completed card and duplicate it 1-2 times (Ctrl+D or Cmd+D).
Change the restaurant names and details in each duplicate to make them unique (e.g., Sakura Sushi, Green Bowl).
Select all 2-3 restaurant cards.
Right-click and choose Add Flex Layout.
Set the direction to Column and the gap to 16.

Your Home screen should now show a scrollable-looking list of restaurant cards, each separated by 16px of space.

Cards not looking uniform?

Make sure each card has the same Flex Layout settings: Column direction, 0px gap, 12px padding. If one card looks different, select it and check its layout properties in the Design panel on the right.

If the image placeholder is not showing rounded top corners, click the expand icon next to the border radius field to set individual corners. Set the top-left and top-right to 8 and the bottom corners to 0.

Help me fix my restaurant card layout in Penpot

Your Home screen is complete. You've built a realistic mobile layout using only your design system values. Next up, you'll design the Restaurant Detail screen that users navigate to when they tap a card.

Design the Restaurant Detail Screen

Your Home screen is complete with restaurant cards that invite the user to tap and explore. Now you need a destination for that tap.

The Restaurant Detail screen is where the user decides what to order. It needs a clear hierarchy: a hero image to set the mood, restaurant info at a glance, a scannable menu list, and a prominent order button that stays visible while scrolling.

In this step, get ready to:

Build the restaurant header with hero image, name, and details.
Create a scrollable menu section with item rows.
Add a sticky call-to-action button at the bottom of the screen.

Build the header

The top of this screen sets the visual tone for the restaurant. A large hero image draws attention, followed by key details the user needs before browsing the menu.

Double-click the Restaurant Detail board in the Layers panel to enter it.
Press R to select the Rectangle tool.
Draw a rectangle at the very top of the board, spanning the full width (390px) with a height of 200px.
In the Design panel on the right, set the fill to Surface Variant (#F5F5F5) from your color library.
Name this layer hero-image in the Layers panel. This acts as your image placeholder.

Why a placeholder instead of a real image?

Using a solid-color rectangle keeps the design system-focused. When a developer implements this screen, they will swap the placeholder for a dynamic image loaded from an API.

Press T to select the Text tool.
Click below the hero image and type Sakura Sushi House.
Apply the Heading 1 text style from your library (24px, Bold, 32px line-height).
Set the text color to Text Primary (#1A1A1A).

Add another text element below the restaurant name for the rating and delivery info.
Type 4.8 ★ • 25-35 min • Free delivery.
Apply the Body Small text style (14px, Regular, 20px line-height).
Set the color to Text Secondary (#6B7280).

Add one more text element for the restaurant description.
Type Authentic Japanese cuisine with fresh ingredients sourced daily..
Apply the Body text style (16px, Regular, 24px line-height) with Text Secondary color.

Now wrap these text elements in a Flex Layout container to control spacing.

Select all three text elements (restaurant name, rating row, description) by holding Ctrl (Windows) or Cmd (macOS) and clicking each one.
Press Shift+A to add Flex Layout.
In the Design panel, set the direction to Column (vertical).
Set the gap to 8px.
Set the horizontal padding (left and right) to 16px.
Name this container restaurant-info in the Layers panel.

Why 8px gap here instead of 16px?

The restaurant name, rating, and description are tightly related pieces of information. Using 8px (one unit of your spacing scale) groups them visually. The 16px gap from the Home screen works for separating distinct sections.

Your Restaurant Detail header should now show the hero image at the top, followed by the restaurant name, rating row, and description spaced evenly below it.

Text not aligning inside the Flex container?

Make sure you selected all three text layers before pressing Shift+A. If only one layer ended up inside, drag the others into the Flex container in the Layers panel.

Help me fix my Flex Layout container for the restaurant info section.

Create menu items

The menu section is where the user browses food options. Each menu item needs to show the item name, a description, the price, and a small image. This is a classic horizontal layout pattern.

Press T and add a section heading below the restaurant-info container.
Type Popular Items.
Apply the Heading 2 text style (20px, Semibold, 28px line-height) with Text Primary color.
Position it with 16px left padding to align with the info section above.

Now build a single menu item row. You will duplicate it afterwards to create the full list.

Create a text group for the menu item details. Press T and add three text layers stacked vertically:
First text: Dragon Roll using Body style in bold (16px, Bold) with Text Primary color.
Second text: Shrimp tempura, avocado, eel sauce using Body Small style (14px) with Text Secondary color.
Third text: $14.99 using Body style in bold (16px, Bold) with Text Primary color.
Select all three text layers and press Shift+A to wrap them in a vertical Flex Layout with 4px gap.

Create the food thumbnail. Press R and draw a square next to your text group.
Set its size to 64px width and 64px height in the Design panel.
Set the border-radius to 8px.
Fill it with Surface Variant (#F5F5F5) as an image placeholder.

Select both the text group container and the thumbnail rectangle.
Press Shift+A to wrap them in a horizontal Flex Layout.
In the Design panel, set the direction to Row (horizontal).
Set justify-content to Space between. This pushes the text to the left and thumbnail to the right.
Set align-items to Center. This vertically centers both elements within the row.
Set horizontal padding to 16px.
Name this container menu-item in the Layers panel.

What does space-between do?

In CSS Flexbox, justify-content: space-between distributes items so the first sits at the start and the last at the end, with equal space between them. Penpot's Flex Layout mirrors this behavior exactly.

Duplicate the menu-item container 4 times by selecting it and pressing Ctrl+D (Windows) or Cmd+D (macOS).
Update the text in each duplicate to show different items (for example: Salmon Nigiri, Miso Ramen, Edamame, Matcha Ice Cream).
Select all 5 menu item rows.
Press Shift+A to wrap them in a vertical Flex Layout.
Set the gap to 12px.
Name this container menu-list.

Your menu section should now show a heading and five evenly-spaced item rows, each with text on the left and a square thumbnail on the right.

Menu items overlapping or misaligned?

Check that each individual menu-item row has its direction set to Row (horizontal), and the outer menu-list container has its direction set to Column (vertical). Mixing these up is a common mistake.

Help me fix the layout of my menu items section.

Add the order button

A food delivery app needs a persistent order button. Users should always see it, no matter how far they scroll through the menu. This is achieved by placing the button with absolute positioning inside the board.

Press R and draw a rectangle near the bottom of the Restaurant Detail board.
In the Design panel, set the width to 358px (this is the board width of 390px minus 32px total margin).
Set the height to 56px.
Set the border-radius to 12px.
Set the fill to Primary (#FF5A1F) from your color library.

Press T and click inside the rectangle.
Type Add to Cart.
Set the text to 16px, Bold, white (#FFFFFF).
Center the text both horizontally and vertically within the button using the alignment options at the top of the Design panel.

Select the button rectangle (with the text inside it).
In the Design panel, look for the Position option and change it from Static to Absolute.
Set its position so there is 16px between the bottom edge of the button and the bottom edge of the board.
Center it horizontally (16px from both left and right edges).
Name this layer cta-button.

What does absolute positioning do in Flex Layout?

Absolute positioning removes an element from the normal flex flow. The button sits in a fixed spot at the bottom of the board regardless of how many menu items appear above it. In CSS, this maps to position: absolute within a relatively-positioned parent.

Your Restaurant Detail screen is now fully designed. You should see the hero image at the top, restaurant info below it, the Popular Items menu list in the middle, and a bold orange button anchored at the bottom.

Button hidden behind other elements?

Absolute-positioned elements can end up behind other layers. In the Layers panel, drag cta-button to the top of the layer stack so it renders on top of everything else.

Help me fix my button positioning on the Restaurant Detail screen.

Your second screen is complete. Next, you will turn your repeated elements into reusable components and connect both screens into a clickable prototype.

Build Reusable Components and Prototype

Your two screens are fully designed with consistent spacing, typography, and color. The elements you built (restaurant cards, category pills, menu items) appear multiple times across your design. Right now, each one is an independent copy.

In this step, you'll turn those repeated elements into reusable components. Components work like a single source of truth. Update the main component once, and every instance updates automatically. You'll also connect your screens into an interactive prototype and inspect the CSS output that Penpot generates from your layouts.

In this step, get ready to:

Convert key design elements into reusable components organized in the Assets panel.
Link the Home and Restaurant Detail screens into a clickable prototype.
Inspect the CSS output to see how your design translates directly into front-end code.

Convert elements to components

A component in Penpot is a reusable element with a main version (the source of truth) and copies called instances. When you update the main component, all instances update automatically. This is the same mental model as React components or web components in front-end development.

On the Screens page, click on one of your restaurant cards in the Home board to select it.
Right-click the selection and choose Create component from the menu. You can also use the keyboard shortcut Ctrl+K (Windows/Linux) or Cmd+K (macOS).
You'll see a double-diamond icon appear on the layer in the Layers panel. This indicates it's now a main component.

Now repeat the process for your other repeated elements:

Select one of the category pills on the Home screen and press Ctrl+K (Windows/Linux) or Cmd+K (macOS) to convert it.
Select one of the menu item rows on the Restaurant Detail screen and create a component from it.
Select the Add to Cart CTA button on the Restaurant Detail screen and create a component from it.
Create a simple bottom navigation bar at the base of your Home screen (a horizontal row with 3-4 icon placeholders like Home, Search, Orders, Profile) and convert it to a component.

What are main components and instances?

The main component is your source of truth. It stores the definitive version of the element. Every copy you place on your screens is an instance linked back to the main.

If you change padding, color, or text on the main component, every instance inherits the change automatically. You can still override individual instances (like changing a restaurant name) without breaking the link.

Now organize your components in the Assets panel so they're easy to find:

Open the Assets panel in the left sidebar.
Find your restaurant card component. Right-click it and choose Rename. Type Cards/Restaurant Card as the new name. The slash creates a folder structure automatically.
Rename your category pill component to Navigation/Category Pill.
Rename the menu item row to Cards/Menu Item Row.
Rename the CTA button to Buttons/Primary Button.
Rename the bottom nav bar to Navigation/Bottom Nav Bar.

Why use slashes in component names?

Naming components with slashes (like Cards/Restaurant Card) creates a folder hierarchy in the Assets panel. This mirrors how you'd organize React components in folders like components/cards/RestaurantCard.tsx.

As your design system grows, this structure keeps everything discoverable. You can expand and collapse folders instead of scrolling through a flat list.

Confirm your components appear organized in the Assets panel under their respective folder groups.

Don't see your components in the Assets panel?

Make sure you selected the element and used Create component (not Group). Grouped elements don't show in the Assets panel as components. Look for the double-diamond icon in the Layers panel to confirm.

If renaming with slashes didn't create folders, double-check you used forward slashes (/) and not backslashes.

Help me organize my components in Penpot's Assets panel.

Link screens into a prototype

With your components in place, you can now connect your two screens into an interactive prototype. This lets you click through the app as if it were a real product.

Switch to Prototype mode by clicking the Prototype tab in the right sidebar.
Select a restaurant card on the Home board.
Drag the prototype connector (the small circle that appears on the right side of the selected element) to the Restaurant Detail board.
In the interaction settings that appear in the right panel, set the trigger to On click.
Set the action to Navigate to (this should be set automatically when you drag).
For the animation, select Slide with direction set to Left. This mimics the standard mobile navigation pattern of sliding to a detail screen.

Now add a back navigation on the Restaurant Detail screen:

Switch back to Design mode briefly using the tab in the right sidebar.
Add a back arrow at the top-left of the Restaurant Detail board. Use a text layer with < or draw a small path for the arrow icon.
Switch back to Prototype mode.
Select the back arrow, drag its prototype connector to the Home board.
Set the animation to Slide with direction set to Right. This creates the reverse sliding effect when going back.

What are prototype triggers and animations?

A trigger defines what user action starts the interaction. On click fires when the user taps or clicks the element. Other options include Mouse enter, Mouse leave, and After delay.

The Slide animation moves the destination board into view. Setting direction to Left mimics a forward navigation (new screen slides in from the right). Direction Right reverses this for back navigation.

Test your prototype by clicking the play button at the top right of the navbar to enter View mode.
Click a restaurant card. You should see the Restaurant Detail screen slide in from the right.
Click the back arrow. The Home screen should slide back in from the left.
Close the View mode tab and return to your workspace.

Clicking the card doesn't navigate?

Make sure you're in Prototype mode (not Design mode) when you drag the connector. The connector circle only appears in Prototype mode.

Also check that the connector wire visually links to the destination board. If the wire is disconnected (dangling), delete it and redrag from the element to the board.

Help me fix my prototype connections in Penpot.

Inspect the CSS output

Penpot's Inspect tab shows real CSS properties for every element you click. Since Penpot's Flex Layout is built directly on CSS Flexbox, the values you see are the exact properties you'd write in your stylesheet.

Open View mode by clicking the play button at the top right of the navbar (or press G then V).
Switch to the Inspect tab in the top navigation bar of the View mode.
Click on the Flex Layout container that wraps your restaurant cards on the Home screen.
Look at the CSS output in the right panel. You should see properties like display: flex, flex-direction: column, gap: 16px, and padding: 16px.
Click on a category pill's Flex Layout container. Notice the CSS shows flex-direction: row and gap: 8px.
Click on a menu item row to see justify-content: space-between and align-items: center in the output.

Why does this CSS match your spacing system?

Every gap and padding value in the CSS output is a multiple of 8 from your spacing scale (8px, 16px, 24px, 32px). This is the 8pt grid system at work. Your design decisions translate directly into clean, predictable CSS values.

Since Penpot uses CSS Flexbox and Grid for layouts, the CSS properties you see in the Inspect tab match how the layout will render in the browser when applied in your front-end code. There's no translation layer between design and development.

You now have a complete picture: a systematic design that outputs production-ready CSS.

Secret mission

Dark Mode with Design Tokens

Your BiteBuddy app looks great in light mode. But what about dark mode? In this secret mission, you'll use Penpot's native design tokens to create a dark theme that swaps your entire color palette automatically. No manual recoloring needed.

Clean Up Your Resources

This project runs entirely in Penpot's cloud, which is free with no ongoing costs or usage limits. There is nothing to pay for whether you keep your project or delete it.

Decide whether to keep your design files for future reference or delete them to tidy up your Penpot dashboard.

Resources you used:

Penpot project "BiteBuddy" (contains your "App Design" file with all screens, components, tokens, and prototype connections).

Keep everything running

No action needed. Choose this if you want to revisit your design, iterate on it, or use it as a reference for future front-end implementation.

Your BiteBuddy project stays on your Penpot dashboard exactly as you left it.
You can export the file at any time from the dashboard by right-clicking the file card and selecting the download option.
Penpot is free with no storage limits, so there is no cost to keeping your project.

Pause - I'll come back to this later

Since Penpot is a free cloud tool with no running processes, there is nothing to pause. Your project sits idle and costs nothing.

Consider downloading a backup of your file. Right-click the file card on your Penpot dashboard and select the download option to save a local copy.
Your project will be right where you left it whenever you come back.

Delete - I don't want to use this again

Remove your BiteBuddy project and all its files permanently from Penpot.

Return to the Penpot dashboard by clicking the Penpot logo in the top left corner of the workspace.
Find the "BiteBuddy" project on your dashboard.
Right-click the project name and select Delete from the menu.
Confirm the deletion when prompted. The project and all files inside it move to the trash.
To permanently remove the project, open the trash area from your dashboard sidebar, find the BiteBuddy project, and select Permanently delete.

What about my Penpot account?

Deleting the project does not delete your Penpot account. Your free account remains active and you can create new projects at any time. If you want to remove your account entirely, you can contact Penpot support to exercise your right to data deletion.

Nice Work!

You just designed a complete mobile food delivery app using systematic, developer-friendly principles in Penpot. Every design decision you made was rule-based, not artistic guesswork.

Here's what you accomplished:

Built a 2-screen food delivery app with consistent visual hierarchy using an 8pt grid spacing system, a defined typography scale, and color roles.
Created reusable components and Flex Layouts that map directly to CSS Flexbox properties, making your design immediately translatable to front-end code.
Connected screens into an interactive prototype and used the Inspect tab to view real CSS output showing exactly how to implement your design.
Secret Mission: Created a dark mode variant using design tokens that swap your entire color theme without touching layout or typography.

The mental model you built here transfers directly to every front-end project you touch. When you see a design, you now understand the system behind it.

Ready to quiz yourself?