surface
#f5eee8DESIGN SYSTEM 2.0 / 06-bordeaux
보르도 시그니처
버건디 레일 · 프레임형 조감도 · 겹쳐진 타이틀 패널
01. 브랜드 정체성
클라이언트 홈페이지의 250×70 PNG 원본. 비율·색상·심벌·문구 유지, 자르기·재색상 금지. PC 214px / 모바일 160px / 주변 여백 10px 이상. 어두운 배경에는 밝은 바탕을 사용합니다.
대표전화 1688-3060
02. 시맨틱 컬러
primary
#72283bonPrimary
#ffffffmuted
#696a63error
#af3131success
#237a44버튼과 주요 링크는 Primary, 설명은 Muted. 오류와 성공은 색뿐 아니라 문장으로 함께 전달합니다.
03. 타이포그래피
HERO / 38–76px호수의 여유,
SECTION / 30–48px
호수의 여유,
도시의 품격.
SECTION / 30–48px공간을 고르는 기준.
BODY / 16px · 1.8힐스테이트 선암호수공원의 일상과 공간을 살펴보세요. 본문은 짧고 명료한 문장으로, 조건과 예정 사항을 가까이에 표시합니다.
제목: "Noto Serif KR", Batang, Georgia, serif
본문: 맑은 고딕 계열. 모바일 입력창은 16px로 가독성을 유지합니다.
04. 레이아웃과 간격
버건디 레일 · 프레임형 조감도 · 겹쳐진 타이틀 패널
| 항목 | PC | 태블릿·모바일 |
|---|---|---|
| 컨테이너 | 최대 1280px | 가용 너비 100% |
| 좌우 여백 | 5vw 기준 | 모바일 24px |
| 섹션 간격 | 72–120px | 모바일 64px |
| 내비게이션 | 가로 메뉴 | 900px 이하 접이식 |
| 평면 | 타입목록·평면·설명 | 타입 가로 스크롤 + 단일 열 |
8px
16px
24px
32px
48px
64px
96px
120px
전개: 히어로 → 계약혜택(택1) → 클라이언트영상 → overview → architecture → nature → location → units → community → interiors → 생활연출 → 방문 → 관심고객등록.
05. 공통 컴포넌트
| 컴포넌트 | 상태·규칙 |
|---|---|
| 버튼 | 기본 / hover / focus / disabled. 최소44px, 주행동52px. |
| 로고 | 원본 PNG. 테마 색으로 바꾸지 않음. |
| 이미지 | 사진 cover, 평면·배치도 contain. 확대 버튼과 대체텍스트. |
| 탭 | 선택 상태 aria-pressed, 키보드 접근. |
| 동작 | 등장600ms, hover220ms. reduced-motion 시 이동효과 없음. |
| 영상 | 무음 자동재생, 기본조작, 전체화면, 인라인. 최소200px. |
06. 관심고객등록
10종에서 이름·연락처·동의의 순서와 검증은 동일합니다. 색상과 주변 여백은 해당 테마를 따릅니다.
| 상태 | 처리 |
|---|---|
| 대기 | 동의 선택 없음. 이름·연락처 필수. |
| 유효성 오류 | 입력칸 검증 및 동의 요청. 전송하지 않음. |
| 전송 중 | 버튼 잠금. 동일 요청ID로 재시도해 중복저장 방지. |
| 완료 | 서버의 시트 저장 확인 후 완료 안내·초기화. |
| 연결 실패 | 입력 유지, 재시도·전화 안내. 성공으로 표시하지 않음. |
| 미연동 | 설정 중 표시. 실제 접수 성공을 표시하지 않음. |
관심 타입·혜택은 사용자가 앞 섹션에서 선택한 경우에만 함께 저장합니다. 알림 수신: onlydhbest@naver.com / 힐스테이트 아파트 분양 텔레그램방.
07. 레퍼런스와 편집
힐스테이트 현장 ↗의 시각 전개를 연구했습니다. 현재 색상·간격은 본 시안을 위해 정의한 값이며 원본 사이트 토큰의 복제본이 아닙니다.
하단 전체 상담 배너
화면 바닥에 여백 없이 고정, 가로100%, 관심고객등록과 전화상담 두 영역. PC88px / 모바일76px + 하단 안전영역. 전화번호1688-3060을 크게 표시합니다.
실제 상담 배너 확인 ↗