Letters 网站预览
Letters 网站预览

Letters

开阔天空下的清晨诊所：柔和蓝色铺陈下的一张洁白诊台，点缀着外科蓝色器械。

Letters是一款医疗信函撰写工具，以开阔天空渐变首屏开场：一条柔和的蓝色氛围带先定下平静、临床式的语气，再进入干净白色的工作空间。系统有99%为单色调：纯白画布、近黑文字（#070709）、胶囊形深色CTA，以及浮在极轻阴影上的18px圆角卡片。唯一的鲜亮蓝色（#2597d0）用于功能性标点，包括图标、微型图形和波形播放器，绝不用于按钮或大面积填充。排版依靠Open Runde，这款几何人文主义无衬线字体在展示字号中采用强烈负字间距（80px时为-0.04em），让标题收紧成自信的文字块。组件像轻盈的医疗器械：细边框、宽裕的卡片内边距、胶囊按钮，以及克制的高度效果，让天空首屏承担情绪表达。

查看原始网站

使用规范

建议采用

  • 所有按钮、标签和胶囊形元素采用100px圆角；完全圆润是标志性形状语言。
  • 展示标题采用80px Open Runde、字重600、-0.04em字间距及0.90行高；紧密堆叠是关键节奏。
  • 所有填充CTA采用#070709（Obsidian），绝不使用彩色按钮背景；近黑色就是操作颜色。
  • 天空渐变只用于首屏带，其他所有区块保持纯白或#f5f5f5。
  • #2597d0（Surgical Blue）仅用于图标、波形播放器和24px以下的小型功能强调，绝不用作按钮填充或大面积表面。
  • 功能卡片采用带蓝色调的阴影组，即在大模糊半径下使用rgba(16,55,132,0.03)，让高度感富有氛围，而非企业化。
  • 区块标题和首屏文字居中对齐；布局节奏是对称的，而非非对称。
  • 功能卡片内部采用40-48px内边距，以保持疏朗、临床式的信息密度。

建议避免

  • CTA按钮背景绝不使用彩色；系统刻意让操作保持单色调。
  • 大标题的字间距绝不恢复平直；44px+时的-0.04em正是让Open Runde显得自信而非普通的原因。
  • 首屏以下绝不应用天空渐变；在多个区块重复会使其失去意义。
  • 卡片绝不使用高不透明度（>0.1）阴影；系统依靠几乎不可见的大半径阴影。
  • 不要将Open Runde与Helvetica或Roboto等其他几何无衬线字体搭配；特定的人文主义几何形态是品牌的一部分。
  • 功能性UI文字绝不使用The Doctor字体；它仅用于手写便笺插画的装饰。
  • 不要将没有内部内边距的白色卡片直接放在天空渐变上；卡片需要与氛围背景保持呼吸空间。
  • 避免将#2597d0用于超过2个词的文字；它用于图标和微型图形，而非正文。

相似设计语言