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
The same page, ready to useExplore opens the natural-object collection. Inspect three products, add/remove selections and update the total. Collection and About reach objects and brand philosophy without submitting orders.
Full-page preview · interact directly
What to look for
- 01Use mori / 森’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the mori / 森 task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ 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()gridmori / 森 retains cream, deep green and moss with light serif headlines and sans-serif body text. The arched hero and three individual product still lifes are project-generated assets, with distinguishable linen, clay and wood, descriptive alt text and AI provenance. Use open image-led plates, hairline separators, stable rectangular targets, 320ms list entry and restrained image scale, respecting reduced motion.
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.
Build a complete mori / 森 page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. mori / 森 retains cream, deep green and moss with light serif headlines and sans-serif body text. The arched hero and three individual product still lifes are project-generated assets, with distinguishable linen, clay and wood, descriptive alt text and AI provenance. Use open image-led plates, hairline separators, stable rectangular targets, 320ms list entry and restrained image scale, respecting reduced motion. Reuse current preview.tokens: background #f1efe5; foreground #29392b; accent #526445 / #fff; card #e3e5d6; border #b7bd9f; radius 24px; font Georgia, serif; card shadow none. Retain the existing workspace dark and variant modes. style-signatures.css owns this brand’s hero, continuation and microinteractions; covers and full pages share one renderer. Full-page operations: Explore opens the natural-object collection. Inspect three products, add/remove selections and update the total. Collection and About reach objects and brand philosophy without submitting orders. Share one renderer between static covers, the detail experience and /style-scenes/organic/ (English /en/style-scenes/organic/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. 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.
StylesSimilar
A 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