0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 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。

2026-10-15 21:17:28 +08:00

16 KiB

Raw Blame History

Cohere에서 영감받은 디자인 시스템

Category: AI & LLM 엔터프라이즈 AI 플랫폼. 선명한 그라디언트, 데이터 중심의 대시보드 미학.

1. 비주얼 테마 & 분위기

Cohere의 인터페이스는 세련된 엔터프라이즈 지휘 데크입니다 — 자신감 있고, 깔끔하며, AI를 소비자용 장난감이 아닌 진지한 인프라처럼 느끼게 설계되었습니다. 경험은 밝고 하얀 캔버스 위에 펼쳐지며, 콘텐츠는 22px 반경의 너그럽게 둥근 카드에 정리되어 구름 같은 유기적 포함 언어를 형성합니다. 이 사이트는 CTO와 엔터프라이즈 아키텍트에게 말을 건넵니다: 차갑지 않게 전문적이며, 위압적이지 않게 세련되어 있습니다.

이 디자인 언어는 이중 서체 시스템으로 두 세계를 잇습니다: 촘촘한 자간을 가진 커스텀 디스플레이 세리프인 CohereText는 헤드라인에 기술 선언문 같은 무게감을 부여하고, Unica77 Cohere Web은 본문과 UI 텍스트 전반을 기하학적인 스위스 정밀함으로 처리합니다. 이 세리프/산세리프 조합은 엔터프라이즈 AI 플랫폼을 완벽히 반영하는 "자신 있는 권위와 엔지니어링 명료함의 만남"이라는 개성을 만들어냅니다.

색상은 극도의 절제 속에 사용됩니다 — 인터페이스는 차가운 회색 테두리(#d9d9dd, #e5e7eb)와 함께 거의 전부 흑백입니다. 보라-바이올렛은 사진 히어로 밴드, 그라디언트 섹션, 그리고 호버와 포커스 상태를 나타내는 인터랙티브 블루(#1863dc)에만 등장합니다. 이러한 색채 절제는 색상이 실제로 등장할 때 — 제품 스크린샷, 엔터프라이즈 사진, 짙은 보라 섹션에서 — 최대한의 시각적 무게를 갖게 합니다.

주요 특성:

차가운 회색 포함 테두리를 가진 밝은 흰색 캔버스
22px 시그니처 border-radius — 독보적인 "Cohere 카드" 둥글기
이중 커스텀 서체: CohereText (디스플레이 세리프) + Unica77 (본문 산세리프)
엔터프라이즈급 색채 절제: 검정, 흰색, 차가운 회색, 최소한의 보라-파랑 포인트
극적인 대비를 제공하는 짙은 보라/바이올렛 히어로 섹션
호버 시 파랑으로 전환되는 고스트/투명 버튼
다양한 실세계 응용을 보여주는 엔터프라이즈 사진
대문자 변환을 적용한 코드와 기술 레이블용 CohereMono

2. 색상 팔레트 & 역할

기본색

Cohere Black (#000000): 기본 헤드라인 텍스트와 최대 강조 요소.
Near Black (#212121): 표준 본문 링크 색상 — 순수한 검정보다 약간 부드러움.
Deep Dark (#17171c): 내비게이션과 다크 섹션 텍스트를 위한 파랑 빛이 도는 짙은 검정.

보조색 & 포인트

Interaction Blue (#1863dc): 기본 인터랙티브 포인트 — 버튼 호버, 포커스 상태, 활성 링크에 등장. 유일한 색채 액션 컬러.
Ring Blue (#4c6ee6 at 50%): 키보드 포커스 인디케이터를 위한 Tailwind ring 색상.
Focus Purple (#9b60aa): 입력 포커스 테두리 색상 — 차분한 바이올렛.

서피스 & 배경

Pure White (#ffffff): 기본 페이지 배경 및 카드 서피스.
Snow (#fafafa): 미묘하게 올려진 서피스와 밝은 섹션 배경.
Lightest Gray (#f2f2f2): 카드 테두리와 가장 부드러운 포함선.

중성색 & 텍스트

Muted Slate (#93939f): 강조가 줄어든 푸터 링크와 3차 텍스트 — 약간의 파랑-바이올렛 빛이 도는 차가운 회색.
Border Cool (#d9d9dd): 표준 섹션 및 목록 항목 테두리 — 차갑고 약간 보라 빛이 도는 회색.
Border Light (#e5e7eb): 더 연한 테두리 변형 — Tailwind 표준 gray-200.

그라디언트 시스템

보라-바이올렛 히어로 밴드: 흰색 캔버스에 극적인 대비를 만드는 짙은 보라 그라디언트 섹션. 제품 스크린샷과 핵심 메시지를 담는 전체 너비 밴드로 등장합니다.
다크 푸터 그라디언트: 페이지가 짙은 보라/차콜에서 검정 푸터로 전환되며 "황혼" 효과를 만듭니다.

3. 타이포그래피 규칙

폰트 패밀리

디스플레이: CohereText, 폴백: Space Grotesk, Inter, ui-sans-serif, system-ui
본문 / UI: Unica77 Cohere Web, 폴백: Inter, Arial, ui-sans-serif, system-ui
코드: CohereMono, 폴백: Arial, ui-sans-serif, system-ui
아이콘: CohereIconDefault (커스텀 아이콘 폰트)

위계

역할	폰트	크기	굵기	줄 높이	자간	비고
디스플레이 / 히어로	CohereText	72px (4.5rem)	400	1.00 (좁음)	-1.44px	최대 임팩트, 세리프 권위감
디스플레이 보조	CohereText	60px (3.75rem)	400	1.00 (좁음)	-1.2px	대형 섹션 헤딩
섹션 헤딩	Unica77	48px (3rem)	400	1.20 (좁음)	-0.48px	피처 섹션 제목
서브 헤딩	Unica77	32px (2rem)	400	1.20 (좁음)	-0.32px	카드 헤딩, 피처명
피처 제목	Unica77	24px (1.5rem)	400	1.30	normal	소형 섹션 제목
본문 대	Unica77	18px (1.13rem)	400	1.40	normal	인트로 단락
본문 / 버튼	Unica77	16px (1rem)	400	1.50	normal	표준 본문, 버튼 텍스트
버튼 중	Unica77	14px (0.88rem)	500	1.71 (여유)	normal	소형 버튼, 강조 레이블
캡션	Unica77	14px (0.88rem)	400	1.40	normal	메타데이터, 설명
대문자 레이블	Unica77 / CohereMono	14px (0.88rem)	400	1.40	0.28px	대문자 섹션 레이블
소형	Unica77	12px (0.75rem)	400	1.40	normal	최소 텍스트, 푸터 링크
코드 마이크로	CohereMono	8px (0.5rem)	400	1.40	0.16px	작은 대문자 코드 레이블

원칙

선언은 세리프, 기능은 산세리프: CohereText는 디스플레이 규모에서 브랜드 목소리를 담습니다 — 세리프 말단이 헤드라인에 발표된 연구물 같은 권위를 부여합니다. Unica77은 스위스 기하학적 중립성으로 기능적인 모든 것을 처리합니다.
스케일에서의 네거티브 자간: CohereText는 60–72px에서 -1.2px ~ -1.44px 자간을 사용해 밀도 있고 임팩트 있는 텍스트 블록을 만듭니다.
단일 본문 굵기: 거의 모든 Unica77 사용은 굵기 400입니다. 굵기 500은 소형 버튼 강조에만 등장합니다. 시스템은 굵기 대비 대신 크기와 여백에 의존합니다.
대문자 코드 레이블: CohereMono는 기술 태그와 섹션 마커에 양수 자간(0.16–0.28px)과 함께 대문자를 사용합니다.

4. 컴포넌트 스타일링

버튼

고스트 / 투명

배경: transparent (rgba(255, 255, 255, 0))
텍스트: Cohere Black (#000000)
테두리 없음
호버: 텍스트가 Interaction Blue (#1863dc)로 변하며 opacity 0.8
포커스: Interaction Blue로 solid 2px outline
기본 버튼 스타일 — 상호작용 전까지 보이지 않음

다크 솔리드

배경: 다크/검정
텍스트: Pure White
밝은 서피스의 CTA용
필 모양 또는 표준 반경

아웃라인

테두리 기반 포함
보조 액션에 사용

카드 & 컨테이너

배경: Pure White (#ffffff)
테두리: 미묘한 카드에는 얇은 솔리드 Lightest Gray (1px solid #f2f2f2); 강조된 카드에는 Cool Border (#d9d9dd)
반경: 22px — 기본 카드, 이미지, 다이얼로그 컨테이너를 위한 시그니처 Cohere 반경. 소형 요소에는 4px, 8px, 16px, 20px도 사용
그림자: 최소 — Cohere는 그림자 대신 배경색과 테두리에 의존
특수: 섹션 컨테이너를 위한 0px 0px 22px 22px 반경 (하단만 둥글게)
다이얼로그: 모달/다이얼로그 박스에 8px 반경

입력 & 폼

텍스트: 다크 입력에는 흰색, 밝은 입력에는 검정
포커스 테두리: Focus Purple (#9b60aa)과 1px solid
포커스 그림자: 빨간 ring (rgb(179, 0, 0) 0px 0px 0px 2px) — 오류 상태 표시용으로 추정
포커스 아웃라인: Interaction Blue solid 2px

이미지 처리

다양한 피사체와 환경의 엔터프라이즈 사진
드라마틱한 섹션을 위한 보라 빛이 도는 히어로 사진
다크 서피스 위의 제품 UI 스크린샷
카드 시스템과 맞추는 22px 반경의 이미지
전체 너비 보라 그라디언트 섹션

독특한 컴포넌트

22px 카드 시스템

22px border-radius는 Cohere의 시각적 시그니처
모든 기본 카드, 이미지, 컨테이너에 이 반경 사용
일반적인 8–12px와 구별되는 구름 같은 유기적 부드러움 형성

엔터프라이즈 신뢰 바

회사 로고가 수평 띠로 표시됨
엔터프라이즈 채택을 입증
깔끔하고 단색 로고 처리

보라 히어로 밴드

제품 쇼케이스를 담은 전체 너비 짙은 보라 섹션
흰색 페이지 흐름에서 극적인 시각적 분절 형성
제품 스크린샷이 보라 환경 안에 떠 있는 구성

대문자 코드 태그

자간을 적용한 대문자 CohereMono
섹션 마커 및 분류 레이블로 사용
기술적이고 구조적인 정보 위계 형성

5. 레이아웃 원칙

여백 시스템

기본 단위: 8px
스케일: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
버튼 패딩은 변형에 따라 다름
카드 내부 패딩: 약 24–32px
섹션 수직 여백: 넉넉함 (섹션 간 56–60px)

그리드 & 컨테이너

최대 컨테이너 너비: 반응형 스케일링과 함께 최대 2560px (매우 넓음)
히어로: 드라마틱한 타이포그래피와 함께 중앙 정렬
피처 섹션: 다열 카드 그리드
엔터프라이즈 섹션: 전체 너비 보라 밴드
26개 브레이크포인트 감지 — 극도로 세분화된 반응형 시스템

여백 철학

엔터프라이즈 명료함: 각 섹션은 섹션 사이에 숨쉴 공간과 함께 하나의 명확한 제안을 제시합니다.
사진을 히어로로: 대형 사진 섹션이 장식적 디자인 요소 없이 시각적 흥미를 제공합니다.
카드 그룹화: 관련 콘텐츠는 22px 둥근 카드에 그룹화되어 자연스러운 정보 클러스터를 형성합니다.

Border Radius 스케일

날카로움 (4px): 내비게이션 요소, 소형 태그, 페이지네이션
편안함 (8px): 다이얼로그 박스, 보조 컨테이너, 소형 카드
너그러움 (16px): 피처 컨테이너, 중형 카드
대형 (20px): 대형 피처 카드
시그니처 (22px): 기본 카드, 히어로 이미지, 메인 컨테이너 — THE Cohere 반경
필 (9999px): 버튼, 태그, 상태 인디케이터

6. 깊이 & 고도

레벨	처리	용도
평면 (레벨 0)	그림자 없음, 테두리 없음	페이지 배경, 텍스트 블록
테두리 (레벨 1)	`1px solid #f2f2f2` 또는 `#d9d9dd`	표준 카드, 목록 구분선
보라 밴드 (레벨 2)	전체 너비 짙은 보라 배경	히어로 섹션, 피처 쇼케이스

그림자 철학: Cohere는 거의 그림자가 없습니다. 깊이는 배경색 대비(보라 밴드 위 흰색 카드, Snow 위 흰색 서피스), 테두리 포함(차가운 회색 테두리), 그리고 극적인 밝음-어두움 섹션 교체를 통해 전달됩니다. 요소에 고도가 필요할 때, 그림자 투영 대신 어두운 배경 위의 흰색으로 고도를 표현합니다.

7. 해야 할 것과 하지 말아야 할 것

해야 할 것

모든 기본 카드와 컨테이너에 22px border-radius 사용 — 시각적 시그니처입니다
네거티브 자간을 적용한 CohereText를 디스플레이 헤딩(72px, 60px)에 사용
모든 본문과 UI 텍스트에 굵기 400의 Unica77 사용
팔레트를 차가운 회색 테두리의 흑백으로 유지
Interaction Blue (#1863dc)는 호버/포커스 인터랙티브 상태에만 사용
극적인 시각적 분절과 제품 쇼케이스에 짙은 보라 섹션 사용
섹션 레이블에 CohereMono 대문자 + 자간 적용
다양한 피사체의 엔터프라이즈 적합 사진 유지

하지 말아야 할 것

기본 카드에 22px 이외의 border-radius 사용 금지 — 시그니처 반경이 중요합니다
따뜻한 색상 도입 금지 — 팔레트는 엄격하게 차가운 톤입니다
무거운 그림자 사용 금지 — 깊이는 색상 대비와 테두리에서 옵니다
본문 텍스트에 굵은(700+) 굵기 사용 금지 — 400–500이 범위입니다
세리프/산세리프 위계 생략 금지 — 헤드라인은 CohereText, 본문은 Unica77
카드 서피스 색으로 보라 사용 금지 — 보라는 전체 너비 섹션에만 예약됩니다
섹션 여백을 40px 이하로 줄이지 말 것 — 엔터프라이즈 레이아웃에는 숨쉴 공간이 필요합니다
기본 버튼에 장식 추가 금지 — 고스트/투명이 기본 상태입니다

8. 반응형 동작

브레이크포인트

이름	너비	주요 변경사항
소형 모바일	<425px	컴팩트 레이아웃, 최소 여백
모바일	425–640px	단일 열, 적층 카드
대형 모바일	640–768px	소폭 여백 조정
태블릿	768–1024px	2열 그리드 시작
데스크톱	1024–1440px	전체 다열 레이아웃
대형 데스크톱	1440–2560px	최대 컨테이너 너비

26개 브레이크포인트 감지 — 데이터셋에서 가장 세분화된 반응형 사이트 중 하나.

터치 타겟

터치 인터랙션에 충분한 크기의 버튼
편안한 간격의 내비게이션 링크
터치 타겟으로서의 카드 서피스

축소 전략

내비게이션: 전체 내비가 햄버거로 축소
피처 그리드: 다열 → 2열 → 단일 열
히어로 텍스트: 72px → 48px → 32px 점진적 스케일링
보라 섹션: 전체 너비 유지, 콘텐츠 적층
카드 그리드: 3 → 2 → 1열

이미지 동작

22px 반경 컨테이너 안에서 비례적으로 확장되는 사진
가로세로 비율을 유지하는 제품 스크린샷
배경을 비례적으로 확장하는 보라 섹션

9. 에이전트 프롬프트 가이드

빠른 색상 참조

기본 텍스트: "Cohere Black (#000000)"
페이지 배경: "Pure White (#ffffff)"
보조 텍스트: "Near Black (#212121)"
호버 포인트: "Interaction Blue (#1863dc)"
흐릿한 텍스트: "Muted Slate (#93939f)"
카드 테두리: "Lightest Gray (#f2f2f2)"
섹션 테두리: "Border Cool (#d9d9dd)"

컴포넌트 프롬프트 예시

"Pure White (#ffffff) 위에 CohereText 72px 굵기 400, line-height 1.0, letter-spacing -1.44px로 히어로 섹션을 만드세요. Cohere Black 텍스트. 서브타이틀은 Unica77 18px 굵기 400, line-height 1.4."
"22px border-radius, Pure White 위에 1px solid Lightest Gray (#f2f2f2) 테두리로 피처 카드를 디자인하세요. 제목은 Unica77 32px, letter-spacing -0.32px. 본문은 Unica77 16px, Muted Slate (#93939f)."
"고스트 버튼을 만드세요: 투명 배경, Unica77 16px의 Cohere Black 텍스트. 호버 시 텍스트가 opacity 0.8의 Interaction Blue (#1863dc)로 바뀝니다. 포커스: 2px solid Interaction Blue 아웃라인."
"흰색 텍스트의 짙은 보라 전체 너비 섹션을 만드세요. 헤딩에는 CohereText 60px. 제품 스크린샷이 22px border-radius를 사용해 안에 떠 있습니다."
"CohereMono 14px, 대문자, letter-spacing 0.28px로 섹션 레이블을 디자인하세요. Muted Slate (#93939f) 텍스트."

반복 가이드

한 번에 하나의 컴포넌트에 집중하세요
기본 카드에는 항상 22px 반경을 사용하세요 — "Cohere 카드 둥글기"입니다
서체를 명시하세요 — 헤드라인은 CohereText, 본문은 Unica77, 레이블은 CohereMono
인터랙티브 요소는 호버 시에만 Interaction Blue (#1863dc) 사용
서피스는 차가운 회색 테두리의 흰색으로 유지 — 따뜻한 톤 없음
보라는 전체 너비 섹션용, 카드 배경에는 절대 사용하지 않음

16 KiB Raw Blame History Unescape Escape