Brand

白色基底、紧密字距与网格布局。

页面以白色为基底，搭配蓝色文字。字体采用 Dbsharpgroteskvariable Vf、Atlasgrotesk Web。视觉特点包括紧密字距、网格布局。适合参考的场景：设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

所有主标题、链接文字和轮廓式操作边框均使用#0061fe——这是品牌的声调
在30px及以上显示文字中，所有展示文字的字间距（字间距）设置为-0.02em；紧密的字间距使标题显得独特且具编辑感
所有元素必须对齐可见网格——色块、文字和空白区域均尊重模块化网格结构
所有卡片、按钮和色块面板的圆角统一为8px——系统中唯一的圆角值
所有结构分隔线和网格单元边框使用1px细线边框，颜色为Ink（#1e1919）
部署大面积的扁平色块（完整网格单元填充阳光黄、橘色、天空青等）作为区块家具——色彩既是内容也是布局
正文文字设为14px，行高1.67，以实现舒适的段落密度

建议避免

绝不添加阴影或box-shadow效果——网格和扁平色块提供了全部视觉结构
绝不使用除8px以外的圆角值——该系统是几何化的，而非胶囊形或完全圆润
绝不使用实心单色的CTA按钮——所有操作均以#0061fe边框轮廓呈现
绝不居中正文或标题文字——所有文字在网格单元内左对齐
单个区块内使用的品牌色板颜色不得超过4种——过度饱和会破坏编辑规范
绝不使用渐变——色彩调色板完全为扁平、饱和且单一
绝不使用定义之外的13色调色板（2种蓝色、8种品牌色样、3种中性色）以外的颜色用于UI元素

正在读取模板权限…

使用指南

# Brand — Style Reference
> Chromatic graph paper atlas — a living brand specimen where every color block, headline, and border snaps to an invisible modular grid printed on white.
 
**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.
 
Dropbox Brand Guidelines uses a Swiss-editorial visual system: a white graph-paper canvas with thin gray grid lines that organizes the entire page into discrete cells, each capable of holding either type or a flat color block. Headlines are tight-tracked, heavy sans-serif set in Dropbox Blue (#0061fe) that bleeds into the grid as confident editorial type, while a curated palette of eight vivid swatches — tangerine, sky cyan, sun yellow, lime, coral, lavender, magenta, slate — populates large rectangular panels that act as both color documentation and page furniture. The system feels like a living style guide: the grid IS the layout, color blocks ARE the content, and every element snaps to the modular lattice. The only radius is 8px, the shadows are absent, and the typographic discipline is total.

Brand

使用规范

建议采用

建议避免

相似设计语言

Raw Materials

Dropbox.com

Ditto

Browserbase

Hex

Programa