Gaoqian Style

搞钱学姐品牌视觉风格

适用场景

搞钱学姐品牌的所有对外物料：招商手册、活动海报、合作方案、社交平台长图、PPT等。

特别注意：如果物料是工作册、问卷、练习手册、PDF 小册子、A4 打印件，优先把它当成「可读、可填、可使用」的材料来设计。粉色、综艺感和品牌感仍然保留，但不能压过信息功能。

核心原则

• 不超过3种主要颜色：粉红 + 白 + 深色文字
• 综艺感：大胆标题、大字、强视觉冲击
• 女性向：圆润、温柔但不软弱，有力量感
• 信息清晰：甲方/合作品牌一眼看到重点
• 功能优先：问卷、工作册、测评页必须让人看得清、写得下、勾得准
• 忠于原文：不要凭空补信息；没有出处的扩写不能混进正文内容

配色方案

渐变用法

• 封面叠层：linear-gradient(to bottom, rgba(242,104,138,0.15), rgba(242,104,138,0.65) 60%, rgba(232,80,122,0.85))
• 权益头图叠层：linear-gradient(to right, rgba(232,80,122,0.80), rgba(242,104,138,0.40))
• 结尾叠层：linear-gradient(to bottom, rgba(242,104,138,0.3), rgba(232,80,122,0.85))
• 产品卡片底部：linear-gradient(to top, rgba(232,80,122,0.88), transparent)

字体

正文

font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;

标题/大字（封面、章节、权益名）

font-family: 'STSong', 'Songti SC', 'STHeiti', serif;

注意：不要用 Google Fonts（Noto Serif SC / Noto Sans SC），Chrome 无头模式导出 PDF 时会丢失文字。始终用系统字体。

字号体系

关键数字和权益重点

• 必须加粗加大
• 颜色用 --pink-mid 突出
• 行内重点用 <strong> + color: var(--pink-mid)

布局组件

页面容器

max-width: 900px;
margin: 0 auto;

封面

• 全屏高度 100vh，最小 720px
• 背景图 + 粉色渐变叠层
• 内容居底部，居中对齐
• 标签用圆角胶囊 border-radius: 999px，半透明白底 + 模糊

章节头部

• 居中对齐，上下 padding 充足
• 小标签（粉色底 + 深粉文字）→ 大标题 → 灰色说明文字
• 标签样式：background: var(--pink-light); color: var(--pink-mid); border-radius: 999px; letter-spacing: 4px

数据卡片行

• 4列等分网格，粉色背景，白色文字
• 数字超大（48px）+ 标签说明

照片拼贴

• 2+3 或 2列网格
• 图片间 gap: 3px，紧凑排列
• 图片 object-fit: cover

权益区块

• 整体浅粉底 --pink-pale
• 头图：全宽 + 粉色渐变叠层 + 白色文字
• 条目：图+文左右交替（grid 2列），文字侧 padding: 40px 44px
• 产品卡：4列网格，图片底部渐变叠层 + 白色产品名
• 要求框：全粉底 + 白色文字，2列网格列表

结尾页

• 全宽背景图 + 粉色渐变叠层
• 白色大字 + 半透明联系方式胶囊

工作册 / 问卷 / 测评页

• 先判断页面任务：展示、勾选、填写、评分、结果参考，不同任务用不同组件
• 选择题只放勾选框，不额外放写字框
• 需要参与者写下来的区域，留白要足够；少用密集横线，优先使用空白框或短填空
• 结果参考、答案、评分解释要放在下方或视觉弱一点的位置，避免参与者提前被答案影响
• 勾选框和文字首行必须对齐，多行文字缩进一致，左右栏密度接近
• 每一页必须有明确主角：问题、清单、表格、填写区或章节标题
• 空页面要合并，拥挤页面要拆分或压缩；合并后重新检查可读性和书写空间
• 每个区块只承担一个任务：标题识别、正文解释、卡片分类、空白填写、表格比较
• 章节编号要承担导航功能，不能只是小标签；章节起始页用统一的大号章节标

A4 竖版 / PDF 输出

• 先确认 HTML 母版，再导出 PDF
• 如果用户要求 PDF 和 HTML 一致，优先用逐页截图合成 PDF，不用浏览器原生打印
• A4 竖版按纸面设计，底部保留页脚和安全区
• 导出前检查每页是否溢出、裁切、文字重叠；导出后抽查 PDF 页数、A4 尺寸和关键页
• 对中文字体保持保守：系统字体优先，避免无头浏览器导出时丢字、乱码、粗细异常

设计审稿清单

• 这页最终是给谁、在哪里、怎么用？
• 读者第一眼知道看哪里吗？
• 字和背景对比够吗？小标签在深色/浅色背景上都清楚吗？
• 有需要填写的地方吗？空间够真实书写吗？
• 选择题是否只保留勾选功能？
• 答案/结果是否出现得太早或太显眼？
• 同类组件是否统一：尺寸、圆角、边框、间距、对齐？
• 有没有重复文案、没出处的信息、多余装饰？
• 最长标题、最长选项、最多文字能放下吗？
• PDF/图片/PPT 最终产物是否和 HTML 视觉一致？

间距规范

手机端适配

@media (max-width: 768px) {
  /* 照片网格改为单列 */
  /* 数据卡片改 2x2 */
  /* 产品卡改 2x2 */
  /* 权益条目改图上文下 */
  /* 要求框列表改单列 */
  /* 所有标题缩小 30-40% */
}

@media (max-width: 400px) {
  /* 标题再缩小一档 */
}

PDF/打印适配

@media print {
  @page { size: A4; margin: 15mm 12mm; }
  body { max-width: 100%; font-size: 11pt; }
  .cover { page-break-after: always; }
  .section-header { page-break-before: always; }
  .benefit-section { page-break-before: always; }
  .closing { page-break-before: always; height: 100vh; }
  /* 防止块内断裂 */
  .benefit-item, .highlight-box, .product-card { page-break-inside: avoid; }
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

快速复制：CSS 变量

:root {
  --pink: #F2688A;
  --pink-mid: #E8507A;
  --pink-light: #FFD6E0;
  --pink-pale: #FFF5F7;
  --white: #FFFFFF;
  --text: #2a2a2a;
  --text-soft: #888888;
}

文案语气

• 甲方视角：强调"品牌回报""曝光量""用户触达""种草效果"
• 数据说话：人数、天数、曝光量、传播渠道
• 自信但不傲慢："确保品牌有充分的曝光""给品牌提供多样曝光场景"
• 结尾有力："财富觉醒，一起搞钱"

禁止事项

• 不要用超过3种主色
• 不要用 Google Fonts（PDF 会丢字）
• 不要用纯黑（#000），正文用 #2a2a2a
• 不要用棱角设计，圆角胶囊贯穿始终
• 不要把文字写得太小（正文不低于 15px）