Account Setup Flow — Goals / Interests (Card-Based)
superdesignCC0-1.0Prompt onlyMobile app · mobile-appMinimal · minimalLuxury · luxuryLight · lightLow (display) · lowBlue · blueMedium · mediumSerif · serifGeneral · general
A sleek, minimalist, and highly interactive 4-step onboarding flow designed for mobile-first experiences. Features high-contrast black and white aesthetics, modern typography using General Sans, and fluid motion using the View Transitions API. Ideal for SaaS, fintech, or lifestyle apps needing a premium, frictionless user registration or configuration sequence. Key elements include a persistent progress bar, springy micro-interactions, and clear, bold editorial typography. Category: Mobile Apps. 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
"Account Setup Flow — Goals / Interests (Card-Based)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/account-setup-flow-goals-interests-card-based @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/account-setup-flow-goals-interests-card-based · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A minimalist, high-contrast 4-step onboarding interface with fluid motion transitions, bold 'General Sans' typography, and interactive selection cards. The design focuses on clarity, using a monochrome palette with subtle gray accents to guide users through goals, interests, profile setup, and system permissions.",
"style": {
"description": "Modern minimalist aesthetic utilizing 'General Sans' for a clean, editorial look. Palette is strictly monochrome: Pure White (#FFFFFF), Deep Black (#000000), and a range of functional grays (#F3F4F6 for backgrounds, #9CA3AF for secondary text). Animations use the View Transitions API with custom slide-up keyframes and cubic-bezier(0.16, 1, 0.3, 1) easing for a 'snappy' but smooth feel.",
"prompt": "Create a design system with a monochrome high-contrast theme. \n- **Typography**: Use 'General Sans'. Headings should be font-weight: 700 (Bold) with tracking: -0.025em. Body text should be font-weight: 400 or 500 (Medium). Labels should be uppercase with tracking: 0.05em.\n- **Colors**: Primary Background: #FFFFFF; Primary Action: #000000; Secondary Background: #F3F4F6; Border: #E5E7EB; Secondary Text: #6B7280; Subtitle: #9CA3AF.\n- **Interactions**: Buttons and cards should have a scale-down effect on click (scale: 0.95 or 0.98). Transitions between steps must use a slide-up animation (20px to 0px) with opacity fade (0 to 1) over 500ms using cubic-bezier(0.16, 1, 0.3, 1).\n- **Shadows**: Use a subtle upward shadow for the footer: shadow-[0_-4px_20px_rgba(0,0,0,0.03)]. Primary CTA button should have a drop shadow: shadow-lg shadow-gray-200."
},
"layout_and_structure": {
"description": "A vertically stacked mobile layout consisting of a persistent progress bar at the very top, a fixed header with contextual titles, a scrollable main content area for user input, and a fixed footer with the primary action button.",
"prompts": [
{
"part": "Progress Bar",
"prompt": "An absolute-positioned bar at the top (height: 6px) with a light gray background (#F3F4F6). A black fill indicator (#000000) that transitions its width smoothly (duration: 700ms, ease-out) based on the current step percentage."
},
{
"part": "Header Section",
"prompt": "Padding-top: 56px, horizontal padding: 24px. Includes a top row with a small, rounded badge showing 'Step X of Y' (BG: #F3F4F6, Text: #4B5563, font-size: 11px) and a 'Skip' button. Below that, a large H1 heading (text-3xl, font-bold) with a tight line-height and a small descriptive paragraph (text-sm, color: #6B7280)."
},
{
"part": "Interactive Content Area",
"prompt": "A scrollable central container (px-6, pb-8). For selection steps, use a single-column grid with 16px gaps. Selection cards should have 20px padding, a 1px border (#E5E7EB), and 12px border-radius. Active states change the border to 2px black and add a circular checkmark icon in the corner."
},
{
"part": "Persistent Footer",
"prompt": "Fixed at the bottom with a white background and top border (#F9FAFB). Contains a large primary button (height: 56px, width: full, rounded: 12px, BG: #000000, color: #FFFFFF) with an arrow icon. Below the button, a small centered text label (font-size: 11px, color: #9CA3AF) repeating the current step progress."
}
]
},
"special_ui_components": [
{
"component": "Selection Card",
"description": "An interactive card that serves as a single or multiple choice input.",
"prompt": "A container with padding: 20px, border-radius: 12px, border: 1px solid #E5E7EB. On click, it scales to 0.98. If selected: border-width: 2px, border-color: #000000, background: #F9FAFB. Includes a 24px circular indicator on the right side that fills black and displays a white checkmark icon when selected."
},
{
"component": "Toggle Switch",
"description": "A custom push-notification style toggle.",
"prompt": "A pill-shaped container (width: 48px, height: 24px). Background: #E5E7EB (disabled) or #000000 (enabled). A 16px white circle knob inside that translates 24px from left to right. Easing: cubic-bezier(0.4, 0, 0.2, 1), duration: 300ms."
}
],
"special_notes": "MUST maintain the high-contrast ratio for accessibility. DO NOT use rounded-full for the main CTA; use rounded-xl (12px) for a more modern 'app' feel. Transitions MUST be synchronized so that the progress bar, header text, and main content animate together using the View Transitions API or equivalent motion library. MUST include an active scale effect on all clickable elements to provide tactile feedback."
}
---
"Account Setup Flow — Goals / Interests (Card-Based)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/account-setup-flow-goals-interests-card-based @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Account Setup Flow — Goals / Interests (Card-Based). \"Account Setup Flow — Goals / Interests (Card-Based)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/account-setup-flow-goals-interests-card-based @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-account-setup-flow-goals-interests-card-based",
"license": "CC0-1.0",
"attribution": "\"Account Setup Flow — Goals / Interests (Card-Based)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/account-setup-flow-goals-interests-card-based @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"foreground": {
"$type": "color",
"$value": "#000000"
},
"card": {
"$type": "color",
"$value": "#ffffff"
},
"card-foreground": {
"$type": "color",
"$value": "#000000"
},
"primary": {
"$type": "color",
"$value": "#f9fafb"
},
"primary-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"secondary": {
"$type": "color",
"$value": "#000000"
},
"secondary-foreground": {
"$type": "color",
"$value": "#000000"
},
"accent": {
"$type": "color",
"$value": "#f9fafb"
},
"accent-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"muted": {
"$type": "color",
"$value": "#f0f0f0"
},
"muted-foreground": {
"$type": "color",
"$value": "#595959"
},
"border": {
"$type": "color",
"$value": "#dbdbdb"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#f9fafb"
}
},
"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 */
/* "Account Setup Flow — Goals / Interests (Card-Based)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/account-setup-flow-goals-interests-card-based @ 6c6090694520. */
:root {
--background: #ffffff;
--foreground: #000000;
--card: #ffffff;
--card-foreground: #000000;
--primary: #f9fafb;
--primary-foreground: #1c1917;
--secondary: #000000;
--secondary-foreground: #000000;
--accent: #f9fafb;
--accent-foreground: #1c1917;
--muted: #f0f0f0;
--muted-foreground: #595959;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #f9fafb;
--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 */
/* "Account Setup Flow — Goals / Interests (Card-Based)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/account-setup-flow-goals-interests-card-based @ 6c6090694520. */
/** Tailwind theme extend for Account Setup Flow — Goals / Interests (Card-Based) (superdesign-account-setup-flow-goals-interests-card-based) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#ffffff",
"foreground": "#000000",
"card": "#ffffff",
"primary": "#f9fafb",
"primary-foreground": "#1c1917",
"secondary": "#000000",
"accent": "#f9fafb",
"muted": "#f0f0f0",
"border": "#dbdbdb",
"destructive": "#dc2626",
"ring": "#f9fafb"
},
"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 */
/* "Account Setup Flow — Goals / Interests (Card-Based)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/account-setup-flow-goals-interests-card-based @ 6c6090694520. */
@layer base {
:root {
--background: #ffffff;
--foreground: #000000;
--card: #ffffff;
--card-foreground: #000000;
--primary: #f9fafb;
--primary-foreground: #1c1917;
--secondary: #000000;
--secondary-foreground: #000000;
--accent: #f9fafb;
--accent-foreground: #1c1917;
--muted: #f0f0f0;
--muted-foreground: #595959;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #f9fafb;
--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);
}
}