精选 · 开放 · 免费
Antoniouve
一个充满趣味的插画与动画作品集,以充满活力的黄色色调、粗犷的黑色字体和零散的异想天开图形元素为定义。
PlayfulExpressiveWarmFriendlyStudio
01
设计气质 DNA
趣味异想天开动画插画风格有趣
一本从页面上跳下来开始跳舞的速写本。
02
色彩
#000000Ink
#FFC900BG
#7A7A7AMuted
rgba(0,0,0,1.0)Line
高饱和度、温暖的黄色背景,搭配锐利的黑色字体,以实现最大冲击力和趣味能量。
03
字体
geometric-sans
- display
123px · 500 - h1
34px · 400 - body
26px · 400 - small
9px · 400
所有文本使用几何无衬线字体 · 标题文本保持紧凑的行高
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
灵活的间距,关键交互元素采用宽松的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 17px
md · 17px
lg · 429px
pill · 429px
1px solid black
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全宽主画布,带有散布的绝对定位图形元素。
07
动效与交互
450msmicro
450mssmall
600msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
浮动元素的平滑弹性过渡 · 变换和透明度渐变
交互元素上平滑的变换和过渡。 · 标准交互反馈。
08
组件
- button 圆角药丸状按钮,带黑色边框和 24px 内边距。
- card 圆角容器,尽管主要视觉是散布的浮动元素。
- hero 巨大的 123px 标题,与纯黄色背景上的抽象动画形状重叠。
09
文案语气与禁用清单
- 语气 趣味、非正式且自信。
- 标题风格 粗体、小写或大小写混合,并且极具表现力。
- 按钮文案 简单、有吸引力且圆润。
- 不要使用白色背景——截图显示的是占主导地位的黄色
- 不要使用衬线字体——截图显示的是几何无衬线文本
- 不要做得极简——截图显示的是一个布满零散、彩色形状的画布
- 不要使用柔和的淡色——截图显示的是饱和的黄色、橙色和粉色点缀
- 不要使用尖锐的角落——截图显示的是圆角和药丸状元素
- 不要使用僵化的对齐——截图显示的是零散、重叠的图形元素
- 避免: 企业化语言
- 避免: 僵化的网格
- 避免: 单调的颜色
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为插画师和动画师准备的趣味性、富有表现力的作品集。它被定位为一个有趣、创意且平易近人的工作室。主色调是温暖的黄色 (#FFC900) 搭配实心黑色 (#000000) 文字。字体采用几何无衬线字体类别,大号展示文本最大 123px,小号 UI 文本为 9px。关键禁忌:切勿使用白色或深色背景,切勿使用僵化的网格结构,切勿使用衬线字体,切勿以生硬或过于企业化的方式呈现元素。布局是全视口画布,带有零散、重叠的彩色图形元素。
en · zh-CN · zh-TW · ja · ko