Magicbeans

近白色基底、产品图像展示与大字排版。
页面以近白色为基底,搭配近黑色文字。字体采用 Inter。视觉特点包括产品图像展示、大字排版、细线分隔、单栏阅读排版。适合参考的场景:SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 所有主要CTA都使用#1a1a19,绝不将彩色作为按钮背景。
- 饱和色#ff5310、#44c67f和#0098f1,只留给装饰曲线与行内图标,绝不作为填充、背景或大文字。
- 所有卡片和输入框边框使用1px solid #e5e7eb,除产品预览卡片外避免阴影。
- 页面背景设为#faf9f7,而非#ffffff;温暖米白使品牌区别于普通SaaS。
- 所有按钮、标签和胶囊采用9999px border-radius,卡片12-16px,导航与输入框8px。
- 首屏标题设为Inter 600-700、64px和1.0行高;巨大标题是页面视觉锚点。
- 每个主要页面分区放置3个手绘曲线装饰,轮换Bean Orange、Green和Blue。
建议避免
- #ff5310、#44c67f或#0098f1不要作为CTA按钮背景或大型填充形状,它们只用于装饰。
- 内容卡片不要使用厚重投影,只有产品预览卡片获得抬升。
- 页面背景不要使用纯白#ffffff,始终以#faf9f7作为温暖画布。
- 任何元素的border-radius不要低于8px;8px是系统最小圆角。
- 不要引入Bean Orange/Green/Blue三元组合加Mint强调之外的新彩色。
- 不要修改letter-spacing,Inter自然字间距对所有字号都已合适。
- 正文字号不要低于14px或高于17px;字体系统刻意紧凑,呈现生产力工具感。