{
  "id": "y2k",
  "type": "styles",
  "status": "published",
  "name": {
    "zh": "Y2K 千禧美学",
    "en": "Y2K Aesthetic"
  },
  "aliases": [
    "千禧风",
    "Y2K风格",
    "千禧年美学",
    "镀铬金属质感",
    "iMac糖果色那种",
    "闪亮科技感",
    "千禧辣妹风",
    "Cyber Y2K"
  ],
  "category": [
    "Style",
    "Visual Language"
  ],
  "description": {
    "zh": "复刻千禧年前后数码乐观主义的视觉语言：镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感，甜腻、闪亮、毫不克制。",
    "en": "A visual language reviving turn-of-the-millennium digital optimism: liquid chrome, iMac translucent candy plastics, bubble type, sparkle stars, and pink-purple-blue gradients on silver highlights. It mixes naive futurism with clumsy low-poly 3D — sweet, shiny, gloriously unrestrained."
  },
  "use_when": [
    {
      "zh": "音乐 潮流 时尚品牌，瞄准怀旧千禧的年轻受众",
      "en": "Music, streetwear and fashion brands chasing Y2K nostalgia"
    },
    {
      "zh": "派对 社交 娱乐类产品，需要甜腻高饱和情绪",
      "en": "Party, social and entertainment products that want sugary energy"
    },
    {
      "zh": "复古主题营销活动与限定包装",
      "en": "Retro-themed campaigns and limited packaging"
    }
  ],
  "avoid_when": [
    {
      "zh": "金融 医疗 生产力工具，需要可信与克制",
      "en": "Fintech, healthcare and productivity — trust demands restraint"
    },
    {
      "zh": "长内容阅读场景，高饱和与闪光持续消耗注意力",
      "en": "Long reading sessions — saturation and sparkles fatigue the eye"
    },
    {
      "zh": "无障碍要求高的场景，银底浅字对比度普遍不足",
      "en": "Accessibility-critical contexts — silver-on-pastel often fails contrast"
    }
  ],
  "tags": [
    "y2k",
    "chrome",
    "candy",
    "millennium",
    "futurism"
  ],
  "variants": [
    {
      "id": "candy",
      "name": {
        "zh": "糖果塑料",
        "en": "Candy Plastic"
      },
      "note": {
        "zh": "iMac G3 半透明糖果壳，蓝绿橙粉",
        "en": "iMac G3 translucent shells in blue, green, orange and pink"
      }
    },
    {
      "id": "chrome",
      "name": {
        "zh": "镀铬金属",
        "en": "Liquid Chrome"
      },
      "note": {
        "zh": "液态金属字与镜面渐变，Cyber Y2K",
        "en": "Liquid-metal type and mirror gradients — the Cyber Y2K branch"
      }
    },
    {
      "id": "iridescent",
      "name": {
        "zh": "珠光幻彩",
        "en": "Iridescent"
      },
      "note": {
        "zh": "珍珠光泽幻彩渐变 CD 盘面",
        "en": "Pearlescent sheen and CD-rainbow gradients"
      }
    }
  ],
  "applicable_components": [
    "button",
    "card",
    "badge",
    "avatar"
  ],
  "related": [
    {
      "id": "cyberpunk",
      "relation": "similar_to"
    },
    {
      "id": "aurora",
      "relation": "similar_to"
    },
    {
      "id": "glassmorphism",
      "relation": "similar_to"
    },
    {
      "id": "retro-futurism",
      "relation": "similar_to"
    },
    {
      "id": "card",
      "relation": "affects"
    }
  ],
  "demo": {
    "component": "y2k",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "playground": {
    "task": {
      "zh": "立即进入后输入昵称、选择装扮生成对应会员卡，可修改后重做；音乐、装扮、星球、会员卡入口均有可查看内容，仅在本地生成身份。",
      "en": "Enter now, supply a nickname and outfit and generate a matching member card; edit and regenerate it. Music, Outfits, Planet and Member card reveal content; identity is generated locally only."
    },
    "checks": [
      {
        "zh": "逐一操作 ☆ CyberDream ☆ 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。",
        "en": "Use ☆ CyberDream ☆’s original navigation and primary CTAs; inspect content and return paths, not just click notices."
      },
      {
        "zh": "完成上述 ☆ CyberDream ☆ 操作后修改输入或撤销，检查结果与状态同步。",
        "en": "Complete the ☆ CyberDream ☆ task, then change inputs or undo and inspect the matching result/state."
      },
      {
        "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。",
        "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries."
      }
    ]
  },
  "sources": [
    {
      "name": "Wikipedia — Y2K aesthetic",
      "url": "https://en.wikipedia.org/wiki/Y2K_aesthetic"
    },
    {
      "name": "MDN — linear-gradient",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient"
    }
  ],
  "implementation": {
    "css": [
      "background: linear-gradient(#e0e0e0, #8f9096, #f5f5f5)",
      "background-clip: text",
      "text-shadow",
      "border-radius: 999px",
      "box-shadow: inset"
    ],
    "notes": {
      "zh": "镀铬感的公式是窄幅多段灰阶渐变：#f8f8f8 → #9a9ba2 → #ffffff → #7c7d84， 配 1px 白高光内阴影与深色投影；文字镀铬用 background-clip: text 加同款 渐变。糖果塑料用高饱和色 + 顶部 40% 白色内阴影模拟透光。星形闪光与 泡泡字是点睛元素，克制在 2～3 处。深色模式改用紫黑底让银色更突出。",
      "en": "Chrome is a narrow multi-stop greyscale gradient — #f8f8f8 → #9a9ba2 → #ffffff → #7c7d84 — with a 1px white inset highlight and a dark shadow; chrome text is the same gradient through background-clip: text. Candy plastic is a saturated fill with a white inner glow across the top 40% to fake translucency. Spend sparkles and bubble type on two or three accents. Dark mode goes purple-black so silver pops."
    }
  },
  "prompts": {
    "basic": {
      "zh": "用 Y2K 千禧美学设计界面：镀铬液态金属、iMac 糖果半透明塑料、粉紫蓝渐变 与闪光星形元素，甜腻闪亮的千禧年质感。",
      "en": "\"Design an interface in Y2K aesthetic: liquid chrome, iMac candy plastics, pink-purple-blue gradients and sparkle stars — sweet, shiny millennium texture.\""
    },
    "design": {
      "zh": "Y2K 设计规范：底色粉紫渐变（#FFC8F0 → #C8B8FF → #A8D8FF）或银白；主按钮 用胶囊形 + 铬渐变（灰白四段）+ 白高光内阴影；卡片为半透明糖果色圆角块， 顶部白色内发光；标题用气泡粗字或镀铬字（background-clip: text）；点缀 四角星闪光；深色模式用紫黑底 + 银铬高亮。",
      "en": "\"Y2K spec: pink-purple gradient ground (#FFC8F0 → #C8B8FF → #A8D8FF) or silver; pill buttons with a four-stop chrome gradient and white inset highlight; cards as translucent candy rounded blocks with a top inner glow; bubble-bold or chrome headings (background-clip: text); four-point sparkle accents. Dark mode on purple-black with silver chrome highlights.\""
    },
    "implementation": {
      "zh": "用当前风格完成 ☆ CyberDream ☆ 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n保留 CyberDream 银紫粉浅渐变、圆体字、紫色 CTA、右侧数据图表与三张浅色功能卡，不把原文字替换成强制 background-clip 镀铬字或新增闪星组件。会员卡沿用浅粉蓝渐变、白色 2px 边、28px 圆角与 -2deg 轻倾斜；昵称和装扮属于卡片内容。\n\n复用当前 preview.tokens：背景 linear-gradient(160deg,#DDE7F5 0%,#EFD3E8 55%,#C9C8F4 100%)；前景 #3A3A55；强调 #7B61FF / #fff；卡面 rgba(255,255,255,.78)；边框 #B8B8E0；圆角 20px；字体 ui-rounded, 'Arial Rounded MT Bold', 'PingFang SC', sans-serif；卡影 0 8px 18px rgba(123,97,255,.18)。\n\ndark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。\n\n立即进入后输入昵称、选择装扮生成对应会员卡，可修改后重做；音乐、装扮、星球、会员卡入口均有可查看内容，仅在本地生成身份。\n\n静态封面、详情演示与 /style-scenes/y2k/（英文 /en/style-scenes/y2k/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。",
      "en": "Build a complete ☆ CyberDream ☆ page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template.\n\nKeep CyberDream’s pale silver/lilac/pink gradient, rounded type, violet CTA, right-side chart and three pale feature cards; do not replace original text with mandatory clipped chrome lettering or new sparkle components. The member card retains its pastel pink/blue gradient, 2px white rim, 28px radius and -2deg tilt, with nickname and outfit as real content.\n\nReuse current preview.tokens: background linear-gradient(160deg,#DDE7F5 0%,#EFD3E8 55%,#C9C8F4 100%); foreground #3A3A55; accent #7B61FF / #fff; card rgba(255,255,255,.78); border #B8B8E0; radius 20px; font ui-rounded, 'Arial Rounded MT Bold', 'PingFang SC', sans-serif; card shadow 0 8px 18px rgba(123,97,255,.18).\n\nUse generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows.\n\nEnter now, supply a nickname and outfit and generate a matching member card; edit and regenerate it. Music, Outfits, Planet and Member card reveal content; identity is generated locally only.\n\nShare one renderer between static covers, the detail experience and /style-scenes/y2k/ (English /en/style-scenes/y2k/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion."
    },
    "agent": {
      "zh": "用当前风格完成 ☆ CyberDream ☆ 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源，不替换成通用营销模板。\n\n保留 CyberDream 银紫粉浅渐变、圆体字、紫色 CTA、右侧数据图表与三张浅色功能卡，不把原文字替换成强制 background-clip 镀铬字或新增闪星组件。会员卡沿用浅粉蓝渐变、白色 2px 边、28px 圆角与 -2deg 轻倾斜；昵称和装扮属于卡片内容。\n\n复用当前 preview.tokens：背景 linear-gradient(160deg,#DDE7F5 0%,#EFD3E8 55%,#C9C8F4 100%)；前景 #3A3A55；强调 #7B61FF / #fff；卡面 rgba(255,255,255,.78)；边框 #B8B8E0；圆角 20px；字体 ui-rounded, 'Arial Rounded MT Bold', 'PingFang SC', sans-serif；卡影 0 8px 18px rgba(123,97,255,.18)。\n\ndark 与 variants 复用 generic-style-pages.css 已有工作区选择器，不据通用历史变体重画首屏；保留 renderer 内各视觉面板的局部高光、渐变和投影。\n\n完整页面操作：\n立即进入后输入昵称、选择装扮生成对应会员卡，可修改后重做；音乐、装扮、星球、会员卡入口均有可查看内容，仅在本地生成身份。\n\n静态封面、详情演示与 /style-scenes/y2k/（英文 /en/style-scenes/y2k/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。",
      "en": "Build a complete ☆ CyberDream ☆ page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template.\n\nKeep CyberDream’s pale silver/lilac/pink gradient, rounded type, violet CTA, right-side chart and three pale feature cards; do not replace original text with mandatory clipped chrome lettering or new sparkle components. The member card retains its pastel pink/blue gradient, 2px white rim, 28px radius and -2deg tilt, with nickname and outfit as real content.\n\nReuse current preview.tokens: background linear-gradient(160deg,#DDE7F5 0%,#EFD3E8 55%,#C9C8F4 100%); foreground #3A3A55; accent #7B61FF / #fff; card rgba(255,255,255,.78); border #B8B8E0; radius 20px; font ui-rounded, 'Arial Rounded MT Bold', 'PingFang SC', sans-serif; card shadow 0 8px 18px rgba(123,97,255,.18).\n\nUse generic-style-pages.css’s existing workspace dark/variants selectors rather than redrawing the hero from generic historical variants; retain each rendered visual panel’s local highlights, gradients and shadows.\n\nFull-page operations:\nEnter now, supply a nickname and outfit and generate a matching member card; edit and regenerate it. Music, Outfits, Planet and Member card reveal content; identity is generated locally only.\n\nShare one renderer between static covers, the detail experience and /style-scenes/y2k/ (English /en/style-scenes/y2k/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion.\n\nAdd no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results."
    }
  },
  "style_spec": {
    "typography": {
      "zh": "圆体字 + 金属渐变标题",
      "en": "Rounded type with chrome gradient titles"
    },
    "color": {
      "zh": "银紫粉渐变 × 电紫 #7B61FF",
      "en": "Silver-lilac gradients with electric violet #7B61FF"
    },
    "border": {
      "zh": "1px 淡紫描边，大圆角",
      "en": "1px lavender outlines, large radius"
    },
    "shadow": {
      "zh": "柔和紫色光晕投影",
      "en": "Soft violet glow shadows"
    },
    "spacing": {
      "zh": "气泡式 20px 圆角，松弛排布",
      "en": "Bubble 20px radii, relaxed spacing"
    },
    "motion": {
      "zh": "150–250ms 带轻微回弹的过渡与光晕变化，尊重 prefers-reduced-motion",
      "en": "150–250ms transitions with a slight bounce and glow shifts; honour prefers-reduced-motion"
    },
    "states": {
      "zh": "hover 增强金属渐变与光晕；focus 用紫色可见亮环；active 缩小并加深；disabled 降透明去光；error 用红粉渐变",
      "en": "Hover strengthens the chrome gradient and glow; focus shows a visible violet ring; active scales down and darkens; disabled loses opacity and glow; error uses a red-pink gradient"
    }
  },
  "preview": {
    "order": 13,
    "keywords": {
      "en": "METAL & BUBBLE",
      "zh": "金属 · 气泡 · 梦幻"
    },
    "url": "https://cyberdream.jp",
    "scene": "generic",
    "brand": "☆ CyberDream ☆",
    "nav": [
      {
        "zh": "音乐",
        "en": "Music"
      },
      {
        "zh": "装扮",
        "en": "Outfits"
      },
      {
        "zh": "星球",
        "en": "Planet"
      }
    ],
    "navExt": [
      {
        "zh": "会员卡",
        "en": "Member card"
      }
    ],
    "heroTitle": {
      "zh": "Y2K CYBER",
      "en": "Y2K CYBER"
    },
    "heroTitle2": {
      "zh": "DREAM ✦",
      "en": "DREAM ✦"
    },
    "heroSub": {
      "zh": "千禧年的怀旧未来主义。",
      "en": "Nostalgic futurism from the turn of the millennium."
    },
    "cta": {
      "zh": "立即进入",
      "en": "Enter now"
    },
    "heroCaption": {
      "zh": "金属光泽 · 气泡字 · 荧光小熊",
      "en": "Metallic shine · Bubble type · Neon bears"
    },
    "features": [
      {
        "t": {
          "zh": "镭射背景",
          "en": "Holographic backdrop"
        },
        "s": {
          "zh": "流动的银紫",
          "en": "Flowing silver and violet"
        }
      },
      {
        "t": {
          "zh": "气泡按钮",
          "en": "Bubble buttons"
        },
        "s": {
          "zh": "圆滚滚的触感",
          "en": "A soft, rounded feel"
        }
      },
      {
        "t": {
          "zh": "像素贴纸",
          "en": "Pixel stickers"
        },
        "s": {
          "zh": "闪星与小熊",
          "en": "Sparkling stars and bears"
        }
      }
    ],
    "panel": "chart",
    "tokens": {
      "bg": "linear-gradient(160deg,#DDE7F5 0%,#EFD3E8 55%,#C9C8F4 100%)",
      "fg": "#3A3A55",
      "sub": "#7A7A99",
      "accent": "#7B61FF",
      "accentFg": "#fff",
      "card": "rgba(255,255,255,.78)",
      "cardBorder": "#B8B8E0",
      "radius": "20px",
      "shadow": "0 8px 18px rgba(123,97,255,.18)",
      "font": "ui-rounded, 'Arial Rounded MT Bold', 'PingFang SC', sans-serif",
      "heroSize": "22px"
    }
  }
}