01
设计气质 DNA
支付餐饮省时评价
面向酒店业的友好金融礼宾服务。
02
色彩
#B838E0Accent#111111Ink#666666Ink soft#FFFFFFBG#F9F9F9BG soft#F2F2F2BG quiet#999999Mutedrgba(0,0,0,0.1)Line干净、高对比度的单色系，辅以单一俏皮的亮洋红色作为品牌标识点缀。
03
字体
- display
56px · 500 - body
18px · 400
主要冲击力标题使用过渡衬线字体。 · 界面元素与正文使用简洁无衬线字体。 · 保持充裕的行高以提升可读性。
04
间距
4px8px16px24px32px48px64px96px区块间采用充裕的垂直填充，营造出通透、有呼吸感的布局。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
微妙、浅色的边框，谨慎使用。
0 4px 12px rgba(0,0,0,0.05)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
用于英雄区文本的单一居中栏，过渡至卡片形式的横向画廊。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
滚动时的细微淡入效果 · 按钮和卡片的平滑 hover 过渡
交互元素进行细微的颜色变化或轻微提升。 · 按钮按下时提供即时视觉反馈。
08
组件
- button 药丸形状，主操作为实心黑色，次操作为描边样式。
- card 圆角矩形，展示产品在情境中的大幅摄影图像。
- chip 小型文本标签，可选用括号标注社交证明。
- input 简洁、最小化的表单（英雄区未显示，但基于 SaaS 场景推断存在）。
- hero 居中标题、支撑性副标题，以及一个主要 CTA 按钮。
09
文案语气与禁用清单
- 语气 自信、有帮助且直接。
- 标题风格 直接、以效益为导向的陈述。
- 按钮文案 行动导向且清晰。
- 不要使用厚重的投影——截图显示的是扁平、干净的表面。
- 不要使用霓虹或刺眼的强调色——配色方案是克制的，仅有洋红色作为点缀。
- 不要在标题中使用俏皮或圆角的无衬线字体——截图中使用的是结构化的过渡衬线字体。
- 不要在英雄区堆砌多个 CTA——截图聚焦于单一的 '开始使用' 按钮。
- 不要使用深色模式背景——截图明显是明亮、浅色主题的。
- 不要在英雄区使用复杂的栅格——布局严格采用居中垂直排列。
- 避免: 侵略性销售语言
- 避免: 术语繁多的金融词汇
- 避免: 杂乱的布局
11
System Prompt
这是一个干净、专业的 SaaS 网站，服务于面向餐饮行业的金融科技产品。其定位围绕效率与提升客户体验。关键十六进制颜色包括：纯白背景（#FFFFFF）、近黑墨色（#111111）以及鲜亮的洋红色品牌强调色（#B838E0）。排版上结合了用于冲击力标题的结构化过渡衬线字体，与用于正文及界面元素的简洁人文主义无衬线字体。关键设计禁忌包括：避免深色模式或厚重渐变，绝不使用侵略性或杂乱的布局，并避免使用过于俏皮的字体而损害支付平台的专业可信度。整体美学平静、精致，并高度聚焦于清晰度与信任感。