Design a dark-mode mobile app interface screen: understated dark sanctuary balancing tactile organic greenery against matte obsidian surfaces.
LAYOUT
The screen follows a vertically ordered mobile commerce flow: persistent 52px navigation bar at the apex, followed immediately by an inset rounded hero banner. Beneath the banner, a horizontally overflowing category disc rail introduces taxonomy with minimal vertical footprint. This transitions smoothly into section-separated modules featuring a two-column symmetrical product grid with 12px gaps.
PALETTE (use these exact hex values)
- #0d0f11 — Obsidian Canvas: Root application background behind all scrollable feed layers and navigation
- #15181c — Carbon Surface: Background fill for product cards, category circular backdrops, and modal trays
- #23272e — Slate Border: Hairline perimeter borders on cards, search bars, and circular icon containers
- #62a378 — Botanical Sage: Accent text, cart count badge, active carousel dot, and 'View all' action links
- #17261e — Sage Mist Tint: Translucent dark-tinted badge fill for status chips like Bestseller and New
- #ffffff — Porcelain White: Primary hero typography, brand wordmark, high-emphasis titles, and hero CTA fill
- #8e95a0 — Ashen Muted: Supporting metadata, subheads, category labels, and inactive pagination indicators
- #20252b — Interactive Graphite: Floating quick-add circular buttons and icon container backgrounds
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,SF Pro Display,DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 17px subheading, 24px display. Tracking -0.02em at display, 0.28em at wordmark, 0 at body. The typographic tone is architectural, calm, and deliberate, pairing geometric clarity with lifestyle warmth. Plus Jakarta Sans (or clean alternatives like Inter and SF Pro) provides immaculate legibility at micro sizes like 11px and 12px specs while delivering authoritative poise when tracked wide in the top-level wordmark. Headline pairings that transition mid-phrase from white to sage create an organic, conversational cadence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is created strictly through tone elevation rather than directional drop shadows. The background sits at absolute dark #0d0f11, while cards and circular interaction zones step up to #15181c framed by a subtle 1px stroke (#23272e). Floating micro-controls like the product card add-button step up once more to #20252b for immediate thumb-reach affordance.
IMAGERY
Imagery celebrates tactile, earthy botanicals—concrete textured pots, spiky succulents, artisanal indigo terracotta, and glass terrariums. Visuals must be either moody lifestyle photography with warm ambient lighting for banners, or sharp cutouts centered on deep neutral surfaces without messy real-world backgrounds. Avoid cartoonish illustrations, saturated neon plant photos, or flat vector icons.
SIGNATURE DETAIL — the thing that makes this design itself
The signature visual motif is the dual-tone editorial headline ('Better spaces. Naturally.') where the final thematic word adopts the desaturated sage brand accent, echoed precisely in the micro status chips and link text. It unifies commercial catalog browsing with high-end interior editorial design. Misusing this by coloring multiple words or using saturated neon greens immediately degrades the quiet botanical luxury into common discount e-commerce.
MUST
- Render all product showcase imagery against transparent or seamless studio backgrounds that blend cleanly into #15181c.
- Use the wide letter-spaced wordmark tracking (0.25em to 0.3em) exclusively for the NAVEDA brand identity.
- Keep card perimeters visible via subtle 1px #23272e borders rather than cast drop shadows.
- Reserve the botanical sage (#62a378) strictly for active states, link actions, badges, and headline punchlines.
AVOID
- Never apply high-opacity drop shadows or heavy blur glow effects onto product containers.
- Do not use saturated electric greens; keep the hue earthy and desaturated (#62a378).
- Avoid using sharp 0px or square corners; everything structural adheres to 16px-20px radii or full pill curves.
- Do not set category circular avatars larger than 64px or smaller than 52px on mobile screens.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
