复古胶片Vintage Analog / Retro Film
低饱和暖调、颗粒、漏光与轻微褪色，边缘暗角模拟老镜头。适合有影像素材的品牌，纯 UI 使用会显得疲软。
典型场景摄影 · 咖啡/餐饮 · 独立出版
编号68
年代1970s-90s Analog Revival
复杂度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
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
低饱和暖调、颗粒、漏光与轻微褪色，边缘暗角模拟老镜头。适合有影像素材的品牌，纯 UI 使用会显得疲软。
关键词
Film grainVHScassette tapepolaroidanalog warmthfaded colorslight leaksvintage photography
效果与动效
Film grain overlay, VHS tracking effect, polaroid shake, fade-in transitions, light leak animations
设计系统变量
--sepia-amount20%--contrast1.1--saturation0.8--grain-opacity0.15--light-leak-colorrgba(255,200,100,0.2)--warm-tint#F5E6C8配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Faded Cream #F5E6C8, Warm Sepia #D4A574, Muted Teal #4A7B7C, Soft Pink #E8B4B8
辅色 / Secondary
Grain overlays, light leak oranges, shadow blues, vintage paper tones, desaturated accents
强调色在页面底色上的对比度约 3.9:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Photography portfolios
- music/vinyl brands
- vintage fashion
- nostalgia marketing
- film industry
- cafes
避开 / Do Not Use For
- Modern tech
- SaaS
- healthcare
- children's apps
- corporate enterprise
框架兼容
customcanvas
能力矩阵
浅色模式支持
深色模式有条件支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Film grain visible,
- Colors faded/warm,
- Light leaks present,
- Nostalgic feel achieved,
- Performance with filters,
- Images look vintage
CSS / 技术关键词
filter: sepia() contrast() saturate(0.8), background: noise texture overlay, animation: VHS tracking (transform skew), light leak gradient overlay, border for polaroid frame, grain via SVG filter
AI 提示词
Design with vintage analog film aesthetic. Use: film grain overlay, faded/desaturated colors, warm sepia tones, light leaks, VHS tracking effect, polaroid frame, analog warmth, nostalgic photography feel.