North star · Keep the warm, nearly empty canvas dominant and let one compact, high-contrast brand mark carry the page.
The page is built around a nearly uninterrupted pale blush-white canvas, #fff6f4, which fills the viewport and establishes a calm, gallery-like mood. A compact black BlueYard cube logo sits at the center, providing the only strong visual contrast; its dark appearance is part of the logo artwork rather than evidence of a broader dark interface. The measured palette supports a restrained supporting text system: #090b11 for navigation and other high-contrast details, #3a3a3e for muted text and button text, and #b5afaf for occasional hairlines. Instrument Sans provides the quiet, readable sans-serif voice, while uppercase Geist Mono is reserved for small utility labels and button-like text. Layout is deliberately sparse and centered, with no visible cards, imagery, or section bands in the captured view. Reproduce the generous negative space and modest logo scale instead of adding decoration or unmeasured visual effects.
Primary interface and editorial text, including navigation and body copy.
Aa 设计
Geist Mono
网络字体 · 字重 500 · 占比 21%
免费替代:IBM Plex Mono
Small utility labels, uppercase captions, and button-like text.
角色
示例
字号
字重
行高
字距
一级标题
Large, regular-weight headline when present; not visible in the captured viewport.
BlueYard Capital
48px
400
1
-0.03em
正文
Compact supporting copy, set in Instrument Sans.
The quick brown fox 敏捷的狐狸
12px
400
1.5
0
辅助文字
Small uppercase utility labels, set in Geist Mono.
The quick brown fox 敏捷的狐狸
10.5px
500
1.5
0
按钮
Small uppercase action labels, set in Geist Mono.
The quick brown fox 敏捷的狐狸
10.5px
500
1.5
0
导航
Small navigation text, set in Instrument Sans.
The quick brown fox 敏捷的狐狸
12px
400
1.5
0
代码
Monospaced uppercase utility or code-like labels.
const style = 1;
10.5px
500
1.5
0
间距与布局
基准单位 2px · 密度:宽松
135px版块间距
12px元素间距
—卡片内边距
1404px内容最大宽度
3px
5px
9px
12px
18px
24px
80px
135px
Use a single, centered composition on a spacious, light canvas. The measured page max width is 1404px, with a sparse one-column section and a spacious density profile. The first viewport has no visible content grid or section bands: the cube mark is centered in the field, with a tiny utility-style label near the lower edge. Preserve the measured section rhythm and generous gaps where content exists; avoid adding columns, cards, or alignment shifts unsupported by the screenshot.
圆角与层次
没有测到阴影:页面是扁平的,层次靠底色和描边区分。
The captured view reads as flat: the warm canvas has no visible card layering, gradients, or shadows. The logo artwork supplies contrast without a surrounding container. Use borders only as restrained hairlines where needed, drawing from #b5afaf; do not introduce elevation effects or rounded card treatments.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
Centered brand mark
A compact black cube logo with white BlueYard lettering, centered in the otherwise open canvas.
Utility label
Tiny, uppercase monospaced text appears near the lower edge of the viewport; keep it subordinate to the logo.
Navigation text
Measured navigation uses 12px Instrument Sans in #090b11; style as quiet text rather than a prominent button.
Back-to-top action
Measured as uppercase 10.5px Geist Mono in #090b11, without padding, border, radius, or shadow.
Hairline detail
Use #b5afaf for sparse border details only; the screenshot does not show a prominent border system.
Imagery · The visible visual is a compact, black cube-shaped BlueYard logo with white lettering, centered against the pale background. Treat it as a crisp brand asset, not as a cue to add product photography, decorative illustration, or 3D scenes. The screenshot shows no photography, video, or other prominent media; keep any additional imagery absent unless page content requires it.
Center the primary brand mark within generous negative space.
Use #090b11 for crisp, high-contrast interface details.
Use Instrument Sans for regular interface copy.
Reserve uppercase Geist Mono for compact utility labels.
Keep any border detail subtle and infrequent.
✕ 不该做
Do not add bright accent colours absent from the measured palette.
Do not turn the logo artwork into a full dark section.
Do not fill the open canvas with decorative content.
Do not introduce gradients, shadows, or card-heavy layouts.
Do not enlarge utility labels into prominent headlines.
Do not add photography or illustration unsupported by the page.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in BlueYard’s restrained visual style. Use Blush Canvas (#fff6f4) as the dominant background and preserve broad, uninterrupted negative space. Keep the composition centered and sparse, with one compact, high-contrast brand mark or primary focal element; use Night Ink (#090b11) for crisp text and mark details. Set ordinary interface text in Instrument Sans, with Geist Mono for small uppercase utility labels and action text. Soft Graphite (#3a3a3e) can support muted copy, while Ash Hairline (#b5afaf) is reserved for occasional subtle borders. Keep the page flat, without decorative gradients, shadows, or unnecessary cards. Match the measured spacious one-column character and avoid inventing palette values or decorative elements not supported by the content.