Nature Distilled

Also called: Earthy minimal, Terracotta UI, Warm natural

Nature reduced to calm earth tones — clay, sand, olive and terracotta on grainy paper, with a soft serif and abstract sun-and-dune forms.

“Clay & sand”Organic & NaturalEra: 2020sNaturalCalmLuxuryNostalgic

Open full screen ↗

nature-distilled / landingEN

nature-distilled / 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 sm3pxRadius md6pxRadius lg10pxRadius xl16pxDensity×1.12Display 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.

terracotta and sandclay earth palettepaper grain texturesoft calm serifsun over dunesdome horizon sectionsflat abstract landscapehandmade warmth

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

Not to be confused with

Organic Biophilic →Organic Biophilic is fresh leaf green with blobs and leaf silhouettes; Nature Distilled is muted clay and sand with flat sun-and-dune abstraction and a serif.Japandi →Japandi is cooler oat and charcoal with thin lines, ensō circles and lots of empty space; Nature Distilled is warmer, more terracotta, more textured and more colourful.Quiet Luxury →Quiet Luxury is near-monochrome stone with tiny caps and almost no colour; Nature Distilled leans into terracotta, olive and visible paper grain.

On mobile

Keep the paper grain on the app background only, use the sun-over-dunes art for onboarding and the featured card, and let the tab bar sit on warm paper with a terracotta active state. Lists stay flat with hairline separators — no shadows needed.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinFraunces · 400/500

The quick brown fox

Heading · ThaiMaitree · 400/500

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

Body · LatinKarla · 400/500/700

Clear words make shared decisions.

Body · ThaiSarabun · 300/400/600

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

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 3px · md 6px · lg 10px · xl 16px · pill 999px`
Border	`1px`
Shadow	`0 10px 24px -14px rgba(90, 55, 30, 0.28)`
Display	`clamp(2.75rem, 6vw, 4.9rem)`
Motion	`280ms cubic-bezier(.3,0,.2,1)`
Density	`×1.12`

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 · Nature Distilled (nature-distilled) — 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=Fraunces:wght@400;500&family=Karla:wght@400;500;700&family=Maitree:wght@400;500&family=Sarabun:wght@300;400;600&display=swap
 */
:root {
  --radius: 10px;
  --background: #EFE6D8;
  --foreground: #3A2A20;
  --card: #F8F2E9;
  --card-foreground: #3A2A20;
  --popover: #F8F2E9;
  --popover-foreground: #3A2A20;
  --primary: #A24E2D;
  --primary-foreground: #FBF4EA;
  --secondary: #69623F;
  --secondary-foreground: #FBF4EA;
  --muted: #E6D9C5;
  --muted-foreground: #6C5747;
  --accent: #E6D9C5;
  --accent-foreground: #3A2A20;
  --destructive: #A23B2B;
  --border: #D6C6AE;
  --input: #D6C6AE;
  --ring: #A24E2D;
  --chart-1: #A24E2D;
  --chart-2: #69623F;
  --chart-3: #C9976A;
  --chart-4: #8A6A55;
  --chart-5: #B5A285;
  --sidebar: #F8F2E9;
  --sidebar-foreground: #3A2A20;
  --sidebar-primary: #A24E2D;
  --sidebar-primary-foreground: #FBF4EA;
  --sidebar-accent: #E6D9C5;
  --sidebar-accent-foreground: #3A2A20;
  --sidebar-border: #D6C6AE;
  --sidebar-ring: #A24E2D;
}

.dark {
  --background: #1E1712;
  --foreground: #F1E5D3;
  --card: #29201A;
  --card-foreground: #F1E5D3;
  --popover: #29201A;
  --popover-foreground: #F1E5D3;
  --primary: #DA845E;
  --primary-foreground: #1E1712;
  --secondary: #B0A67C;
  --secondary-foreground: #1E1712;
  --muted: #342920;
  --muted-foreground: #C2AC92;
  --accent: #342920;
  --accent-foreground: #F1E5D3;
  --destructive: #E37A64;
  --border: #4A3B2E;
  --input: #4A3B2E;
  --ring: #DA845E;
  --chart-1: #DA845E;
  --chart-2: #B0A67C;
  --chart-3: #D8B48D;
  --chart-4: #B88F78;
  --chart-5: #8E7B66;
  --sidebar: #29201A;
  --sidebar-foreground: #F1E5D3;
  --sidebar-primary: #DA845E;
  --sidebar-primary-foreground: #1E1712;
  --sidebar-accent: #342920;
  --sidebar-accent-foreground: #F1E5D3;
  --sidebar-border: #4A3B2E;
  --sidebar-ring: #DA845E;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Nature Distilled (nature-distilled) — 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=Fraunces:wght@400;500&family=Karla:wght@400;500;700&family=Maitree:wght@400;500&family=Sarabun:wght@300;400;600&display=swap
 */
@theme {
  --color-bg: #EFE6D8;
  --color-surface: #F8F2E9;
  --color-surface-2: #E6D9C5;
  --color-text: #3A2A20;
  --color-text-muted: #6C5747;
  --color-primary: #A24E2D;
  --color-on-primary: #FBF4EA;
  --color-secondary: #69623F;
  --color-on-secondary: #FBF4EA;
  --color-accent: #C9976A;
  --color-border: #D6C6AE;
  --color-success: #57733F;
  --color-warning: #9A6216;
  --color-danger: #A23B2B;
  --color-chart-1: #A24E2D;
  --color-chart-2: #69623F;
  --color-chart-3: #C9976A;
  --color-chart-4: #8A6A55;
  --color-chart-5: #B5A285;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(90, 60, 35, 0.08);
  --shadow-md: 0 10px 24px -14px rgba(90, 55, 30, 0.28);
  --shadow-lg: 0 24px 48px -24px rgba(90, 55, 30, 0.34);
  --font-heading: "Fraunces", "Maitree", system-ui, sans-serif;
  --font-body: "Karla", "Sarabun", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Sarabun", monospace;
}

.dark {
  --color-bg: #1E1712;
  --color-surface: #29201A;
  --color-surface-2: #342920;
  --color-text: #F1E5D3;
  --color-text-muted: #C2AC92;
  --color-primary: #DA845E;
  --color-on-primary: #1E1712;
  --color-secondary: #B0A67C;
  --color-on-secondary: #1E1712;
  --color-accent: #D8B48D;
  --color-border: #4A3B2E;
  --color-success: #9BBE7E;
  --color-warning: #E0A85A;
  --color-danger: #E37A64;
  --color-chart-1: #DA845E;
  --color-chart-2: #B0A67C;
  --color-chart-3: #D8B48D;
  --color-chart-4: #B88F78;
  --color-chart-5: #8E7B66;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Nature Distilled (nature-distilled). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.902,
            0.8471
          ],
          "hex": "#efe6d8"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9725,
            0.949,
            0.9137
          ],
          "hex": "#f8f2e9"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.851,
            0.7725
          ],
          "hex": "#e6d9c5"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2275,
            0.1647,
            0.1255
          ],
          "hex": "#3a2a20"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4235,
            0.3412,
            0.2784
          ],
          "hex": "#6c5747"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6353,
            0.3059,
            0.1765
          ],
          "hex": "#a24e2d"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9569,
            0.9176
          ],
          "hex": "#fbf4ea"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4118,
            0.3843,
            0.2471
          ],
          "hex": "#69623f"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9569,
            0.9176
          ],
          "hex": "#fbf4ea"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.5922,
            0.4157
          ],
          "hex": "#c9976a"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.7765,
            0.6824
          ],
          "hex": "#d6c6ae"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3412,
            0.451,
            0.2471
          ],
          "hex": "#57733f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3843,
            0.0863
          ],
          "hex": "#9a6216"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6353,
            0.2314,
            0.1686
          ],
          "hex": "#a23b2b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6353,
            0.3059,
            0.1765
          ],
          "hex": "#a24e2d"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4118,
            0.3843,
            0.2471
          ],
          "hex": "#69623f"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.5922,
            0.4157
          ],
          "hex": "#c9976a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.4157,
            0.3333
          ],
          "hex": "#8a6a55"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7098,
            0.6353,
            0.5216
          ],
          "hex": "#b5a285"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0902,
            0.0706
          ],
          "hex": "#1e1712"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1608,
            0.1255,
            0.102
          ],
          "hex": "#29201a"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.1608,
            0.1255
          ],
          "hex": "#342920"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.898,
            0.8275
          ],
          "hex": "#f1e5d3"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.6745,
            0.5725
          ],
          "hex": "#c2ac92"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8549,
            0.5176,
            0.3686
          ],
          "hex": "#da845e"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0902,
            0.0706
          ],
          "hex": "#1e1712"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6902,
            0.651,
            0.4863
          ],
          "hex": "#b0a67c"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0902,
            0.0706
          ],
          "hex": "#1e1712"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8471,
            0.7059,
            0.5529
          ],
          "hex": "#d8b48d"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.2314,
            0.1804
          ],
          "hex": "#4a3b2e"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6078,
            0.7451,
            0.4941
          ],
          "hex": "#9bbe7e"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6588,
            0.3529
          ],
          "hex": "#e0a85a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.4784,
            0.3922
          ],
          "hex": "#e37a64"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8549,
            0.5176,
            0.3686
          ],
          "hex": "#da845e"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6902,
            0.651,
            0.4863
          ],
          "hex": "#b0a67c"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8471,
            0.7059,
            0.5529
          ],
          "hex": "#d8b48d"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.5608,
            0.4706
          ],
          "hex": "#b88f78"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.4824,
            0.4
          ],
          "hex": "#8e7b66"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "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.3529,
              0.2353,
              0.1373
            ],
            "hex": "#5a3c23",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.3529,
              0.2157,
              0.1176
            ],
            "hex": "#5a371e",
            "alpha": 0.28
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": -14,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.3529,
              0.2157,
              0.1176
            ],
            "hex": "#5a371e",
            "alpha": 0.34
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 48,
            "unit": "px"
          },
          "spread": {
            "value": -24,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Fraunces",
        "Maitree",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Karla",
        "Sarabun",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Sarabun",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 400
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 280,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      0,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.12
  }
}

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!