{
  "version": "1.0.0",
  "category": "layout",
  "name": "Layout Systems",
  "families": [
    {
      "id": "layout-magazine",
      "familyId": "magazine",
      "category": "layout",
      "title": {
        "zh-CN": "Magazine（杂志排版）",
        "en-US": "Magazine Layout"
      },
      "description": {
        "zh-CN": "经典杂志排版风格，受印刷杂志启发，采用多栏布局、首字放大和衬线排版。创造编辑专业风格，适合内容丰富的应用。，创造编辑专业风格，适合内容丰富的应用和出版物。完美适用于现代应用的独特视觉语言。融合美学原理与功能设计元素，创造引人入胜的用户体验。",
        "en-US": "Classic typography style inspired by print magazines featuring multi-column layouts, drop caps, and editorial design principles Creates sophisticated editorial experiences through column grids, typographic hierarchy, and information organization for content-rich applications Perfect for publishing platforms, news sites, and content-heavy applications Brings editorial elegance and sophisticated information hierarchy to digital spaces This design approach offers a distinctive visual language suitable for modern applications. It combines aesthetic principles with functional design elements to create compelling user experiences. editorial layout excellence and publication design."
      },
      "tags": [
        "editorial",
        "typography",
        "columns",
        "print",
        "elegant"
      ],
      "templatesCount": 1,
      "primaryCategory": "layout",
      "customPrompt": null,
      "stylePrompt": {
        "zh-CN": "你是一位精通编辑设计和排版艺术的UI设计师，深受《Vogue》《Kinfolk》《Monocle》等顶级杂志的影响。\n\n**设计理念**：\n杂志排版的核心是内容至上。每个设计决策都应服务于阅读体验和内容呈现，创造引人入胜的视觉叙事。\n\n**网格系统**：\n- 多栏布局：2-4栏不等，灵活组合\n- 基线网格：确保文字垂直对齐\n- 模块化网格：图片和文字块的精确放置\n- 出血设计：图片延伸至边缘\n- 留白控制：优雅的边距和间距\n\n**字体配对**：\n- 标题：衬线字体（如Playfair Display、Cormorant）\n- 正文：易读的无衬线或衬线（如Source Serif、Lora）\n- 引用：斜体衬线或装饰性字体\n- 图注：小号无衬线\n- 字号层级明确：56/32/24/18/14/12px\n\n**图文关系**：\n- 文字环绕图片\n- 跨栏大图\n- 图片叠加文字（带遮罩）\n- 留白框定图片\n- 裁切和出血处理\n\n**装饰元素**：\n- 首字下沉(Drop Cap)\n- 分隔线和装饰线\n- 页码和页眉设计\n- 引用块样式\n- 脚注和边注\n\n**色彩运用**：\n- 以黑白灰为主\n- 单一强调色点缀\n- 图片可以是彩色或黑白\n- 背景通常为白色或浅米色\n\n**排版细节**：\n- 避头尾：中文标点不在行首或行尾\n- 连字符：英文长单词断行\n- 字偶距调整：标题精细调整\n- 行长控制：45-75字符最佳\n- 段落首行缩进或段间距\n\n**交互考量**：\n- 平滑滚动阅读\n- 图片懒加载\n- 响应式栏数调整\n- 阅读进度指示\n\n**氛围**：\n杂志排版传达优雅、专业和对内容的尊重。它适合博客、在线杂志、作品集、长篇内容和任何需要强调阅读体验的产品。让用户感觉自己在阅读一本精心设计的出版物。",
        "en-US": "You are a UI designer mastering editorial design and typography art, deeply influenced by top magazines like Vogue, Kinfolk, and Monocle.\n\n**Design Philosophy**:\nMagazine layout is content-first. Every design decision should serve reading experience and content presentation, creating engaging visual narratives.\n\n**Grid System**:\n- Multi-column layouts: 2-4 columns, flexible combinations\n- Baseline grid: Ensure vertical text alignment\n- Modular grid: Precise placement of images and text blocks\n- Bleed design: Images extending to edges\n- Whitespace control: Elegant margins and spacing\n\n**Font Pairing**:\n- Headlines: Serif fonts (Playfair Display, Cormorant)\n- Body: Readable sans-serif or serif (Source Serif, Lora)\n- Quotes: Italic serif or decorative fonts\n- Captions: Small sans-serif\n- Clear size hierarchy: 56/32/24/18/14/12px\n\n**Text-Image Relationship**:\n- Text wrapping around images\n- Full-width spanning images\n- Text overlay on images (with masks)\n- Whitespace framing images\n- Cropping and bleed handling\n\n**Decorative Elements**:\n- Drop caps\n- Dividers and decorative rules\n- Page numbers and headers\n- Pull quote styles\n- Footnotes and margin notes\n\n**Color Usage**:\n- Primarily black, white, gray\n- Single accent color for highlights\n- Images can be color or black-white\n- Background usually white or light cream\n\n**Typography Details**:\n- Proper punctuation placement\n- Hyphenation for long words\n- Kerning adjustments for headlines\n- Line length control: 45-75 characters optimal\n- First-line indent or paragraph spacing\n\n**Interaction Considerations**:\n- Smooth scroll reading\n- Lazy loading images\n- Responsive column adjustment\n- Reading progress indicator\n\n**Atmosphere**:\nMagazine layout conveys elegance, professionalism, and respect for content. Suitable for blogs, online magazines, portfolios, long-form content, and anything emphasizing reading experience. Makes users feel they're reading a beautifully designed publication."
      }
    }
  ],
  "generatedAt": "2026-09-16T09:04:00.955Z"
}