精选 · 开放 · 免费

Egstad

一位平面设计师兼网络开发者的大胆、富有表现力的个人作品集。

01

设计气质 DNA

一位平面设计师的个人作品集，具有大胆的字体陈述和趣味性的交互元素。

02

色彩

高对比度单色系，搭配温暖的米白色背景。

03

字体

grotesque-sans · humanist-sans · monospace

• display398px · 400
• body-lg58px · 400
• body16px · 400

主品牌名称采用极端尺度，形成强烈的视觉声明。 · 导航文字使用大写字母和宽字间距。 · 正文保持清晰、易读的无衬线字体风格。

04

间距

充裕的留白空间让大胆的字体得以呼吸，导航和页脚元素内部采用更紧凑的间距。

05

表面 (圆角 / 阴影 / 边线)

1px solid rgba(37, 36, 34, 1)

rgba(0, 0, 0, 0.063) 0px 1.3px 5.3px 0px · rgba(0, 0, 0, 0.09) 0px 4.5px 17.9px 0px · rgba(0, 0, 0, 0.15) 0px 20px 80px 0px

06

布局

单列首屏，后接用于个人简介和页脚的多列网格。

07

动效与交互

交互元素采用缓慢、平滑的淡入和颜色过渡。 · 悬浮元素上采用基于变换的趣味性 hover 效果。

交互元素上的细微颜色变化和基于变换的移动。 · 背景和边框颜色上的平滑过渡。

08

组件

• button 胶囊形，深色背景白色文字，具有 hover 过渡效果。
• card 在所提供的视图中未显著出现。
• chip 在所提供的视图中未显著出现。
• input 在所提供的视图中未显著出现。
• hero 巨大的全屏字体首屏，包含一个交互式的、重叠的类 3D 悬浮元素。

09

文案语气与禁用清单

• 语气 自信、个人化、略带趣味。
• 标题风格 极其粗壮、大尺度的字体，主导视觉领域。
• 按钮文案 直接简洁，以胶囊形按钮呈现。

• 不要使用小型、低调的标题——截图显示的是巨大的、填满屏幕的字体陈述。
• 不要使用复杂或鲜艳的调色板——截图显示的是严格克制的单色和米白色方案。
• 不要在交互元素上使用尖锐的方形圆角——截图显示的是具有高 border-radius 的显著胶囊形按钮。
• 不要为展示使用通用的系统默认字体——截图显示的是定制的、高度风格化的无衬线字体。
• 不要吝惜留白——截图显示所有内容块周围都有充裕的边距和 padding。
• 不要使用杂乱、拥挤的布局——截图显示的是干净、聚焦的单列和多列网格结构。
• 避免: 正式的企业化语言
• 避免: 小型、低调的标题
• 避免: 复杂的调色板

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko