North star · Keep the page calm and spacious on deep charcoal, using oversized white type and pink only to guide attention.
The visual system is built on two near-black canvases: #191c26 carries the hero and most editorial content, while #121318 creates a distinctly darker product showcase and footer. White headings and navigation stay crisp against these surfaces; muted #a9afc3 supports quieter copy. Pink is a restrained signal rather than a broad fill: #ed1672 marks primary pill buttons and select navigation, while #f31765 appears on inline links and small heading accents. Poppins gives headings a rounded, confident display character, balanced by lighter Muli body copy. The opening hero centers an oversized two-line headline over a subtle star-speckled field. Lower sections shift into photographic storytelling, award marks, product presentation, a gradient-backed team feature, and a compact editorial feed. Broad section spacing keeps these varied content types from competing. Use flat dark surfaces and minimal outlines; let imagery and section transitions supply depth instead of shadows.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Night Canvas表层 · Deep Ink主文字 · Paper White次要文字 · Mist Lilac描边 · Paper White强调 · Signal Pink强调 2 · Link Pink
文字
背景
对比度
WCAG
#ffffff Paper White
#191c26 Night Canvas
17:1
AAA
#ffffff Paper White
#121318 Deep Ink
18.55:1
AAA
#a9afc3 Mist Lilac
#191c26 Night Canvas
7.78:1
AAA
#a9afc3 Mist Lilac
#121318 Deep Ink
8.49:1
AAA
#ed1672 Signal Pink
#191c26 Night Canvas
4.01:1
AA-large
#ed1672 Signal Pink
#121318 Deep Ink
4.38:1
AA-large
字体
字号阶梯：Custom（比例约 1.828，正文 18px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Muli
网络字体 · 字重 300 / 400 / 700 · 占比 75%
免费替代：Nunito Sans
Body copy, navigation, captions, and supporting text.
Aa 设计
Poppins
网络字体 · 字重 500 / 700 / 400 · 占比 25%
免费替代：Montserrat
Display and section headings, prominent article links, buttons, and uppercase eyebrows.
角色
示例
字号
字重
行高
字距
特大标题
Oversized hero headline treatment.
Fluid Touch
110px
700
1.2
0
一级标题
Primary hero and major section headings.
Fluid Touch
64px
700
1.1
0
二级标题
Secondary headings and editorial titles.
The quick brown fox 敏捷的狐狸
22px
500
1.3
0
正文
Introductory and explanatory paragraph copy.
The quick brown fox 敏捷的狐狸
18px
300
1.5
0
辅助文字
Small dates, labels, and supporting details.
The quick brown fox 敏捷的狐狸
14px
400
1.7
0
按钮
Compact CTA labels in pill buttons.
The quick brown fox 敏捷的狐狸
14.5px
500
1.25
0
导航
Header navigation and straightforward menu links.
The quick brown fox 敏捷的狐狸
18px
400
1
0
链接
Prominent article titles and section links.
The quick brown fox 敏捷的狐狸
22px
500
1.3
0
眉题
Small uppercase labels above section headings.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0.05em
间距与布局
基准单位 1px · 密度：宽松
210px版块间距
20px元素间距
—卡片内边距
1200px内容最大宽度
1px
2px
6px
10px
13px
15px
16px
18px
20px
27px
28px
32px
35px
40px
42px
45px
Use a spacious, centered composition within the measured 1200px page maximum. The hero centers its headline and supporting line; later sections alternate between left-aligned editorial content, split photographic storytelling, and multi-column content. The product band is a large, dark showcase area; the careers feature returns to a broad split layout. Keep section transitions generous, with the measured 210px section gap and 20px element gap as rhythm references. Overall density is low, with ample negative space around headings and imagery.
圆角与层次
按钮 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page is largely flat: dark section bands, imagery, and background transitions establish hierarchy without visible shadows. Keep card treatment restrained and avoid adding elevated panels. The award badges use thin white outlines, while primary buttons are solid pink pills. Photo overlays provide depth and text contrast where needed.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
Fluid Touch logo at left with a horizontal right-side menu. Use light Muli-style links on the dark canvas and pink for the active item.
Hero headline
Centered, oversized bold Poppins headline, broken across lines, with a small pink punctuation accent and muted supporting sentence.
Pill CTA
Solid #ed1672 capsule with white Poppins text; measured padding is 10px 20px and the radius is 100px.
Award strip
A row of compact recognition marks on a dark band, including white outlined badge treatments and photographic or graphic detail.
Editorial feed
Section eyebrow and heading above a short introduction and article entries with thumbnails, publication labels, dates, and pink Read links.
Footer columns
Compact dark footer with brand/location details and three link groups for products, quick links, and company information.
Imagery · Use photographic assets for the about story and team feature, with real environments and people rather than decorative illustration. The about image spans its section and is darkened to keep white copy legible. Product and award visuals sit within the dark showcase area; article thumbnails support the media feed. The hero’s sparse star-speckled field is atmospheric background texture, not a substitute for product imagery.
Reserve #121318 for darker showcase and footer bands.
Set major headings in bold Poppins with strong scale contrast.
Use Muli-style light text for explanatory copy.
Apply #ed1672 to primary CTA pills and active states.
Give sections generous vertical breathing room.
Use photography with dark overlays when copy sits on top.
✕ 不该做
Do not turn pink into a large background field.
Do not add heavy shadows or raised-card effects.
Do not crowd the hero with extra controls or content.
Do not use bright white as a full-section background.
Do not apply star textures to every section.
Do not make supporting copy as bold as the headings.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Fluid Touch-style page using a spacious dark canvas and clear editorial hierarchy. Use Night Canvas (#191c26) for the primary background and Deep Ink (#121318) for selected showcase or footer bands. Set bold, rounded headings in Poppins and light supporting copy in Muli; use Paper White (#ffffff) for key text and Mist Lilac (#a9afc3) for quieter copy. Signal Pink (#ed1672) should be reserved for pill CTAs and active states, with Link Pink (#f31765) for text links. Center the hero, then vary section layouts between split photography and editorial content. Keep generous section spacing, restrained outlines, and flat surfaces. Use real product, workplace, or team photography with dark overlays where needed; treat starfield texture as an occasional atmospheric detail.
