---
name: "Quentinhocde"
description: "此网站是典型的野兽派、字体驱动设计范例，布局与字体选择共同承载了全部视觉重量。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#FFFFFF"
  line: "rgba(255,255,255,1.0)"

typography:
  display-xl:
    fontFamily: geometric-sans
    fontSize: 144px
    lineHeight: 1.04
    fontWeight: 700
    letterSpacing: "-4.32px"
  display-lg:
    fontFamily: geometric-sans
    fontSize: 97px
    lineHeight: 1.04
    fontWeight: 700
    letterSpacing: "-2.916px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: grotesque-sans
    fontSize: 10px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "normal"

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

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

---

## Overview

一个为交互开发者打造的、以高对比度排版为主导的作品集网站。

*一个面向创意技术专家的现代野兽派风格数字作品集。*

## Colors

严格的单色配色，不含任何强调色，完全依靠字体大小与字重来建立视觉层次。

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#FFFFFF`)** — uses `muted` token
- **Borders (`rgba(255,255,255,1.0)`)** — uses `line` token

## Typography

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

- 大型展示文本使用紧凑的负字距，以营造紧凑、有力的视觉效果。
- 展示文本与导航链接广泛使用大写字母，以维持结构化的野兽派风格。
- 正文应保持标准的 16px，以确保在复杂背景下的可读性。

## Layout

全出血沉浸式布局，拥有复杂背景，包含固定顶部导航栏，内容分布于灵活网格中。

*Rhythm:* 采用 4px 基础比例进行所有间距设计，其中 12px 和 20px 作为内部组件填充的主要边距。

## Elevation & Depth

- Borders: 无可见边框；通过空间布局和排版实现分隔。

## Shapes

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

## Components

- **button:** 基于文本的链接，带有指针光标和大写样式，无传统按钮边框或背景。
- **card:** 无传统卡片；信息以浮动文本块形式直接呈现于背景之上。
- **chip:** 无可见的标签或芯片。
- **input:** 落地页上无可见表单输入框。
- **hero:** 全视口沉浸式区域，由覆盖在复杂纹理背景之上的、多行巨型排版式声明主导。

## Do's and Don'ts

**Don't:**
- 不要引入第三种强调色——截图显示为严格的黑底白字单色配色。
- 不要在大型文本上使用宽字距——截图显示为紧凑的负字距，以营造密集、野兽派的外观。
- 不要对展示文本使用衬线或手写字型——截图显示主要标题均采用几何无衬线体。
- 不要为交互元素应用边框、阴影或背景色——截图显示为纯文本链接。
- 不要使用传统按钮组件——截图显示为大写文本链接配合指针光标。
- 不要对主标题声明使用多栏网格——截图显示为单栏巨型排版区块。

---

## System Prompt (paste into AI agent)

```
一个交互开发者的作品集网站，采用严格的单色配色（#000000 背景，#FFFFFF 文字）和粗重、野兽派的排版。设计依赖于巨型的、大写的展示字体（归类为几何无衬线体），并搭配简洁的怪诞无衬线体用于正文。布局沉浸且全出血，避免使用卡片或彩色按钮等传统 UI 组件。交互反馈通过平滑的 0.3s cubic-bezier 过渡实现。关键约束：绝不使用强调色，绝不在大型文本上使用宽字距，绝不使用带边框的传统按钮。
```