Viewport

白色基底、产品图像展示与胶囊形控件。

页面以白色为基底，搭配近黑色文字。字体采用 Silka SemiBold、HK Sentiments。视觉特点包括产品图像展示、胶囊形控件、渐变展示、分屏构图。适合参考的场景：效率工具官网、协作产品介绍页。

查看原始网站

使用规范

建议采用

仅在每个区块的最高优先级 CTA 上使用青到靛的垂直渐变（rgb(0,202,242) → rgb(77,77,255)）；禁止应用于卡片、导航或次要按钮
将 #c5fbee 薄荷轻语保留用于产品截图后方的满幅特征面板；禁止将其用作小尺寸的辅助色或徽章填充
将首屏和区块标题设置为 HK Sentiments Bold 28–32px，字间距为 -0.476 至 -0.576px，以锁定其紧致、几何化的语调
所有卡片使用16px圆角，所有按钮使用12px圆角，所有标签和胶囊控件使用100px圆角——这三个圆角定义了系统规范
使用1px实线 #000000 或 #c8c9cf 作为细线边框；禁止使用更粗的装饰边框
每个区块的标题区块（标签胶囊 + 标题 + 可选副标题）均需居中对齐，其下方由产品截图完成视觉表达
将Silka的字间距调整为-0.036em，适用于半粗体14–16px，以匹配UI尺寸下的微紧缩效果

建议避免

不要引入新的饱和色——色彩系统严格限定为两种：靛蓝 #4d4dff 和薄荷青 #c5fbee，通过青色在渐变中连接
不要在白色卡片上将 #c5fbee 用作悬停状态或芯片填充；它是一种表面处理，而非前景强调
不要为文本、导航或标签添加阴影；只有产品框、对比卡片和渐变 CTA 才应有层级感
不要使用衬线体或展示性手写体作为标题——HK Sentiments Bold 700 是唯一的展示字体，且所有尺寸下字间距保持为负值
不要在单个区块内堆叠多个特征区块；一个标题、一个产品框、一段呼吸空间是节奏
不要使用深色模式——画布始终为 #ffffff 或 #f8f9fa，绝不会出现接近黑色的背景
不要将青到靛的渐变替换为纯色 #4d4dff 填充在首屏 CTA 上；正是这个渐变让主要操作显得‘被激活’

正在读取模板权限…

使用指南

# Viewport — Style Reference
> Mint sticky-notes on a glass desk. A clean productivity canvas where one vivid indigo button is the only thing that 'switches on' against pale teal surfaces and white walls.
 
**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.
 
Viewport uses a bright, airy workspace language: pure white canvas, generous breathing room, and a signature mint-teal surface that softens sections without darkening them. The entire chromatic story is a tight two-color duo — vivid indigo for actions and mint-teal for surfaces — connected by a cyan-to-violet gradient that lives only on the primary CTA. Typography is calm and geometric: HK Sentiments Bold for headlines at a whisper-heavy 700 weight, Silka for everything functional at 14–18px, tracking pulled tight across the scale. Components feel like smooth tiles: large 16px radii on cards, 12px on buttons, 100px pills for tags, and shadows that are either barely-there gray or a branded cyan glow — never neutral mid-tones. Layouts center a single headline per section, then let wide product screenshots do the work, often floating over the mint surface like sticky notes on a glass desk.

Viewport

使用规范

建议采用

建议避免

相似设计语言

pampam.city

Amie

Notion

Gleap

Hex

mymind