Statamic

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

页面以白色为基底，搭配深灰色文字。局部操作控件以黄绿色强调。字体采用 p22-mackinac-pro、Lexend。视觉特点包括渐变展示、紧密字距、衬线字形、居中构图。适合参考的场景：开发者工具官网、API 服务介绍页。

查看原始网站

使用规范

建议采用

使用 p22-mackinac-pro 字重 300-400，字号 60-96px 用于展示标题，字间距 -0.05em
在任意页面将填充深色按钮（#191a1b 背景，#d4ff4c 文字，8px 圆角）作为唯一主要操作
使用薰衣草轻语（#cbc2ea）作为描边/透明按钮边框——绝不作为填充背景使用
保持 16px 元素间距和 64px 区块间距作为基础节奏
让温暖壳（#fdf1ef）背景至少出现在每页的一个区块中以营造氛围
按钮和小卡片使用 8px 圆角，图片使用 12px，大内容卡片使用 16px，胶囊控件和图标圆圈使用 9999px
为大尺寸抬升内容卡片应用双阴影（1px 边框 + 40px 模糊）

建议避免

不要在展示标题中使用 600 及以上字重——标志是大字号的细衬线字体
不要在浅色背景上使用 #d4ff4c 绿色——会失去对比度；仅保留用于深色填充或小的强调标记
不要在按钮上使用厚重的投影阴影——系统仅使用几乎不可察觉的 1-2px 抬升
不要将 #cbc2ea 薰衣草色用作背景填充——它仅是描边颜色
不要打破衬线与无衬线字体的搭配——正文不要使用 p22-mackinac-pro，标题不要使用 Lexend
不要在任何单个表面添加超过一个鲜明色彩——色彩调性保持克制
不要在卡片上使用锐利的 0px 或 4px 圆角——系统始终为 8px

正在读取模板权限…

使用指南

# Statamic — Style Reference
> Warm editorial sunset over floating islands
 
**Theme:** light
 
Source measurements are normalized; roles and recommendations are interpreted. Font summary lists are independent, not paired by position. HTML examples are reconstructions, not source components.
 
Statamic pairs a warm, editorial display serif with a clean geometric sans for a CMS that feels like a publication rather than a dashboard. The visual system lives in a sunlit peach-to-pink gradient world decorated with floating tropical islands — the brand leans into warmth, softness, and a slightly handcrafted sensibility. Color is used sparingly against an off-white canvas: olive-green electric lime as the brand spark, muted lavender for outlined actions, and near-black for the filled primary button. Surfaces are soft with minimal elevation, radii stay modest (8px dominates), and shadows whisper rather than shout. Typography carries most of the personality — a thin serif at 60-96px for headlines with tight tracking, and Lexend in its lighter weights for body and UI text.

Statamic

使用规范

建议采用

建议避免

相似设计语言

Attio

Readymag

SST

Lottielab

Home

Superhuman