精选 · 开放 · 免费
Jonasmosesson Se
一位插画师兼动画师的俏皮极简作品集。
PlayfulGalleryCleanCalmPortfolio
01
设计气质 DNA
俏皮手绘友好异想天开极简
一本活起来的素描本
02
色彩
#0057FFInk
#FFD7CEBG
rgba(0,87,255,1)Line
双色高对比度配色方案,柔和温暖的背景色搭配鲜明的蓝色点缀。
03
字体
humanist-sans
- display
48px · 600 - body
16px · 300
为大写微文本和标签使用宽松的字间距。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用宽松的垂直间距与大尺寸内边距区块。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
无边框,依赖纯色色块。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽首屏区域,后接对称的 2x2 纯色色块网格。
07
动效与交互
250msmicro
400mssmall
800msmedium
cubic-bezier(0.25,0.1,0.25,1)easing
hover 时的平滑颜色过渡与不透明度淡出。
细微的不透明度变化与颜色偏移。 · 标准链接行为。
08
组件
- button 基于文本的导航链接,在 hover 或激活状态下带有简单下划线。
- card 用于作品集网格的全出血色块。
- hero 居中放置于柔和背景上的大型手绘风格字体标志。
09
文案语气与禁用清单
- 语气 随性、友好且具有邀请感。
- 标题风格 手绘风格且富有表现力。
- 按钮文案 随性且对话式。
- 不要使用复杂渐变——截图显示为纯色色块。
- 不要使用厚重的投影——截图显示为完全扁平化设计。
- 不要使用衬线字体——截图中的所有文本均使用简洁的无衬线字体。
- 不要使用刺眼的深色背景——截图使用 #FFD7CE 等柔和粉彩色。
- 不要过度拥挤布局——截图显示留有大量空白。
- 不要使用生硬、方框式的边框——截图依赖纯色与线条艺术。
- 避免: 正式用语
- 避免: 密集段落
- 避免: 激进的行动号召
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个为插画师和动画师设计的俏皮极简作品集网站。设计采用简单的双色配色方案,以柔和温暖的桃子色 (#FFD7CE) 为背景,搭配鲜明的蓝色 (#0057FF) 点缀。字体采用轻盈、人文主义的无衬线体,并融入富有表现力的手绘元素。布局宽敞,使用居中文本容器和全出血的 2x2 实色色块网格展示作品集。关键禁忌:避免复杂渐变或纹理,不使用衬线字体,不添加厚重投影。保持随性、友好且具有邀请感的语调。
en · zh-CN · zh-TW · ja · ko