AI Request Prompt

Design a landing page in Earth Zen fusion style — combining Earth Tone's warm natural textures with Zen Minimalism's overwhelming whitespace and stillness.

COLOR TOKENS:
--bg: #faf8f5
--text: #3b3631
--text-muted: #665f57
--accent: #8b7d6b
--border: #e6e2db
--card-bg: #ffffff
--pre-bg: #f0ebe1
--pre-border: #e0d8ce
No other colors.

TYPOGRAPHY:
Headings: 'Cormorant Garamond', serif, font-weight: 400 (h1) / 600 (h3), font-size: clamp(3rem, 6vw, 5rem) for h1, 1.8rem for h3, letter-spacing: -0.02em.
Body: 'Noto Sans', sans-serif, font-weight: 300, font-size: 1.1rem, line-height: 1.8, color: #665f57.
Header: font-size: 0.9rem, letter-spacing: 0.05em, text-transform: uppercase, color: #8b7d6b.
Card text: font-size: 0.95rem, opacity: 0.8, line-height: 1.7.

UI:
Cards: background #fff, border: 1px solid #e6e2db, padding: 50px 40px, border-radius: 12px, box-shadow: 0 10px 30px rgba(0,0,0,0.02), text-align: center.
Buttons: background #3b3631, color #fff, border: none, padding: 14px 32px, border-radius: 4px, font-weight: 500, letter-spacing: 0.05em. Hover: background #8b7d6b.
Header divider: border-bottom: 1px solid #e6e2db.

LAYOUT:
Page container: max-width: 1000px, margin: 0 auto, padding: 8vh 20px.
Hero: text-align: center, margin-bottom: 15vh.
Card grid: display: grid, grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)), gap: 40px.
Section spacing: 15vh between major sections (critical for Zen breathing room).
Header bottom margin: 15vh.
Component internal padding: 2-3x typical UI padding.

MOTION:
Card hover: transform: translateY(-8px), transition: transform 0.4s ease.
Button hover: background color change, transition: 0.3s.
No other animations — static elegance is the goal.

RESPONSIVE:
≤768px: section gaps reduced to 8vh, hero h1 scales down via clamp(), card grid collapses to 1 column, padding reduced proportionally.
≥1000px: max-width 1000px, full 15vh+ section spacing, 2-column card grid.

FORBIDDEN:
- Saturated or bright colors (earth tones only: #3b3631, #8b7d6b, #faf8f5 range)
- Heavy box-shadows (maximum rgba(0,0,0,0.02))
- Decorative borders or dividers (whitespace is the only separator)
- Gradients of any kind
- Bold or heavy font weights on body text (300 maximum)
- Dense layouts with less than 70% negative space

OUTPUT:
1) CSS custom properties for all earth-tone colors and spacing scale
2) Hero section (centered serif headline + light sans-serif subtitle) + card grid (2 columns) + CTA button
3) Single-file HTML/CSS with responsive support

Earth Zen 퓨전 스타일의 랜딩 페이지를 디자인해줘 — Earth Tone의 따뜻한 자연 질감과 Zen Minimalism의 압도적인 여백과 고요함을 결합.

색상 토큰:
--bg: #faf8f5
--text: #3b3631
--text-muted: #665f57
--accent: #8b7d6b
--border: #e6e2db
--card-bg: #ffffff
--pre-bg: #f0ebe1
--pre-border: #e0d8ce
다른 색상 사용 금지.

타이포그래피:
제목: 'Cormorant Garamond', serif, font-weight: 400 (h1) / 600 (h3), font-size: clamp(3rem, 6vw, 5rem) h1용, 1.8rem h3용, letter-spacing: -0.02em.
본문: 'Noto Sans', sans-serif, font-weight: 300, font-size: 1.1rem, line-height: 1.8, color: #665f57.
헤더: font-size: 0.9rem, letter-spacing: 0.05em, text-transform: uppercase, color: #8b7d6b.
카드 텍스트: font-size: 0.95rem, opacity: 0.8, line-height: 1.7.

UI:
카드: background #fff, border: 1px solid #e6e2db, padding: 50px 40px, border-radius: 12px, box-shadow: 0 10px 30px rgba(0,0,0,0.02), text-align: center.
버튼: background #3b3631, color #fff, border: none, padding: 14px 32px, border-radius: 4px, font-weight: 500, letter-spacing: 0.05em. Hover: background #8b7d6b.
헤더 구분선: border-bottom: 1px solid #e6e2db.

레이아웃:
페이지 컨테이너: max-width: 1000px, margin: 0 auto, padding: 8vh 20px.
히어로: text-align: center, margin-bottom: 15vh.
카드 그리드: display: grid, grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)), gap: 40px.
섹션 간격: 주요 섹션 사이 15vh (Zen의 호흡 공간을 위해 필수).
헤더 하단 마진: 15vh.
컴포넌트 내부 패딩: 일반 UI의 2~3배.

모션:
카드 hover: transform: translateY(-8px), transition: transform 0.4s ease.
버튼 hover: 배경색 변경, transition: 0.3s.
다른 애니메이션 없음 — 정적인 우아함이 목표.

반응형:
≤768px: 섹션 간격 8vh로 축소, 히어로 h1 clamp()로 자동 조정, 카드 그리드 1열로 전환, 패딩 비례 축소.
≥1000px: max-width 1000px, 15vh+ 섹션 간격 완전 유지, 2열 카드 그리드.

금지사항:
- 채도 높거나 밝은 색상 (어스 톤만 허용: #3b3631, #8b7d6b, #faf8f5 계열)
- 무거운 box-shadow (최대 rgba(0,0,0,0.02))
- 장식용 보더나 구분선 (여백이 유일한 구분자)
- 어떤 형태의 그라데이션도 금지
- 본문에 굵은 폰트 웨이트 사용 (최대 300)
- 네거티브 스페이스 70% 미만의 밀집 레이아웃

출력:
1) 모든 어스 톤 색상과 간격 스케일을 위한 CSS 커스텀 속성
2) 히어로 섹션(중앙 세리프 제목 + 얇은 산세리프 서브타이틀) + 카드 그리드(2열) + CTA 버튼
3) 반응형 대응이 포함된 단일 HTML/CSS 파일

Earth Zenフュージョンスタイルのランディングページをデザインしてください — Earth Toneの温かい自然の質感とZen Minimalismの圧倒的な余白と静けさを融合。

カラートークン:
--bg: #faf8f5
--text: #3b3631
--text-muted: #665f57
--accent: #8b7d6b
--border: #e6e2db
--card-bg: #ffffff
--pre-bg: #f0ebe1
--pre-border: #e0d8ce
他の色は使用禁止。

タイポグラフィ:
見出し: 'Cormorant Garamond', serif, font-weight: 400 (h1) / 600 (h3), font-size: clamp(3rem, 6vw, 5rem) h1用, 1.8rem h3用, letter-spacing: -0.02em。
本文: 'Noto Sans', sans-serif, font-weight: 300, font-size: 1.1rem, line-height: 1.8, color: #665f57。
ヘッダー: font-size: 0.9rem, letter-spacing: 0.05em, text-transform: uppercase, color: #8b7d6b。
カードテキスト: font-size: 0.95rem, opacity: 0.8, line-height: 1.7。

UI:
カード: background #fff, border: 1px solid #e6e2db, padding: 50px 40px, border-radius: 12px, box-shadow: 0 10px 30px rgba(0,0,0,0.02), text-align: center。
ボタン: background #3b3631, color #fff, border: none, padding: 14px 32px, border-radius: 4px, font-weight: 500, letter-spacing: 0.05em。Hover: background #8b7d6b。
ヘッダー区切り線: border-bottom: 1px solid #e6e2db。

レイアウト:
ページコンテナ: max-width: 1000px, margin: 0 auto, padding: 8vh 20px。
ヒーロー: text-align: center, margin-bottom: 15vh。
カードグリッド: display: grid, grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)), gap: 40px。
セクション間隔: 主要セクション間15vh（Zenの呼吸スペースとして必須）。
ヘッダー下マージン: 15vh。
コンポーネント内部パディング: 通常UIの2〜3倍。

モーション:
カードhover: transform: translateY(-8px), transition: transform 0.4s ease。
ボタンhover: 背景色変更, transition: 0.3s。
他のアニメーションなし — 静的なエレガンスが目標。

レスポンシブ:
≤768px: セクション間隔8vhに縮小、ヒーローh1がclamp()で自動調整、カードグリッド1列に変更、パディング比例縮小。
≥1000px: max-width 1000px、15vh+セクション間隔完全維持、2列カードグリッド。

禁止事項:
- 彩度の高い・明るい色（アーストーンのみ: #3b3631, #8b7d6b, #faf8f5系）
- 重いbox-shadow（最大rgba(0,0,0,0.02)）
- 装飾的なボーダーや仕切り（余白が唯一の区分）
- いかなる形のグラデーションも禁止
- 本文に太いフォントウェイト（最大300）
- ネガティブスペース70%未満の密集レイアウト

出力:
1) すべてのアーストーンカラーとスペーシングスケールのCSSカスタムプロパティ
2) ヒーローセクション（中央セリフ見出し+細いサンセリフサブタイトル）+カードグリッド（2列）+CTAボタン
3) レスポンシブ対応を含む単一HTML/CSSファイル