Organic Biophilic

Also called: Biophilic design, Nature UI, Green organic

Leaf greens, blob shapes and petal-cornered cards on a fresh, lightly textured ground — interfaces that feel planted, not built.

“Leafy & alive”Organic & NaturalEra: 2020sNaturalCalmFriendly

Open full screen ↗

organic-biophilic / landingEN

organic-biophilic / 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 sm10pxRadius md18pxRadius lg28pxRadius xl40pxDensity×1.1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

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.

leaf green paletteorganic blob shapesleaf-cornered cardspetal buttonsleaf silhouettessoft fibre texturerounded friendly typesun-yellow accent

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%

Not to be confused with

Nature Distilled →Nature Distilled is muted clay, sand and terracotta with a calm serif; Organic Biophilic is fresh leaf green with blobs and rounded sans.Biomimetic / Organic 2.0 →Biomimetic is dark, cellular and bioluminescent with breathing membranes; Biophilic is daylight, leafy and planted.Claymorphism →Claymorphism is puffy pastel 3D with inner highlights; Biophilic is flat-ish, textured and green with leaf-shaped corners.

On mobile

Keep leaf corners on cards and the floating tab bar, but drop the drifting leaf silhouettes to one per screen. Blobs behind avatars and list icons carry the identity cheaply; skip the fibre texture on low-end devices.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinQuicksand · 600/700

The quick brown fox

Heading · ThaiKoHo · 600/700

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

Body · LatinMulish · 400/600/700

Clear words make shared decisions.

Body · ThaiNiramit · 400/600

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

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 10px · md 18px · lg 28px · xl 40px · pill 999px`
Border	`1px`
Shadow	`0 16px 36px -14px rgba(28, 74, 42, 0.24)`
Display	`clamp(2.75rem, 6vw, 4.75rem)`
Motion	`380ms cubic-bezier(.25,.8,.3,1)`
Density	`×1.1`

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 · Organic Biophilic (organic-biophilic) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * 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=Quicksand:wght@600;700&family=Mulish:wght@400;600;700&family=KoHo:wght@600;700&family=Niramit:wght@400;600&display=swap
 */
:root {
  --radius: 28px;
  --background: #F1F5E9;
  --foreground: #1C3325;
  --card: #FBFCF6;
  --card-foreground: #1C3325;
  --popover: #FBFCF6;
  --popover-foreground: #1C3325;
  --primary: #2D6A44;
  --primary-foreground: #F6FBF0;
  --secondary: #B7D389;
  --secondary-foreground: #1C3325;
  --muted: #E2EBD3;
  --muted-foreground: #4A5F50;
  --accent: #E2EBD3;
  --accent-foreground: #1C3325;
  --destructive: #B3412D;
  --border: #CCDABB;
  --input: #CCDABB;
  --ring: #2D6A44;
  --chart-1: #2D6A44;
  --chart-2: #8CB456;
  --chart-3: #E0A23A;
  --chart-4: #4F9888;
  --chart-5: #A8694A;
  --sidebar: #FBFCF6;
  --sidebar-foreground: #1C3325;
  --sidebar-primary: #2D6A44;
  --sidebar-primary-foreground: #F6FBF0;
  --sidebar-accent: #E2EBD3;
  --sidebar-accent-foreground: #1C3325;
  --sidebar-border: #CCDABB;
  --sidebar-ring: #2D6A44;
}

.dark {
  --background: #0F1D15;
  --foreground: #E8F2E0;
  --card: #16291E;
  --card-foreground: #E8F2E0;
  --popover: #16291E;
  --popover-foreground: #E8F2E0;
  --primary: #94CF7C;
  --primary-foreground: #0F1D15;
  --secondary: #3E6D49;
  --secondary-foreground: #F0F7EA;
  --muted: #1D3526;
  --muted-foreground: #A7BEA8;
  --accent: #1D3526;
  --accent-foreground: #E8F2E0;
  --destructive: #EE8069;
  --border: #2E4B37;
  --input: #2E4B37;
  --ring: #94CF7C;
  --chart-1: #94CF7C;
  --chart-2: #C7E39A;
  --chart-3: #F0BA5C;
  --chart-4: #6FC0AE;
  --chart-5: #D59A79;
  --sidebar: #16291E;
  --sidebar-foreground: #E8F2E0;
  --sidebar-primary: #94CF7C;
  --sidebar-primary-foreground: #0F1D15;
  --sidebar-accent: #1D3526;
  --sidebar-accent-foreground: #E8F2E0;
  --sidebar-border: #2E4B37;
  --sidebar-ring: #94CF7C;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Organic Biophilic (organic-biophilic) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * 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=Quicksand:wght@600;700&family=Mulish:wght@400;600;700&family=KoHo:wght@600;700&family=Niramit:wght@400;600&display=swap
 */
@theme {
  --color-bg: #F1F5E9;
  --color-surface: #FBFCF6;
  --color-surface-2: #E2EBD3;
  --color-text: #1C3325;
  --color-text-muted: #4A5F50;
  --color-primary: #2D6A44;
  --color-on-primary: #F6FBF0;
  --color-secondary: #B7D389;
  --color-on-secondary: #1C3325;
  --color-accent: #E0A23A;
  --color-border: #CCDABB;
  --color-success: #2E7A45;
  --color-warning: #A9640E;
  --color-danger: #B3412D;
  --color-chart-1: #2D6A44;
  --color-chart-2: #8CB456;
  --color-chart-3: #E0A23A;
  --color-chart-4: #4F9888;
  --color-chart-5: #A8694A;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 6px rgba(28, 64, 38, 0.06);
  --shadow-md: 0 16px 36px -14px rgba(28, 74, 42, 0.24);
  --shadow-lg: 0 32px 64px -22px rgba(28, 74, 42, 0.32);
  --font-heading: "Quicksand", "KoHo", system-ui, sans-serif;
  --font-body: "Mulish", "Niramit", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Niramit", monospace;
}

.dark {
  --color-bg: #0F1D15;
  --color-surface: #16291E;
  --color-surface-2: #1D3526;
  --color-text: #E8F2E0;
  --color-text-muted: #A7BEA8;
  --color-primary: #94CF7C;
  --color-on-primary: #0F1D15;
  --color-secondary: #3E6D49;
  --color-on-secondary: #F0F7EA;
  --color-accent: #F0BA5C;
  --color-border: #2E4B37;
  --color-success: #7FCB86;
  --color-warning: #E9B25A;
  --color-danger: #EE8069;
  --color-chart-1: #94CF7C;
  --color-chart-2: #C7E39A;
  --color-chart-3: #F0BA5C;
  --color-chart-4: #6FC0AE;
  --color-chart-5: #D59A79;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Organic Biophilic (organic-biophilic). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.9608,
            0.9137
          ],
          "hex": "#f1f5e9"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9882,
            0.9647
          ],
          "hex": "#fbfcf6"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8863,
            0.9216,
            0.8275
          ],
          "hex": "#e2ebd3"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.2,
            0.1451
          ],
          "hex": "#1c3325"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.3725,
            0.3137
          ],
          "hex": "#4a5f50"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.4157,
            0.2667
          ],
          "hex": "#2d6a44"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9843,
            0.9412
          ],
          "hex": "#f6fbf0"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7176,
            0.8275,
            0.5373
          ],
          "hex": "#b7d389"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.2,
            0.1451
          ],
          "hex": "#1c3325"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6353,
            0.2275
          ],
          "hex": "#e0a23a"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8,
            0.8549,
            0.7333
          ],
          "hex": "#ccdabb"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.4784,
            0.2706
          ],
          "hex": "#2e7a45"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6627,
            0.3922,
            0.0549
          ],
          "hex": "#a9640e"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.702,
            0.2549,
            0.1765
          ],
          "hex": "#b3412d"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.4157,
            0.2667
          ],
          "hex": "#2d6a44"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.7059,
            0.3373
          ],
          "hex": "#8cb456"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6353,
            0.2275
          ],
          "hex": "#e0a23a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.5961,
            0.5333
          ],
          "hex": "#4f9888"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.4118,
            0.2902
          ],
          "hex": "#a8694a"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.1137,
            0.0824
          ],
          "hex": "#0f1d15"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.1608,
            0.1176
          ],
          "hex": "#16291e"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.2078,
            0.149
          ],
          "hex": "#1d3526"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.949,
            0.8784
          ],
          "hex": "#e8f2e0"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6549,
            0.7451,
            0.6588
          ],
          "hex": "#a7bea8"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5804,
            0.8118,
            0.4863
          ],
          "hex": "#94cf7c"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.1137,
            0.0824
          ],
          "hex": "#0f1d15"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2431,
            0.4275,
            0.2863
          ],
          "hex": "#3e6d49"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.9686,
            0.9176
          ],
          "hex": "#f0f7ea"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.7294,
            0.3608
          ],
          "hex": "#f0ba5c"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.2941,
            0.2157
          ],
          "hex": "#2e4b37"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.7961,
            0.5255
          ],
          "hex": "#7fcb86"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.698,
            0.3529
          ],
          "hex": "#e9b25a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.502,
            0.4118
          ],
          "hex": "#ee8069"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5804,
            0.8118,
            0.4863
          ],
          "hex": "#94cf7c"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7804,
            0.8902,
            0.6039
          ],
          "hex": "#c7e39a"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.7294,
            0.3608
          ],
          "hex": "#f0ba5c"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.7529,
            0.6824
          ],
          "hex": "#6fc0ae"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8353,
            0.6039,
            0.4745
          ],
          "hex": "#d59a79"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 40,
        "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.1098,
              0.251,
              0.149
            ],
            "hex": "#1c4026",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 6,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1098,
              0.2902,
              0.1647
            ],
            "hex": "#1c4a2a",
            "alpha": 0.24
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 16,
            "unit": "px"
          },
          "blur": {
            "value": 36,
            "unit": "px"
          },
          "spread": {
            "value": -14,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1098,
              0.2902,
              0.1647
            ],
            "hex": "#1c4a2a",
            "alpha": 0.32
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 32,
            "unit": "px"
          },
          "blur": {
            "value": 64,
            "unit": "px"
          },
          "spread": {
            "value": -22,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Quicksand",
        "KoHo",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Mulish",
        "Niramit",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Niramit",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 380,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.25,
      0.8,
      0.3,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.1
  }
}

Prompt builder

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

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
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!