SOFT BENTO UI SYSTEM

AI Request Prompt

Design a landing page in Bento Bloom style — pastel tile mosaic with playful, rounded modularity.

COLOR TOKENS:
--bg: #f8f5ff
--text: #2a2141
--accent-1: #bdf2e0 (mint)
--accent-2: #ffd9bf (peach)
--accent-3: #d9cbff (lavender)
--tile-white: #fff
--border: #c6bae4
--hero-border: #d2c6ef
--hero-bg: #ffffffb8
Background: radial-gradient(circle at 10% 20%, #fff 0, transparent 30%), radial-gradient(circle at 92% 8%, rgba(217,203,255,0.5), transparent 26%), linear-gradient(180deg, #fcf9ff, #f8f5ff).
No other colors.

TYPOGRAPHY:
Heading: "Jua" 400, tracking -0.02em
Body: "Nunito" 500
Scale: clamp(2rem, 6vw, 4.4rem) for h1
Body line-height: 1.75
Heading line-height: 1

UI:
Hero panel: border-radius 30px, border 2px solid #d2c6ef, bg #ffffffb8, backdrop-filter blur(3px).
Tiles: border-radius 18px, border 1px solid #c6bae4, padding 14px. Each tile gets a distinct pastel bg from the accent palette.
Prompt box: border-radius 18px, border 2px solid #d2c6ef, bg #fff.
Buttons: pill shape (border-radius 999px), border 1px solid #7a63a8, color #493a74, bg #efe7ff.

LAYOUT:
Content max-width: min(1050px, 92vw)
Page padding: 28px 0 76px
Hero padding: clamp(22px, 5vw, 44px)
Bento grid: 6 columns, gap 10px
Tile spans: row 1 = span 3 + span 3, row 2 = span 2 + span 2 + span 2
Lead max-width: 700px

MOTION:
Entrance: translateY(10px) scale(0.98) → translateY(0) scale(1), opacity 0 → 1, 600ms ease, stagger 80ms per tile
Hover: none specified — keep playful but simple
Respect prefers-reduced-motion.

RESPONSIVE:
720px: all tiles span 6 columns (full-width single column stack)
1024px: full 6-column bento grid, max-width 1050px layout

FORBIDDEN:
- Dark or saturated tones (light pastels only)
- Sharp right-angle corners (minimum border-radius 18px on tiles)
- Complex motion or 3D transforms
- More than 3 pastel accent colors
- Horizontal scroll at any viewport
- Heavy drop shadows (keep surfaces flat or very subtle)

OUTPUT:
1) Color + typography tokens as CSS custom properties
2) Hero / Feature Bento (6-col irregular grid) / Community / CTA structure
3) Semantic HTML + CSS with responsive support

Bento Bloom 스타일의 랜딩 페이지를 디자인해줘 — 파스텔 타일 모자이크에 둥글고 유쾌한 모듈 구성.

색상 토큰:
--bg: #f8f5ff
--text: #2a2141
--accent-1: #bdf2e0 (mint)
--accent-2: #ffd9bf (peach)
--accent-3: #d9cbff (lavender)
--tile-white: #fff
--border: #c6bae4
--hero-border: #d2c6ef
--hero-bg: #ffffffb8
배경: radial-gradient(circle at 10% 20%, #fff 0, transparent 30%), radial-gradient(circle at 92% 8%, rgba(217,203,255,0.5), transparent 26%), linear-gradient(180deg, #fcf9ff, #f8f5ff).
다른 색상 사용 금지.

타이포그래피:
제목: "Jua" 400, tracking -0.02em
본문: "Nunito" 500
스케일: h1에 clamp(2rem, 6vw, 4.4rem)
본문 줄간격: 1.75
제목 줄간격: 1

UI:
히어로 패널: border-radius 30px, border 2px solid #d2c6ef, bg #ffffffb8, backdrop-filter blur(3px).
타일: border-radius 18px, border 1px solid #c6bae4, padding 14px. 각 타일에 고유한 파스텔 배경색 적용.
프롬프트 박스: border-radius 18px, border 2px solid #d2c6ef, bg #fff.
버튼: pill 형태(border-radius 999px), border 1px solid #7a63a8, color #493a74, bg #efe7ff.

레이아웃:
콘텐츠 최대 너비: min(1050px, 92vw)
페이지 패딩: 28px 0 76px
히어로 패딩: clamp(22px, 5vw, 44px)
벤토 그리드: 6열, gap 10px
타일 span: 1행 = span 3 + span 3, 2행 = span 2 + span 2 + span 2
리드 최대 너비: 700px

모션:
진입: translateY(10px) scale(0.98) → translateY(0) scale(1), opacity 0 → 1, 600ms ease, 타일당 80ms 스태거
호버: 미지정 — 유쾌하되 단순하게 유지
prefers-reduced-motion 존중.

반응형:
720px: 모든 타일 6열 span (전체 너비 1열 스택)
1024px: 6열 벤토 그리드 전체, max-width 1050px 레이아웃

금지사항:
- 어둡거나 채도 높은 톤 (밝은 파스텔만 허용)
- 날카로운 직각 모서리 (타일 최소 border-radius 18px)
- 복잡한 모션이나 3D 트랜스폼
- 3개 초과의 파스텔 악센트 컬러
- 어떤 뷰포트에서도 가로 스크롤 금지
- 강한 드롭 섀도우 (표면은 평면적이거나 매우 미묘하게)

출력:
1) 색상 + 타이포그래피 토큰을 CSS 커스텀 프로퍼티로
2) Hero / Feature Bento (6열 불규칙 그리드) / Community / CTA 구조
3) 반응형 지원이 포함된 시맨틱 HTML + CSS

Bento Bloomスタイルのランディングページをデザインしてください — パステルタイルモザイクに丸みのある遊び心あるモジュール構成。

カラートークン:
--bg: #f8f5ff
--text: #2a2141
--accent-1: #bdf2e0 (mint)
--accent-2: #ffd9bf (peach)
--accent-3: #d9cbff (lavender)
--tile-white: #fff
--border: #c6bae4
--hero-border: #d2c6ef
--hero-bg: #ffffffb8
背景: radial-gradient(circle at 10% 20%, #fff 0, transparent 30%), radial-gradient(circle at 92% 8%, rgba(217,203,255,0.5), transparent 26%), linear-gradient(180deg, #fcf9ff, #f8f5ff)。
他の色は使用不可。

タイポグラフィ:
見出し: "Jua" 400, tracking -0.02em
本文: "Nunito" 500
スケール: h1にclamp(2rem, 6vw, 4.4rem)
本文行間: 1.75
見出し行間: 1

UI:
ヒーローパネル: border-radius 30px, border 2px solid #d2c6ef, bg #ffffffb8, backdrop-filter blur(3px)。
タイル: border-radius 18px, border 1px solid #c6bae4, padding 14px。各タイルに固有のパステル背景色を適用。
プロンプトボックス: border-radius 18px, border 2px solid #d2c6ef, bg #fff。
ボタン: ピル形状(border-radius 999px), border 1px solid #7a63a8, color #493a74, bg #efe7ff。

レイアウト:
コンテンツ最大幅: min(1050px, 92vw)
ページパディング: 28px 0 76px
ヒーローパディング: clamp(22px, 5vw, 44px)
Bentoグリッド: 6列, gap 10px
タイルspan: 1行目 = span 3 + span 3, 2行目 = span 2 + span 2 + span 2
リード最大幅: 700px

モーション:
入場: translateY(10px) scale(0.98) → translateY(0) scale(1), opacity 0 → 1, 600ms ease, タイルごとに80msスタガー
ホバー: 未指定 — 遊び心がありつつシンプルに
prefers-reduced-motionを尊重。

レスポンシブ:
720px: 全タイル6列span（全幅1列スタック）
1024px: 6列Bentoグリッド全体、max-width 1050pxレイアウト

禁止事項:
- 暗い・高彩度のトーン（明るいパステルのみ）
- 鋭い直角コーナー（タイル最小border-radius 18px）
- 複雑なモーションや3Dトランスフォーム
- 3色を超えるパステルアクセントカラー
- いかなるビューポートでも横スクロール禁止
- 重いドロップシャドウ（表面はフラットまたは非常に微細に）

出力:
1) カラー + タイポグラフィトークンをCSSカスタムプロパティとして
2) Hero / Feature Bento（6列不規則グリッド）/ Community / CTA構造
3) レスポンシブ対応を含むセマンティックHTML + CSS