Flayks

深绿色基底、大字排版与错落拼贴。
页面以深绿色为基底,搭配浅橙色文字。字体采用 Mango Grotesque、Nohemi。视觉特点包括大字排版、错落拼贴、扁平表面、摄影展示。适合参考的场景:创意机构官网、项目作品集。
查看原始网站使用规范
建议采用
- 任何需要承载页面的标题,均使用 88px 或更大字号的 Mango Grotesque;当字号低于 48px 时,切换至 Nohemi 字重 600。
- 所有 Nohemi 文本设置字间距为 0.10em 且大写——小字号文本的疏松字间距是该系统的标志性特征。
- 使用桃色奶油(#ffe0ce)作为默认文本和细线边框颜色;仅将珊瑚火焰和薰衣草紫用于字形强调,不用于正文内容。
- 显示标题保持压缩状态,行高设定为 0.80 至 0.85 之间,并允许其溢出视口边缘——溢出正是设计的核心。
- 卡片在炭黑或紫外线表面渲染,半径为 10px,叠加四层黑色阴影堆叠,绝不与绿色画布平铺。
- 将状态栏(位置/可用性/联系信息)锚定在每页底部;它是一个持续存在的家具元素,而非页脚区块。
- 为 3D 插画图块搭配轻微旋转(-5° 至 +5°),使其读作拼贴,而非网格布局。
建议避免
- 不要引入填充按钮变体——本系统中的所有操作均采用透明描边,边框为桃色奶油(Peach Cream)。
- 不要将 Mango Grotesque 字号设置低于 32px;压缩无衬线字体在正文尺寸下会失去其身份特征。
- 不要使用白色(#ffffff)文本或边框;该系统以温暖的桃色奶油和骨色运行,从不使用中性白色。
- 不要收紧 Nohemi 的字间距——+0.10em 的字间距是微小UI文本在深绿色画布上可读性的关键。
- 不要将首屏标题居中对齐——Flayks 全程采用非对称、左溢出的编辑式构图。
- 不要使用渐变;设计严格采用平面色彩,仅允许单方向的阴影。
- 不要在单个区块中使用超过一个紫色卡片表面(#2d0458、#1e1779)——它们是强调画布,而非默认卡片。