Magicbeans 网站预览
Magicbeans 网站预览

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;字体系统刻意紧凑,呈现生产力工具感。