Organic
有机自然
Aliases:自然系设计植物感网页大地色风格organic design
What is it
A visual language of natural shapes, warm materials and muted earth tones. Soft contours and generous spacing create an unhurried rhythm while text and controls keep clear boundaries. It suits lifestyle and sustainability themes, provided organic decoration supports content without weakening readability or interaction.
Design spec
Typography
Serif headlines with clear sans-serif body text.
Color
Cream, moss and clay; deep green for body text.
Border
Soft radii and occasional arches; keep controls predictable.
Shadow
Gentle contact shadows without strong glow.
Spacing
Generous whitespace and leading, stacked on narrow screens.
Motion
250–350ms ease-out organic growth and fades; honour prefers-reduced-motion
States
Hover expands slightly and deepens the moss green; focus shows a visible green frame; active contracts one pixel; disabled fades to grey-green; error uses clay red
Style in action
See the full page, then try the interactive sceneFull-page preview
Closer to
nature.
Bring design back to the way life feels.
Explore →Interactive scene
Loading demo…
✓ When to use
- Home, lifestyle, gardening and craft brands.
- Content that calls for a warm, calm and comfortable atmosphere.
✕ When not to use
- Avoid elaborate organic decoration in dense transactional interfaces.
- Avoid pale text over textured surfaces.
Variants
Earthy
大地色
Cream, clay and moss form a muted palette.
Botanical
植物形态
Leaf contours and arched scenes form a focal point.
Implementation
border-radiuslinear-gradient()gridUnify cream and deep green with tokens. Use curves in display areas while keeping predictable button targets. CSS shapes can evoke plants and ceramics; mark decoration aria-hidden. Prioritize text contrast over a muted aesthetic.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Inspect existing layouts, typography and theme tokens, then build an interactive Organic brand scene. Serif headlines with clear sans-serif body text. Cream, moss and clay; deep green for body text. Soft radii and occasional arches; keep controls predictable. Gentle contact shadows without strong glow. Generous whitespace and leading, stacked on narrow screens. Unify cream and deep green with tokens. Use curves in display areas while keeping predictable button targets. CSS shapes can evoke plants and ceramics; mark decoration aria-hidden. Prioritize text contrast over a muted aesthetic. Make controls give clear feedback, support narrow screens, focus and reduced motion, and add no dependencies. Run checks and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesSimilarA visual language that lays out the page like a magazine spread: serif display headings, drop caps, hairline column rules, issue numbering and generous margins, with imagery woven into a page-turning rhythm. Black, white and grey grounds, serif-and-sans pairing — the layout tells the story, not ornament.
StylesSimilarA visual language that molds controls from soft clay: generous radii on pastel grounds, with a double shadow — an inner concave plus an outer inflated drop — so elements feel like air-puffed clay: round, plump, squishable. A tactile middle ground between neumorphism and 3D cartoon.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffects