Medium

暖白色基底、胶囊形控件与衬线字形。

页面以暖白色为基底，搭配近黑色文字。字体采用 medium-content-sans-serif-font、GT Super。视觉特点包括胶囊形控件、衬线字形、分屏构图、宽松留白。适合参考的场景：内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

在所有全宽背景和区块带中使用 #f7f4ed 作为页面画布
在展示标题中使用 GT Super 字号 120px，字间距 -0.055em，行高 0.83
所有 UI 文本（导航、按钮、副标题）使用 Söhne 字重 400
所有按钮和标签使用圆角 9999px
系统中仅使用 #191919 作为填充按钮的背景色
需要从奶油画布中突出的卡片和面板表面使用 #ffffff
所有非按钮容器（卡片、输入框、图片、弹窗）使用 0px 圆角

建议避免

UI 元素中不得引入任何色彩——无蓝色链接、无绿色按钮、无红色错误提示
不得使用阴影或模糊效果来分隔界面层——仅通过色彩值变化实现
不得为 GT Super 展示标题使用粗体或中等粗体——字重 400 是标志性的选择
不得将展示标题的行高设为大于 1.0——0.83 的重叠是刻意设计的
不得为卡片、输入框或容器应用圆角——仅按钮和标签有圆角
不得将首屏插图中的绿色作为品牌色——仅用于编辑艺术表达
长文本或正文内容不得使用居中对齐——必须沿阅读轴左对齐

正在读取模板权限…

使用指南

# Medium — Style Reference
> cream-colored broadsheet at golden hour
 
**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.
 
Medium operates as a literary reading room translated to the web: a warm cream canvas (#f7f4ed) replaces the sterile white common to SaaS, making long-form prose feel like a printed page. The visual system is aggressively monochromatic — nearly every UI surface, text, and border sits in a narrow band of warm grays from #242424 to #6b6b6b — so the reader's attention goes entirely to content. The single brand gesture is the serif hero headline (GT Super at 120px, weight 400, tracking -0.055em), a deliberate anti-trend choice: a transitional book serif at display scale with whisper weight, not a bold geometric sans, signals 'we publish books, not software.' Buttons are full pills in near-black, the only solid ink on the page.

Medium

使用规范

建议采用

建议避免

相似设计语言

Readymag

Handsome Frank

Home

Home

Raw Materials

General Intelligence Company