风格库/金融科技/BlueYard Capital

BlueYard Capital

静谧底色,醒目品牌标识A quiet canvas for a bold mark

浅色主题金融科技venture capital homepage极简宽松留白编辑式单色静谧原网页 blueyard.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
BlueYard Capital 首屏

BlueYard 首页以近乎纯净的暖白画布和居中的黑色方块标识开场。克制的字体与充足留白,让品牌标识成为唯一视觉焦点。

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.

配色

点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。

品牌色
表层色
中性色
功能色
页面底色 · Blush Canvas主文字 · Night Ink次要文字 · Soft Graphite描边 · Ash Hairline
文字背景对比度WCAG
#090b11 Night Ink#fff6f4 Blush Canvas18.49:1AAA
#3a3a3e Soft Graphite#fff6f4 Blush Canvas10.64:1AAA

字体

字号阶梯:Custom(比例约 4,正文 12px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

Instrument Sans

网络字体 · 字重 400 · 占比 80%
免费替代:Inter

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
48px4001-0.03em
正文
Compact supporting copy, set in Instrument Sans.
The quick brown fox 敏捷的狐狸
12px4001.50
辅助文字
Small uppercase utility labels, set in Geist Mono.
The quick brown fox 敏捷的狐狸
10.5px5001.50
按钮
Small uppercase action labels, set in Geist Mono.
The quick brown fox 敏捷的狐狸
10.5px5001.50
导航
Small navigation text, set in Instrument Sans.
The quick brown fox 敏捷的狐狸
12px4001.50
代码
Monospaced uppercase utility or code-like labels.
const style = 1;
10.5px5001.50

间距与布局

基准单位 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.

页面版块

共 1 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • Keep #fff6f4 as the dominant page canvas.
  • 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.

相似风格

BlueYard Capital 设计系统 — 配色、字体与 DESIGN.md | Design DNA