---
name: "Typelist Upstatement"
description: "这是一个绝佳范例，展示了极度的克制、大胆的几何形态和慷慨的排版如何能创造出强大、富有表现力的编辑体验。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#FFFFFF"
  primary: "#15181E"
  neutral: "#E5E5E5"
  line: "rgba(21,24,30,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 22px
    lineHeight: 1.36
    fontWeight: 500
    letterSpacing: "2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.36
    fontWeight: 400
    letterSpacing: "2px"

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

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

---

## Overview

一个为创意排版打造的、干净且富有表现力的编辑展示。

*一个经过策展的、富有表现力的展示字体库。*

## Colors

鲜明、高对比度的单色基底，仅被充满活力的、扁平的几何点缀所打破。

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#15181E`)** — uses `ink` token
- **Muted (`#E5E5E5`)** — uses `muted` token
- **Borders (`rgba(21,24,30,1.0)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- 标签和导航一致使用大写转换
- 慷慨地使用字间距以营造通透的编辑感
- 有节制地使用衬线字体以达到特定的风格强调

## Layout

一种高度非对称、画廊式的布局，优先考虑视觉冲击力，而非密集的信息网格。

*Rhythm:* 开放且通透，严重依赖大量、刻意的留白来框定大胆的视觉元素。

## Elevation & Depth

- Borders: 极少或不存在；分隔通过空间对比和扁平色彩实现。

## Shapes

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

## Components

- **button:** 极简、纯排版的链接，没有明确的边框或背景形状。
- **card:** 大胆、扁平的几何形状（如大圆圈）作为主要的交互单元。
- **hero:** 一个引人注目的极简构图，将广阔的留白与醒目的、扁平的几何色带相结合。

## Do's and Don'ts

**Don't:**
- 不要使用标准的通用 UI 组件，如按钮或卡片——截图显示的是扁平、自定义的几何形状和简单的排版链接。
- 不要应用复杂的阴影或渐变——截图显示的是扁平的纯色区域和鲜明的留白。
- 不要使用密集、杂乱的布局——截图显示的是广阔、刻意的留白框定着极简的内容。
- 不要使用随意或过于俏皮的排版——截图显示的是高度结构化的大写、字间距处理和几何排列。
- 不要使用深色模式或柔和、低对比度的调色板——截图显示的是纯白背景，搭配高对比度的黑色文本和充满活力的色彩。
- 不要依赖传统的 UI 边框进行分隔——截图显示的是空间对比和扁平的色块作为主要的视觉分隔符。

---

## System Prompt (paste into AI agent)

```
本网站是一个极简、富有表现力的排版编辑展示，定位为一个经过策展的展示字体画廊。其设计基因依赖于纯白（#FFFFFF）和近黑（#15181E）的鲜明单色基底，仅被大胆、扁平的几何色彩点缀（如充满活力的紫色和黄色）所打破。主要排版类别为人文主义无衬线体，用于展示和正文文本，其特点是慷慨的字间距（2px）和一致的大写转换。关键的设计约束包括避免所有复杂的 UI 模式、拒绝深色模式或柔和的调色板，并保持广阔、刻意的留白，而非密集的网格布局。交互模型是微妙的，依赖于平滑的 0.3s 过渡（cubic-bezier(0.215, 0.61, 0.355, 1)），而非侵略性的反馈。
```