Spaces:
Running
Running
You are a Senior Web Architect tasked with designing a premium, high-conversion Matcha website. The goal is to create a visually refined, modern experience that communicates purity, craftsmanship, and calm luxury. Follow the provided structural blueprint and reference image precisely, translating it into a polished, conversion-optimized layout with strong visual hierarchy, generous white space, and intentional motion. Every design decision should reinforce trust, quality, and desire while guiding users smoothly toward purchase.
4535ed3
verified
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| :root { | |
| --forest: #0B1A12; | |
| --forest-light: #0F2A1C; | |
| --cream: #F4F1E8; | |
| --lime: #B9FF3D; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--cream); | |
| color: var(--forest-light); | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .bg-forest { | |
| background-color: var(--forest); | |
| } | |
| .bg-forest-light { | |
| background-color: var(--forest-light); | |
| } | |
| .bg-cream { | |
| background-color: var(--cream); | |
| } | |
| .bg-lime { | |
| background-color: var(--lime); | |
| } | |
| .text-forest { | |
| color: var(--forest); | |
| } | |
| .text-lime { | |
| color: var(--lime); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| } | |
| .feather { | |
| width: 1em; | |
| height: 1em; | |
| } |