“햇살 드는 아틀리에에서, 낡은 것이 사랑받는 순간.”

브랜드 시스템 · 웹기획 06 정본(v1.0) 기반 · 모든 시각 결정의 근거 · 소유: 여름(최종 승인)

01 · 무드

우리다움을 검증하는 10개의 단어

이것에 가깝게 (지향)
수공예 handcrafted온기 warm 인디고 indigo숨 breathing단정함 tidy
이것과 멀게 (금지)
차가운 테크네온 과장된 판타지유치한 캐릭터풍어두운 고딕
모든 시안은 이 10개 단어로 검증한다 — “이게 수공예처럼 보이나? 네온 같지 않나?”
02 · 컬러

낮의 아틀리에 (Light)

Cream
#F7F1E3
페이지 배경 · --bg
Paper
#FFFDF8
카드·시트 · --surface
Thread Ink
#3A3730
본문 텍스트 · --ink
Indigo
#28456E
링크·옷의 대사 · --primary
Blush
#C96F8F
CTA·강조 · --accent
Stitch Brown
#8A6D4A
스티치·보더 · --stitch
Ink Soft
#6E6759
보조·캡션 · --ink-soft
Danger
#B4452E
오류·위험 · --danger

밤의 아틀리에 (Dark)

Night Indigo
#14172A
배경 · --bg
Night Paper
#1E2238
카드 · --surface
Warm White
#EDE6D6
본문 · --ink
Indigo Light
#8FB0E0
링크 · --primary
Blush Light
#E8A7BF
CTA · --accent
Steam Amber
#E8B26B
다크 전용 온광 · --glow
Stitch
#7A6F5A
보더 · --stitch
Danger
#E58B74
오류 · --danger
규칙: 본문 대비 AAA(7:1)·UI 4.5:1 이상 · --accent(Blush)는 화면당 1회 · 순수 검정(#000)·순수 흰색(#FFF) 전면 금지 · 색만으로 정보 구분 금지.
03 · 타이포그래피

세 개의 목소리

디스플레이 · 마루 부리 Bold · 자간 -0.01em
당신의 옷은, 살아있다
섹션 H2 · 마루 부리 Bold
버려진 것들의 두 번째 이야기
소제목 H3 · Pretendard Bold
수선사 강이서의 힐링 판타지
본문 UI · Pretendard · 줄간 1.6
버튼·폼·설명은 Pretendard로. 담백하고 단정하게, 12px 미만은 쓰지 않는다.
뷰어 본문 · 리디바탕 · 줄간 1.85
한 땀, 한 땀. 옷의 결을 따라 마음을 깁는 이야기를 읽는 자리.
라이선스 전부 무료 상업 사용(마루부리·Pretendard·리디바탕) · 한글 서브셋 WOFF2 3종 합 300KB↓ · font-display:swap · H1 마루부리 preload.
04 · 그래픽 모티프

바느질하는 인터페이스

단추 버튼 (Primary CTA · 화면당 1개)
‘꿰매지는’ 스티치 링크

세계관을 더 알아보기 → 처럼, 밑줄이 재봉선이 된다.

실 진행률 (상단 3px · --primary)
원단 카드 (내부 상하 재봉선)

코튼 시티

낡은 옷들이 두 번째 삶을 얻는, 수선의 도시.

원단 텍스처 · 실타래 로더

배경 전역에 노이즈 3%(다크 2%)의 원단 결. 무한 루프 애니는 실타래 로더 하나만 허용.

05 · 모션 원칙

움직임은 조용하게, 한 번만

지속
fast .2s(호버) · med .4s(등장·꿰매기) · slow .8s(장면 전환·완독 매듭) · 전역 이징 cubic-bezier(.22,1,.36,1)
금지
스크롤 연출은 요소당 생애 1회 · 무한 루프는 로더뿐 · 이동 24px↓ · 블러·회전 남용 금지 · 동시 애니 금지(80ms 스태거)
접근
prefers-reduced-motion 시 트랜지션 0.01s + 스크롤텔링은 정지컷 대체
※ 리뉴얼에서 검토 중인 히어로 루프 영상은 “무한 루프=로더뿐” 원칙의 예외라, 이 문서의 모션 원칙 개정(여름 승인)이 선행돼야 한다. (리뉴얼 브리프 참조)
06 · 보이스 & 표기

다정하고 담백한 존댓말

이렇게
조용한 위로 톤 · 옷·바느질 은유(한 땀·실·시접·킨츠기) · 캐릭터의 감정을 앞세우고, 궁금증은 감질나게.
이건 금지
자극적 클릭베이트 · 이모지·느낌표 남발 · 급조된 유행어 · 3권(결말) 스포일러(수의 정화·바론 정체·이서의 대가) — 티저까지만.
표기
각성명·옷의 말은 『 』 · 이서 속마음 ‘ ’ · 인간 대사 “ ” · 실라(마나 아님) · 지명은 캐논 확정어(니트마운틴 등).
07 · 빌더용 토큰

토큰만 참조 · 하드코딩 금지

:root{
  --bg:#F7F1E3; --surface:#FFFDF8; --ink:#3A3730; --ink-soft:#6E6759;
  --primary:#28456E; --accent:#C96F8F; --stitch:#8A6D4A; --danger:#B4452E;
  --dur-fast:.2s; --dur-med:.4s; --dur-slow:.8s;
  --ease:cubic-bezier(.22,1,.36,1);
  --radius-card:10px; --radius-btn:24px;
  --shadow-card:0 2px 12px rgba(58,55,48,.08);
}
[data-theme='dark']{
  --bg:#14172A; --surface:#1E2238; --ink:#EDE6D6; --ink-soft:#A9A290;
  --primary:#8FB0E0; --accent:#E8A7BF; --stitch:#7A6F5A;
  --glow:#E8B26B; --danger:#E58B74;
}
새 색이 필요하면 이 문서를 갱신하고 여름의 승인을 받은 뒤 토큰으로 추가한다. 컴포넌트에 색·수치를 직접 쓰지 않는다.