用途
quiet-luxury 是一个设计风格包(genre pack),面向高端消费产品、私人银行、时尚、高端 SaaS 与个人品牌等场景,提供一套固定的视觉与文案规范,用于约束页面整体气质。作者将其定位为“一份私人银行的年度报告”,强调克制、低饱和与编辑式的秩序感。
主要能力
固定配色。 底色为象牙白 #F7F2EA,备用面板色为 #EFE8DC;主墨色为深浓缩咖啡色 #17130F(近黑但带暖意),次级文字色为 #6E655A。点缀色只能选一种:古董黄铜 #9A7B4F、牛血红 #742D2C 或深森林绿 #2E4436,选定后不得更改。分隔线使用 rgba(23, 19, 15, 0.18) 的发丝线。禁止纯白背景、渐变与发光阴影;阴影仅允许出现在浮动元素上,且需极柔和(模糊 ≥ 40px,不透明度 ≤ 0.12)。
固定字体系统。 标题使用高对比衬线体(Cormorant、Canela 类、Playfair Display 或 Garamond 回退),字号为 clamp(2.6rem, 6.5vw, 5.5rem),字重 400–500,行距紧凑在 0.95–1.05;每行标题最多允许一个词使用斜体作为点缀。正文使用中性无衬线体(系统字体栈,字重 300–400),16–17px,行高 1.7;编辑型区块可用衬线体 18px。正文对比度刻意偏柔,使用 #6E655A,不用纯黑。标签使用小型大写或全大写无衬线,字距 0.18–0.28em,10–11px。数字使用衬线数字,可采用旧式数字特性(0.75em,必要时使用等宽表格数字)。
固定构图规范。 留白被视为产品的核心:首屏内边距至少 18vh,主要区块间距至少 140px,元素不得铺满视口边缘。采用非对称编辑式分栏,例如标题占 12 栏中的 7 栏,配一条细竖线和一个 3 栏宽度、很窄的索引栏(内含小型大写标签列表与发丝分隔线)。区块之间用发丝线或空白分隔,不使用粗边框或填充卡片;如确实需要面板,使用象牙白备用色 #EFE8DC,不加边框,圆角不超过 2px。标题区保持“标题 + 一行副标题 + 一个 CTA”的克制结构,宁要三个安静区块,不要八个喧闹区块。价格表使用带顶部发丝线的表格式列表,金额用衬线数字;推荐档位仅在其名称上方加一条细点缀线,而不是填充区块。
内容处理。 不使用 emoji、渐变按钮和“握手”类图库照片。图像应为全出血、低饱和、电影质感,采用艺术化裁切与双色调至中性色调;图像被当作“窗口”而非装饰,宜留出宽裕边距做信箱式排布,而非撑满全宽。文案需短句、无感叹号,语气与品牌一致。CTA 规则:一个填充式点缀色或墨色按钮,接近方形(圆角 ≤ 4px),加一个小型大写文字的链接并配发丝下划线;不得出现两个同等强度的按钮。
极简动效。 每个区块只做一次入场:上移 10–14px,时长 500–700ms,缓动为 cubic-bezier(0.22, 1, 0.36, 1)。悬停效果保持克制:颜色向点缀色偏移或透明度 0.85,时长 200ms;不做弹跳、摆动或旋转。
使用方式
资料以规范清单的形式给出配色、字体、构图、内容与动效条款,可直接作为页面设计与前端实现时的检查依据。该资料未提供具体的安装命令、组件代码或接入步骤,相关内容暂未提供。
适用场景
适合需要呈现低调高级感的品牌页面、产品落地页、年报式信息页、定价页与个人品牌站点。
限制与校验
资料附有校验清单,出现以下情况即视为不合格:使用纯白 #FFFFFF 背景;出现超过一种点缀色;标题使用无衬线体;出现 emoji、彩带或渐变;标题小于约 2.6rem 或正文使用纯黑;主要区块间距小于约 140px;单个视口内出现超过一个填充式 CTA;出现圆角大于约 2px 且无充分理由的卡片。资料未说明该风格包的授权方式、收费情况与配套工具链,这些信息暂未提供。