BUILD
- Build a complete Skeuomorphic marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs.
- Domain from Use on: product promo and premium tools first; enterprise reuses the bevels, not the linen warmth.
STYLE
- Skeuomorphic: realistic material gradients, beveled edges, inset fields, glossy buttons, a soft linen ground
- Background a warm linen wash linear-gradient(180deg, #F3EBDA 0%, #E6D4B3 100%); panels are molded material, not flat slabs
- Accent burnt orange #C2410C for kickers; glossy blue #2F6FB0 for primary actions; ink #3A2E1C; rim #CBB89A
- Radius 14px on panels, 10px on buttons. Every surface carries a top bevel inset 0 1px 0 #FFFFFF and a soft drop shadow
- Type: a humanist sans (Inter / Georgia for display) over the linen. No neon, no gradient mesh
LAYOUT
- Container max-width 1120px. Linen wallpaper; every block is a molded panel with a lit top edge
- Top bar is a molded chrome: wordmark left, three links, search field, glossy CTA — beveled, 12px off the top
- Fields and inputs are recessed (inset shadow), controls are raised (drop shadow) — that contrast is the language
SECTIONS
1. Hero: a large embossed panel, headline "Real material. Real depth.", kicker NEW, one dek line, glossy CTA Start free plus embossed See the kit
2. Three embossed value cards: Material, Bevel, Gloss — kicker, one line, Read more each
3. Feature band: two columns, left a recessed cover block, right a short list of four claims
4. Pricing strip: three embossed columns, the middle one glossy blue with white text
5. Closing CTA band: a wide embossed panel with one glossy CTA
6. Three-column embossed footer: Product / Company / Colophon
INTERACTION
- Hover lifts each panel 2px and deepens its drop shadow; the top bevel brightens. Glossy buttons press on :active
- Focus is a 2px solid #C2410C outline, never a glow ring
- Inset fields should visibly recess on focus — that is the physical read
MOTION
- Motion is tactile and short: 160ms ease for lifts and presses, no overshoot, no bounce
- Use ease, not steps; surfaces settle like physical objects
- Entrance is a 8px rise with the bevel fading in, staggered 50ms per card
- prefers-reduced-motion: no rise, no stagger, panels appear instantly
TECHNICAL
- React, Tailwind CSS, a .panel surface utility (material gradient + bevel + drop). One homepage route.
DON'Ts
- Do not call this neumorphism: skeuomorphic has visible material gradients and gloss, not a same-hue soft extrude
- Do not call this claymorphism: edges are beveled and crisp, not inflated and pillowy
- No flat solid fills, no gradient mesh, no neon, no glass
- Do not output only a headline plus two empty cells. Do not make every surface matte