精选 · 开放 · 免费
Ilovecreatives
一个时尚的编辑平台，作为创意专业人士的数字职业学校和社区。
EditorialPortfolioTypographyProductClean
01
设计气质 DNA
创意教育社区斜杠青年职业学校
一个现代、时尚的社区中心和数字职业学校，服务于拥有多元热情的创意人士。
02
色彩
#489442Accent
#222222Ink
#FFFFFFBG
#757575Muted
rgba(34,34,34,0.2)Line
高对比度单色基底，搭配单一的柔和绿色用于促销横幅。
03
字体
transitional-serif · humanist-sans · geometric-sans
- display
56px · 400 - heading
30px · 400 - body
18px · 100 - caption
13px · 100
展示字体采用高对比度的过渡衬线体，字距紧密。 · 正文采用轻量级人文无衬线体。 · 按钮使用胶囊形状，大写或首字母大写样式。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
一致的4px基础网格，大型容器区块内使用充足内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 20px
pill · 450px
1px solid #222222
rgba(121,121,121,0.17) 2px 2px 20px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全出血主图区块过渡到结构化的多栏网格，用于产品和社区列表。
07
动效与交互
100msmicro
170mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
按钮和链接悬停时的微妙透明度和颜色过渡。 · 标准交互元素上快速的0.1秒线性过渡。
按钮背景填充为实心色或文字颜色反转。 · 通过状态变化或链接导航提供即时反馈。
08
组件
- button 胶囊形状，1px solid边框，透明背景，悬停时变为实心。
- card 纯白卡片，圆角（20px），带浅色阴影，用于产品和职位列表。
- chip 小型圆角胶囊标签，用于分类（如实体商品、服装）。
- input 极简文本输入框，带微妙底部边框或胶囊形状。
- hero 全出血摄影背景，搭配巨大、重叠的衬线字体和浮动文字元素。
09
文案语气与禁用清单
- 语气 有趣、友好且以社区为中心。
- 标题风格 对话式、略带不羁且直接。
- 按钮文案 清晰、行动导向，且常采用胶囊形状。
- 不要使用厚重的投影——截图显示为最小、柔和的阴影，如rgba(121,121,121,0.17) 2px 2px 20px 0px。
- 不要使用明亮、饱和的强调色——截图显示仅在特定横幅使用柔和、大地色系的绿色（#489442）。
- 不要为正文使用粗体字重——截图显示标准文本一致使用font-weight: 100。
- 不要为卡片或按钮使用尖锐、方形的角——截图显示一致使用胶囊形状（radius: 450px）和大圆角（radius: 20px）。
- 不要为背景使用复杂渐变——截图显示为纯白背景和摄影主图叠加。
- 不要使用宽松、分散的行高——截图显示为紧凑、控制的行高（1.2至1.4），以营造密集的编辑感。
- 避免: 正式的企业行话
- 避免: 没有视觉分隔的大段连续文本
- 避免: 冰冷或纯交易性的语言
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（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
该网站是一个创意社区平台和数字职业学校，服务于‘斜杠青年’（拥有多元热情的创意人士）。视觉形象建立在以#222222墨色搭配#FFFFFF背景的干净单色基底上，并以柔和的#489442绿色专用于促销横幅进行点缀。排版依赖粗体、高对比度的过渡衬线体用于巨大的展示标题，以及轻量级人文无衬线体（Suisse Regular，字重100）用于正文，营造出精致的编辑感。关键禁忌：避免使用饱和或霓虹色，切勿为正文使用粗体字重，主要按钮和标签始终使用圆角胶囊形状。布局将全出血摄影主图区块与结构化的、基于卡片的网格相结合，用于产品和社区列表，所有元素均采用紧密的字母间距和充足的内边距。
en · zh-CN · zh-TW · ja · ko