精选 · 开放 · 免费
Joshuakaplan
高度结构化、以排版为核心的设计作品集,通过简洁的网格布局清晰呈现信息层级。
PortfolioMinimalistTypographyStudioDesign Tools
01
设计气质 DNA
极简排版驱动系统化结构化精致
一个精心组织的设计作品集,如同结构化的索引或账簿。
02
色彩
#CDFF8BAccent
#000000Ink
rgba(0,0,0,0.75)Ink soft
#FFFFFFBG
rgba(0,0,0,0.5)Muted
鲜明的高对比度黑白调色板,仅使用单一的亮绿色作为状态指示器点缀。
03
字体
sans-serif
- display
16px · 500 - body
12px · 500
所有文本使用中等字重(500)的无衬线字体。 · 行高非常紧凑,通常在1.0至1.2之间。 · 字号保持统一的小尺寸,主要使用16px和12px。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
网格单元内采用紧凑一致的8px内边距,并通过水平分隔线划分主要区域。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 20px
大量使用1px实线 rgba(0,0,0,0.75) 水平分隔线来区分行与区块。
06
布局
1200container
4columns
768 / 1024breakpoints
单列垂直堆叠行,每行分为四个宽度不等的列。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
所有交互元素均应用过渡效果。
文本链接悬停时颜色变为蓝色。 · 可点击元素使用标准指针光标。
08
组件
- button 无视觉按钮样式的文本链接,用于导航。
- card 行作为数据卡片,内容按对齐列组织。
- chip 药丸状状态指示器(例如“✓ 已收购”),采用亮绿色背景。
- hero 纯文本页眉,介绍设计师并提供导航链接。
09
文案语气与禁用清单
- 语气 专业、简洁且系统化。
- 标题风格 直接且信息明确,陈述角色与地点。
- 按钮文案 简洁、无装饰的文本链接用于导航。
- 避免为容器添加圆角——截图中所有行与区块均为锐利的90度直角。
- 避免使用投影或高度效果——截图显示完全扁平化设计,无任何阴影。
- 避免使用多种强调色——截图中为单色调色板,仅状态标签使用亮绿色点缀。
- 避免使用大而多样的字体——截图显示非常紧凑的字号层级,尺寸变化极小。
- 避免使用粗重边框或方框——截图中仅使用细单像素水平线进行分隔。
- 避免使用装饰性图像或背景图案——截图显示纯白背景,除徽标外无任何图像。
- 避免: 装饰性语言
- 避免: 营销术语
- 避免: 过度修饰
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高度结构化、极简主义的设计师作品集。采用鲜明的高对比度黑白调色板,仅以单一亮绿色(#CDFF8B)作为状态指示器点缀。排版完全使用中等字重的无衬线字体,字号层级非常紧凑(16px和12px),行高约1.0至1.2。布局为系统化的单列网格,行被划分为四个对齐列,并由细水平线界定。关键禁忌:主要容器避免圆角;不添加投影或高度效果;不引入多种强调色或装饰性图像。设计完全基于排版与结构。
en · zh-CN · zh-TW · ja · ko