Jeton 网站预览
Jeton 网站预览

Jeton

温暖大理石风格的编辑型金融科技

Jeton 像一个运行在近乎空白画布上的金融科技操作系统:大量白色留白、一种灼热的橙红强调色,以及承担全部表达的排版。界面刻意保持平坦,不用沉重的抬升层次或装饰性边框,而是依靠充裕的留白、圆角几何卡片和一种暖色(#f73b20)形成视觉标点。标题超大而紧凑(100+px 字号时行高为 0.9–1.0),让页面具有自信的编辑版面节奏,而非密集的 SaaS 界面感。色彩零星出现:橙色传达品牌声音,近黑的棕色(#360802)用于正文,功能卡片偶尔使用柔和的淡染底色。最终效果像金融基础设施的杂志跨页,克制、宽敞,并且明显大胆。

查看原始网站

使用规范

建议采用

  • 将展示标题设置在72–155px之间,行高保持在0.9–1.0之间——行高必须严格保持,以营造编辑风格。
  • 全页面仅使用#f73b20作为色彩主调;其他辅助色(蓝色、绿色、珊瑚色)仅限用于分类标识的功能卡片。
  • 为卡片、输入框及大多数容器设置16px圆角;仅在真正需要的胶囊形元素(如标签或圆形控件)中使用9999px圆角。
  • 搭配暖调背景(rgba(247,59,32,0.05))与#360802文字,实现表面与内容之间的色调和谐。
  • 使用反向阴影模式(rgba(0,0,0,0.05) 0px -4px 16px)实现卡片的浮起效果——它定义了自底部浮起的视觉风格。
  • 在小字号文本(12–14px)上保持0.03em的字间距,在展示字号上保持0.01em的字间距,以保持几何无衬线字体的清晰锐利。
  • 保持页面画布为#ffffff,各区块之间仅通过空白空间分隔,而非交替使用背景色。

建议避免

  • 不要引入第二套字体——Sequel Sans在所有字号和字重下承载全部视觉语气。
  • 不要使用粗体字重(600及以上)——系统保持在400/450/500,通过尺寸实现层级,而非字重。
  • 不要在文本或按钮上添加阴影——层次感仅通过文中所列的两种阴影参数表达。
  • 不要使用#000000作为正文颜色——#360802(Ink Roast)是正文主色,并与橙色家族形成统一调性。
  • 不要叠加多种色彩点缀——若标题使用橙色,切勿同时在正文或图标中使用其他竞争性色彩。
  • 在展示字号上不要将行高设得高于1.2——紧密的行高是核心特征,而非默认设置。
  • 不要在交互表面使用尖角(0px圆角)——即使是工具按钮也应保持8–16px的圆润。