부품을 넘어,
시작 가능한 화면으로.
TopNav, Hero, FormField를 실제 제품 흐름으로 조합한 출발점입니다.화면의 계약을 먼저 검증합니다.
primitive를 늘리기 전에 실제 카피, 상태, 모바일과 키보드 흐름을 한 화면에서 확인합니다.
Landing — AI가 무엇을 실행하는지 보여줍니다.
추상적인 AI 장식 대신 Ask → Plan → Approve → Record의 실제 운영 흐름을 첫 화면에 둡니다.
일반 대시보드 차트보다 운영 브리프와 승인 경계를 먼저 보여줍니다.
Phthalo green과 scarf orange는 완료·승인 대기 같은 실제 상태에만 둡니다.
모바일에서도 카피 다음에 실행 화면이 이어지고 CTA는 44px로 쌓입니다.
Authentication — 비밀번호 없이, 다음 단계를 분명하게.
Microsoft SSO를 주 경로로 두고 이메일 매직링크를 안전한 대안으로 제공합니다. 실제 인증 서버는 호출하지 않는 인터랙션 표본입니다.
중립 ink CTA 하나만 주 행동으로 두고 공급자색은 로고 안으로 제한합니다.
label, autocomplete, 오류 연결과 neutral enumeration response를 포함합니다.
중립 배경 위 448px 단일 열로 정리하고 카드·그림자는 인증 위계에 꼭 필요할 때만 씁니다.
Gate application — 업무 객체, 상태, 다음 행동을 한 문법으로.
로그인 이후 workspace와 집중형 기안 화면을 분리하고, 목록·상세·폼·비밀 값의 조합을 canonical pattern으로 관리합니다.
색·타입·간격·chrome·상태 표현은 Consumer Kit으로만 공급합니다.
목록·결재·기안·구성원·연동·비밀 값을 populated/empty/loading/error/success로 검증합니다.
Input·DataTable·Timeline·EmptyState를 재스타일하지 않고 CSS-only 조합으로 묶습니다.
공통화할 것과 제품에 남길 것을 분리합니다.
패턴은 시각·접근성·상태 계약을 제공하고, 인증 정책과 실제 카피는 각 서비스가 소유합니다.
@axe/ui가 책임지는 것
- 토큰, control 상태, focus와 반응형 레이아웃
.axe-pattern-*markup과pagePatternClassesclass map- TopNav, Hero, Button, FormField, StatusBanner와 Gate app 조합
- Light/Dark, reduced motion과 renderer 시각 언어
- 공개 landing/auth와 인증 후 workspace가 서로 중첩되지 않는 shell 경계
제품이 책임지는 것
- 실제 OAuth·매직링크·세션과 redirect 정책
- 서비스명, 가치 제안, 법적 문구와 지원 채널
- 권한 오류, rate limit과 복구 경로의 도메인 로직