# Biomimetic / Organic 2.0 > Cell-like surfaces with double membranes that slowly breathe, glowing bioluminescent teal and violet on a deep-sea dark ground. - Nickname: Living cells - Also called: Biomimetic UI, Organic 2.0, Bioluminescent UI, Cellular design - Category: Organic & Natural - Moods: Dreamy, Techy, Calm, Natural - Industries: Healthcare, AI Products, Fitness & Wellness, Startup & Tech, Education - Style page: https://uilingo.dev/styles/biomimetic-organic-2/ Biomimetic UI borrows from microscopy and the deep sea rather than from leaves. Surfaces are cells: softly asymmetric radii, a faint inner glow and a second membrane ring floating a few pixels outside. Hero art, onboarding art, logo and avatars are nuclei that morph and breathe on slow loops; cards stay still; status dots pulse like plankton. The ground is a dark abyssal teal sprinkled with cell outlines, and colour arrives only as light — bioluminescent mint, violet and cyan — so it feels alive, scientific and calm at once. ## Best for - Biotech, genomics and health-tech products - Mental health and sleep apps with ambient motion - Science communication and research labs - Climate and ocean-tech brands ## Avoid for - Budget e-commerce and coupon sites - Text-heavy government services - Low-end devices where continuous animation hurts battery ## Do - Animate shape (border-radius morph, 11–18s loops) — never position or layout - Keep glow on accents and data, surfaces stay deep and quiet - Use the outer membrane ring (outline 1px, offset 5px (3px on small cells), 8px on hover) as the recurring signature ## Don't - Don’t use frosted backdrop blur — membranes are clear, not frosted - Don’t use leaf or plant imagery - Don’t morph text containers or inputs; only art, logo, avatars and step nuclei breathe; featured cards keep a static cell radius ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Biomimetic / Organic 2.0" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Cell-like surfaces with double membranes that slowly breathe, glowing bioluminescent teal and violet on a deep-sea dark ground. Design keywords: cellular shapes, outer membrane ring, breathing morph animation, bioluminescent glow, deep-sea dark ground, mint and violet light, microscope cell pattern, pulsing status dots. ## Visual language A living, microscopic interface seen through a dark deep-sea lens. The ground is abyssal teal-black (#051317) scattered with faint cell outlines and a few glowing plankton points; surfaces are cells, not panels — softly asymmetric radii, a faint inner glow and a second clear 'membrane' ring floating 3-8px outside each one. Colour only arrives as light: bioluminescent mint (#3DF2C4), violet (#B48CFF) and cyan glows on data, buttons and nuclei. The hero nucleus, onboarding art, logo, avatars and step numbers are nuclei that slowly morph and breathe; every card, including the featured card, keeps a static cell radius, so the page feels alive, scientific and calm. ## Signature details (must be visible) - Cell radius on every card: 34px 44px 30px 46px / 42px 32px 46px 30px (smaller variant 22/28/20/30 for dashboard cards and lists) - Outer membrane ring — cards, lists, tab bar and CTA: outline 1px solid rgba(61,242,196,.14), outline-offset 5px (3px on dashboard/list cards), 8px and brighter on hover. Buttons and focused inputs: box-shadow 0 0 0 4-5px rgba(61,242,196,.16) (a spread ring with no gap) - Inner glow instead of frost: radial-gradient(120% 90% at 0 0, rgba(61,242,196,.07), transparent 60%) plus inset 0 0 28px rgba(61,242,196,.06); no backdrop-filter anywhere - Nucleus shapes (border-radius 52% 48% 41% 59% / 47% 58% 42% 53%) on the hero nucleus, onboarding art, logo, avatars and step numbers, morphing on slow loops. Keyframes: bm-morph 11s ease-in-out infinite: 0/100% 52% 48% 41% 59% / 47% 58% 42% 53%; 33% 44% 56% 55% 45% / 56% 44% 57% 43%; 66% 58% 42% 47% 53% / 41% 52% 48% 59%. bm-breathe 12s: same plus scale 1→1.05 at 50% (hero nucleus only) - Immersive hero: a breathing nucleus, width min(760px, 110vw), aspect-ratio 1.15 (radial mint + violet core, glowing membrane rim), centred behind the headline and cropped by the hero (overflow hidden) on phones. Around it a dashed ring: 1px dashed rgba(61,242,196,.25), inset -8% (ring ~116% of the nucleus), no animation. Hero visual = the breathing nucleus (no product shot) - Background: two overlapping inline-SVG cell tiles (260px and 410px) at 7% opacity — each tile holds 5-7 irregular closed cell outlines (stroke 1px #3DF2C4), each with a 6-14px nucleus circle; plus a radial mint glow at top, violet glow at bottom-right, and plankton: 6-10 dots 2-3px, #3DF2C4/#B48CFF, box-shadow 0 0 6px, scattered in the outer 30% of the viewport - Data glows: chart lines with drop-shadow(0 0 5px series colour), round donut caps, circular heatmap cells whose glow scales with value, pulsing status dots - Exact translucency: secondary button background rgba(11,32,38,.6) (surface at 60%); nav background rgba(5,19,23,.72) (bg at 72%). Thai labels: uppercase/tracked labels are Latin only; Thai labels are 0.85rem, weight 500, tracking 0, coloured primary ## Design tokens — use these exact values Colours (dark mode): - background #051317 - surface #0B2026 - surface-2 #0F2A31 - text #E2FAF5 - text-muted #8DB8B2 - primary #3DF2C4 (text on it #03201A) - secondary #B48CFF (text on it #12081F) - accent #6FE3FF - border rgba(61,242,196,0.22) - success #4BE6A2 · warning #FFC76B · danger #FF7D96 - chart series #3DF2C4, #B48CFF, #6FE3FF, #FF8FC7, #F2E66B Radius: sm 14px, md 22px, lg 32px, xl 48px, pill 999px Border width: 1px Shadows: sm `0 6px 18px rgba(0, 0, 0, 0.28)`, md `0 0 32px -8px rgba(61, 242, 196, 0.22), 0 20px 44px -18px rgba(0, 0, 0, 0.6)`, lg `0 0 70px -12px rgba(61, 242, 196, 0.32), 0 32px 72px -24px rgba(0, 0, 0, 0.7)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 320ms cubic-bezier(.45,0,.2,1) ## Typography (Latin + Thai) - Headings: Outfit 400/500/600 with Thai fallback K2D 400/500/600 - Body: Figtree 400/500/600 with Thai fallback Anuphan 300/400/500 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&family=Figtree:wght@400;500;600&family=K2D:wght@400;500;600&family=Anuphan:wght@300;400;500&display=swap - CSS stacks: heading `"Outfit", "K2D", system-ui, sans-serif`; body `"Figtree", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6.5vw, 5.25rem), heading weight 500, heading tracking -0.025em (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: K2D shares Outfit’s clean geometric, slightly techno construction; loopless Anuphan has the same open, rounded proportions as Figtree for calm body text. ## Components - Primary button: pill, gel fill radial-gradient(120% 140% at 30% 20%, #8BF7DC, #3DF2C4 55%) (#8BF7DC = color-mix(in srgb, #3DF2C4 60%, #fff)), dark text #03201A, glow 0 0 26px rgba(61,242,196,.55); hover adds a box-shadow 0 0 0 5px rgba(61,242,196,.16) membrane ring instead of moving - Secondary button: pill, background rgba(11,32,38,.6) (surface at 60%), 1px membrane border rgba(61,242,196,.22); hover adds a box-shadow 0 0 0 4px rgba(61,242,196,.16) ring - Cards: #0B2026 with inner glow, 1px rgba(61,242,196,.22) border, static cell radius (never morph), outer membrane ring. Feature icons: 40px nucleus-radius discs (static, no morph) with a 13% tinted fill and a coloured glow, cycling mint/violet/cyan - Inputs: 22px radius, darker-than-surface fill; focus = mint border + box-shadow 0 0 0 4px rgba(61,242,196,.16) membrane ring + soft glow - Badges: pill, 13% tinted fill, 1px tinted border, coloured text; solid badge violet with glow - Nav: minimal and sticky, background rgba(5,19,23,.72) (bg at 72%), a single membrane hairline; logo is a glowing nucleus with an outer ring - Section markers: a glowing 14px nucleus with two concentric membrane rings above centred headings; pull quotes start with the same nucleus - Dashboard: icon rail with nucleus-shaped active item glowing mint; KPI values in mint with text glow; status widget dots pulse - Mobile tab bar: floating cell-shaped capsule with membrane ring and glow; active icon glows with a small light dot below - Footer: on bg with a single membrane hairline top, nucleus logo, muted links, 2-3 plankton dots ## 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: full-viewport immersive hero with centred copy over the background effect. Navigation: minimal style. Sections in order: hero → features → steps → stats → showcase → testimonials → faq → cta. Feature section as grid. Immersive centred hero with no product shot — hero visual = the breathing nucleus (no product shot); lead max-width 34em with balanced wrapping. Sections flow on the dark cell field without hard bands: features as a 3-column grid of cells, numbered steps as glowing nuclei, mint stats, a showcase (a dashboard cell with a glowing line chart and a status list), testimonials, FAQ with nucleus toggles and a cell-shaped CTA with mint and violet glows. Footer on bg with a single membrane hairline top, nucleus logo, muted links and 2-3 plankton dots. Dashboards use an icon rail, translucent topbar and cell cards with extra gap so the outer membranes never touch; heatmap cells stay discrete circles with gaps. ## Content Use realistic product copy (fictional brand) suited to: Biotech, genomics and health-tech products. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Animate shape (border-radius morph, 11–18s loops) — never position or layout - Keep glow on accents and data, surfaces stay deep and quiet - Use the outer membrane ring (outline 1px, offset 5px (3px on small cells), 8px on hover) as the recurring signature ## Don't - Don’t use frosted backdrop blur — membranes are clear, not frosted - Don’t use leaf or plant imagery - Don’t morph text containers or inputs; only art, logo, avatars and step nuclei breathe; featured cards keep a static cell radius - Frosted backdrop blur panels (reads as Glassmorphism) - Leaves, plants, wood or earthy clay colours (reads as Organic Biophilic or Nature Distilled) - Full-page flowing gradient ribbons as the main visual (reads as Aurora UI) - Never animate position, width/height or layout; only border-radius morph and scale ≤1.05 on art, logo, avatars and step nuclei. Cards that contain text never morph - Neon on pure #000 with hard edges and glitch (reads as Cyberpunk); keep blacks teal-tinted and edges soft - Glow on body text or long paragraphs ## Stack notes One self-contained HTML file with a