NaturalOrganic
PaletteComponentsAI RulesPhilosophyDo/Don't
←StyleKit
自然有机风 — Natural Organic

Rooted in
Nature.

Warm earth tones, organic shapes, and slow botanical rhythms. Designed for health brands, artisan goods, and sustainable living.

100%
Natural Origin
0
Artificial Colors
Slow
Intentional Pace
Earth
Tones Only
Palette

Earth's color language

Five colors drawn from soil, bark, sage, honeycomb, and bleached linen. Every swatch lifts softly on hover — no neon, no cold blue, no pure black.

Deep Earth
#5c4033
Primary
Warm Cream
#faf6f1
Background
Sage Green
#8b9d77
Accent 1
Warm Tan
#d4a373
Accent 2
Linen
#e9e0d4
Surface

Earth gradient combinations

Brown to Tan
Sage to Linen
Tan to Cream
Brown to Sage
Components

Organic building blocks

Every element uses irregular radii, earthy tones, and slow ease-in-out transitions. Nothing sharp, nothing cold, nothing industrial.

Primary — organic irregular radius

Size variants with earthy colors

Icon buttons — natural motifs

AI Rules

The 4 interaction laws

Each rule is named for a natural phenomenon. Interact with each demo to feel the principle — not just read about it.

Rule 1Organic Morphing

blob radii shift slowly on hover/click

Irregular borderRadius values change between interactions, simulating living organic growth. Click the shape below to morph it.

Default blob — click or hover to morph

Rule 2Soft Earth Press

hover: translate-y-0.5 + deeper earth tone

On hover, elements sink slightly and deepen in color — like pressing warm soil. No floating, no bouncing. Hold the button to feel all three states.

Idle
Hover
Pressed
Rule 3Botanical Slowness

duration-500 to duration-700 + ease-in-out

Animations move at the pace of natural growth — never rushed. Compare fast vs. organic timing side by side.

Botanical ease-in-out — natural rhythm

transition: 0.7s ease-in-out

Soil
Bark
Moss
Rule 4Verdant Tint

hover: text/icon transitions toward deep green

On interaction, text and icons shift toward deep sage green — like a plant awakened by sunlight. Hover items or toggle the light.

Wild Fern Collection
Forest floor
Heritage Seeds
Seed vault
Morning Mist Blend
Highland meadow
Spring Water Soap
Mountain spring
App Demo

Organic brand in context

A simulated artisan goods store — showing the design system applied to a real product browsing context with earthy UI patterns.

Spring Harvest

Curated seasonal goods

Wild Honey
Mountain Valleys
OrganicSeasonalHandmade
$28
Forest Moss
Old Growth Woods
OrganicSeasonalHandmade
$22
Clay Vessel
Artisan Studio
OrganicSeasonalHandmade
$64
Brand Values
Now in Season
Spring
Wild Herbs, Root Tonics, Fresh Greens
WinterSummer
Philosophy

Design principles

Natural Organic draws from earth, plant, and slow growth. Every decision should feel as deliberate as a seed choosing where to root.

Earth Harmony

Colors come from nature

Amber, stone, olive, sage — the palette is pulled directly from soil and foliage. Cold tech blues and neon never belong here.

  • bg-[#faf6f1] warm cream base
  • text-stone-800 for body
  • sage #8b9d77 for accents

Handcraft Warmth

Imperfection is intentional

Irregular radii, slight asymmetry, and organic blob shapes replace perfect circles and rigid rectangles.

  • borderRadius asymmetric blobs
  • rounded-[2rem] minimum
  • No perfect squares

Slow Growth

Pace of botanical life

Transitions run 500–700ms with ease-in-out. No snap-back springs, no instant flips — natural rhythm only.

  • duration-500 minimum
  • ease-in-out always
  • No duration-150 quick snaps

Do

  • Use earth tones: amber, stone, olive, sage
  • Warm cream bg-[#faf6f1] as base background
  • Irregular radii: rounded-[2rem] or blob shapes
  • Add paper/fabric texture via CSS or SVG
  • Serif fonts for headings (font-serif)
  • Soft hover transitions duration-500 ease-in-out
  • Translate-y-0.5 earth press on hover
  • Natural imagery and botanical icons

Don't

  • Cold colors: blue or purple as primary
  • Pure black #000000 anywhere
  • Sharp geometric shapes or right angles
  • High-tech design elements (neon glow)
  • Neon or high saturation accent colors
  • Perfect circles or rectangles
  • Fast snap transitions (duration-100 or less)
  • Bounce/spring animations — use slow ease only
NaturalOrganic

Warm earth tones, organic shapes, and the slow rhythms of botanical life. For brands rooted in nature.

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
PaletteDeep EarthWarm CreamSage GreenWarm TanLinen
Rooted in nature, made forStyleKit
Back to StyleKit→