Augen Pro 以克制、宽松的界面搭配具有电影感的人像与穿戴设备视觉，呈现 AI 驱动的隐形计算。柔和中性色、近黑色区块与精准蓝色点缀，共同营造冷静而高级的气质。
North star · Let spacious neutral fields and human-centered imagery lead; use near-black transitions and blue only for purposeful emphasis.
The visual system is built around quiet contrast rather than decorative effects. Pale off-white and near-white fields carry the opening hero and product presentation, while long near-black bands create deliberate pauses and a dramatic footer. A vivid blue is reserved for fine outlines, small links, and selected calls to action; it stays distinct from the warm browns and skin tones found in the hero imagery. PP Neue Montreal is used in a light, modern weight with subtly tight tracking, keeping labels, navigation, and headlines understated. The composition favors broad, open space, centered product imagery, and small blocks of copy placed away from the visual focal point. Rounded navigation and outline pills soften the otherwise crisp, flat interface. The overall impression is premium and human, with imagery carrying much of the emotion while interface details remain quiet and precise.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Quiet Mist表层 · Soft Ink表层 2 · Gallery White表层 3 · Deep Charcoal主文字 · Soft Ink次要文字 · Quiet Mist弱文字 · Muted Graphite描边 · Signal Blue强调 · Signal Blue
文字
背景
对比度
WCAG
#0f1012 Soft Ink
#f2f2f4 Quiet Mist
17.03:1
AAA
#0f1012 Soft Ink
#fdfdfd Gallery White
18.71:1
AAA
#0f1012 Soft Ink
#171719 Deep Charcoal
1.06:1
不达标
#f2f2f4 Quiet Mist
#0f1012 Soft Ink
17.03:1
AAA
#f2f2f4 Quiet Mist
#fdfdfd Gallery White
1.1:1
不达标
#f2f2f4 Quiet Mist
#171719 Deep Charcoal
16.01:1
AAA
字体
字号阶梯：Custom（比例约 1.688，正文 16px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
PP Neue Montreal
网络字体 · 字重 350 · 占比 100%
免费替代：Inter
Navigation, headings, body copy, captions, and button or link labels.
角色
示例
字号
字重
行高
字距
一级标题
Hero brand statement and primary page headline.
The quick brown fox 敏捷的狐狸
27px
350
1.2
-0.02em
正文
Supporting descriptions and explanatory section copy.
The quick brown fox 敏捷的狐狸
16px
350
1.2
-0.02em
辅助文字
Small product labels, eyebrow text, and compact metadata.
The quick brown fox 敏捷的狐狸
12px
350
1.2
-0.02em
按钮
Short CTA labels and pill-style action links.
The quick brown fox 敏捷的狐狸
16px
350
1.2
-0.02em
导航
Primary navigation items and compact footer navigation.
The quick brown fox 敏捷的狐狸
16px
350
1.2
-0.02em
间距与布局
基准单位 1px · 密度：宽松
144px版块间距
35px元素间距
—卡片内边距
1302px内容最大宽度
2px
4px
6px
10px
11px
21px
22px
30px
34px
35px
36px
38px
50px
69px
113px
130px
The page uses a spacious, single-column flow with a measured maximum content width of 1302px. The hero is a broad pale field: a large human portrait anchors the center-right while a compact brand statement and links sit low on the left. Long light and dark bands alternate to create a deliberate vertical rhythm, with generous separation between content moments. Product imagery is centered and isolated rather than surrounded by dense cards. Footer information shifts into a compact two-column arrangement. Overall density is low, alignment is intentionally varied, and whitespace is a defining structural element.
圆角与层次
按钮 · 9999px
导航 · 10px
链接 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is mostly flat, with no measured shadow system. Separation comes from broad shifts between pale and dark section backgrounds rather than raised cards. Borders are sparse and functional: blue outlines define selected pill links, while the navigation uses a softly rounded, light surface. Keep layering restrained and avoid adding card-like elevation.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Floating navigation
Compact centered navigation on a light rounded surface, with understated dark labels and a separate circular brand mark.
Hero link pills
Small outlined blue links sit beside the muted Explore label beneath the hero statement.
Product showcase
Wearable product imagery is isolated on a pale field, with compact labels and blue-accented links nearby.
Dark footer
Near-black footer groups page and social links into clear columns, with quiet muted metadata.
Editorial text block
Short descriptions and contact prompts use light-weight type, restrained scale, and generous surrounding whitespace.
Imagery · Large, cinematic human imagery leads the hero, with a softly lit profile emerging from a bright background. Product sections use isolated wearable-device imagery against pale neutral fields, keeping the object visually distinct without busy scenery. Warm skin and brown tones belong to the photography rather than the interface palette. Media is framed with substantial surrounding whitespace so imagery can function as the main expressive element.
Keep the overall composition spacious and low-density.
Use Quiet Mist and Gallery White for broad light fields.
Reserve Signal Blue for small, intentional accents.
Use large human or product imagery as the primary visual focus.
Create section rhythm with broad light and dark background bands.
Keep typography light, understated, and consistently tracked.
✕ 不该做
Do not turn the page into a dense card grid.
Do not use blue as a dominant background or large text treatment.
Do not add heavy shadows or decorative gradients.
Do not crowd product imagery with surrounding copy.
Do not use bold, oversized navigation labels.
Do not treat photographic browns as brand interface colours.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in the Augen Pro visual style: spacious, human-centered, and editorial rather than dashboard-like. Use Quiet Mist (#f2f2f4) and Gallery White (#fdfdfd) as broad calm fields, with Soft Ink (#0f1012) and Deep Charcoal (#171719) for deliberate dark section transitions. Keep Signal Blue (#0071e3) to fine link outlines and small emphasis; use Muted Graphite (#909090) for secondary labels. Set all text in PP Neue Montreal, or a close light-weight sans-serif substitute, with subtly tight tracking and restrained case. Let one large human or wearable image dominate each major showcase, surrounded by open space. Use flat surfaces, sparse borders, softly rounded navigation, and compact pill links. Avoid dense cards, strong shadows, decorative gradients, and oversized bright accents.
