01
设计气质 DNA
游戏任天堂趣味家庭娱乐
一个展示缤纷产品的活力玩具店橱窗。
02
色彩
#E60012Accent#484848Ink#727272Ink soft#FFFFFFBG#C8C8C8Mutedrgba(200, 200, 200, 1)Line纯净的白色画布让缤纷的游戏艺术作品脱颖而出,并以标志性的任天堂红色作为锚点。
03
字体
- display
56px · 600
04
间距
4px8px16px24px32px48px64px96px标准4px网格,卡片采用宽松的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 12px
lg · 12px
pill · 999px
1px solid #C8C8C8
rgba(72, 72, 72, 0.15) 0px 4px 16px 0px · rgba(0, 0, 0, 0.07) 0px 2px 8px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽英雄图,后接多列卡片网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
内容区域在滚动时淡入。 · 卡片和按钮的悬停状态进行平滑过渡。
交互元素在悬停时有微妙的抬升或颜色变化。 · 立即响应,并提供微妙的缩放反馈。
08
组件
- button 带有红色点缀的药丸形轮廓按钮,主要操作使用实心红色。
- card 图像密集的圆角卡片,无阴影。
- chip 用于类别筛选的小型圆角方形图标。
- input 带有圆角和放大镜图标的搜索栏。
- hero 全出血、高冲击力的插图或截图,占据整个视口宽度。
09
文案语气与禁用清单
- 语气 热情、友好且适合家庭。
- 标题风格 醒目、描述性强且以行动为导向。
- 按钮文案 清晰、紧迫且具有鼓励性。
- 不要在主界面使用深色背景——截图显示的是干净的白色(#FFFFFF)背景。
- 不要使用厚重的投影——截图显示的是微妙、柔和的阴影(0px 4px 16px 0px)。
- 不要所有元素都使用尖锐的圆角——截图显示卡片具有一致的12px border-radius。
- 不要在英雄区使用宽幅多列布局——截图显示的是全出血、焦点单一的英雄图。
- 不要为主要按钮使用柔和、低对比度的颜色——截图显示的是醒目的红色(#E60012)点缀。
- 不要在标题中使用衬线字体——截图显示的是干净的人文无衬线字体。
- 避免: 过度使用术语
- 避免: 缺乏上下文的激进或阴暗图像
- 避免: 杂乱的布局
10
包内真实截图
11
System Prompt
这是任天堂官网主页,一个面向游戏硬件和软件的、干净且图像优先的产品展示。它采用白色(#FFFFFF)背景,让缤纷的游戏艺术作品脱颖而出,并以标志性的任天堂红色(#E60012)点缀作为锚点。字体使用干净的人文无衬线字体,并为标题使用粗体字重。关键禁忌:不要在主界面使用深色背景;不要使用厚重的投影;不要在卡片上使用尖锐的圆角。布局为全出血英雄图,后接多列卡片网格,优先考虑视觉内容而非文字。











