Lithic 网站预览
Lithic 网站预览

Lithic

如同卡片架构师的温暖大理石简报室,自信、质朴而有意图。

Lithic像一间面向发卡架构师的温暖简报室:奶油大理石表面、唯一自信的无衬线字体,以及分别承担不同语义分量的三种刻意强调色。页面在深黑首屏与宽松排列的暖中性分区之间交替,前者像保险库,是实体卡片图像和同心圆弧图案的舞台,后者以橘、紫罗兰和绿作为功能标点,而非装饰。组件具有编辑感,细线边框、24px圆角、抬升卡片上深度悬浮阴影,以及奶油色调表面叠成安静层级。密度舒适,节奏由8px和24px增量建立,唯一的Monument Grotesk家族以400/500字重,仅通过字号和字间距,就承载从低语到强调的全部语气变化。

查看原始网站

使用规范

建议采用

  • 所有卡片、面板和主要按钮都采用24px border-radius,保持柔和的编辑式卡片几何。
  • 从14px正文至64px展示文字,每个字号都应用-0.02em字间距;字间距从不随字号放宽。
  • #ff6600只用于填充主要CTA,旁边配黑色边框的无填充按钮作为次级操作。
  • 默认暖色卡片表面使用#f6f3ee,在分区过渡处与#f6f1fe薰衣草色和#ebfef6薄荷色交替。
  • 所有交互元素、标签和展示文字采用Monument Grotesk 500,400留给正文和次级文案。
  • 每个页面分区都以宽松纵向节奏锚定,主要分区之间至少80px,卡片内部内边距40px。
  • 同心圆弧插画图案采用#aa8855和#665233等温暖低饱和色,作为分区边缘装饰,绝不作为前景内容。

建议避免

  • 大字号不要放松letter-spacing;-0.02em字间距在整个尺度中保持不变,是标志性特征。
  • 橘色#ff6600不要用于正文、图标或装饰边框;它只是填充操作色。
  • 同一组件不要混用紫罗兰#5c2999与橘色#ff6600;它们各自拥有不同语义区域。
  • 小元素不要采用厚重阴影;rgba(0,0,0,0.5) 0px 16px 32px只留给抬升卡片。
  • 不要引入新的无衬线字体家族;Monument Grotesk是唯一字体,这一限制是身份的一部分。
  • 交互元素不要采用锐利0px直角;小控件至少8px,卡片和按钮24px。
  • 暖奶油表面上,不要放置低于16px的深色文字;14px说明文字应采用#888888建立层级。