Design System

ipvelo AI 디자인 시스템

새 화면과 주요 리팩토링에서 사용하는 토큰, 컴포넌트, 상태 표현을 한 곳에서 확인합니다.

가이드 보기

색상과 상태

색상은 장식이 아니라 업무 상태와 행동 우선순위를 표현합니다.

Primary

#3182F6

Text Primary

#191F28

Background

#F9FAFB

Border

#E5E8EB

Success

#0D9B4E

Warning

#F76707

Error

#E8344E

신규 감지 등록 완료 검토 필요 거절 위험 대기중
초록 · 강력 추천

90점 이상 추천도가 높은 상품류

주황 · 추천 검토

70점 이상 90점 미만의 검토 후보

회색 · 낮은 추천도

낮은 추천도나 보조 후보

버튼

한 화면에서 primary CTA는 하나만 강하게 노출합니다.

입력 필드

상표명처럼 중요한 입력을 먼저 배치합니다.

AI 판단 근거에 반영되는 내부 메모입니다.

결과 패널

결론을 먼저 보여주고 근거를 바로 아래에 둡니다.

추가 검토 권장 유사 후보 3건이 발견되었습니다.

동일 상품류에서 발음이 가까운 선등록 상표가 있어 식별력과 혼동 가능성을 함께 확인해야 합니다.

유사 후보 3건
주요 상품류 제42류
검토 상태 변리사 확인 전

아직 모니터링 중인 상표가 없습니다

상표를 추가하면 신규 감지와 상태 변경을 이 화면에서 바로 확인할 수 있습니다.

테이블

목록 화면은 DsTable로 정렬, 페이징, 빈 상태, 모바일 카드 렌더를 통일합니다.

OA 대응 내역

행 선택, 서버 페이징, 행 클릭을 함께 쓰는 목록 패턴입니다.

상표명출원번호상태작성일액션
NOWOD4020250221708 작성완료2026.01.28
CURSTI40-2024-0203592 검토중2026.01.07
DEV40-2024-0206614 신규2026.01.07
IPVELO40-2024-0101201 오류2026.01.02

600px 미만에서는 행이 카드로 전환되고, header의 hideBelow 값에 따라 컬럼을 숨깁니다.

상표명출원번호상태작성일액션

검색 결과가 없습니다

필터를 변경하거나 새로운 상표를 추가해 주세요.