Deta Surf 以开阔的白色画布、明亮的蓝色首屏和优雅的衬线大标题，呈现 AI 浏览器的产品体验。悬浮的产品界面与内容卡片让研究和笔记功能一目了然，同时保持页面克制、轻盈的节奏。
North star · Keep the page mostly white and editorial, reserving the vivid sky-blue gradient for the product-led opening and clear actions.
The page contrasts a distinctive blue-sky hero with an otherwise nearly all-white canvas. The hero’s saturated blue fades toward pale cloudlike white near its lower edge, making the opening feel spacious while giving the product demo strong contrast. White, black, and quiet grays handle most text and surfaces; blue is reserved for the primary action and occasional illustrative treatments. Gambarino gives major headings an editorial, literary character, balanced by Switzer for navigation, body copy, and controls. The centered opening aligns a compact navigation, a large headline, short explanatory copy, a floating prompt interface, and a prominent Download button. Across the long page, centered statement sections alternate with compact feature groupings and product media. Soft corners, faint borders, and restrained shadows separate interface cards without creating heavy panels. The overall strategy is bright and product-led: use generous white space and carefully framed interface artifacts to make a browser feel like a thinking tool.
Navigation, body copy, captions, and interface controls.
Aa 设计
Gambarino
网络字体 · 字重 400 / 500 · 占比 14%
免费替代：Cormorant Garamond
Display and heading typography, plus selected editorial links.
Aa 设计
Tanker
网络字体 · 字重 400 · 占比 2%
免费替代：Bebas Neue
Small decorative or special display accent, used sparingly.
角色
示例
字号
字重
行高
字距
特大标题
Oversized editorial display moments and prominent hero typography.
Deta Surf
60px
500
1
0
一级标题
Primary page headline and major section titles.
Deta Surf
48px
400
1.2
-0.01em
二级标题
Secondary feature and content section headings.
Deta Surf
40px
400
1.2
0
三级标题
Smaller feature-card and subsection headings.
Deta Surf
36px
400
1.11
0
正文
Introductory and explanatory paragraphs.
The quick brown fox 敏捷的狐狸
20px
400
1.4
0
辅助文字
Small metadata, labels, and supporting interface details.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0
导航
Header navigation and standard interface labels.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
链接
Editorial links and selected text-link treatments.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
间距与布局
基准单位 8px · 密度：紧凑
32px版块间距
12px元素间距
16px卡片内边距
768px内容最大宽度
1px
4px
6px
7px
8px
9px
11px
12px
16px
17px
20px
22px
24px
27px
32px
48px
The measured content max width is 768px, with a compact underlying spacing scale and section gaps. The hero is centered and visually expansive, with its navigation and headline aligned on the central axis and product artifacts floating around the main prompt interface. Following sections keep a white background and alternate centered title-and-copy bands with three-column feature areas. The long page uses generous vertical breathing room between content groups, while cards and controls remain compact. Keep section headings centered where shown and preserve the clear distinction between display copy and functional UI.
圆角与层次
按钮 · 16px
卡片 · 12px
图片 · 8px
导航 · 9999px
链接 · 8px
hairline · card
sm · other
inset · button
md · button
Most of the page reads as flat white space. Product cards use fine pale borders, modest corner rounding, and subtle shadows that lift them just enough from the canvas. The hero prompt and floating media create depth through overlap and soft shadowing; avoid heavy panel fills or dramatic elevation on ordinary content.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
Lightweight header over the hero with Deta branding, compact links, and white text against the blue backdrop.
Hero prompt
Large white rounded interface panel with a short prompt, subdued utility actions, and a bright blue Create Note control.
Download CTA
Prominent blue button with white Switzer text, generous horizontal padding, rounded corners, and a subtle inset lower edge.
Feature cards
Compact white cards with black Switzer copy, soft rounded corners, pale borders, and restrained shadow.
Centered section intro
Centered Gambarino headline followed by concise supporting copy on the white canvas.
Message link
Team message presented as a lightly outlined link block with pale blue dotted border and rounded corners.
FAQ area
Simple white-background FAQ and editorial content area using understated links and minimal dividers.
Imagery · The hero uses a blue-to-white atmospheric gradient behind floating browser artifacts, including document previews, a notebook, and the central prompt UI. Treat these as product demonstrations, not as a general color palette. Later sections mix interface screenshots, video, and compact image cards; keep their framing clean, softly rounded, and integrated into the white page rather than adding decorative illustration everywhere.
Use Gambarino for expressive headings and Switzer for functional text.
Reserve blue gradients and saturated blue for the hero, product media, and primary actions.
Center major hero and section-intro content as measured.
Use product screenshots and interface artifacts as the main visual storytelling.
Separate cards with soft borders and restrained shadows.
✕ 不该做
Do not turn the whole page into blue section bands.
Do not use the illustration palette as a replacement brand system.
Do not make body copy or navigation decorative serif.
Do not add dense, high-contrast card grids where the page uses open white space.
Do not use heavy drop shadows or thick outlines.
Do not invent color values, spacing, or corner sizes outside the measurements.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Deta Surf page with a bright, editorial product aesthetic. Use Gallery White (#ffffff) as the dominant canvas, Soft Ink (#000000) for primary copy, and quiet gray tones for supporting text. Bring in Surf Blue (#0097ff) and the measured sky-blue family—Sky Glow (#4a9eff), Ocean Blue (#008ad7), and Open Sky (#43a3e2)—only for actions, hero atmosphere, and product imagery. Set headings in Gambarino or a close editorial serif and functional copy in Switzer or a clean sans-serif substitute. Favor centered section introductions, a spacious hero with layered browser artifacts, compact rounded product cards, faint Cloud Line (#e5e7eb) borders, and subtle shadows. Keep the overall page calm and white between product-led moments; make interface details legible and avoid decorative color bands.
