{
  "id": "editorial",
  "type": "styles",
  "status": "published",
  "name": {
    "zh": "杂志编辑风",
    "en": "Editorial"
  },
  "aliases": [
    "杂志编辑风",
    "杂志风",
    "编辑排版风",
    "报刊风格",
    "首字下沉那种排版",
    "衬线大标题风",
    "Magazine Layout",
    "Editorial Design"
  ],
  "category": [
    "Style",
    "Visual Language"
  ],
  "description": {
    "zh": "把页面当作杂志版面经营的视觉语言：衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线，图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配， 用版式语言讲故事，而非用装饰堆砌氛围。",
    "en": "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."
  },
  "use_when": [
    {
      "zh": "内容型产品：长文 数字杂志 作品集 品牌刊物",
      "en": "Content products — long-form, digital magazines, portfolios, brand journals"
    },
    {
      "zh": "品牌想传达文化质感与文字的尊严",
      "en": "Brands that want cultural gravitas and respect for the written word"
    },
    {
      "zh": "图片与文字有明确主次关系的叙事页面",
      "en": "Narrative pages with a clear image-text hierarchy"
    }
  ],
  "avoid_when": [
    {
      "zh": "任务型工具界面，效率优先于阅读体验",
      "en": "Task-oriented tools where efficiency beats reading experience"
    },
    {
      "zh": "需要快速扫读的仪表盘与列表",
      "en": "Dashboards and lists meant for rapid scanning"
    },
    {
      "zh": "团队缺乏排版功底，劣质衬线会暴露无遗",
      "en": "Teams without typographic skill — bad serif work exposes itself"
    }
  ],
  "tags": [
    "editorial",
    "magazine",
    "typography",
    "serif",
    "longform"
  ],
  "variants": [
    {
      "id": "broadsheet",
      "name": {
        "zh": "大报风",
        "en": "Broadsheet"
      },
      "note": {
        "zh": "报纸多栏密排，黑白摄影与细栏线",
        "en": "Newspaper columns, dense setting, B&W photography, hairline rules"
      }
    },
    {
      "id": "glossymag",
      "name": {
        "zh": "光面杂志",
        "en": "Glossy Magazine"
      },
      "note": {
        "zh": "大图大字留白多，时尚刊物气质",
        "en": "Big imagery, display type, generous whitespace — fashion monthly"
      }
    },
    {
      "id": "digital-first",
      "name": {
        "zh": "数字编辑风",
        "en": "Digital Editorial"
      },
      "note": {
        "zh": "网页化改良，衬线标题配现代正文排版",
        "en": "Web-adapted — serif display with modern body typography"
      }
    }
  ],
  "applicable_components": [
    "card",
    "navbar",
    "breadcrumb",
    "pagination"
  ],
  "related": [
    {
      "id": "swiss-style",
      "relation": "similar_to"
    },
    {
      "id": "minimalism",
      "relation": "similar_to"
    },
    {
      "id": "documentation",
      "relation": "used_with"
    },
    {
      "id": "card",
      "relation": "affects"
    },
    {
      "id": "navbar",
      "relation": "affects"
    }
  ],
  "demo": {
    "component": "editorial",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "playground": {
    "task": {
      "zh": "阅读更多进入文章目录；打开「群山间的清晨」「城市漫游指南」「慢下来的周末」「与陶艺师的一次午后谈话」全文，收藏/取消收藏并返回。关键词搜索过滤四篇文章并显示数量，清空无匹配关键词恢复目录；专栏、生活、旅行、人物、关于各有内容。",
      "en": "Read the journal opens the index. Read Morning in the mountains, The art of wandering, A slower weekend and An afternoon with a potter, save/unsave and return. Search filters four stories and reports counts; clear a no-match query to restore them. Journal, Living, Travel, People and About reveal content."
    },
    "checks": [
      {
        "zh": "逐一操作 The Paper Room 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。",
        "en": "Use The Paper Room’s original navigation and primary CTAs; inspect content and return paths, not just click notices."
      },
      {
        "zh": "完成上述 The Paper Room 操作后修改输入或撤销，检查结果与状态同步。",
        "en": "Complete The Paper Room 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": "Butterick's Practical Typography",
      "url": "https://practicaltypography.com/"
    },
    {
      "name": "Wikipedia — Editorial design",
      "url": "https://en.wikipedia.org/wiki/Editorial_design"
    }
  ],
  "implementation": {
    "css": [
      "font-family: Georgia",
      "font-variant-numeric: oldstyle-nums",
      "column-count",
      "border-top: 1px solid",
      "text-indent"
    ],
    "notes": {
      "zh": "字体是主角：标题用高对比衬线（Playfair/Georgia），正文衬线或人文无衬线， 行长控制在 60～75 字符；首字下沉用 float 加 3～4 行高度；分隔只用发丝线 （1px）与留白，配小型大写字母的眉题（letter-spacing 0.15em）；编号用 老式数字。黑白摄影或单色调图片优先，深色模式用暖黑底保持纸感。",
      "en": "Type carries it: high-contrast serif display (Playfair/Georgia), serif or humanist sans body at 60–75 characters per line; drop caps float over 3–4 lines; separate with 1px hairlines and whitespace plus small-caps eyebrows at 0.15em tracking; oldstyle numerals for numbering. Prefer black-and-white or duotone imagery; dark mode uses warm black to keep the paper feel."
    }
  },
  "prompts": {
    "basic": {
      "zh": "用杂志编辑风（Editorial）设计界面：衬线大标题、首字下沉、发丝分隔线与 章节编号，像经营杂志版面一样排版内容。",
      "en": "\"Design an interface in Editorial style: serif display headings, drop caps, hairline rules and issue numbering — lay out content like a magazine spread.\""
    },
    "design": {
      "zh": "编辑风设计规范：底色纸白 #FAF8F4，文字近黑 #1A1816；标题用高对比衬线 36px+，眉题用小型大写加宽字距；正文衬线 17px/1.75，行长 60～75 字符； 首字下沉 3 行；分隔用 1px 发丝线与章节编号（罗马数字或老式数字）；图片 黑白或单色调；深色模式暖黑底 #17150F 配米白文字。",
      "en": "\"Editorial spec: paper white #FAF8F4 ground, near-black #1A1816 text; high-contrast serif headings 36px+, small-caps eyebrows with wide tracking; serif body 17px/1.75 at 60–75 characters; 3-line drop caps; 1px hairlines with Roman or oldstyle numerals; B&W or duotone imagery. Dark mode: warm black #17150F with cream text.\""
    },
    "implementation": {
      "zh": "用当前风格完成 The Paper Room 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n延续 .paper-body 的 34% / 36% / 26% 三栏与 2% 间隙：Georgia 斜体大标题、晨光生活照片、三个侧栏故事。保留 #fdfdf9 暖纸底、细分隔线和照片原色/既有局部滤镜，不能强制把所有照片改成黑白。阅读弹层沿用 Georgia 18px/1.9 与斜体导语，分类目录使用现有四篇数据；600px 以下按文案、照片、故事堆叠。现有照片延续到带日期的文章列表与阅读页，使用克制的首字下沉、细线收藏状态与 380ms 阅读页入场；保留四篇文章及操作。\n\n阅读更多进入文章目录；打开「群山间的清晨」「城市漫游指南」「慢下来的周末」「与陶艺师的一次午后谈话」全文，收藏/取消收藏并返回。关键词搜索过滤四篇文章并显示数量，清空无匹配关键词恢复目录；专栏、生活、旅行、人物、关于各有内容。\n\n静态封面、详情演示与 /style-scenes/editorial/（英文 /en/style-scenes/editorial/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。",
      "en": "Build a complete The Paper Room 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. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.\n\nContinue .paper-body’s 34% / 36% / 26% columns with 2% gaps: Georgia italic display, the morning-life photograph and three sidebar stories. Retain #fdfdf9 warm paper, hairline separators and existing image colors/local filters rather than forcing every photograph into monochrome. Keep the reading dialog’s Georgia 18px/1.9 and italic lede, with the existing four-story category data; stack copy, photograph and stories below 600px. Continue the existing photos into dated index rows and the reading sheet; use a restrained drop cap, hairline bookmark state and 380ms sheet entrance. Preserve the four stories and their actions.\n\nRead the journal opens the index. Read Morning in the mountains, The art of wandering, A slower weekend and An afternoon with a potter, save/unsave and return. Search filters four stories and reports counts; clear a no-match query to restore them. Journal, Living, Travel, People and About reveal content.\n\nShare one renderer between static covers, the detail experience and /style-scenes/editorial/ (English /en/style-scenes/editorial/). 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": "用当前风格完成 The Paper Room 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n延续 .paper-body 的 34% / 36% / 26% 三栏与 2% 间隙：Georgia 斜体大标题、晨光生活照片、三个侧栏故事。保留 #fdfdf9 暖纸底、细分隔线和照片原色/既有局部滤镜，不能强制把所有照片改成黑白。阅读弹层沿用 Georgia 18px/1.9 与斜体导语，分类目录使用现有四篇数据；600px 以下按文案、照片、故事堆叠。现有照片延续到带日期的文章列表与阅读页，使用克制的首字下沉、细线收藏状态与 380ms 阅读页入场；保留四篇文章及操作。\n\n完整页面操作：\n阅读更多进入文章目录；打开「群山间的清晨」「城市漫游指南」「慢下来的周末」「与陶艺师的一次午后谈话」全文，收藏/取消收藏并返回。关键词搜索过滤四篇文章并显示数量，清空无匹配关键词恢复目录；专栏、生活、旅行、人物、关于各有内容。\n\n静态封面、详情演示与 /style-scenes/editorial/（英文 /en/style-scenes/editorial/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。",
      "en": "Build a complete The Paper Room 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. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.\n\nContinue .paper-body’s 34% / 36% / 26% columns with 2% gaps: Georgia italic display, the morning-life photograph and three sidebar stories. Retain #fdfdf9 warm paper, hairline separators and existing image colors/local filters rather than forcing every photograph into monochrome. Keep the reading dialog’s Georgia 18px/1.9 and italic lede, with the existing four-story category data; stack copy, photograph and stories below 600px. Continue the existing photos into dated index rows and the reading sheet; use a restrained drop cap, hairline bookmark state and 380ms sheet entrance. Preserve the four stories and their actions.\n\nFull-page operations:\nRead the journal opens the index. Read Morning in the mountains, The art of wandering, A slower weekend and An afternoon with a potter, save/unsave and return. Search filters four stories and reports counts; clear a no-match query to restore them. Journal, Living, Travel, People and About reveal content.\n\nShare one renderer between static covers, the detail experience and /style-scenes/editorial/ (English /en/style-scenes/editorial/). 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."
    }
  },
  "style_spec": {
    "typography": {
      "zh": "斜体衬线大标题 + 衬线正文",
      "en": "Italic serif headlines with serif body"
    },
    "color": {
      "zh": "暖纸底 #FBF9F4 × 墨色 × 棕色强调",
      "en": "Warm paper #FBF9F4, ink text, brown accents"
    },
    "border": {
      "zh": "细分割线代替卡片框",
      "en": "Hairline rules instead of card boxes"
    },
    "shadow": {
      "zh": "仅照片卡带轻微投影",
      "en": "Soft shadow on photo cards only"
    },
    "spacing": {
      "zh": "分栏排版，行距宽松",
      "en": "Multi-column layout, airy leading"
    },
    "motion": {
      "zh": "150–200ms 的淡入与下划线过渡，克制不弹跳",
      "en": "150–200ms fades and underline transitions, restrained, no bounce"
    },
    "states": {
      "zh": "hover 显示下划线并转棕；focus 用墨色点线可见外框；active 下沉一像素；disabled 降为浅灰；error 用棕色强调并加斜体提示",
      "en": "Hover reveals an underline and turns brown; focus shows a visible ink dotted frame; active sinks one pixel; disabled fades to light grey; error uses a brown accent with an italic note"
    }
  },
  "preview": {
    "order": 3,
    "keywords": {
      "en": "STORIES & TYPE",
      "zh": "衬线 · 叙事 · 呼吸感"
    },
    "url": "https://paperroom.co",
    "scene": "paper",
    "brand": "The Paper Room",
    "nav": [
      {
        "zh": "专栏",
        "en": "Columns"
      },
      {
        "zh": "生活",
        "en": "Life"
      },
      {
        "zh": "旅行",
        "en": "Travel"
      },
      {
        "zh": "人物",
        "en": "People"
      }
    ],
    "navExt": [
      {
        "zh": "🔍",
        "en": "🔍"
      }
    ],
    "heroTitle": {
      "zh": "Good Life",
      "en": "Good Life"
    },
    "heroTitle2": {
      "zh": "in Small Things",
      "en": "in Small Things"
    },
    "heroSub": {
      "zh": "我们记录真实的生活方式、人与地方的故事，\n恰在寻常之中，藏着最动人的答案。",
      "en": "Stories of real lives, people and places.\nThe most moving answers hide in everyday things."
    },
    "cta": {
      "zh": "阅读更多 →",
      "en": "Read more →"
    },
    "features": [
      {
        "t": {
          "zh": "一间面朝山腰的房子",
          "en": "A house facing the hillside"
        },
        "s": {
          "zh": "2024.04.12",
          "en": "2024.04.12"
        }
      },
      {
        "t": {
          "zh": "城市漫游指南",
          "en": "A guide to city wandering"
        },
        "s": {
          "zh": "2024.04.09",
          "en": "2024.04.09"
        }
      },
      {
        "t": {
          "zh": "慢下来的周末",
          "en": "A slower weekend"
        },
        "s": {
          "zh": "2024.04.01",
          "en": "2024.04.01"
        }
      }
    ],
    "panel": "photo",
    "tokens": {
      "bg": "#FBF9F4",
      "fg": "#26241F",
      "sub": "#8A857A",
      "accent": "#9A6B3F",
      "accentFg": "#fff",
      "card": "#FFFFFF",
      "cardBorder": "#E8E3D8",
      "radius": "8px",
      "font": "Georgia, 'Songti SC', 'Noto Serif CJK SC', serif",
      "italic": true
    }
  }
}