Card Grid Browse
superdesignCC0-1.0Prompt onlyMobile app · mobile-appFuturistic · futuristicLuxury · luxuryLight · lightMedium · mediumBlue · blueMedium · mediumSerif · serifGeneral · general
A sophisticated, mobile-first product browsing layout emphasizing whitespace, clean typography, and a stable 2-column grid. The design utilizes a monochrome base with slate-toned neutrals to create a high-end 'boutique' feel, prioritizing product imagery and effortless navigation. Suitable for premium furniture, fashion, architecture, or design-focused platforms. 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
"Card Grid Browse" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/card-grid-browse @ 6c6090694520.
https://github.com/superdesigndev/superdesign-prompts · prompts/card-grid-browse · 6c6090694520 · © Superdesign
Prompt
{
"summary": "A sophisticated, mobile-first product browsing layout emphasizing whitespace, clean typography, and a stable 2-column grid. The design utilizes a monochrome base with slate-toned neutrals to create a high-end 'boutique' feel, prioritizing product imagery and effortless navigation.",
"style": {
"description": "Minimalist editorial style using 'General Sans' for a modern feel. The palette is dominated by pure white (#FFFFFF), slate grays (#F1F5F9, #64748B, #0F172A), and sharp black accents. Animations are subtle, featuring 700ms image transitions and 95% scaling on active touch states. Borders are thin (1px) and used sparingly to define hierarchy without clutter.",
"prompt": "Create a design with a 'Minimalist Editorial' aesthetic. \n- **Typography**: Primary font 'General Sans'. Use font-weight 600 for headings (24px, -0.025em tracking) and product titles (14px). Use font-weight 400 for categories (12px, #64748B).\n- **Color Palette**: Backgrounds in #FFFFFF; Secondary surfaces in #F8FAFC; Borders in #F1F5F9; Primary text in #0F172A; Accents in #000000.\n- **Shadows & Borders**: Avoid heavy shadows. Use 1px solid borders in #F1F5F9 for headers, footers, and pills.\n- **Interactions**: Implement a `duration-700` ease-out transition on image hover (scale: 105%). Use `active:scale-95` for all clickable buttons and pills for tactile feedback.\n- **Radius**: Large radius (9999px) for category pills and circular icon buttons; sharp corners (0px) for product images to maintain a professional look."
},
"layout_and_structure": {
"description": "A vertical-scrolling mobile layout composed of a sticky header, a scrollable category filter, a fixed-width grid, and a persistent bottom navigation bar.",
"prompts": [
{
"part": "Header and Category Bar",
"prompt": "Design a sticky top header with 56px top padding (safe area). Include a title 'Collection' at 24px semi-bold left-aligned, and two 40px circular action buttons (Search, Filter) on the right. Below the title, add a horizontally scrollable (hide-scrollbar) container of category pills. Active pill: Black background, White text. Inactive pill: #F8FAFC background, 1px #F1F5F9 border, #64748B text. All pills should have 10px 20px padding and text-sm font-weight 500."
},
{
"part": "Product Grid",
"prompt": "Construct a 2-column grid with a 16px (gap-4) horizontal gap and 32px (gap-8) vertical gap. Each card should contain a 3:4 aspect ratio image container. Images must use `object-cover`. On hover, images scale 5%. Cards must have a title (text-sm, truncated) and price (text-xs, font-medium) on one line, with a secondary category label (#64748B, text-xs) below."
},
{
"part": "Bottom Navigation",
"prompt": "Fixed bottom bar at 100% width, #FFFFFF background with a 1px top border (#F1F5F9). Height should accommodate safe area (pb-[34px]). Include 4 equally spaced navigation items consisting of a 20px icon and a 10px font-weight 500 label. Active state: #000000; Inactive state: #94A3B8."
}
]
},
"special_ui_components": [
{
"component": "Interactive Filter Button",
"description": "Action icon with a status indicator",
"prompt": "A 40px circular button with a 'sliders-horizontal' icon. Add a 8px solid black dot (#000000) positioned at top: 10px, right: 10px to indicate active filters."
},
{
"component": "Status Badges",
"description": "Minimalist overlay labels on images",
"prompt": "Small rectangular badges positioned top-left of the image container. Text: 10px uppercase bold. 'NEW' badge: Black background/White text. 'SALE' badge: Red background (#EF4444)/White text. Padding: 4px 8px."
}
],
"special_notes": "MUST: Maintain strict 3:4 aspect ratios for product images. MUST: Use 'General Sans' or a very clean geometric sans-serif to maintain the high-end feel. DO NOT: Use heavy drop shadows or rounded corners on images. DO NOT: Allow the header to obscure content without a backdrop-blur effect (bg-white/95 backdrop-blur-sm)."
}
---
"Card Grid Browse" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/card-grid-browse @ 6c6090694520.
powered by Styledex — https://styledex.devTokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Card Grid Browse. \"Card Grid Browse\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/card-grid-browse @ 6c6090694520.",
"$extensions": {
"dev.styledex": {
"id": "superdesign-card-grid-browse",
"license": "CC0-1.0",
"attribution": "\"Card Grid Browse\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/card-grid-browse @ 6c6090694520.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"foreground": {
"$type": "color",
"$value": "#64748b"
},
"card": {
"$type": "color",
"$value": "#ffffff"
},
"card-foreground": {
"$type": "color",
"$value": "#64748b"
},
"primary": {
"$type": "color",
"$value": "#f1f5f9"
},
"primary-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"secondary": {
"$type": "color",
"$value": "#64748b"
},
"secondary-foreground": {
"$type": "color",
"$value": "#64748b"
},
"accent": {
"$type": "color",
"$value": "#0f172a"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#f0f0f0"
},
"muted-foreground": {
"$type": "color",
"$value": "#9aa5b4"
},
"border": {
"$type": "color",
"$value": "#dbdbdb"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#f1f5f9"
}
},
"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 */
/* "Card Grid Browse" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/card-grid-browse @ 6c6090694520. */
:root {
--background: #ffffff;
--foreground: #64748b;
--card: #ffffff;
--card-foreground: #64748b;
--primary: #f1f5f9;
--primary-foreground: #1c1917;
--secondary: #64748b;
--secondary-foreground: #64748b;
--accent: #0f172a;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #9aa5b4;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #f1f5f9;
--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 */
/* "Card Grid Browse" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/card-grid-browse @ 6c6090694520. */
/** Tailwind theme extend for Card Grid Browse (superdesign-card-grid-browse) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#ffffff",
"foreground": "#64748b",
"card": "#ffffff",
"primary": "#f1f5f9",
"primary-foreground": "#1c1917",
"secondary": "#64748b",
"accent": "#0f172a",
"muted": "#f0f0f0",
"border": "#dbdbdb",
"destructive": "#dc2626",
"ring": "#f1f5f9"
},
"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 */
/* "Card Grid Browse" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/card-grid-browse @ 6c6090694520. */
@layer base {
:root {
--background: #ffffff;
--foreground: #64748b;
--card: #ffffff;
--card-foreground: #64748b;
--primary: #f1f5f9;
--primary-foreground: #1c1917;
--secondary: #64748b;
--secondary-foreground: #64748b;
--accent: #0f172a;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #9aa5b4;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #f1f5f9;
--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);
}
}