name: premium-design description: 고급 브랜드, 럭셔리 제품, 디자인 중심 SaaS 및 창의적인 포트폴리오를 위한 편집·프리미엄 등급의 웹 인터페이스를 구축합니다. 사용자가 편집적, 럭셔리, 고급, 프리미엄, 크리에이티브 에이전시, 매거진 스타일 또는 패션 브랜드 웹사이트를 원할 때 사용합니다. 명시적 트리거: 'premium design', 'luxe', 'editorial', 'high end', 'atelier', 'make it premium', 'make it luxe', 'fashion brand', 'creative agency site', 'portfolio site'. 미적 목표가 일반적인 SaaS보다 정제/편집적/프리미엄일 때는 일반 `design` 기술 대신 이 기술을 사용하세요.

프리미엄 디자인 — Kinetic Luxe은(는) 무엇을 하나요?

프리미엄, 편집적, 하이엔드 인터페이스를 구축하기 위한 카탈로그 기반 기술입니다. 일반적인 design 기술과의 차이점: 타이포그래피, 모션, 절제에 대한 확고한 의견을 가지고 있습니다.

디자인 철학 — 다섯 가지 법칙

1. 타이포그래피가 주인공이다

디스플레이 타입(헤드라인)은 세리프 또는 독특한 디스플레이 산세리프를 사용합니다. 본문은 정제된 산세리프(Inter, Geist, Satoshi)를 사용합니다. 헤드라인은 크게 — text-[clamp(2.5rem,8vw,10rem)] 수준으로 설정합니다. 디스플레이는 자간을 좁게(tracking-tight 또는 더 좁게) 설정하고, 행간은 넉넉하게(leading-[0.9] 또는 leading-none), 본문은 더 타이트하게(leading-[1.45]) 설정합니다.

잘 어울리는 폰트 조합:

Fraunces (디스플레이) + Inter (본문) — 편집 잡지 느낌
Canela (디스플레이) + Geist (본문) — 현대적 럭셔리
Migra (디스플레이) + Manrope (본문) — 날카로운 편집적 느낌
Reckless (디스플레이) + Inter (본문) — 부드러운 편집적 따뜻함

폰트는 index.html의 <link> 또는 CSS @import를 통해 로드합니다. 디스플레이에는 시스템 폰트를 절대 사용하지 마세요.

2. 모션은 의도적이며, 절대 장식적이지 않다

튕기는 스프링 효과나 빠른 ease-out-200ms 페이드는 사용하지 않습니다. 프리미엄 모션은 다음을 사용합니다:

긴 지속 시간: 800–1800ms (표시 효과)
정제된 이징: cubic-bezier(0.16, 1, 0.3, 1) (easeOutExpo), cubic-bezier(0.22, 1, 0.36, 1) (easeOutQuint) 또는 사용자 정의 곡선
페이지 로드보다 스크롤 중심: framer-motion의 useScroll + useTransform을 사용하여 모션이 사용자 동작과 연결되도록 함
섹션당 하나의 시그니처 모션: 히어로에 5개의 애니메이션을 쌓지 마세요. 콘텐츠를 증폭시키는 하나를 선택하세요.

애니메이션이 콘텐츠에 도움이 되지 않으면 제거하세요.

3. 레이어를 통한 깊이감, 그림자가 아니다

프리미엄 깊이감은 미묘한 레이어를 쌓아서 만듭니다:

베이스: 노이즈 텍스처 오버레이 (CSS 또는 SVG)
콘텐츠 아래: 따뜻함/차가움 그라데이션 워시 (매우 미묘하게, 5-15% 불투명도)
중간 레이어: 장식 요소 (큰 디스플레이 문자, 흐릿한 사진, 그리드)
전경: 콘텐츠

shadow-lg / shadow-2xl은 피하세요 — 너무 평범하게 보입니다. 대신 shadow-[0_1px_0_rgba(255,255,255,0.05)] 또는 그라데이션 테두리를 사용하세요.

4. 색상에는 절제, 구성에는 자신감

색상 팔레트는 일반적으로:

배경: 따뜻하거나 차가운 오프화이트/오프블랙 (순수 #000 또는 #fff는 절대 안 됨). 예: #0A0908 (따뜻한 검정), #F7F5F1 (따뜻한 오프화이트), #0F1117 (차가운 검정).
텍스트: 배경에 대한 높은 대비를 유지하지만 부드럽게. 예: #0A0908 위의 #F7F5F1, #F7F5F1 위의 #1A1A1A.
포인트 색상: 하나의 색상만, 드물게 사용. 예: #C8522C (테라코타), #4C3F2F (에스프레소), #B8A978 (황동), #D9C2A4 (샴페인).

무지개 그라데이션은 사용하지 마세요. 청록/보라색 테크 스타트업 분위기도 금지입니다.

5. 구성은 의도적으로 그리드를 깨뜨린다

표준 3-컬럼 그리드는 평범하게 느껴집니다. 프리미엄 레이아웃은 다음을 사용합니다:

비대칭: 한 컬럼이 다른 컬럼보다 2배 더 넓은 2-컬럼, 또는 콘텐츠가 3+4 스팬을 차지하는 7-컬럼 그리드
의도적인 여백: 60%가 여백이고 콘텐츠가 한쪽 구석에 있는 섹션
크기 대비: 거대한 헤드라인 옆의 아주 작은 라벨
겹침: 컨테이너 경계를 벗어나는 요소

의심스러우면 컬럼을 하나 제거하거나 여백을 더 추가하세요.

이 기술이 적합하지 않은 경우

사용자가 원하는 것이 다음 중 하나라면:

표준 B2B SaaS 랜딩 페이지 (채팅 버블, 제품 목업, 기능 그리드) → design 기술 사용
관리자 대시보드 / 데이터 중심 UI → design 기술 사용
휴대폰 목업이 포함된 모바일 앱 랜딩 → design 기술 사용
스톡 사진 히어로가 포함된 기업 사이트 → design 기술 사용

이 기술은 다음을 위해 설계되었습니다: 패션 브랜드, 럭셔리 제품, 디자인 에이전시, 창의적인 포트폴리오, 건축 회사, 편집 간행물, 디자인 중심의 프리미엄 SaaS.

워크플로우 — 0단계: 카탈로그 읽기

페이지를 작성하기 전에 반드시 읽어야 할 파일:

references/design-tokens.md — 색상, 타이포그래피 스케일, 간격
references/motion-principles.md — 이징, 타이밍, 모션 철학
references/catalog/의 해당 카테고리 .md 파일 — 사용 가능한 변형

그런 다음 변형을 선택하고 references/catalog/components/에서 해당 .tsx 파일을 읽으세요.

페이지 → 카탈로그 파일 매핑:

페이지 유형	카탈로그 파일
랜딩 / 홈	`hero.md` + `features.md` + `testimonials.md` + `cta-sections.md` + `footers.md`
가격	`pricing.md`
소개 / 스튜디오 / 선언문	`about.md`
연락처	`contact.md`
포트폴리오 / 작업	`gallery.md`
FAQ / 비고	`faq.md`
네비게이션 (모든 페이지)	`navigation.md`

현재 카탈로그 인벤토리 — 11개 컴포넌트, 모두 완전 독창적:

navigation.md — 1개 변형 (Editorial Masthead)
hero.md — 1개 변형 (Kinetic Mask Hero)
features.md — 1개 변형 (Editorial Index)
stats.md — 1개 변형 (Editorial Numbers)
logos.md — 1개 변형 (Editorial Client Ledger)
gallery.md — 1개 변형 (Editorial Work Index)
about.md — 1개 변형 (Editorial Story / Manifesto)
testimonials.md — 1개 변형 (Editorial Pull Quote)
pricing.md — 1개 변형 (Editorial Asymmetric)
faq.md — 1개 변형 (Editorial FAQ / Remarks)
cta-sections.md — 1개 변형 (Moment CTA)
contact.md — 1개 변형 (Editorial Contact Form)
footers.md — 1개 변형 (Editorial Manifesto Footer)

필수 확인 사항

완료 보고 전에 확인:

기초 읽기: 코드를 작성하기 전에 design-tokens.md + motion-principles.md를 반드시 읽었습니다.
카탈로그 참조: 카탈로그에서 특정 변형을 선택했습니다. 이름을 명시하세요.
폰트 로드: 필요한 디스플레이 + 본문 폰트가 index.html의 <link> 또는 CSS @import를 통해 로드되었습니다. 시스템 폰트는 프리미엄 느낌을 망칩니다.
단일 포인트 색상: 디자인은 하나의 포인트 색상(중성색 외)을 사용합니다. 무지개 팔레트는 사용하지 마세요.
모션 타이밍: 최소 하나의 섹션은 스크롤 중심 모션(페이지 로드 페이드만이 아닌)을 사용합니다. 이징은 easeOutExpo 또는 이와 유사해야 합니다 — 기본 easeOut이 아니어야 합니다.
구성적 파괴: 최소 하나의 섹션은 비대칭 레이아웃, 의도적인 여백 또는 크기 대비를 사용합니다. 모든 컬럼이 동일한 그리드가 아니어야 합니다.
모바일: 375px에서 테스트되었습니다. 디스플레이 타입은 크기를 줄이되 특성을 유지합니다(표준 모바일 H1보다 큼).

프리미엄 디자인 — Kinetic Luxe