색상 토큰 (Color Tokens)
배경 & 표면
텍스트
액센트
배경 & 표면
텍스트
액센트
시맨틱 (공통)
그라데이션
타이포그래피 (Typography)
폰트 패밀리
텍스트 스케일
간격 시스템 (Spacing — 4px baseline)
보더 반경 (Border Radius)
스타일
크기
스타일
크기
배지 / 칩 (Badges & Chips)
상태
섹션
상태
섹션
테이블 (Table)
| TX Hash | 금액 | 상태 |
|---|---|---|
| 0xa1b2…c3d4 | 1,250.00 USDT | 성공 |
| 0xe5f6…7890 | 850.50 USDT | 처리중 |
| 0xb2c3…d4e5 | 3,200.00 USDT | 실패 |
| TX Hash | 금액 | 상태 |
|---|---|---|
| 0xa1b2…c3d4 | 1,250.00 USDT | 성공 |
| 0xe5f6…7890 | 850.50 USDT | 처리중 |
| 0xb2c3…d4e5 | 3,200.00 USDT | 실패 |
브랜드 / CI (Brand & Corporate Identity)
로고 마크 변형
심볼 & 파비콘
사용 가이드라인
로고 주변 여백은 심볼 높이의 50% 이상 확보
다크 배경 → logo-dark.svg, 라이트 배경 → logo-horizontal.svg
최소 표시 크기: 24px × 24px
로고 색상 임의 변경 금지, 그라데이션 방향 변경 금지
로고 위에 텍스트나 다른 그래픽 요소 오버레이 금지
법인 정보
주식회사 나노플랑크코리아
Nanoplanc Korea Co., Ltd.
ops@nanoplanc.com · nanoplanc.com
레이아웃 & 패널 (Layout & Panels)
그리드 레이아웃 — 3종만 사용
이 3가지 비율 외에는 사용하지 않습니다. 컨테이너 max-width: 1360px.
패널 — 2종만 사용
.panel-surfacebackdrop-filter, 그라데이션, box-shadow 포함. 주요 섹션 래퍼에 사용합니다.
.panel-surface-soft약한 배경. 내부 카드, 보조 영역에 사용합니다.
브랜드 / CI (Brand & Corporate Identity)
로고 마크 변형
사용 가이드라인
로고 주변 여백은 심볼 높이의 50% 이상 확보
다크 배경 → logo-dark.svg, 라이트 배경 → logo-horizontal.svg
최소 표시 크기: 24px × 24px
로고 색상 임의 변경 금지, 그라데이션 방향 변경 금지
로고 위에 텍스트나 다른 그래픽 요소 오버레이 금지
법인 정보
주식회사 나노플랑크코리아
Nanoplanc Korea Co., Ltd.
ops@nanoplanc.com · nanoplanc.com
디자인 원칙 (Design Principles)
Nanoplanc 전체 제품에 적용되는 디자인 원칙입니다. 모든 UI는 이 원칙을 기준으로 설계하고, 예외가 필요하면 이 문서를 먼저 업데이트합니다.
색상은 절제
주색(indigo) + 보조색(green) + 경고색(amber). 3가지 색상 초과 금지. 추가 색이 필요하면 이 가이드를 먼저 업데이트합니다.
텍스트만으로 채우지 않기
모든 섹션에 최소 1개의 시각 요소(아이콘, 스크린샷, 숫자 강조, 다이어그램)를 포함합니다.
보색으로 시선 집중
CTA 버튼과 배경의 대비를 높여 핵심 행동을 유도합니다. 48%의 사용자가 비즈니스 신뢰성을 웹사이트 디자인으로 판단합니다.
콘텐츠 = 디자인
카피와 시각 요소가 같은 메시지를 전달해야 합니다. 분리되면 안 됩니다.
일관성이 최우선
일관성 있는 디자인은 성공적인 웹사이트를 만들기 위한 가장 중요한 요소입니다. 표준에 정의된 토큰과 컴포넌트만 사용합니다.