90 lines
6.0 KiB
Markdown
90 lines
6.0 KiB
Markdown
# DESIGN.md (generated)
|
|
|
|
> Adapter generated from `org-os/08-design`. Do not edit. This is not a product-strategy, IA, or wireframe source.
|
|
|
|
## Taste thesis
|
|
|
|
절제된 구조, 명확한 정보 향기, 높은 상태 가시성으로 신뢰를 만든다.
|
|
|
|
## Principles
|
|
|
|
- **Task before decoration** — 핵심 작업과 정보 위계를 먼저 증명하고 장식은 그 이후에 추가한다. Anti-example: 색·그림자·타이포만 바꾼 채 흐름과 IA 결함을 숨긴다.
|
|
- **Evidence before taste** — 표준 관행과 차별화는 named competitive evidence 및 실제 캡처에 연결한다. Anti-example: modern, clean 같은 형용사만으로 시장 적합성을 주장한다.
|
|
- **States are the product** — default/loading/empty/error/partial/completed 상태를 기본 화면과 동등하게 설계한다. Anti-example: happy path 스크린샷 하나를 완성된 경험으로 간주한다.
|
|
- **Responsive priority, not shrinkage** — 모바일은 축소판이 아니라 우선순위와 탐색 모델을 재표현한다. Anti-example: 데스크톱 그리드를 단순 축소해 정보와 액션을 잘라낸다.
|
|
- **Accessible by construction** — 의미 구조·키보드·포커스·대비·동작 감소를 토큰과 recipe 단계에서 강제한다. Anti-example: 최종 검수에서 ARIA만 덧붙인다.
|
|
|
|
## Preferred signals
|
|
|
|
- 크기보다 간격·정렬·그룹화로 위계를 먼저 만든다.
|
|
- 작업 빈도와 판단 복잡도에 맞춰 밀도를 의도적으로 선택한다.
|
|
- 한 화면의 지배적 액션은 하나이며 보조 액션은 명확히 후퇴한다.
|
|
- 진행·저장·오류·부분 완료를 사용자가 추론하지 않게 표시한다.
|
|
|
|
## Anti-signals
|
|
|
|
- 무근거 hero gradient와 과도한 glassmorphism
|
|
- 동일 카드 셸을 반복하고 색만 바꾼 방향 탐색
|
|
- 모든 텍스트와 컨테이너를 pill로 만드는 습관
|
|
- 낮은 대비의 회색으로 비활성·보조·설명을 구분하는 방식
|
|
- 실제 콘텐츠보다 장식용 대시보드 수치를 우선하는 화면
|
|
|
|
## Token boundaries
|
|
|
|
- `color.canvas` = `#ffffff` — 최상위 배경에만 사용
|
|
- `color.surface` = `#f7f8fa` — 구획된 표면
|
|
- `color.text` = `#16181d` — 기본 본문
|
|
- `color.text-muted` = `#596170` — 보조 설명; 작은 본문 AA 대비 유지
|
|
- `color.border` = `#d9dde5` — 경계와 구분
|
|
- `color.accent` = `#2457d6` — primary action과 focus에만 사용
|
|
- `color.danger` = `#b42318` — 파괴적 액션과 오류
|
|
- `space.xs` = `0.25rem` — 아이콘 내부 간격
|
|
- `space.sm` = `0.5rem` — 밀접 요소 간격
|
|
- `space.md` = `1rem` — 기본 그룹 간격
|
|
- `space.lg` = `1.5rem` — 섹션 내부 간격
|
|
- `space.xl` = `2.5rem` — 주요 섹션 분리
|
|
- `radius.control` = `0.5rem` — 입력·버튼
|
|
- `radius.surface` = `0.75rem` — 카드·패널
|
|
- `typography.body-size` = `1rem` — 기본 본문 크기
|
|
- `typography.body-line` = `1.5` — 기본 본문 행간
|
|
- `typography.label-size` = `0.875rem` — 레이블 최소 크기
|
|
- `motion.fast` = `120ms` — 직접 조작 피드백
|
|
- `motion.standard` = `200ms` — 상태 전환
|
|
|
|
## Components
|
|
|
|
- `button` (stable) — surfaces: public-web, product-app, interactive-learning, developer-platform; anti: multiple-primary-actions, icon-without-name
|
|
- `field` (stable) — surfaces: public-web, product-app, interactive-learning, developer-platform; anti: placeholder-as-label, error-by-color-only
|
|
- `status-panel` (candidate) — surfaces: product-app, interactive-learning, developer-platform; anti: blank-screen, spinner-without-context
|
|
|
|
## Patterns
|
|
|
|
- `task-entry` (stable) — surfaces: public-web, product-app; anti: cta-before-value, competing-primary-actions
|
|
- `resilient-status` (candidate) — surfaces: product-app, developer-platform; anti: generic-error-toast-only, indefinite-spinner
|
|
- `content-discovery` (candidate) — surfaces: interactive-learning; anti: single-article-dead-end, topic-list-without-status, decorative-catalog
|
|
- `causal-learning-loop` (candidate) — surfaces: interactive-learning; anti: stepper-with-unrelated-content, answer-before-prediction, progress-without-evidence
|
|
- `learning-feedback-recovery` (candidate) — surfaces: interactive-learning; anti: wrong-answer-only, spoiler-first-hint, lost-return-state
|
|
|
|
## Page Archetypes
|
|
|
|
- `public-value-entry` (candidate) — surfaces: public-web; anti: see source
|
|
- `operational-workspace` (candidate) — surfaces: product-app, developer-platform; anti: see source
|
|
- `interactive-learning-atlas` (candidate) — surfaces: interactive-learning; anti: see source
|
|
- `interactive-learning-deep-dive` (candidate) — surfaces: interactive-learning; anti: see source
|
|
|
|
## Source hashes
|
|
|
|
- `org-os/08-design/components/actions/button.yaml`: `1c1f2ee50a36ac759303d958903409c6c82d79b749807b316c2dced18b5df73f`
|
|
- `org-os/08-design/components/feedback/status-panel.yaml`: `22dbd0bcf7f1dd2166563ce8691cf961ec0e1173bf3d0bb4cbb9cb9a19ec5064`
|
|
- `org-os/08-design/components/forms/field.yaml`: `e478891c6b999395d78e22f5ceda4acac22d1ff1450accc5be0a68fe35adc5c3`
|
|
- `org-os/08-design/components/registry.yaml`: `877700537510f7bdd5326338236d3055b84db4d18ccdee1d5367f860bf28c5bd`
|
|
- `org-os/08-design/design-engine-adapters.yaml`: `ee6a771488e7fe8342498aac96cb957ffc9c0736f9dab5617e5abd6669433542`
|
|
- `org-os/08-design/page-archetypes/registry.yaml`: `10faf739beb565455f55f69562e300ab17aeb6ab34ca07ac6100f3b992e53bee`
|
|
- `org-os/08-design/patterns/registry.yaml`: `cccc39f78e3c1bb370e201059b8d548e44255c04e246e46901cccdb741af2b40`
|
|
- `org-os/08-design/principles.yaml`: `cb00612da40377647cb886da3fa23097deabfa8776173626f1c363639bc0c97b`
|
|
- `org-os/08-design/releases/0.1.0.yaml`: `53bfaa503e4a1b34af0930c55393e70f982379317ba17dac9966b19b942df504`
|
|
- `org-os/08-design/releases/0.2.0.yaml`: `f569559cadadb57448f24650c11e8fc1b5431de602338d305a159702eb24e7c9`
|
|
- `org-os/08-design/releases/index.yaml`: `430a06a0f57c5d8ca938d82e8af26df172097a2d1d252b0fbc9dddf72b7385ad`
|
|
- `org-os/08-design/taste-profile.yaml`: `cea0ab83541c56911735239ec158ea48c140eddf898194d94d026a8a26759450`
|
|
- `org-os/08-design/tokens.yaml`: `11601f38cb0b2dba146129f8e1a9177c4376e77d7f93d96811bd9846592be38d`
|