Minimalist Wireframe Login
superdesignCC0-1.0Prompt onlyLanding · landingTexture · textureMinimal · minimalProfessional · professionalLight · lightHigh (data-dense) · highBlue · blueVivid · vividSerif · serifGeneral · general
A high-contrast, minimalist mobile login wireframe optimized for thumb reach and ergonomic ergonomics. It features a slate-heavy palette, industrial-style grid textures, and clean 'General Sans' typography. Suitable for SaaS dashboard entry, fintech authentication, developer tools, and high-end enterprise mobile applications requiring a professional, focus-oriented interface. Category: Auth & Login. Prompt author listed upstream: Shirley Lou.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Minimalist Wireframe Login" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/minimalist-wireframe-login @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/minimalist-wireframe-login · 6c6090694520 · © Superdesign
Prompt
{
"summary": "Mobile login interface following a top-heavy layout for identity and a bottom-anchored interaction zone. Employs a blueprint-style grid background, large tap targets (56px height), and high-contrast accessibility (Slate-900 on White).",
"style": {
"description": "The design utilizes 'General Sans' across four weights (400-700) for strict hierarchy. The color palette is a monochromatic Slate scale: #FFFFFF (base), #0F172A (primary text/button), #64748B (secondary text), and #E2E8F0 (borders). Micro-interactions include a subtle scale-down effect (0.98x) on buttons and a 4px soft shadow focus ring for input fields. A recurring 40px grid pattern defines the 'wireframe' aesthetic.",
"prompt": "Create a UI with a minimalist industrial 'Wireframe' aesthetic. \n- **Typography**: Font-family: 'General Sans'. Headings: 32px/1.1 leading, font-weight 600. Body text: 18px, color: #64748B. Labels: 14px, weight 500, color: #0F172A. \n- **Color Palette**: Background: #FFFFFF. Text/Buttons: #0F172A. Secondary Text: #64748B. Borders: #E2E8F0. Placeholder: #CBD5E1. \n- **Background**: Apply a subtle blueprint grid using linear gradients of #F1F5F9 at 1px thickness with 40px square size. \n- **Interactive Elements**: Inputs and Buttons should be exactly 56px height with a border-radius of 16px to 20px. \n- **Animation**: Button active state: `transform: scale(0.98)`. Transitions: `all 200ms ease-in-out`. \n- **Shadows**: Primary CTA uses a soft shadow: `box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1)`."
},
"layout_and_structure": {
"description": "Three-tier vertical stack: Top identity section, middle input group, and bottom-anchored action footer with a sticky gradient background.",
"prompts": [
{
"part": "Identity Section (Top)",
"prompt": "Padding top: 56px. Padding horizontal: 32px. Element 1: Logo placeholder (64x64px), background #F8FAFC, border-style: dashed (2px), border-color #CBD5E1, border-radius 16px. Element 2: Heading 'Welcome back' (32px). Element 3: Subtext 'Enter details...' (18px) with a margin-bottom of 48px."
},
{
"part": "Input Group (Middle)",
"prompt": "Stacked layout with 20px vertical gap. Input height: 56px. Padding: 16px. Border: 1px solid #E2E8F0. Focus state: Border color #0F172A with a 4px spread ring in #0F172A at 5% opacity. Password field includes an absolute-positioned eye icon button on the right edge."
},
{
"part": "Action Footer (Bottom)",
"prompt": "Anchored to the screen bottom with a white-to-transparent linear gradient overlay. Bottom padding: 34px (Safe Area). Element 1: Stacked secondary links (Forgot password, Sign up) centered horizontally. Element 2: Primary CTA button (56px height), background #0F172A, text #FFFFFF, font-weight 500. Include a right-arrow icon that translates +4px on hover."
}
]
},
"special_ui_components": [
{
"component": "Wireframe Logo Box",
"description": "A placeholder container representing the brand mark.",
"prompt": "Width/Height: 64px. Border-radius: 16px. Border: 2px dashed #CBD5E1. Background: #F8FAFC. Centered icon: 'lucide:box-select' at 30px size in #94A3B8."
},
{
"component": "Industrial Input Field",
"description": "High-radius, clean input with custom focus state.",
"prompt": "Height: 56px. Border-radius: 16px. Border: 1px solid #E2E8F0. Background: #FFFFFF. Typography: 16px text-base. On focus: border-color change to #0F172A and outer glow `0 0 0 4px rgba(15, 23, 42, 0.05)`."
}
],
"special_notes": "MUST ensure all clickable elements (inputs/buttons) have a minimum height of 56px for accessibility. MUST use the 40px grid background to maintain the wireframe concept. DO NOT use vibrant colors; keep the palette restricted to Slate and White. Ensure the secondary sign-up link uses a font-weight of 600 to distinguish it from static text."
}
---
"Minimalist Wireframe Login" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/minimalist-wireframe-login @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Minimalist Wireframe Login. \"Minimalist Wireframe Login\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/minimalist-wireframe-login @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-minimalist-wireframe-login",
"license": "CC0-1.0",
"attribution": "\"Minimalist Wireframe Login\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/minimalist-wireframe-login @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"foreground": {
"$type": "color",
"$value": "#0f172a"
},
"card": {
"$type": "color",
"$value": "#ffffff"
},
"card-foreground": {
"$type": "color",
"$value": "#0f172a"
},
"primary": {
"$type": "color",
"$value": "#0f172a"
},
"primary-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"secondary": {
"$type": "color",
"$value": "#64748b"
},
"secondary-foreground": {
"$type": "color",
"$value": "#0f172a"
},
"accent": {
"$type": "color",
"$value": "#e2e8f0"
},
"accent-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"muted": {
"$type": "color",
"$value": "#f0f0f0"
},
"muted-foreground": {
"$type": "color",
"$value": "#636875"
},
"border": {
"$type": "color",
"$value": "#dbdbdb"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#0f172a"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Minimalist Wireframe Login" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/minimalist-wireframe-login @ 6c6090694520. */
:root {
--background: #ffffff;
--foreground: #0f172a;
--card: #ffffff;
--card-foreground: #0f172a;
--primary: #0f172a;
--primary-foreground: #fafaf9;
--secondary: #64748b;
--secondary-foreground: #0f172a;
--accent: #e2e8f0;
--accent-foreground: #1c1917;
--muted: #f0f0f0;
--muted-foreground: #636875;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #0f172a;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Minimalist Wireframe Login" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/minimalist-wireframe-login @ 6c6090694520. */
/** Tailwind theme extend for Minimalist Wireframe Login (superdesign-minimalist-wireframe-login) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#ffffff",
"foreground": "#0f172a",
"card": "#ffffff",
"primary": "#0f172a",
"primary-foreground": "#fafaf9",
"secondary": "#64748b",
"accent": "#e2e8f0",
"muted": "#f0f0f0",
"border": "#dbdbdb",
"destructive": "#dc2626",
"ring": "#0f172a"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Minimalist Wireframe Login" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/minimalist-wireframe-login @ 6c6090694520. */
@layer base {
:root {
--background: #ffffff;
--foreground: #0f172a;
--card: #ffffff;
--card-foreground: #0f172a;
--primary: #0f172a;
--primary-foreground: #fafaf9;
--secondary: #64748b;
--secondary-foreground: #0f172a;
--accent: #e2e8f0;
--accent-foreground: #1c1917;
--muted: #f0f0f0;
--muted-foreground: #636875;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #0f172a;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}