# Nature Distilled > Nature reduced to calm earth tones — clay, sand, olive and terracotta on grainy paper, with a soft serif and abstract sun-and-dune forms. - Nickname: Clay & sand - Also called: Earthy minimal, Terracotta UI, Warm natural - Category: Organic & Natural - Moods: Natural, Calm, Luxury, Nostalgic - Industries: Food & Restaurant, Fitness & Wellness, Travel & Hospitality, Real Estate, Creative & Portfolio - Style page: https://uilingo.dev/styles/nature-distilled/ Nature Distilled strips the outdoors down to its colours and textures rather than its pictures. Surfaces are warm, uncoated paper with a visible grain; the palette is fired clay, sand, olive, bark and skin tones; headlines use a soft, calm serif. Imagery is abstract and flat — a terracotta sun over layered dune bands, dome-topped sections like a horizon — so it feels handmade and grounded without a single leaf or photo. Contrast stays gentle, corners small, shadows almost absent. ## Best for - Restaurants, bakeries, coffee and farm-to-table brands - Ceramics, homeware and slow-living shops - Boutique stays, retreats and spas - Skincare and natural beauty ## Avoid for - High-energy sports or gaming - Data-dense fintech dashboards - Children’s products that need bright primaries ## Do - Keep colours earthy and muted: no hue brighter than terracotta #A24E2D, never neon - Use the paper grain on the page and large surfaces (noise alpha ~.11, which reads as faint 5–8% grain) - Let one terracotta element lead each screen; olive and sand support ## Don't - No pure white or pure black — always warm paper and bark brown - Don’t use leaves, blobs or plant photos (that is biophilic) - Avoid heavy drop shadows and glossy gradients ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Nature Distilled" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Nature reduced to calm earth tones — clay, sand, olive and terracotta on grainy paper, with a soft serif and abstract sun-and-dune forms. Design keywords: terracotta and sand, clay earth palette, paper grain texture, soft calm serif, sun over dunes, dome horizon sections, flat abstract landscape, handmade warmth. ## Visual language Nature reduced to its colours and textures: warm, uncoated sand paper (#EFE6D8) with a visible fine grain, fired-clay terracotta (#A24E2D), olive (#69623F), sand, bark and skin tones, and a soft low-contrast serif for headlines. Imagery is never a photo or a plant — it is a flat abstract landscape: a terracotta sun over layered dune bands, dome-topped sections like a horizon. Corners are small, shadows nearly absent, contrast gentle; the mood is handmade, grounded and slow. ## Signature details (must be visible) - Paper grain everywhere: inline SVG feTurbulence (fractalNoise, baseFrequency .75, 3 octaves) through a warm-brown colour matrix with alpha .11 (reads as ~5-8% visible grain), layered over the page and over every card, topbar and tab bar - Sun-over-dunes art: hard-edged elliptical radial-gradients in dune-olive #5E583A, terracotta #A24E2D, sand #C9976A and dune-sand #DCC3A2 stacked at the bottom, a sun #C2633D circle with a 20% halo, on a sky #F0E3CF → #E9D6BC - Dome horizons: alternate sections and the CTA have a curved top edge (border-radius 50% 50% 0 0 / 70px 70px 0 0) - Small half-sun glyph (18×9px, radius 18px 18px 0 0, terracotta) before eyebrows, under centred headings and as the tab bar active marker - Soft serif headlines at regular weight (Fraunces 400, optical size auto), tracking -0.02em on display; body in Karla - Fired-clay primary button: terracotta fill, cream text, 6px radius, inset 0 -3px 0 rgba(60,25,10,.22) bottom lip that flips on press - KPI cards wear a 4px top band in a different earth colour each (terracotta, olive, sand, bark) - Fixed earth palette, nothing outside it: tokens plus bark #8A6A55 (chart-4), stone #B5A285 (chart-5), dune-olive #5E583A, dune-sand #DCC3A2, sky #F0E3CF → #E9D6BC, sun #C2633D ## Design tokens — use these exact values Colours (light mode): - background #EFE6D8 - surface #F8F2E9 - surface-2 #E6D9C5 - text #3A2A20 - text-muted #6C5747 - primary #A24E2D (text on it #FBF4EA) - secondary #69623F (text on it #FBF4EA) - accent #C9976A - border #D6C6AE - success #57733F · warning #9A6216 · danger #A23B2B - chart series #A24E2D, #69623F, #C9976A, #8A6A55, #B5A285 Radius: sm 3px, md 6px, lg 10px, xl 16px, pill 999px Border width: 1px Shadows: sm `0 1px 0 rgba(90, 60, 35, 0.08)`, md `0 10px 24px -14px rgba(90, 55, 30, 0.28)`, lg `0 24px 48px -24px rgba(90, 55, 30, 0.34)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.12 density Motion: 280ms cubic-bezier(.3,0,.2,1) ## Typography (Latin + Thai) - Headings: Fraunces 400/500 with Thai fallback Maitree 400/500 - Body: Karla 400/500/700 with Thai fallback Sarabun 300/400/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500&family=Karla:wght@400;500;700&family=Maitree:wght@400;500&family=Sarabun:wght@300;400;600&display=swap - CSS stacks: heading `"Fraunces", "Maitree", system-ui, sans-serif`; body `"Karla", "Sarabun", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6vw, 4.9rem), heading weight 400, heading tracking -0.01em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Maitree’s sturdy, soft-bracketed book serif matches Fraunces’ warm, low-contrast curves; looped Sarabun gives Thai body text the same humble, readable warmth as Karla. ## Components - Buttons: primary fired clay (see signature), hover background color-mix(in srgb, #A24E2D 90%, #3A2A20) while the lip stays; secondary transparent with a 1px rgba(138,106,85,.35) bark outline; ghost hover rgba(201,151,106,.18) - Cards: paper grain over #F8F2E9, 1px #D6C6AE border, 6px radius, shadow only a 1px warm bottom hairline; hover lifts 2px - Highlight card / featured: grain over terracotta with cream text; mobile featured card ends in an olive-sand dune strip with a pale sun - Inputs: 6px radius, sand-tinted fill, 1px border; focus = terracotta border + 3px 16% terracotta ring - Badges: 3px radius, 26% sand fill with clay-brown text; chips are pills with a bark outline, active chip is bark-brown solid - Dividers: 1px hairline with a 7px terracotta dot centred on it; pull quotes sit between two hairlines, centred, in terracotta serif - Charts: earthy five-colour palette (terracotta #A24E2D, olive #69623F, sand #C9976A, bark #8A6A55, stone #B5A285), solid hairline grid, vertical bars with domed tops cycling colours, round legend dots - Step numbers are terracotta domes (56×30px, radius 40px 40px 0 0) with cream numerals - Tab bar: grain paper bar with hairline top; active item terracotta with a half-sun marker above the icon ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: split style. Sections in order: hero → features → showcase → testimonials → steps → trust → faq → cta. Feature section as alternating. Split hero: large regular-weight serif headline and earthy copy on the left, product shot resting on a sun-over-dunes panel on the right. Split nav on warm paper. Features alternate text with abstract landscape art on a 5/7 split: row 1 art left / text right with an arch-topped panel, row 2 text left / art right with a bowl-bottomed panel, row 3 arch again; each text side ends with the hairline-and-terracotta-dot divider. Then a dome-topped showcase section, testimonials, domed numbered steps, trust (3-4 outlined 3px-radius badges: organic certificate, local farm, wood-fired, press quote), FAQ in serif, and an olive dome-topped CTA. Dashboards use a top nav with a terracotta pill for the active item and KPI cards banded in earth colours. ## Content Use realistic product copy (fictional brand) suited to: Restaurants, bakeries, coffee and farm-to-table brands. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Keep colours earthy and muted: no hue brighter than terracotta #A24E2D, never neon - Use the paper grain on the page and large surfaces (noise alpha ~.11, which reads as faint 5–8% grain) - Let one terracotta element lead each screen; olive and sand support ## Don't - No pure white or pure black — always warm paper and bark brown - Don’t use leaves, blobs or plant photos (that is biophilic) - Avoid heavy drop shadows and glossy gradients - Leaves, blobs, plant photography or fresh greens (reads as Organic Biophilic) - Cool oat-and-charcoal minimalism with ensō circles and slatted wood (reads as Japandi) - Pure white, pure black or any saturated/neon colour - Heavy drop shadows, glossy gradients or glassy blur - Bold or condensed sans headlines — headlines are a calm serif at regular weight - Arch frames with gold hairlines and Thai motifs (reads as Thai Modern Heritage) ## Stack notes One self-contained HTML file with a