North star · Give the domain one unmistakable focal point, using a soft cyan glow and otherwise restrained corporate styling.
The page balances a bright corporate header with a full-width hero whose cyan radial gradient draws the eye toward a pale central glow. The domain name sits at the visual center in regular-weight black DM Sans, with a short, bold inquiry prompt and underlined email link directly beneath it. Navigation stays compact and uppercase, while the ATM Holdings wordmark anchors the opposite side of the header. Below the hero, a quiet company-information section uses a two-column arrangement: social links occupy one side, while a portrait, company introduction, subscriber count, and dark Substack button form the other. White and near-white surfaces preserve a calm, open feel. Sparse content, generous whitespace, and restrained color accents make the domain—not decorative UI—the main event.
All page typography, from navigation and domain headline to body copy and calls to action.
角色
示例
字号
字重
行高
字距
一级标题
Centered Bolt.com domain headline in the hero.
ATM Holdings
46px
400
1
0.04em
二级标题
ATM Holdings heading in the company information section.
The quick brown fox 敏捷的狐狸
24px
400
normal
0
正文
Inquiry line and company introduction copy.
The quick brown fox 敏捷的狐狸
19px
400
1.5
0
辅助文字
Compact uppercase labels and secondary details.
The quick brown fox 敏捷的狐狸
16px
600
1.5
0
导航
Uppercase header navigation links.
The quick brown fox 敏捷的狐狸
16px
600
1.5
0
链接
Underlined inquiry email and other inline links.
The quick brown fox 敏捷的狐狸
19px
400
1.5
0
间距与布局
基准单位 4px · 密度：宽松
60px版块间距
40px元素间距
—卡片内边距
1240px内容最大宽度
10px
13px
15px
18px
20px
40px
60px
80px
90px
A full-width header sits above a broad, single-column hero, with the domain and inquiry details centered in the gradient field. The measured page max width is 1240px, while the hero background spans the viewport. The following company section shifts to two columns, balancing small social links with a compact profile and subscription content. The measured spacing system is spacious, with a 60px section gap and 40px element gap; keep the content sparse and the vertical rhythm calm.
圆角与层次
按钮 · 5px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The design is predominantly flat, with no measured shadows. Separate the header, hero, and company content through background treatment and whitespace rather than cards or heavy borders. The CTA is the main contained element, using a solid midnight fill and a subtle measured corner radius.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
White corporate header with ATM Holdings wordmark at left and compact uppercase black navigation links at right.
Domain hero
Full-width radial gradient from #f8f8f8 to #069ac3, with the domain name and inquiry line centered over the pale glow.
Inquiry link
Black, underlined email link placed inline after the bold serious-inquiries prompt.
Company profile
Two-column information section with small social links opposite a portrait, ATM Holdings introduction, and subscriber detail.
Substack CTA
White-text Subscribe on Substack button on #101b42, with a measured 5px radius and generous horizontal padding.
Footer details
Quiet copyright text and small social accents sit against a light, minimally treated background.
Imagery · The hero relies on a radial color field rather than photography, with a pale center fading into cyan edges. In the lower company section, a small portrait adds a human touch beside the text. Social marks and the wordmark remain compact supporting graphics; avoid oversized imagery or decorative mockups that compete with the domain.
Use the measured cyan-to-pale radial gradient as the primary visual feature.
Set navigation in compact uppercase DM Sans.
Keep the inquiry email directly beneath the domain title.
Use black for primary text and reserve muted gray for secondary details.
Keep the company profile restrained and clearly separated from the hero.
✕ 不该做
Do not add extra colors beyond the measured palette.
Do not let footer social accents dominate the page.
Do not place the domain title in a card or boxed panel.
Do not add shadows or heavy borders.
Do not crowd the hero with extra content or imagery.
Do not turn the compact company profile into a dense multi-column grid.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a responsive domain-sale landing page in the ATM Holdings style. Use Gallery White (#ffffff) for the header and light content areas, Anchor Ink (#000000) for the main text, and a full-width radial hero fading from Mist Halo (#f8f8f8) at its center to Bolt Cyan (#069ac3) at the edges. Set all text in DM Sans or a close sans-serif substitute. Center a large, regular-weight domain title above a bold inquiry prompt with an underlined email link. Keep the header compact, with the wordmark on the left and uppercase navigation on the right. Below the hero, use a calm two-column company profile with a small portrait, muted details, and a Midnight Button (#101b42) CTA. Preserve generous whitespace; use Link Blue (#0d66c2) and Signal Orange (#ff681a) only for tiny social accents.
