North star · Keep the interface nearly black and typographically restrained, letting vivid simulation imagery carry the drama.
The page contrasts a mostly black canvas with a cobalt-blue opening scene that immediately establishes the brand’s simulation world. White is reserved for high-contrast headings, navigation, and primary controls; muted grays handle supporting copy, while dark charcoal defines cards and hairlines. Blue is a prominent section color, and a bright green trace appears in a technical visual rather than as a general UI accent. ABC Oracle’s clean sans-serif typography is consistently regular-weight, with compact body copy and large, tightly tracked headings. The layout moves between open, spacious sections and focused two-column or multi-column content: a hero, partner marks, process explanation, case study, and domain cards. Image-led scenes use dark overlays and contained rounded frames, while most interface surfaces remain flat. Generous black space gives the long page a deliberate rhythm and keeps dense proof points readable.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Deep Canvas表层 · Graphite Edge表层 2 · Night Surface主文字 · Signal White次要文字 · Quiet Gray弱文字 · Soft Ash描边 · Graphite Edge强调 · Simulation Cobalt强调 2 · Signal Green
All measured headings, body copy, navigation, captions, and buttons.
角色
示例
字号
字重
行高
字距
一级标题
Large hero headline, set tightly with a compact line height.
Aaru
48px
400
1.05
-0.03em
二级标题
Major section headings and prominent case-study titles.
Aaru
30px
400
1.1
-0.02em
三级标题
Feature, domain, and supporting content headings.
The quick brown fox 敏捷的狐狸
24px
400
1.1
-0.01em
四级标题
Smaller card or sub-section headings.
The quick brown fox 敏捷的狐狸
20px
400
1.2
-0.01em
正文
Descriptions, explanatory copy, and supporting paragraph text.
The quick brown fox 敏捷的狐狸
14px
400
1.26
0
辅助文字
Compact uppercase labels, evidence notes, and small metadata.
The quick brown fox 敏捷的狐狸
12px
400
1.3
0.1em
按钮
Primary CTA labels and prominent pill-button text.
The quick brown fox 敏捷的狐狸
18px
400
1.2
0
导航
Header navigation and compact link labels.
The quick brown fox 敏捷的狐狸
14px
400
1.26
0
眉题
Uppercase section labels and short contextual kickers.
The quick brown fox 敏捷的狐狸
12px
400
1.3
0.1em
间距与布局
基准单位 4px · 密度：宽松
100px版块间距
40px元素间距
—卡片内边距
—内容最大宽度
4px
8px
10px
12px
16px
20px
24px
32px
40px
51px
64px
100px
140px
Use a spacious, full-width page with a strong left-aligned content edge and carefully bounded content groups. The opening hero is a broad blue canvas with text on the left and floating simulation imagery on the right. Follow it with a partner strip, a dark framed process demonstration, and black-background content sections. Later blocks alternate between two-column evidence panels and multi-column use-case cards. Preserve substantial vertical breathing room; measured spacing is spacious, but no fixed page maximum width is specified.
圆角与层次
按钮 · 9999px
卡片 · 32px
图片 · 16px
导航 · 16px
链接 · 32px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat, without measured shadows. Separate cards from the black canvas using charcoal fills and thin, low-contrast borders. The process demo and image panels gain depth through dark framing, tonal contrast, and layered media rather than elevated white cards or conspicuous shadow effects.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
White logo and compact links sit over the hero; a white Contact us button provides the single high-contrast header action.
Hero CTA
Pair a white pill-shaped primary action with a quiet text link and arrow; keep the action copy short and high contrast.
Partner strip
Place client logos in a restrained band beneath the hero, using subdued marks and subtle dividers rather than colorful tiles.
Process showcase
Present a large dark rounded panel with a centered message, compact uppercase category controls, and a contained simulation result card.
Case study card
Use a dark bordered, rounded card for study evidence, combining a title, short description, CTA, and concise comparison metrics.
Domain cards
Arrange use-case categories in a multi-column row with concise descriptions and small circular arrow controls.
Closing CTA
Layer short white copy and a compact white action over a darkened photographic scene.
Imagery · Use atmospheric simulation imagery as a defining counterpoint to the restrained interface: floating circular world scenes in the hero, particle-like behavior visualizations, and dark data-led case-study graphics. Real-world photography appears in the closing CTA. Keep imagery subdued, often tinted or darkened, and contained in generously rounded frames; logos remain small and quiet.
Reserve #1019ec for prominent simulation-led sections.
Use white for primary copy and decisive CTA contrast.
Set headings in regular-weight ABC Oracle or a close sans-serif substitute.
Create hierarchy with whitespace and subdued borders.
Treat blue and particle imagery as atmospheric product storytelling.
✕ 不该做
Do not introduce bright, colorful interface surfaces.
Do not use #0ae77a as a general-purpose CTA color.
Do not add pronounced drop shadows.
Do not make cards look like elevated white panels.
Do not use heavy bold typography or oversized uppercase navigation.
Do not crowd the spacious section rhythm with dense decoration.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Aaru-style page using a nearly black #000000 canvas and restrained, regular-weight sans-serif typography. Use #ffffff for clear headings, navigation, and primary actions; #808080 and #8d8d8d for supporting copy; and #1a1a1a or #0d0d0d for subtle surfaces and borders. Introduce #1019ec only where a prominent simulation scene needs a vivid field. Treat #0ae77a as a technical visualization detail, not a generic action color. Keep the hero broad and image-led, with concise copy aligned opposite floating or particle-based simulation media. Build later sections from spacious black bands, occasional two-column evidence panels, logo strips, and concise category cards. Prefer flat surfaces, understated borders, darkened imagery, and ample breathing room over shadows or decorative chrome.
