---
version: alpha
name: "Noir"
description: "黑色、骨白色和超大衬线字，作品本身就是唯一的颜色。 Noir 拿掉颜色，让作品自己说话：黑色页面、骨白色文字、超大的 Instrument Serif 用来写名字和项目标题，图片框全部直角。深色模式最出彩，骨白色的浅色模式适合做成像印刷品的案例页。"
colors:
  primary: "#0E0E0E"
  on-primary: "#F4F2EE"
  secondary: "#6E6A63"
  tertiary: "#A39D93"
  neutral: "#5F5C57"
  surface: "#F4F2EE"
  on-surface: "#0E0E0E"
typography:
  display-lg:
    fontFamily: "Instrument Serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: "Instrument Serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Instrument Serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Instrument Serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "Manrope"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 4px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Noir 拿掉颜色，让作品自己说话：黑色页面、骨白色文字、超大的 Instrument Serif 用来写名字和项目标题，图片框全部直角。深色模式最出彩，骨白色的浅色模式适合做成像印刷品的案例页。

## Colors

- **primary (#0E0E0E):** 浅色模式下是黑色，深色模式下是骨白色，用于按钮、链接和当前项目。
- **on-primary (#F4F2EE)**
- **secondary (#6E6A63):** 暖深灰，用于次要文字块和第二组数据。
- **tertiary (#A39D93):** 石灰色，用于图片占位、项目编号和第三组数据。
- **neutral (#5F5C57):** 暖中灰，用于图片说明、署名和年份。
- **surface (#F4F2EE):** 浅色模式是骨白色，卡片纯白；深色模式接近纯黑。
- **on-surface (#0E0E0E)**

## Typography

标题用 Instrument Serif，字重 400，最大 120px，行高 0.9，字距收紧；正文用 Manrope，16px，行高 1.6。12px 小标签字距加宽到 0.08em。

## Layout

12 栏网格，最大宽度 1440px，栏间距只有 16px，间距单位 8px。项目图片放得很大，可以打破网格；文字保持在约 56 个字符的窄栏里。

## Shapes

图片和按钮全部直角（圆角 0）。1px 暖灰细线，不用阴影。

## Components

带年份和角色的项目索引列表、通栏连续大图、带箭头的文字链接按钮，以及只有名字、作品和联系方式的极简页头。

## Do's and Don'ts

- 每页用一个超大衬线标题开场。
- 给项目编号，写清年份、客户和角色。
- 不要加强调色，颜色交给图片。
- 图片框不要加圆角和阴影。