admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
147 lines
8.1 KiB
Markdown
147 lines
8.1 KiB
Markdown
# OpenAI에서 영감을 받은 디자인 시스템
|
||
|
||
> Category: AI & LLM
|
||
> 깊은 청록빛 블랙을 기반으로 넉넉한 여백과 에디토리얼 타이포그래피를 갖춘 차분하고 거의 무채색에 가까운 시스템.
|
||
|
||
## 1. 비주얼 테마 & 분위기
|
||
|
||
OpenAI의 제품 표면은 대중을 위해 차려입은 연구소처럼 읽힌다 — 임상적이고, 절제되어 있으며, 의도적으로 조용하다. 페이지 배경은 순백(`#ffffff`)이며, 미묘한 청록 기조를 띤 거의 검정에 가까운 잉크색(`#0d0d0d`)과 겹쳐져, 텍스트조차 공격적으로 어둡기보다는 약간 차갑게 느껴진다. 그 결과, 그 주변 크롬이 아닌 모델 출력물, 코드, 산문이 전면에 드러나는 색채적 중립성이 만들어진다.
|
||
|
||
이 시스템의 시그니처는 절제된 웨이트의 **Söhne**(또는 시스템 대체폰트 `inter`) 사용이다 — 본문에는 400, 내비게이션과 레이블에는 500, 강조에는 600 — 이것이 에디토리얼 디스플레이용 현대적 세리프 서체인 **Signifier**와 짝을 이룬다. 대부분의 AI 브랜드가 미래지향적 느낌에 기댈 때, OpenAI의 세리프 헤드라인은 제품에 조용하고 문학적인 톤을 부여한다. 마치 모든 발표가 하나의 에세이인 것처럼.
|
||
|
||
형태 시스템은 균일하게 부드럽다: 8px–12px 라디우스, 태그와 칩에는 9999px 필 형태, 날카로운 모서리는 어디에도 없다. 섹션 간 전환은 구분선 대신 여백으로 표현되며, 테두리가 등장할 때는 색의 존재라기보다 색의 부재처럼 읽히는 `#e5e5e5` 헤어라인 형태다.
|
||
|
||
**주요 특성:**
|
||
- 순백 캔버스(`#ffffff`)와 깊은 청록빛 블랙 잉크색(`#0d0d0d`)
|
||
- Söhne / Inter, 절제된 웨이트(400, 500, 600) — 주장보다는 절제
|
||
- 에디토리얼 디스플레이 헤드라인에는 Signifier 세리프
|
||
- 전체에 걸쳐 부드러운 8–12px 라디우스; 칩에는 9999px 필
|
||
- 헤어라인 테두리(`#e5e5e5`)는 최소한으로; 여백이 주된 구분선
|
||
- 깊은 청록색의 단색 일러스트레이션 — 마크에는 그라디언트 없음
|
||
- 넉넉한 행간(1.55–1.65)과 거의 0에 가까운 자간
|
||
|
||
## 2. 색상 팔레트 & 역할
|
||
|
||
### 주요 색상
|
||
- **순백(Pure White)** (`#ffffff`): 주요 배경, 카드 표면, 버튼 배경.
|
||
- **잉크 블랙(Ink Black)** (`#0d0d0d`): 주요 텍스트, 브랜드 마크, 주요 CTA.
|
||
- **소프트 블랙(Soft Black)** (`#1a1a1a`): 보조 제목, 중요도가 낮은 텍스트용 대체 잉크색.
|
||
|
||
### 표면 & 배경
|
||
- **미스트(Mist)** (`#fafafa`): 섹션 구분 배경, 푸터 표면.
|
||
- **펄(Pearl)** (`#f5f5f5`): 카드 표면, 올라온 패널.
|
||
- **클라우드(Cloud)** (`#ececec`): 비활성 배경, 구분선 틴트.
|
||
|
||
### 브랜드 강조색
|
||
- **OpenAI 청록(OpenAI Teal)** (`#10a37f`): 브랜드 주색, 링크, 하이라이트 배지 — 그 외 중립적인 시스템에서 유일한 색상.
|
||
- **딥 청록(Teal Deep)** (`#0a7a5e`): 브랜드 색상의 호버 및 누름 상태.
|
||
- **소프트 청록(Teal Soft)** (`#e8f5f0`): 성공 배지, 하이라이트 콜아웃을 위한 표면 틴트.
|
||
|
||
### 중립색 & 텍스트
|
||
- **그래파이트(Graphite)** (`#3c3c3c`): 본문 텍스트, 기본 읽기 색상.
|
||
- **슬레이트(Slate)** (`#6e6e6e`): 보조 텍스트, 캡션, 메타데이터.
|
||
- **애시(Ash)** (`#9b9b9b`): 3차 텍스트, 플레이스홀더, 비활성 레이블.
|
||
- **스톤(Stone)** (`#c4c4c4`): 장식용 구분선, 희미한 아이콘.
|
||
|
||
### 의미적 색상 & 테두리
|
||
- **테두리 헤어라인(Border Hairline)** (`#e5e5e5`): 표준 헤어라인 구분선.
|
||
- **테두리 소프트(Border Soft)** (`#ededed`): 흰색 표면 위 카드 외곽선.
|
||
- **오류(Error)** (`#ef4146`): 유효성 검사, 파괴적 동작.
|
||
- **경고(Warning)** (`#f5a623`): 안내 상태를 위한 소프트 앰버색.
|
||
- **정보(Info)** (`#2563eb`): 정보성 링크 톤(최소한으로 사용; 청록이 여전히 우선).
|
||
|
||
## 3. 타이포그래피 규칙
|
||
|
||
### 폰트 패밀리
|
||
- **디스플레이 / 에디토리얼**: `Signifier`, 폴백: `'Source Serif Pro', Georgia, serif`
|
||
- **본문 / UI**: `Söhne`, 폴백: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`
|
||
- **코드 / 모노**: `Söhne Mono`, 폴백: `ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace`
|
||
|
||
### 계층 구조
|
||
|
||
| 역할 | 폰트 | 크기 | 굵기 | 행간 | 자간 | 비고 |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| 디스플레이 | Signifier | 56px (3.5rem) | 400 | 1.08 | -0.02em | 에디토리얼 히어로, 발표 제목 |
|
||
| H1 | Söhne | 40px (2.5rem) | 600 | 1.15 | -0.01em | 페이지 제목 |
|
||
| H2 | Söhne | 28px (1.75rem) | 600 | 1.2 | -0.005em | 섹션 제목 |
|
||
| H3 | Söhne | 20px (1.25rem) | 600 | 1.3 | normal | 소섹션 |
|
||
| 본문 대형 | Söhne | 18px (1.125rem) | 400 | 1.6 | normal | 리드 단락 |
|
||
| 본문 | Söhne | 16px (1rem) | 400 | 1.65 | normal | 표준 본문 텍스트 |
|
||
| 본문 소형 | Söhne | 14px (0.875rem) | 400 | 1.55 | normal | 카드 본문, 밀집 UI |
|
||
| 캡션 | Söhne | 13px (0.8125rem) | 500 | 1.4 | 0.01em | 메타데이터, 배지 |
|
||
| 레이블 | Söhne | 12px (0.75rem) | 500 | 1.3 | 0.04em | 아이브로우, 대문자 내비게이션 링크 |
|
||
| 코드 | Söhne Mono | 14px (0.875rem) | 400 | 1.55 | normal | 코드 블록, 터미널 출력 |
|
||
|
||
### 원칙
|
||
- **정체성으로서의 절제**: 굵기는 최대 600; 700 이상은 브랜드에 맞지 않는 느낌을 준다. 계층은 굵기가 아닌 크기와 색상으로 만들어진다.
|
||
- **세리프는 영혼을 위해, 산세리프는 시스템을 위해**: Signifier는 에디토리얼 디스플레이 순간에만 등장한다. 제품 UI는 산세리프 전용이다.
|
||
- **디스플레이에는 음수 자간**: 디스플레이 크기에서 -0.02em; 자간은 16px에서 0으로 돌아온다.
|
||
|
||
## 4. 컴포넌트 스타일링
|
||
|
||
### 버튼
|
||
|
||
**주요(Primary)**
|
||
- 배경: `#0d0d0d`
|
||
- 텍스트: `#ffffff`
|
||
- 패딩: 10px 18px
|
||
- 라디우스: 칩에는 9999px(완전 필), 직사각형 CTA에는 12px
|
||
- 호버: `#1a1a1a` 배경
|
||
- 사용처: 주요 CTA, "Try ChatGPT", "Sign in"
|
||
|
||
**보조(Secondary)**
|
||
- 배경: `#ffffff`
|
||
- 텍스트: `#0d0d0d`
|
||
- 테두리: 1px solid `#e5e5e5`
|
||
- 패딩: 10px 18px
|
||
- 라디우스: 12px
|
||
- 호버: 배경 `#fafafa`, 테두리 `#d4d4d4`
|
||
|
||
**브랜드 강조(Brand Accent)**
|
||
- 배경: `#10a37f`
|
||
- 텍스트: `#ffffff`
|
||
- 패딩: 10px 18px
|
||
- 라디우스: 12px
|
||
- 호버: `#0a7a5e`
|
||
- 사용처: 강조된 업그레이드 CTA, 성공 경로
|
||
|
||
### 카드
|
||
- 배경: `#ffffff`
|
||
- 테두리: 1px solid `#ededed`
|
||
- 라디우스: 16px
|
||
- 패딩: 24px–32px
|
||
- 그림자: 기본적으로 없음; 호버 시 `0 4px 16px rgba(13,13,13,0.06)`
|
||
|
||
### 인풋
|
||
- 배경: `#ffffff`
|
||
- 테두리: 1px solid `#e5e5e5`
|
||
- 라디우스: 12px
|
||
- 패딩: 12px 14px
|
||
- 포커스: 테두리 `#10a37f`, 링 `0 0 0 3px rgba(16,163,127,0.12)`
|
||
|
||
### 필 & 태그
|
||
- 배경: `#f5f5f5`
|
||
- 텍스트: `#3c3c3c`
|
||
- 패딩: 4px 10px
|
||
- 라디우스: 9999px
|
||
- 폰트: 12px / 500
|
||
|
||
## 5. 간격 & 레이아웃
|
||
|
||
- **기본 단위**: 4px. 스케일: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
|
||
- **컨테이너**: 최대 너비 1200px, 모바일 24px 거터, 데스크탑 48px.
|
||
- **섹션 리듬**: 주요 섹션 사이 세로 96–128px; 모바일에서는 64px.
|
||
- **그리드**: 데스크탑 12열, 모바일 4열, 24px 간격.
|
||
|
||
## 6. 모션
|
||
|
||
- **지속 시간**: 호버에 150–220ms; 레이아웃 전환에 280–360ms.
|
||
- **이징**: 진입 시 `cubic-bezier(0.16, 1, 0.3, 1)` (부드러운 감속).
|
||
- **절제**: 패럴랙스 없음, 스크롤 재킹 없음. 미묘한 페이드와 트랜슬레이트만 사용.
|
||
|
||
## 7. 사용 가이드라인
|
||
|
||
- 중립적인 에디토리얼 절제감, 부드러운 라디우스, 희소한 강조색 사용을 함께 유지할 것; 녹색 강조색만으로는 OpenAI다운 표면이 만들어지지 않는다.
|
||
- Signifier 스타일의 디스플레이 순간은 에디토리얼 또는 발표 계층에만 사용하고, 제품 컨트롤은 산세리프 시스템을 유지할 것.
|
||
- 장식적인 모션, 무거운 그림자, 지나치게 큰 장식용 카드를 피할 것; 시스템은 차분하고, 읽기 쉬우며, 의도적으로 느껴져야 한다.
|