---
name: "Displaay"
description: "这是一堂关于字体铸造厂如何通过自身 UI 展示其技艺的大师课，运用自定义字体和精致的画廊式呈现。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#FFFFFF"
  primary: "#020202"
  secondary: "#76756F"
  neutral: "#76756F"
  bg-soft: "#C9C9C8"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 44px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.28px"
  body:
    fontFamily: humanist-sans
    fontSize: 15px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.3px"

rounded:
  sm: 8px
  md: 10px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 15px
  lg: 20px
  xl: 25px
  2xl: 32px
  3xl: 48px

---

## Overview

一家独立字体铸造厂，以俏皮、艺术化的视觉效果呈现其独特的零售和定制字体。

*一个通过富有表现力的布局展示字体艺术的创意工作室。*

## Colors

以单色为基底，通过大胆、高对比度的摄影和插图来定义色彩故事。

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#020202`)** — uses `ink` token
- **Secondary text (`#76756F`)** — uses `ink-soft` token
- **Muted (`#76756F`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- 标题使用简洁的 humanist-sans 字体，字间距紧凑。
- 正文保持充足的行高以确保可读性。
- 字体粗细主要为常规（400），营造精致的编辑感。

## Layout

首屏为左对齐的排版文字与右对齐的操作按钮；下方为基于网格的功能卡片。

*Rhythm:* 章节之间留白充足，UI 元素内部采用紧凑的 padding。

## Elevation & Depth

- 无
- Borders: 按钮和标签采用 1px 实线黑边框，形成锐利的图形轮廓风格。

## Shapes

- `sm`: 8px
- `md`: 10px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** 药丸形和圆角矩形轮廓按钮，带有 1px 实线边框，在 hover 状态下于填充与轮廓样式间切换。
- **card:** 以图像为主的卡片，搭配粗体文字，并采用黄色或绿色等明亮背景色。
- **chip:** 用于分类的小型轮廓标签，如“新品”、“定制”或“零售”。
- **input:** 极简风格，可能集成在商店功能中。
- **hero:** 大型排版导语陈述，搭配高冲击力的摄影横幅。

## Do's and Don'ts

**Don't:**
- 不要使用投影或柔和渐变——截图显示为锐利的 1px 实线边框和扁平表面。
- 不要将所有文字居中对齐——截图显示为强烈的左对齐排版层次。
- 不要对所有元素都使用粗体——截图显示主要使用常规（400）字重。
- 不要将导航隐藏在复杂菜单后——截图显示为直接、可见的药丸形链接。
- 不要将柔和、柔和的色调作为主要调色板——截图显示为高对比度的黑/白/灰基底，搭配鲜艳的图像填充。
- 不要使用标准系统字体——截图对所有品牌和标题都使用了自定义字体。

---

## System Prompt (paste into AI agent)

```
这是一个独立字体铸造厂（Displaay）的网站，具有干净、编辑感的审美，其单色调色板（#FFFFFF、#C9C9C8、#020202、#76756F）是其根基。排版依赖自定义 humanist-sans 字体，具有大尺寸展示比例和常规字重。布局宽敞且左对齐，为按钮和标签等 UI 组件使用锐利的 1px 黑色边框。关键避免项：避免柔和阴影或无边框的圆角矩形，避免将所有文字居中，切勿为展示标题使用通用的无衬线字体。设计精致、俏皮且具有画廊感，专注于字体样本和摄影的视觉冲击力。
```