오커 웍스 정밀 운영 원장 디자인 시스템 (OWDS v2.0)
오커 웍스의 모든 웹 워크벤치는 이커머스 셀러와 웹 운영자가 수백 건의 주문 데이터 및 인프라 코드를 오류 없이 처리하도록 4대 엔터프라이즈 레퍼런스 원칙을 단일 3계층 토큰 체계(Primitive → Semantic → Component)로 규격화했습니다.
| 참조 시스템 | 핵심 엔지니어링 원칙 | OWDS v2.0 구현 토큰 및 규칙 |
|---|---|---|
| Toss Design System (TDS) | 브랜드 식별색과 단일 주요 행동색(Primary Action Blue) 엄격 분리 | 관제 레일은 #0B1220, 화면당 단일 핵심 실행 버튼에만 #1D4ED8 채움 허용 |
| Stripe Calm Fintech | 중첩 그림자(Ghost Shadow) 배제 및 1px 헤어라인 원장 구획 | #F6F8FB 지면 위 #FFFFFF 시트를 1px solid #E2E8F0 단일 경계선으로 분리 |
| Channel.io Bezier | 한글·영문 혼용 고밀도 가독성 및 3단계 시멘틱 토큰 매핑 | Pretendard Variable 본문 행간 1.65, 대형 제목 자간 -0.03em 고정 |
| Datadog DRUIDS | 상단 운영 텔레메트리 레일 및 고정폭 숫자 정렬 강제 | 모든 금액·수량·바이트·경과시간에 font-variant-numeric: tabular-nums 전역 적용 |
시멘틱 컬러 토큰 및 명암비 검증 원장
모든 전경·배경 조합은 실무 장시간 작업 시 눈의 피로를 줄이면서 WCAG AA 이상 명암비를 충족합니다.
| 시멘틱 토큰 | 견본 | HEX 코드 | 용도 및 접근성 대비율 |
|---|---|---|---|
| --ow-bg-telemetry | #0B1220 | 최상단 인프라 상태 레일 및 코드 출력 터미널 배경 (대비 15.8:1) | |
| --ow-action-primary | #1D4ED8 | 뷰포트 내 단일 최우선 실행 버튼 및 활성 탭 강조 (백색 텍스트 대비 6.7:1 AA) | |
| --ow-bg-canvas | #F6F8FB | 기본 작업 지면 — 백색 데이터 시트와의 무그림자 명도 분리 | |
| --ow-text-primary | #0F172A | 제목, 핵심 데이터 셀, 가격 수치 본문 잉크 (백색 배경 대비 17.8:1 AAA) | |
| --ow-text-muted | #475569 | 보조 설명, 플레이스홀더, 테이블 캡션 (백색 배경 대비 7.5:1 AAA) |