---
version: alpha
name: "Harbor"
description: "藏青、留白和稳重的结构，为严肃的 B2B 产品设计。 Harbor 显得可靠却不沉闷：冷调蓝灰底色、藏青色主操作、亮蓝用于焦点和数据，Plus Jakarta Sans 带来现代又稳重的语气。长篇功能介绍、对比表格和安全合规模块都能从容排下。"
colors:
  primary: "#13294B"
  on-primary: "#FFFFFF"
  secondary: "#2F6FD6"
  tertiary: "#18A0A0"
  neutral: "#526077"
  surface: "#F6F8FB"
  on-surface: "#0F1B2D"
typography:
  display-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Harbor 显得可靠却不沉闷：冷调蓝灰底色、藏青色主操作、亮蓝用于焦点和数据，Plus Jakarta Sans 带来现代又稳重的语气。长篇功能介绍、对比表格和安全合规模块都能从容排下。

## Colors

- **primary (#13294B):** 藏青，用于主按钮、页头和关键数字；深色模式下变成浅矢车菊蓝。
- **on-primary (#FFFFFF)**
- **secondary (#2F6FD6):** 亮蓝，用于焦点框、正文里的链接和第二组图表数据。
- **tertiary (#18A0A0):** 青色，用于成功状态、集成标签和第三组数据。
- **neutral (#526077):** 石板蓝灰，用于描述、表头和脚注。
- **surface (#F6F8FB):** 冷调蓝灰的浅底；白色卡片承载内容和产品截图。
- **on-surface (#0F1B2D)**

## Typography

全站用 Plus Jakarta Sans：标题粗体 700，从 60px 到 20px，字距略收紧；正文常规 400，16px。API 示例和表格里的数字用 JetBrains Mono。

## Layout

12 栏网格，最大宽度 1280px，栏间距 24px，间距单位 4px。页面节奏稳定：首屏、客户 Logo 条、文字和截图左右交替的功能区，最后是案例背书和收尾的行动号召。

## Shapes

卡片、输入框和按钮用 8px 圆角。1px 浅蓝灰描边；卡片、菜单和推荐套餐用柔和的低阴影。

## Components

大菜单导航、客户 Logo 条、配产品截图的功能区、套餐对比表、安全合规徽章和联系销售表单。

## Do's and Don'ts

- 用真实的产品截图，而不是抽象插画。
- 用客户 Logo、数据和案例来支撑卖点。
- 不要让亮蓝和藏青主按钮抢风头。
- 不要把价格和联系销售藏在好几次点击之后。