company-haness/org-os/08-design/generated/DESIGN.md

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