像素风Pixel Art
低分辨率网格、有限调色板、硬边与逐帧动画。所有尺寸必须是像素单位的整数倍，否则会被浏览器插值破坏。
典型场景独立游戏 · 复古社区 · 彩蛋页面
编号52
年代1980s Arcade
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
低分辨率网格、有限调色板、硬边与逐帧动画。所有尺寸必须是像素单位的整数倍，否则会被浏览器插值破坏。
关键词
Retro8-bit16-bitgamingblockynostalgicpixelatedarcade
效果与动效
Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text
设计系统变量
--pixel-size4px--fontpixel font--border-stylepixel-shadow--anti-aliasnone配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Primary colors (NES Palette), brights, limited palette
辅色 / Secondary
Black outlines, shading via dithering or block colors
强调色在页面底色上的对比度约 14.0:1，可用于正文与图标。
适用场景
适合 / Best For
- Indie games
- retro tools
- creative portfolios
- nostalgia marketing
- Web3/NFT
避开 / Do Not Use For
- Professional corporate
- modern SaaS
- high-res photography sites
框架兼容
customcanvas
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向中Medium
渲染成本低无额外开销
无障碍风险需实测contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Pixelated fonts loaded,
- Images sharp (no blur),
- CSS box-shadow for pixel borders,
- Retro palette,
- Blocky layout
CSS / 技术关键词
font-family: 'Press Start 2P', image-rendering: pixelated, box-shadow: 4px 0 0 #000 (pixel border), no anti-aliasing
AI 提示词
Design a pixel art inspired interface. Use: pixelated fonts, 8-bit or 16-bit aesthetic, sharp edges (image-rendering: pixelated), limited color palette, blocky UI elements, retro gaming feel.