Readymag 网站预览
Readymag 网站预览

Readymag

设计师的编辑性创作空间——一个克制的白底外壳,围绕着鲜明、具有杂志级质感的色彩区块展开。

Readymag 是设计师的编辑性创作空间:一个白底画布产品外壳,包裹着鲜明大胆、具有杂志级视觉质感的色彩风格。界面保持克制——纯白色背景、近黑色文字、细线边框——真正的工作体现在特征区块中,以高饱和度的实色面板呈现(电紫、钴蓝、余烬橙、纯黑、信号黄)。字体承载强烈个性:30–80px 的定制几何显示字体搭配极度紧凑的负字间距,承担了标题的视觉表现,而更沉稳的无衬线字体则负责正文与UI内容。组件呈现出手工排版的质感,而非模板化设计——胶囊形的CTA、厚实的区块边距,以及自信填满面板的彩色卡片表面,而非通过抬升来引导内容。整体效果更像创意机构的首页,而非SaaS产品页面。

查看原始网站

使用规范

建议采用

  • 系统中所有按钮均采用200px的胶囊半径——无论是否为轮廓、填充或悬停状态,均保持胶囊形状,以形成统一的按钮语言体系
  • 任何标题均应使用30px及以上尺寸的定制显示字体;正文与副标题尺寸(12–18px)属于Graphik及系统字体堆栈,绝不属于显示字体
  • 特征卡片应使用实色填充(#000000、#ff5000、#1551ff)而非添加阴影——深度来自与纯白画布的高饱和度对比
  • 在主要页面区块之间应用86px的区块边距,营造类似印刷杂志翻页的节奏,而非SaaS常见的紧凑间距
  • 谨慎使用橙色 #ff5000 余烬橙,仅用于主要CTA——每个视口最多一个填充橙色按钮,以确保信号明确且突出
  • 在显示尺寸下大幅收紧字间距:80px时为-0.067em,32px时为-0.05em,12px时为-0.014em——负字间距是让显示字体显得手工排版、而非机械输入的关键
  • 任何高饱和度的品牌面板必须搭配白色或近黑色文字——绝不能在彩色面板上使用彩色文字,也绝不能在黑色卡片上使用灰度文字

建议避免

  • 卡片或面板禁止添加阴影——Readymag通过实色分隔元素,而非通过层叠高度来实现层次感
  • 除定义的尺寸系列(10、16、20、200)外,禁止使用其他圆角半径——避免4px或8px的默认值,否则会显得像普通SaaS产品
  • 除主要操作填充外,禁止使用橙色 #ff5000 于任何其他场景;除非是明确的品牌展示场景,否则禁止大面积使用该色
  • 禁止使用小于18px的显示字体——低于此尺寸会丧失其几何特征,转而像正文字体一般失去沉静感
  • 禁止将多个填充彩色按钮并列排列——橙色必须单独出现,以确保视线能准确聚焦于其上
  • 禁止相邻放置同色调的实色特征卡片——页面中应交替使用黑色、橙色、蓝色和紫色面板
  • 任何标题或品牌展示场景均不可使用系统字体——即使在小尺寸下,定制字体才是品牌呈现编辑感的关键