Biomimetic / Organic 2.0

Also called: Biomimetic UI, Organic 2.0, Bioluminescent UI, Cellular design

Cell-like surfaces with double membranes that slowly breathe, glowing bioluminescent teal and violet on a deep-sea dark ground.

“Living cells”Organic & NaturalEra: 2024–presentDreamyTechyCalmNatural

Open full screen ↗

biomimetic-organic-2 / landingEN

biomimetic-organic-2 / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm14pxRadius md22pxRadius lg32pxRadius xl48pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

cellular shapesouter membrane ringbreathing morph animationbioluminescent glowdeep-sea dark groundmint and violet lightmicroscope cell patternpulsing status dots

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

Not to be confused with

Organic Biophilic →Organic Biophilic is daylight leaf green with plant silhouettes; Biomimetic is dark, microscopic and glowing, with cells and membranes.Glassmorphism →Glassmorphism frosts translucent panels with backdrop blur; Biomimetic surfaces are clear cells with a glowing inner edge and an outer membrane ring.Aurora UI →Aurora is a flowing gradient sky; Biomimetic is discrete cells and nuclei that breathe, with light only as bioluminescent points.

On mobile

Keep one breathing nucleus per screen (onboarding art or the nucleus inside the featured card; the card stays static) and pause it off-screen; list cells keep the membrane ring without animation. Glows cost GPU on phones, so use box-shadow glows sparingly and drop the cell-pattern background to a static image.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinOutfit · 400/500/600

The quick brown fox

Heading · ThaiK2D · 400/500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinFigtree · 400/500/600

Clear words make shared decisions.

Body · ThaiAnuphan · 300/400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

K2D shares Outfit’s clean geometric, slightly techno construction; loopless Anuphan has the same open, rounded proportions as Figtree for calm body text.

Colour palette

Light

Dark

Design tokens

Radius	`sm 14px · md 22px · lg 32px · xl 48px · pill 999px`
Border	`1px`
Shadow	`0 0 32px -8px rgba(61, 242, 196, 0.22), 0 20px 44px -18px rgba(0, 0, 0, 0.6)`
Display	`clamp(2.75rem, 6.5vw, 5.25rem)`
Motion	`320ms cubic-bezier(.45,0,.2,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Biomimetic / Organic 2.0 (biomimetic-organic-2) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 32px;
  --background: #EDF7F5;
  --foreground: #0A2A2C;
  --card: #FFFFFF;
  --card-foreground: #0A2A2C;
  --popover: #FFFFFF;
  --popover-foreground: #0A2A2C;
  --primary: #077A64;
  --primary-foreground: #FFFFFF;
  --secondary: #6941C6;
  --secondary-foreground: #FFFFFF;
  --muted: #DDEFEA;
  --muted-foreground: #3D6466;
  --accent: #DDEFEA;
  --accent-foreground: #0A2A2C;
  --destructive: #C2334F;
  --border: rgba(7,122,100,0.22);
  --input: rgba(7,122,100,0.22);
  --ring: #077A64;
  --chart-1: #077A64;
  --chart-2: #6941C6;
  --chart-3: #0A7FA0;
  --chart-4: #C2337F;
  --chart-5: #A38A00;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0A2A2C;
  --sidebar-primary: #077A64;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #DDEFEA;
  --sidebar-accent-foreground: #0A2A2C;
  --sidebar-border: rgba(7,122,100,0.22);
  --sidebar-ring: #077A64;
}

.dark {
  --background: #051317;
  --foreground: #E2FAF5;
  --card: #0B2026;
  --card-foreground: #E2FAF5;
  --popover: #0B2026;
  --popover-foreground: #E2FAF5;
  --primary: #3DF2C4;
  --primary-foreground: #03201A;
  --secondary: #B48CFF;
  --secondary-foreground: #12081F;
  --muted: #0F2A31;
  --muted-foreground: #8DB8B2;
  --accent: #0F2A31;
  --accent-foreground: #E2FAF5;
  --destructive: #FF7D96;
  --border: rgba(61,242,196,0.22);
  --input: rgba(61,242,196,0.22);
  --ring: #3DF2C4;
  --chart-1: #3DF2C4;
  --chart-2: #B48CFF;
  --chart-3: #6FE3FF;
  --chart-4: #FF8FC7;
  --chart-5: #F2E66B;
  --sidebar: #0B2026;
  --sidebar-foreground: #E2FAF5;
  --sidebar-primary: #3DF2C4;
  --sidebar-primary-foreground: #03201A;
  --sidebar-accent: #0F2A31;
  --sidebar-accent-foreground: #E2FAF5;
  --sidebar-border: rgba(61,242,196,0.22);
  --sidebar-ring: #3DF2C4;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Biomimetic / Organic 2.0 (biomimetic-organic-2) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #EDF7F5;
  --color-surface: #FFFFFF;
  --color-surface-2: #DDEFEA;
  --color-text: #0A2A2C;
  --color-text-muted: #3D6466;
  --color-primary: #077A64;
  --color-on-primary: #FFFFFF;
  --color-secondary: #6941C6;
  --color-on-secondary: #FFFFFF;
  --color-accent: #0A7FA0;
  --color-border: rgba(7,122,100,0.22);
  --color-success: #0F7A4D;
  --color-warning: #A35F00;
  --color-danger: #C2334F;
  --color-chart-1: #077A64;
  --color-chart-2: #6941C6;
  --color-chart-3: #0A7FA0;
  --color-chart-4: #C2337F;
  --color-chart-5: #A38A00;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-pill: 999px;
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 0 32px -8px rgba(61, 242, 196, 0.22), 0 20px 44px -18px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 0 70px -12px rgba(61, 242, 196, 0.32), 0 32px 72px -24px rgba(0, 0, 0, 0.7);
  --font-heading: "Outfit", "K2D", system-ui, sans-serif;
  --font-body: "Figtree", "Anuphan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #051317;
  --color-surface: #0B2026;
  --color-surface-2: #0F2A31;
  --color-text: #E2FAF5;
  --color-text-muted: #8DB8B2;
  --color-primary: #3DF2C4;
  --color-on-primary: #03201A;
  --color-secondary: #B48CFF;
  --color-on-secondary: #12081F;
  --color-accent: #6FE3FF;
  --color-border: rgba(61,242,196,0.22);
  --color-success: #4BE6A2;
  --color-warning: #FFC76B;
  --color-danger: #FF7D96;
  --color-chart-1: #3DF2C4;
  --color-chart-2: #B48CFF;
  --color-chart-3: #6FE3FF;
  --color-chart-4: #FF8FC7;
  --color-chart-5: #F2E66B;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Biomimetic / Organic 2.0 (biomimetic-organic-2). Default mode: dark. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9686,
            0.9608
          ],
          "hex": "#edf7f5"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8667,
            0.9373,
            0.9176
          ],
          "hex": "#ddefea"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.1647,
            0.1725
          ],
          "hex": "#0a2a2c"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.3922,
            0.4
          ],
          "hex": "#3d6466"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0275,
            0.4784,
            0.3922
          ],
          "hex": "#077a64"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4118,
            0.2549,
            0.7765
          ],
          "hex": "#6941c6"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.498,
            0.6275
          ],
          "hex": "#0a7fa0"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0275,
            0.4784,
            0.3922
          ],
          "hex": "#077a64",
          "alpha": 0.22
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.4784,
            0.302
          ],
          "hex": "#0f7a4d"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.3725,
            0
          ],
          "hex": "#a35f00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.2,
            0.3098
          ],
          "hex": "#c2334f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0275,
            0.4784,
            0.3922
          ],
          "hex": "#077a64"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4118,
            0.2549,
            0.7765
          ],
          "hex": "#6941c6"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.498,
            0.6275
          ],
          "hex": "#0a7fa0"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.2,
            0.498
          ],
          "hex": "#c2337f"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.5412,
            0
          ],
          "hex": "#a38a00"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0196,
            0.0745,
            0.0902
          ],
          "hex": "#051317"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.1255,
            0.149
          ],
          "hex": "#0b2026"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.1647,
            0.1922
          ],
          "hex": "#0f2a31"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8863,
            0.9804,
            0.9608
          ],
          "hex": "#e2faf5"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5529,
            0.7216,
            0.698
          ],
          "hex": "#8db8b2"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.949,
            0.7686
          ],
          "hex": "#3df2c4"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0118,
            0.1255,
            0.102
          ],
          "hex": "#03201a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.549,
            1
          ],
          "hex": "#b48cff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.0314,
            0.1216
          ],
          "hex": "#12081f"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.8902,
            1
          ],
          "hex": "#6fe3ff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.949,
            0.7686
          ],
          "hex": "#3df2c4",
          "alpha": 0.22
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2941,
            0.902,
            0.6353
          ],
          "hex": "#4be6a2"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7804,
            0.4196
          ],
          "hex": "#ffc76b"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4902,
            0.5882
          ],
          "hex": "#ff7d96"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.949,
            0.7686
          ],
          "hex": "#3df2c4"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.549,
            1
          ],
          "hex": "#b48cff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.8902,
            1
          ],
          "hex": "#6fe3ff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5608,
            0.7804
          ],
          "hex": "#ff8fc7"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.902,
            0.4196
          ],
          "hex": "#f2e66b"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 48,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.28
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 18,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2392,
              0.949,
              0.7686
            ],
            "hex": "#3df2c4",
            "alpha": 0.22
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 32,
            "unit": "px"
          },
          "spread": {
            "value": -8,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.6
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 20,
            "unit": "px"
          },
          "blur": {
            "value": 44,
            "unit": "px"
          },
          "spread": {
            "value": -18,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2392,
              0.949,
              0.7686
            ],
            "hex": "#3df2c4",
            "alpha": 0.32
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 70,
            "unit": "px"
          },
          "spread": {
            "value": -12,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.7
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 32,
            "unit": "px"
          },
          "blur": {
            "value": 72,
            "unit": "px"
          },
          "spread": {
            "value": -24,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Outfit",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Figtree",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 500
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 320,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.45,
      0,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!