Your Year in
Bold Color

AI Request Prompt

Design a dashboard/landing page in Duotone Bold style — Spotify Wrapped-inspired, high-contrast duotone cards on a dark base.

COLOR TOKENS:
--bg: #121212
--surface: #1e1e1e
--surface-elevated: #282828
--text: #ffffff
--text-muted: #b3b3b3
--green: #1db954
--green-soft: rgba(29, 185, 84, 0.15)
--purple: #8b5cf6
--pink: #ec4899
--orange: #f97316
--blue: #3b82f6
--gradient-1: linear-gradient(135deg, #1db954, #1ed760)
--gradient-2: linear-gradient(135deg, #8b5cf6, #ec4899)
--gradient-3: linear-gradient(135deg, #f97316, #ef4444)
--gradient-4: linear-gradient(135deg, #3b82f6, #06b6d4)
--border: rgba(255, 255, 255, 0.1)

TYPOGRAPHY:
Font: "Plus Jakarta Sans" sans-serif
Heading: weight 900, letter-spacing -0.03em, line-height 1.05
Body: 15px, weight 500, line-height 1.7
Display numbers: clamp(2.5rem, 5vw, 4rem), weight 900
Badge: 0.72rem, weight 800, uppercase, letter-spacing 0.08em
h1: clamp(2.4rem, 6vw, 4.5rem), weight 900

UI COMPONENTS:
- Hero card: border-radius 24px, background var(--surface), border 1px solid var(--border), radial-gradient glow overlays (purple top-right, green bottom-left)
- Stat cards: border-radius 20px, full gradient backgrounds (green/purple-pink/orange-red/blue-cyan), large bold number + small uppercase label
- Duotone cards: horizontal scroll, flex 0 0 220px, border-radius 16px, gradient backgrounds (vibrant to dark shade), circular avatar element (80px, rgba white bg with backdrop-filter blur), scroll-snap-type: x mandatory
- Progress bars: 8px height, border-radius 999px, gradient fills matching color tokens, dark track background
- Circular progress rings: 100px SVG circles, stroke-width 8, stroke-dasharray 283, animated stroke-dashoffset, bold percentage number centered
- Pill tags: border-radius 999px, colored tint backgrounds (15% opacity), matching text color, font-weight 700
- Buttons: pill-shaped, background var(--green), color #000, font-weight 700, box-shadow with green glow, hover scale(1.02) + translateY(-2px)
- Badge: background var(--green), color #000, pill shape, uppercase

LAYOUT:
- Container: min(1100px, 92vw), centered, padding 28px 0 100px
- Stats grid: repeat(auto-fit, minmax(140px, 1fr)), gap 16px
- Horizontal cards: flex with overflow-x auto, gap 16px, custom scrollbar (6px, dark track)
- Circle progress: flex row with wrap, gap 24px, centered
- Progress section: surface card with 20px radius, 28px padding
- Sections stack vertically with 28px gap

MOTION:
- Card entrance: translateY(20px) + scale(0.95) to normal, 0.6s ease, stagger 0.08s
- Pill entrance: scale(0.85) to scale(1), opacity, 0.5s ease, stagger 0.06s
- Progress bar fill: width transition 1s ease
- Circle ring: stroke-dashoffset transition 1.5s ease
- Button hover: translateY(-2px) scale(1.02), shadow expansion, 0.25s
- Respect prefers-reduced-motion

RESPONSIVE:
- Below 768px: stats grid 2 columns, cards flex 180px wide, circles 80px, pill font-size 0.78rem
- Above 768px: full 4-column stats, 220px cards, 100px circles

FORBIDDEN:
- No light or white backgrounds
- No thin/light font weights for headings (minimum 800)
- No sharp corners — minimum 16px radius on cards, 999px on pills/buttons
- No muted or pastel gradients — all gradients must be vivid and saturated
- No serif fonts
- No subtle shadows — shadows should reinforce the vibrant glow aesthetic

OUTPUT:
1. Single HTML file with inline CSS
2. Dark base with multi-color duotone gradient card system
3. Oversized bold stat numbers with gradient backgrounds
4. Horizontal scroll card section with scroll-snap
5. SVG circular progress rings with animated stroke
6. Gradient progress bars with dark tracks
7. Pill-shaped tags and buttons with colored tints
8. CSS custom properties for all color tokens

Duotone Bold 스타일의 대시보드/랜딩 페이지를 디자인해줘 — Spotify Wrapped에서 영감받은, 다크 베이스 위의 고대비 듀오톤 카드.

색상 토큰:
--bg: #121212
--surface: #1e1e1e
--surface-elevated: #282828
--text: #ffffff
--text-muted: #b3b3b3
--green: #1db954
--green-soft: rgba(29, 185, 84, 0.15)
--purple: #8b5cf6
--pink: #ec4899
--orange: #f97316
--blue: #3b82f6
--gradient-1: linear-gradient(135deg, #1db954, #1ed760)
--gradient-2: linear-gradient(135deg, #8b5cf6, #ec4899)
--gradient-3: linear-gradient(135deg, #f97316, #ef4444)
--gradient-4: linear-gradient(135deg, #3b82f6, #06b6d4)
--border: rgba(255, 255, 255, 0.1)

타이포그래피:
폰트: "Plus Jakarta Sans" sans-serif
제목: weight 900, letter-spacing -0.03em, line-height 1.05
본문: 15px, weight 500, line-height 1.7
디스플레이 숫자: clamp(2.5rem, 5vw, 4rem), weight 900
배지: 0.72rem, weight 800, uppercase, letter-spacing 0.08em
h1: clamp(2.4rem, 6vw, 4.5rem), weight 900

UI 컴포넌트:
- 히어로 카드: border-radius 24px, background var(--surface), border 1px solid var(--border), radial-gradient 글로우 오버레이 (상단 우측 보라, 하단 좌측 초록)
- 통계 카드: border-radius 20px, 풀 그라디언트 배경 (green/purple-pink/orange-red/blue-cyan), 큰 볼드 숫자 + 작은 uppercase 라벨
- 듀오톤 카드: 수평 스크롤, flex 0 0 220px, border-radius 16px, 그라디언트 배경 (비비드에서 다크 쉐이드), 원형 아바타 요소 (80px, rgba 흰색 bg에 backdrop-filter blur), scroll-snap-type: x mandatory
- 프로그레스 바: 8px 높이, border-radius 999px, 컬러 토큰에 맞는 그라디언트 필, 다크 트랙 배경
- 원형 프로그레스 링: 100px SVG 원, stroke-width 8, stroke-dasharray 283, 애니메이션 stroke-dashoffset, 중앙에 볼드 퍼센트 숫자
- 필 태그: border-radius 999px, 컬러 틴트 배경 (15% 불투명도), 매칭 텍스트 컬러, font-weight 700
- 버튼: pill 형태, background var(--green), color #000, font-weight 700, 초록 글로우 box-shadow, hover시 scale(1.02) + translateY(-2px)
- 배지: background var(--green), color #000, pill 형태, uppercase

레이아웃:
- 컨테이너: min(1100px, 92vw), 중앙 정렬, padding 28px 0 100px
- 통계 그리드: repeat(auto-fit, minmax(140px, 1fr)), gap 16px
- 수평 카드: overflow-x auto flex, gap 16px, 커스텀 스크롤바 (6px, 다크 트랙)
- 원형 프로그레스: flex row with wrap, gap 24px, 중앙 정렬
- 프로그레스 섹션: surface 카드에 20px radius, 28px padding
- 섹션 세로 28px 간격으로 쌓기

모션:
- 카드 진입: translateY(20px) + scale(0.95) → 정상, 0.6s ease, 0.08s 스태거
- 필 진입: scale(0.85) → scale(1), opacity, 0.5s ease, 0.06s 스태거
- 프로그레스 바 필: width transition 1s ease
- 원형 링: stroke-dashoffset transition 1.5s ease
- 버튼 hover: translateY(-2px) scale(1.02), 그림자 확장, 0.25s
- prefers-reduced-motion 존중

반응형:
- 768px 미만: 통계 그리드 2열, 카드 flex 180px, 원 80px, 필 font-size 0.78rem
- 768px 이상: 4열 통계, 220px 카드, 100px 원

금지사항:
- 밝은 배경이나 흰색 배경 금지
- 제목에 얇은/가벼운 font weight 금지 (최소 800)
- 날카로운 모서리 금지 — 카드 최소 16px radius, 필/버튼은 999px
- 뮤트되거나 파스텔한 그라디언트 금지 — 모든 그라디언트는 비비드하고 채도 높게
- 세리프 폰트 금지
- 미묘한 그림자 금지 — 그림자는 비비드한 글로우 미학을 강화해야 함

출력:
1. 인라인 CSS가 포함된 단일 HTML 파일
2. 멀티 컬러 듀오톤 그라디언트 카드 시스템의 다크 베이스
3. 그라디언트 배경의 초대형 볼드 통계 숫자
4. scroll-snap이 있는 수평 스크롤 카드 섹션
5. 애니메이션 stroke가 있는 SVG 원형 프로그레스 링
6. 다크 트랙의 그라디언트 프로그레스 바
7. 컬러 틴트가 있는 필 형태 태그 및 버튼
8. 모든 색상 토큰의 CSS 커스텀 프로퍼티

Duotone Boldスタイルのダッシュボード/ランディングページをデザインしてください — Spotify Wrappedにインスパイアされた、ダークベース上の高コントラストデュオトーンカード。

カラートークン:
--bg: #121212
--surface: #1e1e1e
--surface-elevated: #282828
--text: #ffffff
--text-muted: #b3b3b3
--green: #1db954
--green-soft: rgba(29, 185, 84, 0.15)
--purple: #8b5cf6
--pink: #ec4899
--orange: #f97316
--blue: #3b82f6
--gradient-1: linear-gradient(135deg, #1db954, #1ed760)
--gradient-2: linear-gradient(135deg, #8b5cf6, #ec4899)
--gradient-3: linear-gradient(135deg, #f97316, #ef4444)
--gradient-4: linear-gradient(135deg, #3b82f6, #06b6d4)
--border: rgba(255, 255, 255, 0.1)

タイポグラフィ:
フォント: "Plus Jakarta Sans" sans-serif
見出し: weight 900, letter-spacing -0.03em, line-height 1.05
本文: 15px, weight 500, line-height 1.7
ディスプレイ数字: clamp(2.5rem, 5vw, 4rem), weight 900
バッジ: 0.72rem, weight 800, uppercase, letter-spacing 0.08em
h1: clamp(2.4rem, 6vw, 4.5rem), weight 900

UIコンポーネント:
- ヒーローカード: border-radius 24px, background var(--surface), border 1px solid var(--border), radial-gradientグローオーバーレイ（右上パープル、左下グリーン）
- 統計カード: border-radius 20px, フルグラデーション背景（green/purple-pink/orange-red/blue-cyan）, 大きなボールド数字 + 小さなupperscaseラベル
- デュオトーンカード: 水平スクロール, flex 0 0 220px, border-radius 16px, グラデーション背景（ビビッドからダークシェード）, 円形アバター要素（80px, rgbaホワイトbgにbackdrop-filter blur）, scroll-snap-type: x mandatory
- プログレスバー: 8px高さ, border-radius 999px, カラートークンに合わせたグラデーションフィル, ダークトラック背景
- 円形プログレスリング: 100px SVGサークル, stroke-width 8, stroke-dasharray 283, アニメーションstroke-dashoffset, 中央にボールドパーセント数字
- ピルタグ: border-radius 999px, カラーティント背景（15%不透明度）, マッチングテキストカラー, font-weight 700
- ボタン: ピル形状, background var(--green), color #000, font-weight 700, グリーングローbox-shadow, hover時scale(1.02) + translateY(-2px)
- バッジ: background var(--green), color #000, ピル形状, uppercase

レイアウト:
- コンテナ: min(1100px, 92vw), 中央揃え, padding 28px 0 100px
- 統計グリッド: repeat(auto-fit, minmax(140px, 1fr)), gap 16px
- 水平カード: overflow-x auto flex, gap 16px, カスタムスクロールバー（6px, ダークトラック）
- 円形プログレス: flex row with wrap, gap 24px, 中央揃え
- プログレスセクション: surfaceカードに20px radius, 28px padding
- セクション縦28px間隔でスタック

モーション:
- カード入場: translateY(20px) + scale(0.95) → 通常, 0.6s ease, 0.08sスタガー
- ピル入場: scale(0.85) → scale(1), opacity, 0.5s ease, 0.06sスタガー
- プログレスバーフィル: width transition 1s ease
- サークルリング: stroke-dashoffset transition 1.5s ease
- ボタンhover: translateY(-2px) scale(1.02), シャドウ拡張, 0.25s
- prefers-reduced-motionを尊重

レスポンシブ:
- 768px未満: 統計グリッド2列, カードflex 180px, サークル80px, ピルfont-size 0.78rem
- 768px以上: 4列統計, 220pxカード, 100pxサークル

禁止事項:
- 明るい背景や白い背景禁止
- 見出しに細い/軽いfont weight禁止（最低800）
- 鋭い角禁止 — カード最低16px radius、ピル/ボタンは999px
- ミュートやパステルのグラデーション禁止 — 全グラデーションはビビッドで高彩度
- セリフフォント禁止
- 微妙なシャドウ禁止 — シャドウはビビッドなグロー美学を強化すべき

出力:
1. インラインCSS付きの単一HTMLファイル
2. マルチカラーデュオトーングラデーションカードシステムのダークベース
3. グラデーション背景の超大型ボールド統計数字
4. scroll-snap付き水平スクロールカードセクション
5. アニメーションストローク付きSVG円形プログレスリング
6. ダークトラックのグラデーションプログレスバー
7. カラーティント付きピル型タグとボタン
8. 全カラートークンのCSSカスタムプロパティ