精选 · 开放 · 免费
Superhi
一个面向创意科技技能的在线学习平台，采用大胆、多彩且友好的视觉语言。
EducationCreativeBold TypographyPlayfulConsumer
01
设计气质 DNA
创意职业学习趣味性社群实用技能
一个色彩丰富、平易近人的学习工作室，如同创意游乐场。
02
色彩
#2727E6Accent
#111118Ink
#F0F6FFBG
rgba(17, 17, 24, 0.1)Line
以充满活力的黄色与蓝色为主色调，辅以柔和的蓝色背景作为画布，承载醒目的几何形状。
03
字体
grotesque-sans · monospace
- display
72px · 400 - h1
48px · 400 - body
16px · 400
所有层级文本均使用清晰、中性的 grotesque 字体 · 大尺寸展示文本保持紧凑的负字间距 · 技术或次要强调信息使用等宽字体
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用统一的 4px 网格系统，配合充裕的 padding 与间距，营造开阔感。
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 16px
lg · 24px
pill · 999px
极简风格，交互元素通常使用纯色深色或蓝色边线。
rgba(18, 18, 151, 0.133) 0px 3.2px 4px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中垂直堆叠，搭配宽敞透气的区块与重叠的几何背景元素。
07
动效与交互
200msmicro
400mssmall
800msmedium
cubic-bezier(0.37, 0, 0.63, 1)easing
交互状态采用流畅过渡 · 变换动画采用弹簧式缓动效果
链接与按钮具有微妙的颜色或透明度变化。 · 提供即时视觉反馈，通常伴随轻微的缩放或颜色变化。
08
组件
- button 胶囊形圆角按钮，采用纯色填充（蓝色或黑色）与白色文字。
- card 白色卡片，圆角（16-24px），带有微妙的蓝色阴影，用于展示推荐语。
- hero 大型垂直堆叠区块，包含居中文本、吉祥物图标以及醒目的几何背景形状。
09
文案语气与禁用清单
- 语气 友好、鼓励、直接。
- 标题风格 大胆、行动导向的陈述，赋能用户。
- 按钮文案 清晰直接的行动号召，例如“查看课程目录”或“试听免费课程”。
- 勿使用深色背景——网站明确采用浅淡柔和的蓝色（#F0F6FF）作为主画布。
- 勿使用衬线字体——整个网站基于清晰、中性的 grotesque 无衬线字体类别构建。
- 勿将按钮设为矩形——设计一贯使用胶囊形圆角按钮。
- 勿使用柔和或仅限淡彩的调色板——网站采用如亮黄色和深蓝色等鲜艳、高饱和度的点缀色。
- 勿创建密集、小尺度的布局——设计优先考虑大面积留白与充裕的 padding。
- 勿在一个组件中使用多种强调色——每个区块通常只突出一种主强调色。
- 避免: 过度技术性术语
- 避免: 正式或生硬的语言
- 避免: 杂乱或密集的文本块
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
Superhi 是一个面向创意科技技能的在线学习平台。其设计基因以活泼、友好且大胆的视觉语言为特征。核心调色板采用柔和的蓝色背景（#F0F6FF），搭配深蓝色（#2727E6）与亮黄色（#FFE600）的鲜艳点缀。字体采用清晰、中性的 grotesque 无衬线字体，大尺寸展示文本使用紧凑字间距。关键禁忌：切勿使用深色模式背景，完全避免衬线字体，且勿将按钮设为矩形。布局开阔、居中，并运用大胆的几何形状作为趣味背景元素。
en · zh-CN · zh-TW · ja · ko