Kimi Prompt — Forma3D Shopify Store Mockups (Studio Neat–inspired)¶

Reference storefront (style + structure): Studio Neat — https://www.studioneat.com

You are Kimi AI, a senior e-commerce UX/UI designer and art director.
Your task is to create high-fidelity mockups (homepage + key templates) for a Shopify store selling Forma3D organizers — premium 3D-printed kitchen and drawer organizers specifically designed for IKEA products. The visual direction must be crisp, modern, minimal, and inviting, strongly inspired by Studio Neat's calm product-first aesthetic: generous whitespace, refined typography, clean grids, and balanced lifestyle + detail product imagery.

1) Brand + Product Context (use as truth)¶

The Brand: Forma3D¶

• Brand name: Forma3D
• Tagline: "Stack smarter, not harder" (Dutch: "Stapel slimmer, niet harder")
• Brand personality: Calm, premium, engineered precision, practical elegance, European craftsmanship.
• Core promise: "The organizer that actually fits your IKEA products."

Product Hierarchy (respect this priority)¶

PRIMARY PRODUCT: Forma3D Organizers

These are ready-to-use, premium quality products that require no setup or technical knowledge:

• Kitchen plate organizers (designed to fit IKEA FÄRGKLAR, OFTAST, GLADELIG plates precisely)
• Drawer dividers and compartments
• Cabinet organizers
• Stackable storage bins

SECONDARY PRODUCT: Custom Grid Baseplates

• Modular base layer that fits inside drawers/cabinets
• Customizable to customer's exact drawer dimensions — customer enters their drawer width × depth and receives a perfect-fit grid
• Forma3D organizers snap onto this grid for modularity and repositioning
• IMPORTANT: The grid is based on an open standard compatible with a maker/DIY ecosystem, but do NOT mention Gridfinity, Gridflock, or any technical terminology — mainstream customers don't need to know or care about this. Just describe it as "our modular grid system."

Key Differentiators (use in messaging)¶

1. IKEA-specific precision fit — "Designed for exact IKEA plate dimensions" (primary selling point)
2. Customizable to your drawer — "Enter your drawer size, get a perfect fit"
3. Premium European quality — high-quality 3D prints with matte finish, clean edges
4. Modular and expandable — "Start small, add more as you need"

Target Customer (use as mental model)¶

Primary Persona: "Organized Olivia"

• Age 25-45, middle to upper-middle income
• Lives in apartment or row house (limited space)
• Shops at IKEA regularly, values good design at fair prices
• Wants a Pinterest-worthy kitchen without complicated solutions
• Values quality over cheap alternatives ("goedkoop = duurkoop")
• Quote: "I want my kitchen organized, but I don't have time for complicated systems."

NOT the primary audience:

• Technical makers, 3D printing hobbyists, engineers (they are a niche secondary audience who will find us anyway)

Market Context¶

• Launch market: 🇧🇪🇳🇱 Belgium & Netherlands (bol.com as primary sales channel alongside Shopify)
• Future markets: 🇩🇪 Germany → 🇫🇷 France → 🇪🇺 EU-wide
• Multi-language support needed: Dutch (primary), French, German, English

2) Output Requirements (be practical)¶

Create mockups for these priority pages (in order of importance):

Must-Have (create in detail)¶

1. Homepage — Desktop + Mobile
2. Product Detail Page (PDP) — For a Forma3D plate organizer
3. Custom Grid Configurator page — Where customers enter drawer dimensions
4. Collection page — Category listing

Secondary (provide direction, not full mockups)¶

1. Cart drawer + Cart page — Styling direction
2. About / Story page — Layout direction
3. FAQ page — Component examples

For Each Mockup Provide¶

• Desktop AND mobile layout (mobile-first thinking)
• Key component specs (spacing, typography, button styles)
• Brief annotation explaining hierarchy and conversion intent
• Skip: A/B variants, detailed checkout styling, contact page, email modals (these can come later)

Deliverables Format¶

• A cohesive design system with tokens (colors, type scale, spacing, buttons)
• Real copy examples — headlines, CTAs, product descriptions (Dutch or English)
• Use Shopify conventions: collections, product variants, add-to-cart, cart drawer

3) Visual Direction (Studio Neat–inspired, but original)¶

Overall Aesthetic¶

• Minimal, airy layout with strong typographic hierarchy
• Product-first: let product photography dominate; keep UI understated
• Scandinavian-inspired simplicity (aligns with IKEA aesthetic without copying IKEA)
• Avoid "noisy" patterns, heavy shadows, overly rounded playful shapes

Whitespace & Rhythm¶

• Large margins, generous breathing room
• Clear grid system; consistent vertical spacing
• Keep line lengths readable; generous padding on mobile for thumb comfort

Typography¶

• One clean sans-serif for UI (suggest: Inter, Söhne, or Graphik)
• Restrained type scale:
• H1: bold, large, calm
• H2/H3: clear, slightly softer weight
• Body: highly legible, generous line height (1.5+)
• Use short, confident headlines; minimal exclamation marks

Color Palette¶

• Background: off-white / warm neutral (#FAFAFA or similar)
• Text: near-black charcoal (#1A1A1A)
• Accent: one calm accent color — suggest muted sage green or warm terracotta (used sparingly for CTAs and highlights)
• Subtle borders and hairlines rather than heavy dividers
• Optional: subtle IKEA blue/yellow as secondary accent (used very sparingly, not primary)

Buttons¶

• Primary: solid accent color, crisp rectangle with modest radius (4-8px)
• Secondary: outline or subtle fill
• Hover/focus: accessible, minimal animation

Photography Direction¶

Mix these three types:

1. Crisp product shots on neutral backgrounds (hero, PDP gallery)
2. Lifestyle shots — organized kitchen drawer, cabinet interior, styled countertop
3. Macro details — texture, precision fit, modular connectors

Lighting: soft and natural, avoid harsh contrast Consistent angle language: ¾ view for hero, top-down for "organization in context" shots

4) Information Architecture¶

Top Navigation (Desktop)¶

• Shop
• Kitchen Organizers (or "Plate Organizers")
• Drawer & Cabinet
• Custom Grid Baseplates ← Important: link to configurator
• Bundles / Sets
• How It Works — modularity, sizing guide, IKEA compatibility
• About
• Support (FAQ, Shipping, Contact)

Utility Navigation¶

• Search
• Account (optional at launch)
• Cart (drawer)

Homepage Must Answer (within 5 seconds)¶

1. What is Forma3D? → Premium organizers for IKEA products
2. Why is it better? → Designed to fit IKEA exactly
3. How do I get started? → Browse organizers or customize your grid
4. Can I trust this? → Social proof, quality imagery, EU-made

5) Homepage — Detailed Layout Spec¶

5.1 Hero Section¶

Layout:

• Full-width hero with a clean kitchen drawer/cabinet scene featuring Forma3D organizers holding IKEA plates
• Headline: "Finally, organizers that actually fit your IKEA."
• Subhead: "Premium plate organizers designed for exact IKEA dimensions. Made in Europe."
• CTAs: "Shop Plate Organizers" (primary), "Customize Your Grid" (secondary)
• Small trust row beneath: "🇪🇺 Made in Europe • Fast shipping • Perfect IKEA fit • 30-day returns"

5.2 "How It Works" (3 steps)¶

Simple visual section explaining the system:

1. Choose your organizer — "Pick the organizer that fits your IKEA plates"
2. Customize your grid — "Enter your drawer dimensions for a perfect-fit base"
3. Snap, stack, organize — "Arrange and rearrange whenever you need"

Include simple monoline icons for each step.

5.3 Featured Products¶

• Clean product cards: image, name, compatibility line (e.g., "Fits IKEA FÄRGKLAR plates"), price, quick add
• Show 4-6 best-selling Forma3D organizers
• Optional badge: "Best Seller", "New"

5.4 "The Grid System" CTA Section¶

Prominent section explaining the custom grid:

• Headline: "Your drawer. Your dimensions. Perfect fit."
• Subhead: "Enter your exact drawer size and we'll create a custom modular grid just for you."
• CTA: "Configure Your Grid" (links to configurator)
• Visual: Top-down view of a grid baseplate in a drawer with organizers snapped on

5.5 Lifestyle Band¶

One wide lifestyle image with calm overlay text:

• Example caption: "Designed to blend into your space — until you need it."

5.6 Social Proof¶

• 3-4 review cards with short quotes and star ratings
• Highlight IKEA compatibility in testimonials ("Finally something that fits my OFTAST plates!")
• Optional: UGC grid (customer photos of organized drawers)

5.7 Email Signup¶

Minimal section:

• "Join 2,000+ organized homes. New products + tips once a month."
• Email field + button

5.8 Footer¶

• Minimal, structured
• Shop links, FAQ/Shipping, About, Social icons
• Trust badges: EU shipping, returns, payment methods

6) Product Detail Page (PDP) — Forma3D Plate Organizer¶

6.1 Above the Fold¶

Left: Image Gallery

• 5-8 images including: product alone, product with IKEA plates, in-drawer lifestyle, macro detail, dimensions diagram

Right: Product Info

• Product title: e.g., "Plate Organizer — IKEA FÄRGKLAR"
• One-line benefit: "Keeps your IKEA FÄRGKLAR plates perfectly stacked and accessible."
• Price
• Variant selectors: Color, Size (if applicable)
• Stock/lead time: "Made to order — ships in 3-5 business days"
• Primary CTA: Add to Cart
• Secondary: "View IKEA compatibility guide"
• Trust row: "30-day returns • EU shipping • Premium quality"

6.2 Below the Fold¶

1. What it solves (3 bullets):
2. "Prevents plates from sliding and chipping"
3. "Maximizes cabinet space with vertical stacking"

4. "Easy access to bottom plates"

5. IKEA Compatibility (this is critical):

6. Clear table showing which IKEA plate models fit

7. Link to full compatibility guide

8. Dimensions & Specs

9. Diagram with measurements

10. Material: Premium 3D print, matte finish

11. Works with our Grid System

12. Cross-sell: "Want modular flexibility? Add a custom grid baseplate."

13. Mini CTA to configurator

14. Reviews

15. Frequently Bought Together

6.3 Sticky Mobile Bar¶

• Price + Add to Cart + variant summary
• Appears when original CTA scrolls off-screen

7) Custom Grid Configurator Page (NEW — important)¶

This is a key differentiator and deserves a dedicated page.

Layout¶

Step 1: Enter Dimensions

• Headline: "Create your custom grid baseplate"
• Input fields: Drawer Width (cm) × Drawer Depth (cm)
• Visual: Interactive preview showing grid size (or static illustration)
• Helper text: "Measure the inside of your drawer. Need help? See our measuring guide."

Step 2: Review Your Grid

• Show calculated grid dimensions (e.g., "Your grid: 45cm × 32cm = 6×4 units")
• Price displayed
• Option to add matching organizers (cross-sell)

Step 3: Add to Cart

• CTA: Add Custom Grid to Cart

Design Notes¶

• Keep it simple — not a complex 3D configurator, just input fields with a visual preview
• Mobile-friendly input
• Clear error handling for invalid sizes

8) Collection Page — Kitchen Organizers¶

Goal: Scan quickly, filter easily, stay calm.

• Title + short description (1-2 lines, e.g., "Plate organizers designed for IKEA kitchen products")
• Filters: IKEA product compatibility (most important), color, price
• Sort: Best selling, New, Price
• Product grid: 2-3 columns mobile, 3-4 desktop
• Uniform image aspect ratio
• Quick add on hover (desktop)
• Add a "Not sure what fits?" banner linking to compatibility guide

9) Design System Tokens (provide explicitly)¶

Define:

• Grid: 12-column, max-width ~1200px
• Breakpoints: Mobile (<640px), Tablet (640-1024px), Desktop (>1024px)
• Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80
• Type scale: H1 (36-48px), H2 (24-30px), H3 (18-20px), Body (16px), Small (14px)
• Colors: Background, Text, Accent, Border, Muted
• Buttons: Primary, Secondary, Tertiary (styles + states)
• Cards: Border radius, shadow (if any), padding
• Form fields: Focus states, error states

Accessibility:

• Contrast compliance (WCAG AA minimum)
• Focus outlines visible
• Minimum tap target 44x44px on mobile

10) Content & Copywriting Style¶

Tone:

• Calm, concise, functional
• Benefit-led: "Declutter your kitchen in minutes."
• Confident but not pushy
• Avoid hype; aim for Nordic-style understatement

Sample Copy:

11) Image Placeholders¶

Use this naming for asset hand-off:

• /img/hero-organized-drawer.jpg — Hero lifestyle shot
• /img/category-plate-organizers.jpg — Category tile
• /img/pdp-organizer-front.jpg — PDP main image
• /img/pdp-organizer-with-plates.jpg — PDP with IKEA plates
• /img/pdp-in-drawer.jpg — PDP lifestyle context
• /img/pdp-macro-texture.jpg — PDP detail shot
• /img/pdp-dimensions.svg — Dimensions diagram
• /img/grid-in-drawer-topdown.jpg — Grid baseplate in drawer
• /img/configurator-preview.svg — Grid configurator visual

12) Final Instruction¶

Create mockups that feel like Studio Neat's calm premium minimalism while remaining distinct and original for Forma3D. The store should feel premium but approachable — like IKEA's design sensibility elevated to a boutique level.

Priorities:

1. Clarity and simplicity
2. Strong IKEA compatibility messaging (this is the primary differentiator)
3. Premium product presentation
4. Smooth Shopify shopping flow
5. Mobile-first usability
6. The grid configurator as a unique feature

Now generate the homepage, PDP, grid configurator, and collection page mockups with the design system.