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

7.9 KiB

Raw Blame History

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

Category: 생산성 & SaaS 언어 학습 플랫폼. 밝은 올빼미 그린, 굵직한 그림자, 게임화된 즐거움.

1. 비주얼 테마와 분위기

Duolingo는 시각 언어로 표현된 게임화 디자인입니다. 인터페이스는 거리낌 없이 밝으며, 올빼미 그린(#58cc02)을 브랜드 프라이머리로 사용하고 모든 인터랙티브 요소 하단에 4px의 굵직한 그림자를 두어 눌리기를 기다리는 3D 버튼처럼 보입니다. 페이지는 흰색(#ffffff)이며 2–3px의 굵은 테두리는 진한 회색(#e5e5e5)으로, 전체 시스템은 더 나은 계층 구조로 재탄생한 2015년 iOS 앱처럼 읽힙니다.

타이포그래피는 크롬에 Feather Bold(커스텀 둥근 산세리프), 본문에 Mona Sans(또는 Inter)를 사용합니다. 디스플레이 크기는 크고 자신감 넘치며——Duolingo는 절대 속삭이지 않습니다. 제목에는 종종 초록색 밑줄 획이 있거나 초록색 필 위에 올라가며, 마스코트 Duo(초록색 올빼미)는 정적인 로고가 아닌 활동적인 일러스트 캐릭터로 등장합니다.

형태 언어는 친근합니다: 카드에 16–20px 반지름, 버튼에 12px, 칩과 프로그레스 바에 9999px. 아이코노그래피는 채워진 형태의 둥근 스타일이며 스킬별로 색상이 코딩되어——모든 레슨 화면에는 즉시 식별 가능한 색상 쌍이 있습니다.

주요 특징:

올빼미 그린(#58cc02)이 지배적인 브랜드 컬러로 서페이스의 30% 이상 사용
모든 버튼에 4px 굵직한 바텀 그림자("촉각적 누름" 어포던스)
2–3px 솔리드 테두리, 헤어라인은 절대 사용 안 함
Feather Bold(둥근 디스플레이) + Mona Sans(본문)
크고 자신감 넘치는 텍스트——디스플레이 크기는 48px에서 시작해 올라감
마스코트=캐릭터: Duo 올빼미가 온보딩, 오류, 스트릭에 등장
스트릭 오렌지(#ff9600)와 젬 핑크(#ce82ff)가 세컨더리 브랜드 컬러

2. 컬러 팔레트와 역할

프라이머리

올빼미 그린(#58cc02): 브랜드 프라이머리, 주요 CTA, 정답.
올빼미 그린 딥(#58a700): 초록 버튼의 누름/그림자 색상.
올빼미 그린 라이트(#89e219): 호버, 소프트 필.
올빼미 그린 페일(#dbf8c5): 소프트 서페이스, 성공 배너.

세컨더리 악센트

스트릭 오렌지(#ff9600): 스트릭 카운터, 불꽃 아이콘, 프리미엄 에너지.
스트릭 오렌지 딥(#cc7a00): 오렌지 눌림 상태.
젬 핑크(#ce82ff): 젬 화폐, Super Duolingo.
장어 블루(#1cb0f6): 힌트 버튼, 정보 링크.
카디널 레드(#ff4b4b): 오답, 목숨 소실.
비 옐로우(#ffc800): 프로 배지, 업적.

서페이스

스노우(#ffffff): 프라이머리 배경.
장어(#f7f7f7): 섹션 구분, 세컨더리 서페이스.
스완(#e5e5e5): 비활성화 배경, 인셋 블록.
울프(#777777): 다크 구분선, 세컨더리 텍스트.

잉크 & 텍스트

장어 블랙(#3c3c3c): 프라이머리 텍스트.
울프(#777777): 세컨더리 텍스트, 캡션.
헤어(#afafaf): 비활성화, 플레이스홀더.

테두리

스완(#e5e5e5): 표준 2px 테두리.
헤어(#afafaf): 호버 시 강조 테두리.

3. 타이포그래피 규칙

폰트 패밀리

디스플레이 / UI / 제목: Feather Bold, 폴백: 'DIN Round Pro', 'Helvetica Neue', sans-serif
본문 / 장문: Mona Sans, 폴백: 'Helvetica Neue', system-ui, sans-serif
코드 (드물게, 학교/관리): JetBrains Mono, 폴백: ui-monospace, Menlo, monospace

계층 구조

역할	폰트	크기	굵기	줄간격	자간	비고
디스플레이	Feather Bold	56px (3.5rem)	800	1.05	-0.01em	온보딩 히어로
H1	Feather Bold	32px (2rem)	800	1.15	-0.005em	페이지 제목
H2	Feather Bold	24px (1.5rem)	800	1.2	normal	섹션 제목
H3	Feather Bold	18px (1.125rem)	700	1.25	normal	카드 제목, 레슨 행
본문 라지	Mona Sans	17px (1.0625rem)	500	1.5	normal	레슨 프롬프트, 안내
본문	Mona Sans	15px (0.9375rem)	400	1.5	normal	표준 산문
캡션	Mona Sans	13px (0.8125rem)	600	1.4	0.01em	XP 카운터, 메타데이터
버튼	Feather Bold	16px (1rem)	800	1.2	0.02em	표준 버튼 레이블
스트릭	Feather Bold	14px (0.875rem)	800	1.2	normal	스트릭 숫자, 불꽃 위

원칙

800이 기본값: Feather Bold는 제목과 버튼에서 800으로 실행됩니다. 이 시스템에서 700은 약하게 보입니다.
큰 타입: 제목 크기가 일반적인 제품 브랜드보다 25–40% 더 크며——자신감이 곧 정체성입니다.
둥근 글자꼴: 모든 글리프에 부드러운 끝부분이 있습니다. 날카로운 세리프는 친근함의 계약을 깨뜨립니다.

4. 컴포넌트 스타일링

버튼

프라이머리 (올빼미 그린)

배경: #58cc02
텍스트: #ffffff
패딩: 14px 24px
반지름: 16px
바텀 테두리: 4px solid #58a700 (굵직한 그림자)
호버: 배경 #89e219
액티브: translate-y 4px, 바텀 테두리 0 (버튼 "눌림")
사용: "계속", "확인", 메인 CTA.

세컨더리 (바텀 그림자가 있는 흰색)

배경: #ffffff
텍스트: #777777
테두리: 2px solid #e5e5e5
바텀 테두리: 4px solid #e5e5e5
반지름: 16px
패딩: 14px 24px
호버: 텍스트 #3c3c3c, 테두리 #afafaf

스트릭 오렌지

배경: #ff9600
텍스트: #ffffff
바텀 테두리: 4px solid #cc7a00
사용: 스트릭 목표, "스트릭 시작"

에러 (카디널 레드)

배경: #ff4b4b
텍스트: #ffffff
바텀 테두리: 4px solid #cc3b3b
사용: 오답 피드백.

카드 / 레슨 타일

배경: #ffffff
테두리: 2px solid #e5e5e5
바텀 테두리: 4px solid #e5e5e5
반지름: 16px
패딩: 16px
호버: 2px 상승, 그림자 0 4px 0 #d7d7d7

스킬 트리 노드 (레슨 버블)

크기: 80×72px
배경: 스킬 색상 tint (활성화는 초록, 잠김은 회색)
바텀 테두리: 6px solid 더 어두운 변형
반지름: 50% (원형)
활성화: 1.6s마다 1.0 → 1.05 펄스

입력

배경: #ffffff
테두리: 2px solid #e5e5e5
반지름: 12px
패딩: 12px 16px
포커스: 테두리 #1cb0f6 (장어 블루), 링 0 0 0 3px rgba(28, 176, 246, 0.2)

프로그레스 바

트랙: #e5e5e5
필: #58cc02 (또는 스트릭 시 #ff9600)
반지름: 9999px
높이: 16px
애니메이션 필: 증가 시 320ms ease-out.

5. 간격 & 레이아웃

기본 단위: 4px. 스케일: 4, 8, 12, 16, 24, 32, 48, 64.
컨테이너: 최대 1080px, 24px 거터.
레슨 트리 열: 너비 320px; 데스크톱에서 중앙 정렬.

6. 모션

지속시간: 버튼 누름 180ms; 스킬 노드 잠금 해제 320ms; 활성 노드 펄스 1.6s.
이징: cubic-bezier(0.34, 1.56, 0.64, 1) (백아웃, 약간의 오버슈트) 잠금 해제용.
마스코트: Duo는 4–6s마다 눈을 깜빡이고, 스트릭 마일스톤에서 점프 (480ms ease-out 스프링).

7. 사용 가이드라인

고채도 올빼미 그린, 굵직한 바텀 그림자, 둥근 레슨 기하학적 요소를 함께 유지하세요. 평평한 초록 버튼 단독으로는 Duolingo처럼 읽히지 않습니다.
특대형 볼드 타입은 제품이 격려나 피드백이 필요한 레슨, 스트릭, 진행 상황 순간을 위해 아껴두세요.
플레이풀한 모션은 진행 상태 변화 주변에 절제하여 사용하고, 모든 컨트롤에 일반적인 바운시 애니메이션을 사용하는 것은 피하세요.

7.9 KiB Raw Blame History Unescape Escape