# Login Page References by Color and Layout [Open the live Fudge conversation](https://design.withfudge.com/share/find-login-page-references-by-color-and-layout) Last updated: 2026-08-25 The strongest login page references here are **Nothing Account** and **Milanote**: compare their form placement, amount of surrounding space, and how each uses green against a quieter background. Use the examples below as a visual shortlist, then choose a layout based on whether the login should feel focused, branded, or product-led. ## Start with the layout decision Choose one of these three directions before borrowing details: 1. **Focused form:** Center one compact login panel with a short heading, inputs, password recovery, and one primary action. This works when returning users should complete the task quickly. 2. **Branded split screen:** Keep the form on one side and use the other side for a product message, illustration, or brand color field. This gives the page more identity, but it should not make the form compete with the supporting content. 3. **Product-entry screen:** Place the login form inside the same visual language as the application. Use the product's spacing, button shape, type scale, and background treatment so the transition feels continuous. For a first pass, start with the focused form. It is the easiest direction to test and leaves fewer decisions competing above the action. ## Captured pages [![Nothing Account](https://pin.fontofweb.com/3303?format=jpg)](https://design.withfudge.com/share/pin-3303) [Nothing Account](https://design.withfudge.com/share/pin-3303) [![Milanote](https://pin.fontofweb.com/870?format=jpg)](https://design.withfudge.com/share/pin-870) [Milanote](https://design.withfudge.com/share/pin-870) ## Colors - `#496c10` - `#15502e` - `#14532d` - `#233f2a` - `#254f1a` - `#1e6f30` - `#295631` - `#556659` - `#4a5a4a` - `#2c7a4a` - `#2a966f` - `#799c92` ## Compare the examples below Open the two examples and compare the first screen before borrowing a pattern. Nothing Account is a useful reference for a branded account entry point, while Milanote gives you another compact login reference with a different product context. Check these details in order: - Is the form centered in the full viewport or aligned to a wider content column? - Does the heading explain the action directly, or does the brand carry most of the identity? - How wide are the inputs compared with the primary button? - Is the secondary path, such as account creation or password recovery, easy to spot without becoming a second primary action? - Does the background create calm space around the form, or does it act as a strong brand surface? - On a narrow screen, does the form keep its hierarchy without feeling squeezed? Do not copy the screenshot as a complete page. Pick one structural idea, one spacing idea, and one color relationship, then rebuild those choices with your own content. ## Build a muted green palette The supplied color observations point to a green-led direction ranging from deep forest tones to softer gray-green accents. A practical starting set is: - **Primary action:** `#15502e` or `#14532d` - **Deep text or dark surface:** `#233f2a` or `#254f1a` - **Secondary green:** `#496c10` or `#1e6f30` - **Muted supporting accent:** `#556659`, `#4a5a4a`, or `#799c92` - **Brighter emphasis:** `#2c7a4a` or `#2a966f` Use one dark green for the main action, not every element. Keep body text near-black or deep green, and reserve lighter greens for borders, helper text, focus states, or a small illustration. Check the text and button contrast on the actual background rather than judging the swatches in isolation. ## Use a quick review checklist Before considering the page finished, verify: - The page purpose is clear in one short heading. - The primary button is visually stronger than every secondary link. - Labels remain visible when an input contains text. - Focus states are easy to see against the green palette. - Error messages appear beside the relevant field and do not shift the whole form unpredictably. - The form works comfortably at mobile width. - The logo or brand mark does not push the action below the first screen. - The green palette has a clear role for action, text, surface, border, and feedback. A useful design brief would be: “Create a compact login page with a centered form, generous outer space, deep forest-green primary action, gray-green supporting details, clear recovery and account-creation links, and a mobile layout that keeps the form dominant.” ## Use this in your AI agent > Find two captured login page references with a compact form and muted green palette. Compare their form width, vertical spacing, heading hierarchy, button treatment, secondary links, and mobile behavior. Recommend one focused login layout, assign roles to `#15502e`, `#233f2a`, `#556659`, and `#799c92`, and return a concise implementation brief with a review checklist. For hands-on reference research with your AI agent, [install Fudge for your AI agent](/mcp). --- Choose a **centered form** when the main job is fast account access. It keeps attention on the heading, fields, recovery link, and primary button, and it adapts cleanly to mobile. It is also the safer choice when you do not yet have supporting content that deserves equal visual weight. Choose a **split screen** when the login page needs to reinforce a product story, explain a workspace, or make a strong brand impression before entry. Keep the form side visually quieter and let the supporting side carry the larger color field or image. On smaller screens, stack the form first or make sure the supporting content can collapse without hiding the action. A simple test is to remove the supporting half temporarily. If the login still feels complete and purposeful, the centered layout is probably enough. If the page loses important context, use the split direction, but limit the supporting content to one message and one visual idea. --- Use this as a starting style guide, then check it against your own background and text colors: - **Page background:** a warm white, pale gray, or very light green. Keep it quieter than the action color. - **Primary button:** `#15502e` with light text. Use `#1e6f30` for hover or a related active state. - **Heading:** `#233f2a` for a softer branded alternative to black. - **Body and helper text:** `#4a5a4a` when the size and contrast remain comfortable. - **Borders and inactive controls:** `#799c92` at a restrained opacity, or a neutral gray if the green becomes too busy. - **Strong accent:** `#2a966f` for a small success state or selected detail, not for every link. Keep border radii, input height, button height, and spacing consistent. Define one spacing unit and use a small rhythm around the form, such as compact field gaps, a larger gap before the primary action, and a clear separation before account-creation links. Test keyboard focus, errors, and disabled states separately because a palette that looks calm in a static screenshot can become unclear during interaction. ## Related questions - [Find onboarding flow references by color and layout](/share/find-onboarding-flow-references-by-color-and-layout) - [Find Ecommerce Product Page References by Color and Layout](/share/find-ecommerce-product-page-references-by-color-and-layout) - [Find portfolio homepage references by color and layout](/share/find-portfolio-homepage-references-by-color-and-layout) - [Find SaaS dashboard references by color and layout](/share/find-saas-dashboard-references-by-color-and-layout)