---
name: "Miro"
description: "该网站是现代、简洁的 SaaS 营销页面的典范，优先考虑清晰度和价值传达。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#FFFFFF"
  primary: "#1C1C1E"
  secondary: "#555A6A"
  tertiary: "#4B5BF0"
  neutral: "#C7CAD5"
  bg-soft: "#F0F0F0"
  bg-quiet: "#F5F5F5"
  muted-soft: "#E0E2E8"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1.5px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.15
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Miro 是协作层，团队与AI智能体在此共同思考、规划与构建。

*一块作为团队创意构思与AI智能体协作中枢神经系统的数字白板。*

## Colors

采用洁净的白色画布搭配高对比度深色文字以确保可读性，使用单一的鲜明蓝色作为主要操作色，并以柔和的灰色构建结构。

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1C1C1E`)** — uses `ink` token
- **Secondary text (`#555A6A`)** — uses `ink-soft` token
- **Accent (`#4B5BF0`)** — uses `accent` token
- **Muted (`#C7CAD5`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- 使用 font-weight 500 的 display 标题以保持友好而专业的氛围。
- 为大号标题应用负字母间距（tracking）以收紧视觉节奏。
- 正文保持中性的 400 字重，并采用充裕的行高以提升可读性。

## Layout

采用标准的12栏网格，主容器居中。

*Rhythm:* 基于4的网格系统，内部间距与组件间隔采用一致的 8px 和 16px 步进。

## Elevation & Depth

- 0px 1px 3px rgba(0,0,0,0.1)
- 0px 10px 10px -3.75px rgba(0,0,0,0.06)
- 0px 2.28px 2.28px -2.5px rgba(0,0,0,0.16)
- Borders: 仅在输入框和卡片上谨慎使用细微的 1px 边框。

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** 纯黑色的「免费开始」与「了解更多」按钮，采用胶囊形或圆角矩形；首屏主按钮「免费开始」使用蓝色。
- **card:** 浅灰色背景的圆角卡片，内含标题、图标和描述性文本。
- **chip:** 用于用户光标或标签的小型胶囊形元素。
- **input:** 带有细微边框的简洁圆角矩形输入框。
- **hero:** 居中的文字型首屏区域，包含醒目的输入框和行动号召按钮。

## Do's and Don'ts

**Don't:**
- 不要使用衬线字体 — 截图显示的是简洁的人文主义无衬线字体排版。
- 不要使用深色模式主题 — 截图显示的是以白色/浅灰色为主的背景。
- 不要使用厚重的装饰性阴影 — 截图显示的是细微、柔和的阴影。
- 不要使用杂乱的多色调色板 — 截图显示的是克制的白色、黑色、灰色和单一蓝色强调色的调色板。
- 不要处处使用生硬、尖锐的直角 — 截图显示的是圆角矩形（12px, 20px）与胶囊形的混合使用。
- 不要使用密集的小字作为标题 — 截图显示的是大号、留白充足且字母间距紧密的标题。

---

## System Prompt (paste into AI agent)

```
Miro 是一款协作白板 SaaS 平台。其视觉识别由简洁的亮色模式美学（白色 #FFFFFF 和灰色 #F0F0F0 背景）定义，搭配高对比度的深色墨迹（#1C1C1E）以实现最大可读性。主要的强调色是用于交互元素的鲜明蓝色（#4B5BF0）。字体采用人文主义无衬线体，标题具有紧密的字母间距。关键禁忌：切勿将深色模式作为主要界面。避免使用厚重、复杂的阴影；保持其细微。不要使用衬线字体或杂乱的多栏首屏区域。保持简洁、居中的布局，强调留白和清晰的行动号召。
```