{ "id": "organic", "type": "styles", "status": "published", "name": { "zh": "有机自然", "en": "Organic" }, "aliases": [ "自然系设计", "植物感网页", "大地色风格", "organic design" ], "category": [ "Style", "Visual Language" ], "description": { "zh": "以自然形态、温暖材质和低饱和大地色建立亲近感的视觉语言。页面通过不规则曲线、圆润容器和宽松留白形成舒展节奏，文字与按钮仍保持明确边界。适合生活方式与可持续主题；自然装饰应衬托内容，而不能牺牲可读性、信息层级或操作效率。", "en": "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." }, "use_when": [ { "zh": "家居、生活方式、园艺与手工艺品牌。", "en": "Home, lifestyle, gardening and craft brands." }, { "zh": "需要温暖、舒适、安静气质的内容展示。", "en": "Content that calls for a warm, calm and comfortable atmosphere." } ], "avoid_when": [ { "zh": "高密度交易界面不宜使用大量不规则装饰。", "en": "Avoid elaborate organic decoration in dense transactional interfaces." }, { "zh": "浅色文字叠加纹理会降低阅读清晰度。", "en": "Avoid pale text over textured surfaces." } ], "tags": [ "organic", "visual-language" ], "variants": [ { "id": "earth", "name": { "zh": "大地色", "en": "Earthy" }, "note": { "zh": "米白、陶土、苔绿构成低饱和色板。", "en": "Cream, clay and moss form a muted palette." } }, { "id": "botanical", "name": { "zh": "植物形态", "en": "Botanical" }, "note": { "zh": "叶片曲线与拱形画面构成视觉焦点。", "en": "Leaf contours and arched scenes form a focal point." } } ], "applicable_components": [ "button", "card", "input" ], "applicable_pages": [ "landing-page", "profile" ], "related": [ { "id": "minimalism", "relation": "similar_to" }, { "id": "editorial", "relation": "similar_to" }, { "id": "claymorphism", "relation": "similar_to" }, { "id": "button", "relation": "affects" } ], "demo": { "component": "organic", "modes": [ "default", "dark" ] }, "playground": { "task": { "zh": "Explore 进入自然物件系列，查看三个产品、加入/移除选物清单并同步合计；Collection 与 About 到达系列和品牌理念，不提交订单。", "en": "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." }, "checks": [ { "zh": "逐一操作 mori / 森 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。", "en": "Use mori / 森’s original navigation and primary CTAs; inspect content and return paths, not just click notices." }, { "zh": "完成上述 mori / 森 操作后修改输入或撤销，检查结果与状态同步。", "en": "Complete the mori / 森 task, then change inputs or undo and inspect the matching result/state." }, { "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。", "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries." } ] }, "sources": [ { "name": "V&A — Arts and Crafts", "url": "https://www.vam.ac.uk/articles/arts-and-crafts-an-introduction" } ], "implementation": { "css": [ "border-radius", "linear-gradient()", "grid" ], "notes": { "zh": "mori / 森 保留米白、深绿和苔绿色层次，使用轻衬线标题与无衬线正文。拱形主图与三张独立商品静物来自本项目生成素材，亚麻、陶器、木纹均可辨认；提供替代文字并注明 AI 生成。商品采用开放式图片排版、细分隔线、稳定矩形操作区，320ms 清单入场与轻微图片缩放，尊重减少动态偏好。", "en": "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." } }, "style_spec": { "typography": { "zh": "衬线标题与清楚的无衬线正文。", "en": "Serif headlines with clear sans-serif body text." }, "color": { "zh": "米白、苔绿与陶土色；正文使用深绿。", "en": "Cream, moss and clay; deep green for body text." }, "border": { "zh": "柔和圆角与少量拱形，不扭曲表单控件。", "en": "Soft radii and occasional arches; keep controls predictable." }, "shadow": { "zh": "轻微接触阴影，不使用强发光。", "en": "Gentle contact shadows without strong glow." }, "spacing": { "zh": "大段留白与宽松行距，窄屏堆叠。", "en": "Generous whitespace and leading, stacked on narrow screens." }, "motion": { "zh": "250–350ms ease-out 的柔和生长与淡入，尊重 prefers-reduced-motion", "en": "250–350ms ease-out organic growth and fades; honour prefers-reduced-motion" }, "states": { "zh": "hover 轻微舒展并加深苔绿；focus 用绿色可见外框；active 收拢一像素；disabled 降为灰绿；error 用陶土红", "en": "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" } }, "preview": { "order": 19, "keywords": { "zh": "有机自然 · 材质与排版", "en": "ORGANIC" }, "url": "https://organic.example", "scene": "generic", "brand": "mori / 森", "nav": [ { "zh": "Collection", "en": "Collection" }, { "zh": "About", "en": "About" } ], "heroTitle": { "zh": "Closer to", "en": "Closer to" }, "heroTitle2": { "zh": "nature.", "en": "nature." }, "heroSub": { "zh": "让设计回到生活本来的样子。", "en": "Bring design back to the way life feels." }, "cta": { "zh": "Explore", "en": "Explore" }, "panel": "photo", "tokens": { "bg": "#f1efe5", "fg": "#29392b", "sub": "#526445", "accent": "#526445", "accentFg": "#fff", "card": "#e3e5d6", "cardBorder": "#b7bd9f", "radius": "24px", "font": "Georgia, serif" } }, "prompts": { "basic": { "zh": "使用有机自然风格设计品牌展示页面。以自然形态、温暖材质和低饱和大地色建立亲近感的视觉语言。页面通过不规则曲线、圆润容器和宽松留白形成舒展节奏，文字与按钮仍保持明确边界。适合生活方式与可持续主题；自然装饰应衬托内容，而不能牺牲可读性、信息层级或操作效率。", "en": "Design a brand page in Organic. 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": { "zh": "衬线标题与清楚的无衬线正文。米白、苔绿与陶土色；正文使用深绿。柔和圆角与少量拱形，不扭曲表单控件。轻微接触阴影，不使用强发光。大段留白与宽松行距，窄屏堆叠。", "en": "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." }, "implementation": { "zh": "用当前风格完成 mori / 森 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n保留 mori / 森 的米色、深绿和苔绿色层次、Georgia 衬线字体、24px 圆角及右侧现有 CSS 生活景观，不另外换成植物照片或无衬线正文。产品区延续三张拱形底上的亚麻/陶器/木托盘 CSS 物件，木纹只用于托盘；清单与合计是正常可读内容，不让有机轮廓扭曲控件。\n\n复用当前 preview.tokens：背景 #f1efe5；前景 #29392b；强调 #526445 / #fff；卡面 #e3e5d6；边框 #b7bd9f；圆角 24px；字体 Georgia, serif；卡影 none。\n\ndark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。\n\nExplore 进入自然物件系列，查看三个产品、加入/移除选物清单并同步合计；Collection 与 About 到达系列和品牌理念，不提交订单。\n\n静态封面、详情演示与 /style-scenes/organic/（英文 /en/style-scenes/organic/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。", "en": "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.\n\nKeep mori / 森’s cream/deep-green/moss hierarchy, Georgia serif, 24px radii and existing CSS life-scene panel rather than replacing it with plant photography or sans body type. Products retain CSS linen/ceramic/wood-tray objects on arched grounds, with woodgrain only on the tray. Selection and totals remain readable content with predictable control targets.\n\nReuse current preview.tokens: background #f1efe5; foreground #29392b; accent #526445 / #fff; card #e3e5d6; border #b7bd9f; radius 24px; font Georgia, serif; card shadow none.\n\nUse generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows.\n\nExplore 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.\n\nShare 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.\n\nInteraction 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.\n\nProvide 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." }, "agent": { "zh": "用当前风格完成 mori / 森 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\nmori / 森 保留米白、深绿和苔绿色层次，使用轻衬线标题与无衬线正文。拱形主图与三张独立商品静物来自本项目生成素材，亚麻、陶器、木纹均可辨认；提供替代文字并注明 AI 生成。商品采用开放式图片排版、细分隔线、稳定矩形操作区，320ms 清单入场与轻微图片缩放，尊重减少动态偏好。\n\n复用当前 preview.tokens：背景 #f1efe5；前景 #29392b；强调 #526445 / #fff；卡面 #e3e5d6；边框 #b7bd9f；圆角 24px；字体 Georgia, serif；卡影 none。\n\ndark 与 variants 延续已有工作区模式；style-signatures.css 负责本品牌主视觉、续页和微交互，封面与整页共用同一 renderer。\n\n完整页面操作：\nExplore 进入自然物件系列，查看三个产品、加入/移除选物清单并同步合计；Collection 与 About 到达系列和品牌理念，不提交订单。\n\n静态封面、详情演示与 /style-scenes/organic/（英文 /en/style-scenes/organic/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。", "en": "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.\n\nmori / 森 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.\n\nReuse current preview.tokens: background #f1efe5; foreground #29392b; accent #526445 / #fff; card #e3e5d6; border #b7bd9f; radius 24px; font Georgia, serif; card shadow none.\n\nRetain 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.\n\nFull-page operations:\nExplore 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.\n\nShare 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.\n\nInteraction 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.\n\nProvide 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.\n\nAdd 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." } } }