---
name: "Dyotanya"
description: "这个网站是运用字体排印作为核心设计元素的优秀个人作品集范例，融合了经典衬线字体的优雅与现代流畅的布局。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#f5f5f3"
  primary: "#000000"
  secondary: "#333333"
  tertiary: "#81aed9"
  neutral: "#4f4f4f"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 80px
    lineHeight: 1.05
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 46px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 1.5px
  md: 20px
  lg: 30px
  pill: 999px

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

---

## Overview

一位富有共情能力的网页设计师的个人作品集，运用表现力强的衬线字体和流畅的布局来传达创造力。

*一个富有表现力的创意作品集，将精炼的字体排印与艺术化的装饰元素相结合。*

## Colors

以灰白和黑色为主的克制色彩方案，营造出精致的画布，让蓝色点缀和富有表现力的字体排印成为焦点。

- **Background (`#f5f5f3`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#81aed9`)** — uses `accent` token
- **Muted (`#4f4f4f`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** humanist-sans

## Layout

一种不对称、自由流动的布局，使用大号字体块和不对称网格来引导视线。

*Rhythm:* 基于宽松的 4px 基础网格，提供充裕的间距，支持呼吸感强的编辑式布局。

## Elevation & Depth

- 5px -5px 0px 0px #333333
- 4px -4px 0px 0px #333333
- Borders: 使用纤细、微妙的边框或清晰的实心盒阴影来提升按钮等元素的层次感。

## Shapes

- `sm`: 1.5px
- `md`: 20px
- `lg`: 30px
- `pill`: 999px

## Components

- **button:** 药丸形状的按钮，带有实心蓝色偏移阴影，营造触感。
- **card:** 不对称的容器，配有大尺寸图像和充足的留白。
- **chip:** 简洁的大写字母标签或徽章，样式最小化。
- **input:** 极简的文本输入框，带有微妙的底部边框。
- **hero:** 一个巨大的、以字体排印驱动的介绍区域，采用流畅的线条图案并整合了肖像。

## Do's and Don'ts

**Don't:**
- 不要使用网格化、对称的布局——截图显示的是富有表现力、流畅且不对称的布局。
- 不要到处依赖明亮、高饱和度的原色——截图显示的是以中性色调为主、带有单一蓝色点缀的色彩方案。
- 不要在标题中使用严格的几何或怪诞字体——截图显示的是优雅、高对比度的衬线字体排印。
- 不要将导航隐藏在复杂的超级菜单中——截图显示的是一个简单、低调的汉堡图标。
- 不要使用刺眼的纯黑色背景——截图显示的是以浅灰白色背景（#f5f5f3）作为主要表面。
- 不要使用标准、扁平的矩形按钮——截图显示的是带有明显偏移阴影的药丸形按钮。

---

## System Prompt (paste into AI agent)

```
这是一个富有共情能力的网页设计师的个人作品集，定位为艺术性、精致且温暖。关键十六进制颜色包括灰白背景（#f5f5f3）、近乎黑色的墨色（#000000，#333333）和浅蓝色点缀（#81aed9）。字体排印方面，展示文字采用优雅的衬线字体，正文使用清晰的无衬线字体，在富有表现力的标题和可读的细节之间形成强烈对比。布局不对称且流畅，运用大号字体块和充足的留白。关键禁忌：不要使用僵化的网格布局，不要过度使用亮色，不要在标题中使用几何无衬线字体，不要使用标准扁平按钮，不要使用纯黑色背景，不要用不必要的元素使界面显得杂乱。
```