Design a light-mode mobile app interface screen: tactile claymorphism and pastel tinting soften complex enterprise workflows into approachable, serene decision steps.
LAYOUT
The mobile view follows a disciplined vertical hierarchy: a 48px top app bar, followed immediately by an asymmetrical hero block combining bold text queries with right-aligned 3D art. Beneath the hero, a 2x3 grid of colored pastel category cards dominates the upper viewport. The lower fold transitions into a horizontal service tray of 56px circle icons, followed by a wide botanical stat panel anchored at the bottom edge.
PALETTE (use these exact hex values)
- #FAFBFB — Canvas Background: App background providing clean, non-reflective base across all screens
- #1A2E2C — Deep Forest Slate: Primary headings, titles, and main navigation brand marks
- #6B7C7A — Sage Mist Gray: Secondary instructions, category labels, and trailing links
- #3A7D6E — Active Pine: Active category circle fill, primary highlight actions, and key brand motifs
- #E6F5F2 — Mint Pastel: Background tint for funding category cards and financial service pill
- #FEF5E7 — Cream Sun Pastel: Background tint for ideation card and partner collaboration service pill
- #FEECE5 — Peach Coral Pastel: Background tint for market validation and advisory service pill
- #FCE8EB — Blush Rose Pastel: Background tint for foreign expansion card and international trade pill
- #EBF3FE — Frost Blue Pastel: Background tint for enterprise solutions category card
- #F4EFFD — Lavender Pastel: Background tint for prototype category card and events service pill
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, DM Sans, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 18px heading, 26px display. Tracking -0.02em at display, 0 at body. The typography uses a friendly, rounded geometric sans-serif (matched closely by Plus Jakarta Sans) that merges institutional competence with human warmth. Its generous x-height and tight tracking (-0.02em) make multi-line Polish headlines compact and scannable. Outfit or Inter serve as seamless drop-in replacements for standard enterprise implementations.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 32px between sections, 390px container, comfortable density.
DEPTH
Depth is created purely through soft ambient cues rather than harsh directional shadows. Category tiles sit flush with the canvas, while interior white circular badges and trailing action buttons feature an ethereal micro-elevation (0 2px 8px rgba(0, 0, 0, 0.04)). The 3D hero compass provides tactile physical presence without casting synthetic drop shadows onto the layout.
IMAGERY
Visual assets combine smooth, matte claymorphic 3D models (such as the directional compass) with photorealistic, desaturated eucalyptus foliage. Imagery must consistently feel clean, tranquil, and tactile. High-gloss 3D, harsh metallics, busy vector illustrations, or human lifestyle photos are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious mosaic of six subtly pastel-tinted cards, each anchored internally by a white circular emblem on the left and a micro-elevated circular arrow button on the right. This creates an immediate feeling of approachable micro-destinations without feeling chaotic. Misusing it involves oversaturating the card fills or eliminating the unifying white circular elements.
MUST
- Use pastel fills below 15% saturation to avoid overpowering the white circular icon badges.
- Pair every 2-column category tile with an unmistakable white circular forward-arrow affordance.
- Maintain strict 12px gutters between cards to create a dense yet clean dashboard feel.
- Rely on #1A2E2C for typography to ensure AA contrast against light pastel card surfaces.
AVOID
- Do not apply heavy dark borders or harsh drop shadows to category cards.
- Never use pure black (#000000) for text; it disrupts the botanical, organic slate palette.
- Avoid using vivid or neon card tints that break the calm, therapeutic tone.
- Do not remove the white circular disc beneath icons inside tinted category cards.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1328:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub