designpromthe digital archive / issue 04
brand dna / template analysis / stitch outputsOpen prompt builder
Back to DNA
dnaResearch utility
Brand DNA

Modular Research Surface

Primary-color geometry, modular demo shelves, and research clarity shaped into a usable product story.

Research systems3DMicrositeLabProduct demo
Brand referenceGoogle
Google template exampleAI lab microsite / experimental model showcase

Call out primary-color geometry, modular storytelling, demo shelves, and research-tool clarity so the result feels exploratory without losing usability.

Stitch promptResearch systems
Use this prompt

Design a Google-inspired AI product page with primary-color geometry, modular demo sections, crisp research storytelling, playful 3D forms, and a clear usable hierarchy.

Remix in builder
Expected output3D
  • Open modular storytelling with research shelves, demo bands, and clear product entry points.
  • Friendly but precise sans-serif hierarchy with strong explanatory subheads.
  • Primary-color accents and selective geometry over calm neutral surfaces.
Stitch output boardMicrosite
stitch export
Layout

Open modular storytelling with research shelves, demo bands, and clear product entry points.

Type

Friendly but precise sans-serif hierarchy with strong explanatory subheads.

Motion

Light, helpful movement that implies experimentation rather than spectacle.

Stitch example pages

Example pages this brand DNA can generate in Stitch

These are practical page directions for the same company-inspired system. Open one in the builder or copy the prompt directly into Stitch.

Google-style AI lab launchGoogle
stitch export

AI Lab Microsite

A modular research microsite with primary-color geometry, demo shelves, and experimental clarity.

Stitch prompt

Design a Google-inspired AI lab microsite with primary-color geometry, modular storytelling, playful 3D forms, crisp product clarity, and an experimental research-demo tone that still feels usable.

Stitch output captures
Google AI Lab Microsite
Lab opener

The opener balances research polish and experimental energy.

Stitch AIv1.02026-03-30
Google AI Lab Microsite
Research shelf

The middle shelf keeps multiple experiments visible without clutter.

Stitch AIv1.02026-03-30
Google AI Lab Microsite
Demo close

The close preserves a product-demo feeling instead of a generic portfolio grid.

Stitch AIv1.02026-03-30
  • The first screen should feel exploratory without losing product readability
  • Primary-color geometry needs to support the demo shelves rather than dominate them
  • The lab should read like a usable product surface, not a concept poster
Use in builder
Google-style model demo pageGoogle
stitch export

Model Showcase

A product-demo page for AI models that balances playful geometry with crisp modular explanation.

Stitch prompt

Design a Google-inspired AI model showcase page with primary-color geometry, modular demo shelves, crisp explainer sections, playful but useful 3D forms, and a research-demo tone that feels clear and approachable.

Stitch output captures
Google Model Showcase
Model opener

The first frame should feel like a useful research demo rather than a brand splash.

Stitch AIv1.02026-03-30
Google Model Showcase
Demo shelf

The middle crop balances modular demo shelves with playful geometry.

Stitch AIv1.02026-03-30
Google Model Showcase
Capability close

The close keeps capabilities clear and approachable.

Stitch AIv1.02026-03-30
  • The layout should open like a product demo instead of a marketing landing
  • Model capabilities need to feel playful but still legible
  • Demo modules should stay clean and approachable
Use in builder
Google-style experimental tools directoryGoogle
stitch export

Toolkit Directory

A browsable directory of AI tools with bright filter tabs, modular cards, and a calm lab rhythm.

Stitch prompt

Create a Google-inspired experimental tools directory with modular cards, bright filter tabs, primary-color object accents, calm documentation clarity, and an open lab feeling. Keep the interface exploratory but highly usable.

Stitch output captures
Google Toolkit Directory
Directory opener

The opening frame should feel like a bright experimental toolkit shelf.

Stitch AIv1.02026-03-30
Google Toolkit Directory
Tool grid

The middle crop favors modular cards and category clarity over decoration.

Stitch AIv1.02026-03-30
Google Toolkit Directory
Filter close

The close keeps filters and tool metadata calm and useful.

Stitch AIv1.02026-03-30
  • Directory cards should feel product-useful rather than decorative
  • Filter tabs need to add brightness without noise
  • The page should feel like a real toolkit shelf in a research lab
Use in builder
Visual trait index

Make the result legible before anyone generates it

Each direction is translated into concrete layout, type, color, and pacing notes so the prompt has a visible design consequence.

Layout

Open modular storytelling with research shelves, demo bands, and clear product entry points.

Typography

Friendly but precise sans-serif hierarchy with strong explanatory subheads.

Color

Primary-color accents and selective geometry over calm neutral surfaces.

Motion

Light, helpful movement that implies experimentation rather than spectacle.

Imagery

Playful 3D objects, model demos, and modular experiment previews.

Density

Balanced. Open enough to explore, structured enough to understand quickly.

Prompt guardrails

What to push and what to keep out of the frame

Do

  • Use modular sections that feel open, experimental, and easy to scan.
  • Let primary-color geometry add character without overwhelming the interface.
  • Keep demo surfaces clear enough to feel like usable research tools.

Avoid

  • Avoid turning the page into a generic corporate docs layout.
  • Do not use so many colors that the hierarchy collapses.
  • Avoid abstract experimentation that removes product clarity.
Prompt remixes

Variation prompts that keep the same design DNA

These keep the same underlying direction but change how aggressively the page scans, moves, or compresses for mobile.

Sharper hierarchyModular Research Surface

Sharper hierarchy

Push scan clarity harder while keeping the same DNA.

Stitch prompt

Design a Google-inspired AI product page with primary-color geometry, modular demo sections, crisp research storytelling, playful 3D forms, and a clear usable hierarchy. Increase the hierarchy contrast, make the headline-to-body scale more assertive, and tighten the scanning path without changing the core direction.

Softer toneModular Research Surface

Softer tone

Make the same direction more welcoming and approachable.

Stitch prompt

Design a Google-inspired AI product page with primary-color geometry, modular demo sections, crisp research storytelling, playful 3D forms, and a clear usable hierarchy. Soften the overall tone slightly, reduce visual hardness, and make the composition feel more approachable while preserving structure.

Mobile-firstModular Research Surface

Mobile-first

Compress the composition for phone-sized scanning.

Stitch prompt

Design a Google-inspired AI product page with primary-color geometry, modular demo sections, crisp research storytelling, playful 3D forms, and a clear usable hierarchy. Optimize the composition for mobile-first scanning with tighter sections, shorter copy blocks, and stronger first-screen clarity.

Generated outcomes

Mock outputs for this direction

Use these as visual anchors for how the same prompt family can express itself across hero, type, and flow.

Micrositewide

Modular Research Surface Hero

Open modular storytelling with research shelves, demo bands, and clear product entry points.

type systemtall

Modular Research Surface Type

Friendly but precise sans-serif hierarchy with strong explanatory subheads.

motionsquare

Modular Research Surface Flow

Light, helpful movement that implies experimentation rather than spectacle.

Related directions

Nearby categories worth exploring next

Plugin Directory
FigmaCollaborative tooling

Collaborative Canvas System

Dense pane layout, shared-workspace cues, and crisp tool-like hierarchy for collaborative products.

Figma template cueCollaborative canvas workspace / community file landing

Mention layered panes, utility rails, collaboration cues, and canvas framing so the result feels like a product tool, not a marketing site.

6 Stitch-ready examplesPlugin Directory
  • Pane layout
  • Utility rails
  • Shared cursors
  • System clarity
View details
Spatial drama3D

Immersive 3D

Cinematic hero objects, layered depth, and atmospheric lighting.

  • 3D hero
  • Lighting hierarchy
  • Depth
  • Sparse UI
View details
Cultural polishEditorial

Editorial Grid 2D

Magazine pacing translated into web layout rhythm and type contrast.

  • Asymmetric grid
  • Serif contrast
  • Captions
  • Whitespace
View details