Design a light-mode mobile app interface screen: a tactile heritage stroll blending quiet editorial typography with misty deep forest botanical photography.
LAYOUT
The page unfolds as a vertical editorial scroll. It begins with an expansive photographic hero occupying roughly 50% of the viewport, pinched at the base by a sweeping concave curve and punctuated by a central diamond callout. Below lies an airy informational block featuring a centered headline stack, a brief prose intro, and a compact three-column facility status strip, followed by inset rounded course cards.
PALETTE (use these exact hex values)
- #f7f6f3 — Botanical Paper: primary light background canvas lending warmth and editorial print credibility
- #1a251e — Deep Woodland: high-contrast primary headings, deep photo overlays, and solid circular icon glyph backdrops
- #5a232c — Oxblood Dahlia: focal callout diamond badge driving membership and donation engagement
- #aa8d5d — Burnished Ochre: tracked category eyebrows, section dividers, and decorative focal lines
- #676e65 — Lichen Grey: curated editorial body prose and location descriptors
- #8c9489 — Misty Sage: supporting microcopy, auxiliary hours, and fine legal metadata
- #ffffff — Alabaster White: hero headline typography, floating overlay glyphs, and high-legibility reverse text
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Freight Display, EB Garamond), weights 400/500/600. Sizes 10px caption, 12px body-sm, 12px subheading, 14px body, 15px body-lg, 24px heading, 32px heading-lg, 44px display. Tracking -0.01em to 0em. The typographical tone is aristocratic, tranquil, and scholarly. The primary display serif carries historical weight reminiscent of classical English estate typography or botanical monographs, while the crisp sans-serif handles structural facts with invisible precision. Cormorant Garamond is an exceptional free open-source equivalent for the headline role.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 16px gaps, 48px between sections, 390px container, airy density.
DEPTH
Depth is created almost entirely through spatial layering, photographic masks, and structural overlap rather than artificial drop shadows. The hero image overlaps the light canvas via a sculpted curve, while the oxblood diamond floats across the boundary with a barely perceptible ambient blur (0 6px 16px rgba(0,0,0,0.12)). Interior cards sit flush on the ivory background as textured photographic windows.
IMAGERY
Photographs evoke lush, manicured heritage landscapes, classical topiary gardens, morning fog, and Japanese garden footbridges. The grade is cinematic, desaturated in highlights but deeply saturated in deep forest greens, foliage textures, and earth browns. Bright indoor corporate photography or flat vector botanical illustrations are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable hallmark is the curved hero boundary intersected by a floating oxblood-red rounded diamond CTA badge. This 45-degree rotated lozenge bridges the dark organic imagery above and the serene cream parchment below. Misusing it by sharpening the diamond's corners, shifting it off-center, or replacing it with an ordinary pill button completely dissolves the boutique garden identity.
MUST
- Retain generous empty margins around editorial text to evoke luxury print catalog pacing.
- Pair rich dark forest photography with warm parchment canvas backgrounds (#f7f6f3).
- Use letter-spaced burnished gold (#aa8d5d) strictly for small-scale eyebrows and decorative line rules.
- Center-align the signature diamond badge precisely over the bottom curve of the hero mask.
AVOID
- Do not use stark clinical pure white (#ffffff) for the main body background.
- Avoid flat straight cutoffs at the base of the hero; it requires the gentle sculpted curve.
- Do not make the oxblood diamond sharp-cornered; it must maintain soft 12-14px radiused tips.
- Never set running body paragraphs in the high-contrast display serif.
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 
