---
title: "BlueYard Capital design system"
variant: extended
source: https://blueyard.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/blueyard-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# BlueYard Capital · Design System

> A quiet canvas for a bold mark

**Theme:** light · **Industry:** fintech · **Source:** https://blueyard.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

BlueYard’s homepage opens with an almost entirely warm-white canvas and a small, centered black cube logo. Restrained typography and generous empty space make the brand mark the sole focal point.

## North star

Keep the warm, nearly empty canvas dominant and let one compact, high-contrast brand mark carry the page.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Blush Canvas | `#fff6f4` | `--color-blush-canvas` | surface | Near-uninterrupted page background; the defining warm, pale surface. |
| Soft Graphite | `#3a3a3e` | `--color-soft-graphite` | neutral | Muted text and button text in the measured palette. |
| Night Ink | `#090b11` | `--color-night-ink` | brand | High-contrast navigation and other dark details; also echoed by the central logo artwork. |
| Ash Hairline | `#b5afaf` | `--color-ash-hairline` | semantic | Subtle border or hairline detail; used sparingly, not as a section surface. |

### Semantic aliases

`--color-canvas` → `#fff6f4` (Blush Canvas) · `--color-text` → `#090b11` (Night Ink) · `--color-text-muted` → `#3a3a3e` (Soft Graphite) · `--color-border` → `#b5afaf` (Ash Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#090b11` | `#fff6f4` | 18.49:1 | AAA |
| `#3a3a3e` | `#fff6f4` | 10.64:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Instrument Sans | `--font-body` | webfont | 400 | Primary interface and editorial text, including navigation and body copy. | Inter |
| Geist Mono | `--font-mono` | webfont | 500 | Small utility labels, uppercase captions, and button-like text. | IBM Plex Mono |

- **Instrument Sans:** Regular weight; clean, unembellished sans-serif with restrained tracking.
- **Geist Mono:** Medium weight; compact uppercase utility text with neutral letter spacing.

### Type scale — Custom (ratio ≈ 4, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1 | -0.03em | — | Instrument Sans | Large, regular-weight headline when present; not visible in the captured viewport. |
| body | 12px | 400 | 1.5 | 0 | — | Instrument Sans | Compact supporting copy, set in Instrument Sans. |
| caption | 10.5px | 500 | 1.5 | 0 | uppercase | Geist Mono | Small uppercase utility labels, set in Geist Mono. |
| button | 10.5px | 500 | 1.5 | 0 | uppercase | Geist Mono | Small uppercase action labels, set in Geist Mono. |
| nav | 12px | 400 | 1.5 | 0 | — | Instrument Sans | Small navigation text, set in Instrument Sans. |
| code | 10.5px | 500 | 1.5 | 0 | uppercase | Geist Mono | Monospaced uppercase utility or code-like labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 5, 9, 12, 18, 24, 80, 135 px.
- Section rhythm 135px · element gap 12px · card padding — · max content width 1404px.

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.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

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.

## 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.

## Components

### 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.

### Measured component styles

- **Primary button** (“Site navigation”): background #ffffff · text #090b11 · radius 0px · padding 0px · 400 12px Instrument Sans
- **Link** (“Back to home page”): transparent background · text #090b11 · radius 0px · padding 0px · 400 12px Instrument Sans
- **Navigation item** (“Site navigation”): transparent background · text #090b11 · radius 0px · padding 0px · 400 12px Instrument Sans

## Do

- 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.

## Don't

- 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.

## Agent prompt

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.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Sparse, single-column viewport with a compact logo centered on a full pale canvas. | Brand-first introduction, Minimal visual distraction | Warm-white full-screen canvas, Centered black cube logo, Tiny lower-edge utility label |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/blueyard-com