Penpot UI/UX 設計（透過 Penpot MCP）

I designed the login screen as a 390×844 board named "Login – Brew & Co". It sits at x=1200 on Page 1, to the right of the board that was already there, which I left alone. I exported it and checked the image. All elements sit inside the board.

What's on it

• Logo and title: a 72px espresso-brown circle with a "B&" mark. Below it are "Brew & Co" at 36px bold and the subtitle "Sign in to order your coffee" at 16px.
• Form: "Email" and "Password" labels sit above white 52px fields with 12px corners and a 1px border. The placeholders are "[email protected]" and "Enter your password". The password field has a "Show" toggle.
• Forgot password?: an underlined, right-aligned link inside a 44px-tall touch area.
• Sign in: a filled 56px button in dark brown with white 18px bold text. It's the strongest element on the screen.
• Create account: an outlined 56px secondary button, set off by an "or" divider.

Design choices

• Colour: the palette is a cream background (#FAF6F1), espresso brown (#3E2723) and a caramel link colour (#8A4B1F). I estimated the contrast rather than measuring it. I expect the text to clear 4.5:1 and the field borders to clear 3:1.
• Spacing: the layout uses a 24px side margin and mostly 8px-grid spacing.
• Touch targets: the buttons are 56px tall and the fields 52px, which is above the 44px minimum.

Problems I noticed

• Layer order: my first render hid the text behind the rectangles. insertChild at the end of the children list put new shapes at the bottom of the stack. I fixed it by sending the rectangles to the back, and the second export is correct. An earlier attempt had also failed on a bad property name (textAlign instead of align), so I deleted that partial board before rebuilding.
• Not interactive or reusable: this is a static layout with no flex layout, components or prototype links. The "Show" toggle and the "Forgot password?" touch area are not wired to anything.
• Missing states: there are no focus, error, filled or loading states. The password field also shows a placeholder, not masked dots.
• Placeholder contrast: the placeholder text (#6F5F57) is only just above the 4.5:1 threshold.
• Logo: the mark is a simple "B&" in a circle, not a real brand asset.
• Layout: there are no status-bar or safe-area elements, and the bottom ~120px of the screen is empty. A "Continue as guest" or terms line could fill it, or the content could shift down a little.
• Fonts: I used Penpot's default font and didn't pick a typeface.