JetBrains 网站预览
JetBrains 网站预览

JetBrains

近黑色基底、渐变展示与紧密字距。

页面以近黑色为基底,搭配白色文字。局部操作控件以蓝色强调。字体采用 JetBrains Sans。视觉特点包括渐变展示、紧密字距、居中构图、网格布局。适合参考的场景:建筑作品集、空间项目展示页。

查看原始网站

使用规范

建议采用

  • 使用#000000作为页面绝对背景——绝不使用近黑色如#0a0a0a或#111;真正的黑色才让渐变光晕显得明亮生动
  • 在首屏内容后方以约87%的宽度范围应用径向蓝色光晕(rgba(0,71,253,0.8) → 透明),居中对齐内容,使文字从后方呈现聚光灯效果
  • 仅在分类标签和品牌关键点使用Neon Pink(#f31199)——每页最多1-3次出现;它作为信号色,而非填充色
  • 所有卡片和功能面板的边框圆角统一设为24px;仅在徽章上使用4px,同一组件内禁止混用
  • 卡片背景使用半透明填充:紫色调使用rgba(90,31,208,0.3),粉色调使用rgba(243,17,180,0.2)——绝不使用不透明颜色填充
  • 使用JetBrains Sans字体,并激活fontFeatureSettings '"calt", "kern", "liga"',所有字号均启用,且在43px及以上显示字号时应用负字间距(-0.005em)
  • 为每个JetBrains产品配备独特多色图标——色彩图标网格是主要的视觉差异机制;禁止所有图标统一使用单一品牌色

建议避免

  • 禁止将#18a3fa(电蓝色)用作按钮或大面积元素的填充色——它仅作为文字/边框/链接色;若作为填充色会破坏深色主题的平衡
  • 禁止为卡片添加阴影效果——层级感通过渐变填充和半透明背景表达,绝不使用投影阴影
  • 禁止在交互元素(按钮、卡片)上使用小于16px的圆角;锐角形状专用于徽章(4-6px)
  • 禁止在纯黑色背景上直接放置白色文字,除非有渐变区或半透明卡片作为底层支撑,否则长段正文无法阅读——正文文字使用#bababb在原始黑色上呈现
  • 禁止将Neon Pink(#f31199)用作大面积背景填充——其最大允许的半透明形式为0.2不透明度(rgba(243,17,180,0.2))
  • 导航栏禁止添加可见的下边框——#19191c页眉平滑过渡至首屏渐变,无需分隔线
  • 禁止统一图标颜色——各产品图标必须保留其独立的色彩渐变特征;单色处理会破坏品牌标识系统