---
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

최대 1440px의 12컬럼 그리드, 좁은 16px 거터, 간격 단위 8px. 프로젝트 이미지는 크게 펼치고 그리드를 벗어나도 됩니다. 텍스트는 56자 폭의 좁은 컬럼에 둡니다.

## Shapes

이미지와 버튼은 직각 모서리(반경 0px). 따뜻한 회색 1px 헤어라인, 그림자 없음.

## Components

연도와 역할이 있는 프로젝트 인덱스 목록, 전폭 이미지 시퀀스, 화살표가 붙은 텍스트 링크 버튼, 이름, 작업, 연락처만 있는 미니멀한 헤더.

## Do's and Don'ts

- 모든 페이지를 거대한 세리프 제목 하나로 시작하세요.
- 프로젝트에 번호를 매기고 연도, 클라이언트, 역할을 적으세요.
- 포인트 색을 더하지 마세요. 색은 이미지가 채워 줍니다.
- 이미지를 둥근 프레임이나 그림자 속에 넣지 마세요.