---
name: "Cydstumpel Nl"
description: "一个杰出的开发者风格作品集范例，成功融合大胆排版与趣味性编辑式布局原则。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#FFF5EE"
  primary: "#111111"
  tertiary: "#D9533F"
  neutral: "#111111"
  line: "rgba(17,17,17,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.8px"
  heading:
    fontFamily: transitional-serif
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.48px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "-0.48px"

rounded:
  sm: 4px
  md: 8px
  lg: 28px
  pill: 120px

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

---

## Overview

面向创意开发者与演讲者的、大胆而富有表现力的作品集网站。

*一个充满趣味与魄力的创意开发者作品集展示。*

## Colors

温暖米白色背景搭配大胆黑色与高饱和度红色点缀色，并辅以内容卡片的次要调色板。

- **Background (`#FFF5EE`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Accent (`#D9533F`)** — uses `accent` token
- **Muted (`#111111`)** — uses `muted` token
- **Borders (`rgba(17,17,17,1.0)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** transitional-serif
- **Mono:** grotesque-sans

## Layout

非对称的编辑式布局，包含大面积重叠走马灯与三列卡片网格。

*Rhythm:* 基于4px的一致节奏，卡片布局采用宽松间距。

## Elevation & Depth

- None: None
- None: None
- Borders: 卡片采用醒目的2px实线边框，使用点缀色红、蓝及黑色。

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 28px
- `pill`: 120px

## Components

- **button:** 大胆的全大写文本按钮，常具独特border-radius与hover效果。
- **card:** 具厚实彩色边框、折叠角细节及药丸形标签的卡片。
- **chip:** 用于CSS、JS、ANIMATION等标签的圆角小药丸。
- **input:** 在提供的截图中未清晰可见。
- **hero:** 大型水平滚动走马灯，含重叠文本与中央插图。

## Do's and Don'ts

**Don't:**
- 勿使用扁平企业风布局——截图展示的是具有重叠编辑风格与大型走马灯的表现力布局。
- 勿使用冷色调色板——截图展示的是带有大胆红色点缀的温暖米白色背景。
- 勿使用标准系统字体——截图展示的是粗体condensed无衬线与优雅过渡衬线字体的组合。
- 勿使用1px细边框——截图展示的是卡片与容器上醒目的2px实线边框。
- 勿对所有元素使用微妙、柔和的颜色——截图使用高饱和度红色作为主导点缀色。
- 勿使用纯网格化、对称的布局——截图展示的是元素重叠、非对称的排列方式。

---

## System Prompt (paste into AI agent)

```
这是一个面向创意开发者与会议演讲者的、大胆而富有表现力的作品集网站。其特点是温暖的米白色背景（#FFF5EE）搭配主导性高饱和度红色点缀（#D9533F）与墨黑色（#111111）。排版结合了用于展示文本的粗体condensed无衬线字体与用于正文及斜体点缀的过渡衬线字体。布局为非对称编辑式，以大型水平滚动走马灯为亮点。关键禁忌：避免扁平企业布局，避免冷色调色板，避免使用细微边框。网站在其卡片组件上使用醒目的2px实线边框，这些卡片还带有折叠角细节。
```