# Organic Biophilic > Leaf greens, blob shapes and petal-cornered cards on a fresh, lightly textured ground — interfaces that feel planted, not built. - Nickname: Leafy & alive - Also called: Biophilic design, Nature UI, Green organic - Category: Organic & Natural - Moods: Natural, Calm, Friendly - Industries: Fitness & Wellness, Healthcare, Food & Restaurant, Travel & Hospitality, Government & Nonprofit - Style page: https://uilingo.dev/styles/organic-biophilic/ Biophilic UI brings the outdoors in: a pale sage ground with soft fibre texture, leaf silhouettes drifting in the background, and every component shaped like something that grew. Cards and buttons use leaf corners (two big radii, two small), icons and avatars sit in wobbling blobs, and charts read like plants — rounded bars, dew-drop heatmaps, green-to-sun gradients. Type is rounded and friendly so the whole thing feels warm, breathable and alive. ## Best for - Wellness, yoga and meditation apps - Plant shops, gardening and farm-to-table brands - Sustainability, climate and NGO sites - Eco-friendly consumer products ## Avoid for - Fintech or trading tools that need sharp precision - Gaming and nightlife brands - Dense enterprise admin panels ## Do - Use leaf corners (40px 10px 40px 10px) on cards and petal corners (999px 10px 999px 10px) on buttons and chips, consistently - Keep greens dominant (60%+) with one warm sun accent - Put blob shapes behind icons, avatars and hero art, never behind body text ## Don't - Don’t use neon or synthetic lime greens - Don’t mix sharp 0px corners with the blob language - Avoid stock leaf clip-art at full opacity — keep silhouettes at 10–14% ## 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 "Organic Biophilic" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Leaf greens, blob shapes and petal-cornered cards on a fresh, lightly textured ground — interfaces that feel planted, not built. Design keywords: leaf green palette, organic blob shapes, leaf-cornered cards, petal buttons, leaf silhouettes, soft fibre texture, rounded friendly type, sun-yellow accent. ## Visual language A daylight, planted interface: pale sage ground (#F1F5E9) with a faint paper-fibre noise, oversized leaf silhouettes drifting at the page corners at 10-14% opacity, and every surface shaped like something that grew. Cards and buttons use 'leaf corners' (two large radii, two small, diagonally opposite), icons and avatars sit inside wobbling blobs, and headings are set in a rounded sans. The palette is 60%+ greens from deep forest to fresh shoot, with a single warm sun-yellow accent; light is soft and diffuse, shadows are green-tinted and long, density is relaxed. ## Signature details (must be visible) - Leaf-cornered surfaces: cards border-radius 40px 10px 40px 10px; dashboard/mock cards 32px 4px 32px 4px (the pointed diagonal must read at a glance) - Petal buttons, chips, badges and tab bar: border-radius 999px 10px 999px 10px (pointed on two diagonal corners) - Blob containers for icons, avatars, logo and step numbers: border-radius 58% 42% 52% 48% / 48% 56% 44% 52%, alternating with a mirrored blob - Background: two inline-SVG leaf silhouettes (veined, 10-14% fill) at top-right and bottom-left over radial sage/moss glows and a 7% fractal-noise fibre texture - Green-tinted soft shadows only: 0 16px 36px -14px rgba(28,74,42,.24); never grey or hard shadows - Hero product shot (a phone screen of today's practice: ring progress and two session rows) sits on a large pale moss #B7D389 → #E2EBD3 radial blob with a swaying dark leaf (#2D6A44) tucked behind its bottom-right corner - Alternate sections are rounded 'clearings': background surface-2, border-radius 120px 28px 120px 28px, inset from the page edge - Eyebrows are petal pills with a tiny leaf glyph (14px, radius 100% 0 100% 0) before the label ## Design tokens — use these exact values Colours (light mode): - background #F1F5E9 - surface #FBFCF6 - surface-2 #E2EBD3 - text #1C3325 - text-muted #4A5F50 - primary #2D6A44 (text on it #F6FBF0) - secondary #B7D389 (text on it #1C3325) - accent #E0A23A - border #CCDABB - success #2E7A45 · warning #A9640E · danger #B3412D - chart series #2D6A44, #8CB456, #E0A23A, #4F9888, #A8694A Radius: sm 10px, md 18px, lg 28px, xl 40px, pill 999px Border width: 1px Shadows: sm `0 2px 6px rgba(28, 64, 38, 0.06)`, md `0 16px 36px -14px rgba(28, 74, 42, 0.24)`, lg `0 32px 64px -22px rgba(28, 74, 42, 0.32)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 380ms cubic-bezier(.25,.8,.3,1) ## Typography (Latin + Thai) - Headings: Quicksand 600/700 with Thai fallback KoHo 600/700 - Body: Mulish 400/600/700 with Thai fallback Niramit 400/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&family=Mulish:wght@400;600;700&family=KoHo:wght@600;700&family=Niramit:wght@400;600&display=swap - CSS stacks: heading `"Quicksand", "KoHo", system-ui, sans-serif`; body `"Mulish", "Niramit", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6vw, 4.75rem), heading weight 700, heading tracking -0.015em (Latin only), sentence-case labels. - 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: KoHo’s soft, hand-made humanist strokes echo Quicksand’s rounded terminals; gentle loopless Niramit keeps the same relaxed, friendly texture as Mulish in body text. ## Components - Primary button: primary #2D6A44 fill, #F6FBF0 text, petal radius, green glow shadow 0 10px 22px -10px rgba(45,106,68,.6); hover: color-mix(in srgb, #2D6A44 88%, #000) and lifts 2px - Secondary button: surface #FBFCF6 fill, 1px #CCDABB border; hover: color-mix(in srgb, #B7D389 35%, #FBFCF6) - Cards: surface #FBFCF6, 1px #CCDABB border, leaf corners; feature cards cycle tints of moss #B7D389, sun #E0A23A and teal #4F9888 (each ~20-30% over surface); highlight card is primary #2D6A44 with a radial #B7D389 glow at 45% and a faint veined-leaf watermark - Inputs: 18px radius, faintly green-tinted fill; focus = green border + 4px moss halo (rgba of secondary at 55%) - Badges and chips: petal shape, moss-tinted fill (color-mix #B7D389 45% over surface) with #2D6A44 text; active chip solid #2D6A44 - Checkbox corners 7px 2px 7px 2px; switch thumb is leaf-shaped; progress bar is a #2D6A44 → #B7D389 gradient on a #E2EBD3 track - Charts: line 3.5px solid with soft area fill, round-dotted grid, bars with pill tops and #2D6A44 → #B7D389 gradient, donut with round caps, heatmap cells shaped like leaves/dew drops (50% 50% 50% 8%) - Sidebar: floating panel with 48px rounded right edge and soft shadow; active item is a solid #2D6A44 petal - FAQ: dashed separators, toggle icon is a small leaf that rotates 90° and darkens when open ## 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: pill style. Sections in order: hero → features → showcase → stats → testimonials → pricing → faq → cta. Feature section as bento. Split hero: rounded-sans headline left; right, a phone screen of today's practice (ring progress, two session rows) on a pale moss #B7D389 → #E2EBD3 radial blob with a leaf peeking out. Pill nav floats with a petal outline. Features as a bento of leaf-cornered tiles, then a showcase inside a rounded 'clearing' section, stat numerals in primary #2D6A44 on transparent tiles with a blob icon, testimonials, pricing and a primary #2D6A44 CTA with radial-gradient glows of #B7D389 at 45% (top-right) and #4F9888 at 55% (bottom-left). Keep backgrounds airy and never fill the page edge to edge with flat colour. Dashboard pages only: a floating rounded sidebar, transparent topbar and leaf-shaped heatmap cells. ## Content Use realistic product copy (fictional brand) suited to: Wellness, yoga and meditation apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use leaf corners (40px 10px 40px 10px) on cards and petal corners (999px 10px 999px 10px) on buttons and chips, consistently - Keep greens dominant (60%+) with one warm sun accent - Put blob shapes behind icons, avatars and hero art, never behind body text ## Don't - Don’t use neon or synthetic lime greens - Don’t mix sharp 0px corners with the blob language - Avoid stock leaf clip-art at full opacity — keep silhouettes at 10–14% - Neon or synthetic lime greens and saturated blue — the only bright green is secondary moss #B7D389; the palette is plant-real - Sharp 0-2px corners or uniform radii that kill the leaf/blob shape language - Muddy clay/terracotta palettes and serif headlines (that reads as Nature Distilled) - Dark bioluminescent backgrounds with glow (that reads as Biomimetic) - Puffy inner-highlight 3D shading (that reads as Claymorphism) - Leaf clip-art at full opacity or behind body text ## Stack notes One self-contained HTML file with a