Klarna ES 网站预览
Klarna ES 网站预览

Klarna ES

近白色基底、胶囊形控件与圆角卡片。

页面以近白色为基底。字体采用 Klarna Title、Klarna Text。视觉特点包括胶囊形控件、圆角卡片、大字排版、细线分隔。适合参考的场景:支付服务首页、金融科技产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有展示标题、首屏背景和主要文字都采用Midnight Plum(#0b051d),它是标志性品牌色。
  • 所有内容分区页面背景采用Warm Bone(#f9f8f5),Midnight Plum只留给满幅深色分区。
  • Klarna Title大胆放大,分区标题40px、主要标题58px、首屏90px;1.05-1.10紧密行高不可缺少。
  • 所有交互控件都采用100px border-radius胶囊按钮,强调CTA使用粉色(#ffa8cd),严肃操作使用Midnight Plum。
  • 薰衣草、青柠和深李紫强调卡片作为独立散落元素,绝不连续成对;节奏需要呼吸空间。
  • 卡片采用16px border-radius,图像和视觉内容32px;避免4-8px圆角,它们对于本系统过于锐利。
  • 阴影保持极少,卡片仅采用rgba(0,0,0,0.1) 0 2px 4px,按钮采用1px内嵌#e2e2e7边框;绝不叠加或模糊阴影。

建议避免

  • CTA按钮不要使用灰色或中性背景,粉色(#ffa8cd)和Midnight Plum(#0b051d)是仅有按钮填充。
  • 标题不要采用小字号,任何标题级文字都要求40px+,16-20px只用于正文和UI。
  • 不要添加厚重投影、辉光或玻璃拟态,设计通过平面颜色对比表达深度。
  • 不要使用纯黑(#000000),所有深色元素始终采用Midnight Plum(#0b051d),保留紫罗兰底调。
  • 强调卡片不要集中成组,如薰衣草挨着青柠再挨李紫;穿插白色卡片,让视线休息。
  • 展示文字行高不要高于1.20,紧密1.05-1.10让超大标题显得受控。
  • 展示标题不要使用系统字体,40px+的Klarna Title是标志性特征,不能替换为普通无衬线。