대한민국 표준 이사의 안심을 담은
Ultra-Clean O2O 조형 체계
바른무브(BARUN MOVE) v1은 불투명한 추가금 요구와 이삿짐 파손에 대한 고객의 근원적 불안을 해소하기 위해 기획되었습니다. 흔한 AI 양산형 클리셰(무의미한 보라색 글로우, 인위적 다크 모드)를 원천 배제하고, 토스(Toss)의 친근한 간결함과 애플(Apple)의 모듈러 구조감을 융합하여 소프트 슬레이트 캔버스(#F8FAFC)와 로열 코발트(#2563EB) & 시그널 탠저린(#FF5B22)의 듀얼 퍼널로 설계되었습니다.
60-30-10 컬러 하모니 밸런스
60% Base Canvas
Crisp Slate Canvas (#F8FAFC)
30% Hierarchy & Structure
Midnight Slate (#0F172A)
10% Trust & Conversion
Cobalt (#2563EB) & Tangerine (#FF5B22)
1. Color Palette Tokens
모든 토큰은 CSS 커스텀 프로퍼티(--color-* / --bm-*)로 시스템화되어 중앙에서 통제됩니다. 카드를 클릭하면 HEX 코드가 복사됩니다.
A. Surface & Canvas Tokens (60% Dominant)
BASE BG
Crisp Slate Canvas
--color-bg-page
#F8FAFC
전체 페이지 배경, 시각적 피로감을 억제하는 클린 슬레이트
SURFACE
Pure Optical White
--color-surface-card
#FFFFFF
견적 위젯, 3대 안심보증서, 서비스 카드 기본 서피스
SUBTLE TINT
Muted Panel Tint
--color-surface-subtle
#F1F5F9
상단 유틸리티 알림바, 가격표 테이블 헤더, 인풋 배경
HOVER TINT
Cobalt Whisper Tint
--color-surface-warm
#EFF6FF
보증서 아이콘 링 배경, 활성 탭 하이라이트 면
B. Anchor Accent & Conversion Tokens (10% Focus)
BRAND KEY
Royal Cobalt
--color-accent-cobalt
#2563EB
브랜드 로고 뱃지, 신뢰 확약 엠블럼, 1차 정보 강조
HOVER
Deep Trust Navy
--color-accent-hover
#1E40AF
블루 버튼 호버 및 액티브 상태, 그라데이션 베이스
CRO CTA
Signal Tangerine
--color-accent-orange
#FF5B22
30초 견적 계산기 제출, 모바일 스티키 CTA 최고 전환색
BENEFIT BG
Peach Whisper Tint
--color-accent-orange-subtle
#FFF1EB
결합 10% 할인 뱃지 배경, 프로모션 칩
C. Scalable Multi-Service Identity Tokens (5대 라이프케어 전용 색상)
MOVING
포장이사 (Moving Blue)
--color-service-moving
#2563EB
가정/원룸/사무실/보관 이사 서비스 대표색
CLEANING
입주청소 (Emerald Clean)
--color-service-cleaning
#059669
피톤치드 살균, 맑고 깨끗한 환경 케어 아이덴티티
INTERNET
인터넷 가입 (Speed Orange)
--color-service-internet
#EA580C
초고속망, 최대 47만원 당일 지원 결합 혜택
RENTAL
가전 렌탈 (Living Purple)
--color-service-rental
#7C3AED
스마트 라이프, 프리미엄 가전 구독 솔루션
D. Typography & Structural Slate Tokens (30% Structure)
PRIMARY TEXT
Midnight Slate Charcoal
--color-text-primary
#0F172A
모든 주요 헤드라인(H1~H3), 최고 명도비 잉크 텍스트
BODY TEXT
Heavy Slate Grey
--color-text-secondary
#334155
서비스 설명 문구, 프로세스 설명, 본문 서브헤딩
MUTED
Refined Slate Grey
--color-text-muted
#64748B
테이블 키 라벨, 캡션, 풋노트, 타임스탬프 (4.5:1 준수)
HAIRLINE
Fine Hairline Border
--color-border
#E2E8F0
카드 외곽선, 디바이더, 1px 구조적 분할 라인
2. Dual Font Pairing System
가독성을 위한 Pretendard와 수치/텔레메트리를 위한 Plus Jakarta Sans의 정밀 페어링
| Role & Element | Typeface & Specimen Preview | Metrics & CSS Spec |
|---|---|---|
| Hero Display H1 |
대한민국 표준 이사의 새로운 안심 기준, 바른무브
|
Pretendard 2.25rem (36px) / 800 Desktop: 3.0rem (48px) |
| Section Title H2 |
이사 고객이 가장 걱정하는 3가지, 바른무브가 완벽하게 책임집니다
|
Pretendard 1.75rem (28px) / 800 Desktop: 2.25rem (36px) |
| Card Title H3 |
프리미엄 가정이사 (아파트·빌라·단독주택 전문)
|
Pretendard 1.25rem (20px) / 700 Tracking: 0 |
| Telemetry Metric |
약 85만 ~ 130만원 · 오늘 상담 742건
|
Plus Jakarta Sans 1.8rem (28.8px) / 800 Numeric Telemetry |
| Body Text Lead |
이사 당일 추가 수고비 요구 0원 확약제, 본사 100% 직접 배상책임. 5년 이상 숙련된 한국인 정직원 패커팀이 소중한 보금자리를 정성스럽게 옮겨드립니다.
|
Pretendard 1.05rem (16.8px) / 500 Line-Height: 1.6 |
| Technical Pill / Tag |
국토교통부 정식허가 화물운송주선 제 1288호
|
Pretendard 0.8125rem (13px) / 700 Tracking: +0.02em |
3. Spatial Geometry & Radii Tokens
스마트 모바일 터치 타깃과 데스크톱 시각적 안정감을 위한 스쿼클 곡률 규격
--radius-sm: 6px
Compact Radius (6px)
태그, 체크박스, 견적서 상세 항목 라벨
--radius-md: 10px
Control Radius (10px)
버튼, 셀렉트 인풋 박스, 폼 컨트롤, 서비스 탭
--radius-lg: 16px
Standard Card Radius (16px)
3대 보증서 카드, 4대 서비스 카드, 후기 카드
--radius-xl: 24px
Hero Container (24px)
30초 즉석 견적 계산기 위젯 카드 본체
--radius-pill: 9999px
Full Capsule Pill
서비스 네비게이션 필터, 상태 배지, 다이렉트 콜 버튼
4. Core Component Library
v1 메인 랜딩페이지(index.html)에 인스턴스화된 핵심 UI 컴포넌트 실제 렌더링
Buttons & Call-to-Action
v1 Primitives
Status & Categorization Chips
Lifestyle Hub
포장이사
입주청소 10%할인
인터넷 최대 47만
가전렌탈
도배·장판
Telemetry Metric Display
Social Proof
4.9 / 5.0
전체 고객 평균 만족도 (누적 11만 건)
당일 추가금 발생률 0% 준수율: 98.4% 달성
Trust Guarantee Card
Loss Aversion
견적 계약서 외 현장 부당 추가금 요구 시 본사에서 100% 전액 환불 조치합니다.
계약서 불변 보증
30-Sec Estimator Selector
Pattern H-1
가정 포장이사
원룸/소형이사
Mobile Sticky Dual Conversion Bar
Pattern M-1
5. Phosphor Icons Architecture
유니코드 이모티콘 사용을 엄격히 배제하고 통일된 인더스트리얼 아이콘 체계 준수
ph-truck
ph-shield-check
ph-sparkle
ph-broadcast
ph-television
ph-paint-roller
ph-phone-call
ph-calculator
ph-coins
ph-certificate
ph-seal-check
ph-star
ph-clock
ph-squares-four
ph-house
ph-buildings