---
id: "aw-site-64590"
source: https://www.awwwards.com/sites/floema
author: "Bürocratik (burocratik)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Mossy Stone Letter Framed Hero

## Summary
A brand hero set in a rounded, glass-rimmed frame on a warm beige backdrop: a giant black wordmark sits behind a 3D moss-covered stone letterform that breaks out of the frame's bottom edge on a grassy mound with wildflowers and a small kingfisher perched on top. A great reference for mixing flat UI with a photoreal 3D object that overflows its container.

## Style
- Theme: light (cream frame on a soft beige backdrop)
- Mood: natural, calm, crafted, premium, organic
- Tags: framed-hero, 3d-object, overflow-break, giant-wordmark, nature, pill-nav, contact-card
- Category: Hero, 3D

## Palette
| Role | Hex |
|---|---|
| Frame cream | #F3EFEA |
| Backdrop taupe | #DAD6CC |
| Panel off-white | #EBE7E2 |
| Stone grey | #BEB8AB |
| Moss olive | #83795E |
| Deep moss | #39341A |
| Ink | #241F21 |
| Kingfisher blue | #2F6DB5 |

## Typography
- Giant wordmark: geometric sans, bold, lowercase with a custom arrow-cut first letter and a registered mark, about 15% of the frame height. Use a placeholder wordmark; closest free: Outfit 700.
- Nav pills: uppercase sans 9px medium with 0.04em tracking. Closest: Manrope 600.
- Intro: sans regular about 20px, three lines, leading 1.15, ink. Manrope 400.
- Small link with a down arrow: 9px; contact card text 13px white.

## Layout
- 4:3 (1600x1200). Beige backdrop with soft leaf shadows in the top-right corner.
- Frame: centred, about 91% wide and 63% tall, starting at 12% from the top, radius about 28px, with an outer translucent rim (about 6px, white at 40%) like a glass bezel.
- Header inside the frame: logo and search icon top-left separated by a 1px divider; four pill links and a language switch top-right.
- Wordmark centred at about 45% height; the 3D sculpture rises from below the frame, overlapping the wordmark and the frame's bottom edge.
- Bottom-left: intro text over a 1px divider and a small link. Bottom-right: a contact card about 240x150px with 12px radius.

## Elements
- Pill nav: four white pills (about 28px tall, fully rounded) on the cream frame, no borders.
- Placeholder wordmark with a registered mark.
- 3D sculpture: a weathered concrete letter shape covered in moss, with a mossy arch at its base, on a grass mound with wild grasses, yellow daisies and small rocks; a kingfisher perched on the top edge.
- Contact card: office photo with a dark gradient, two lines of white text, a square mail icon button and a white pill button.
- Intro block with a short divider and a link.

## Motion
Static image. Suggested motion: tilt the 3D sculpture a few degrees toward the pointer (spring, stiffness 80) and let the bird's head bob every 3s while the leaf shadows sway slowly.

## Rebuild it
1. Page background `bg-[#DAD6CC]` with a blurred leaf-shadow image at the top-right (`mix-blend-multiply opacity-40`).
2. Frame: `relative mx-auto mt-[12vh] w-[91%] h-[63vh] rounded-[28px] bg-[#F3EFEA] ring-[6px] ring-white/40`.
3. Header: `flex justify-between p-6`; pills `rounded-full bg-white px-4 py-2 text-[9px] uppercase font-semibold`.
4. Wordmark: an SVG centred with `absolute inset-x-0 top-[38%] mx-auto w-[56%]`.
5. Sculpture: a transparent PNG or a React Three Fiber model positioned `absolute left-1/2 -translate-x-1/2 bottom-[-30%] z-10` so it overflows the frame (`overflow: visible` on the frame).
6. Add a Motion `useSpring` pointer tilt (`rotateY` +/- 6deg) on the sculpture and fade the frame in with `scale` from 0.98 over 0.8s.

## Generation prompt
A premium website hero inside a rounded cream frame with a soft glassy rim on a warm beige background with leaf shadows: a giant bold black lowercase placeholder wordmark behind a photoreal concrete letterform covered in green moss rising from a grassy mound with wild grasses and yellow daisies, a small kingfisher perched on top, white pill navigation buttons and a small contact card with a photo; natural, calm, crafted.