---
name: "Vividand"
description: "该网站是克制型高端设计机构的典范，通过粗体字和极简的深色模式配色，传达权威感与高端定位。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#101010"
  primary: "#FFFDF9"
  secondary: "#6F879C"
  bg-soft: "#1a1a1a"
  line: "rgba(255, 253, 249, 0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 105px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 20px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.2px"

rounded:
  sm: 15px
  md: 15px
  lg: 15px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

以粗体字和3D玻璃质感为特色的高端深色模式设计机构作品集。

*一家构建无形框架的高端建筑工作室。*

## Colors

深炭灰色为布局奠定基调，高对比度的米白色文字确保绝对的可读性与高端质感。

- **Background (`#101010`)** — uses `bg` token
- **Primary text (`#FFFDF9`)** — uses `ink` token
- **Secondary text (`#6F879C`)** — uses `ink-soft` token
- **Borders (`rgba(255, 253, 249, 0.2)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- 次要导航和标签使用大写字母
- 大尺寸展示文字保持紧凑的字间距

## Layout

首屏采用不对称分割布局；列表为全宽设计，文字左对齐，配有水平分隔线。

*Rhythm:* 主要板块之间采用充足的垂直间距（48px-96px），营造通透、电影般的感受。

## Elevation & Depth

- Borders: 仅用于水平分隔线，采用最小化、1px宽的低透明度白色实线。

## Shapes

- `sm`: 15px
- `md`: 15px
- `lg`: 15px
- `pill`: 999px

## Components

- **button:** 极简的文字链接或简单几何形状。
- **card:** 无可见卡片；信息以简洁的列表行呈现。
- **chip:** 无可见标签。
- **input:** 无可见输入框。
- **hero:** 大尺寸字体搭配深色背景上微妙的3D玻璃渲染元素。

## Do's and Don'ts

**Don't:**
- 避免使用亮色强调色——截图显示为严格的单色配色，仅带灰蓝色调点缀。
- 避免标题使用衬线字体——截图显示仅使用几何无衬线字体。
- 避免使用浓重的投影——截图显示为平坦、洁净的表面，无3D景深阴影。
- 避免所有文字居中对齐——截图显示标题采用强烈的左对齐排版。
- 避免使用繁复的背景图案——截图显示为纯色深炭灰背景。
- 避免所有元素使用圆角——截图显示为锐利边缘或特定的15px圆角半径。

---

## System Prompt (paste into AI agent)

```
为Vivid+Co打造的高端设计机构作品集，以深炭灰色背景（#101010）和高对比度米白色字体（#FFFDF9）为特色。视觉系统采用几何无衬线字体，营造粗体、现代的美学风格。配有3D玻璃渲染元素和简洁的水平分隔线。关键限制：避免衬线字体，避免亮色强调色，避免浓重投影，并保持充足的垂直间距以维持电影般的高端感。
```