精选 · 开放 · 免费
Basedesign
一个运用巨大字体和鲜明对比创造文化影响力的粗野主义设计机构。
AgencyBold TypographyEditorialCleanPremium
01
设计气质 DNA
大胆图形化编辑式极简文化影响力
高冲击力文化画廊与现代设计宣言的结合。
02
色彩
#000000Ink
#212121Ink soft
#FFFFFFBG
#ABABABMuted
rgba(0,0,0,0.12)Line
高对比度单色调,偶尔使用蓝色作为交互元素的点缀色。
03
字体
geometric-sans
- display
120px · 700 - headline
60px · 300 - body
18px · 400 - caption
12px · 400
运用极端的尺寸差异来创建视觉层次。 · 展示文本保持紧凑的行距。 · 所有文本采用左对齐,确保清晰、结构化的外观。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
运用充足的留白来衬托大胆的排版元素。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 50px
交互元素与章节分隔线使用细黑色下划线。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽排版英雄区域,后接高对比度的编辑式章节。
07
动效与交互
200msmicro
250mssmall
350msmedium
cubic-bezier(0.32, 0, 0.67, 0)easing
内容过渡使用平滑淡入淡出 · 交互元素使用微妙变换
元素在悬停时发生微妙的淡入淡出或变换。 · 通过最小的视觉变化提供直接反馈。
08
组件
- button 简洁的文本链接,装饰极少。
- card 排版卡片,突出显示粗体标题与项目图像。
- hero 巨大的排版英雄区域,使用单个词语或短语占据视口,形成视觉主导。
09
文案语气与禁用清单
- 语气 自信、直接、权威。
- 标题风格 粗体、大尺度、宣言式。
- 按钮文案 简洁、无装饰的文本链接。
- 不要在主容器上使用圆角——截图显示为严格直角或非常微小的2px圆角。
- 不要为卡片添加投影——截图显示为扁平、高对比度的表面,无高度提升效果。
- 不要在单个章节中使用多种颜色——截图显示为严格的单色调色板。
- 不要居中对齐所有文本——截图显示强烈偏好左对齐排版。
- 不要使用狭小、拥挤的布局——截图显示开阔的留白与巨大的排版。
- 不要使用装饰性图标——截图显示为极简、以排版驱动的界面。
- 避免: 分散排版注意力的装饰性元素。
- 避免: 圆角或柔和形状。
- 避免: 复杂的颜色渐变或图案。
- 避免: 小而密集的文本块。
- 避免: 华丽或手写风格字体。
- 避免: 嘈杂、饱和的调色板。
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
这是一个高冲击力的设计机构网站,其特点是巨大的排版、鲜明的黑白对比以及极简的编辑式布局。主要字体类别是几何无衬线体,用于极端尺度(最大可达120px)以创造大胆的视觉标识。调色板几乎完全为单色,仅使用 #FFFFFF、#000000 和 #212121。不要使用圆角、柔和阴影或任何会削弱大胆、直接美学效果的装饰元素。聚焦于锐利的边缘、充足的留白和强有力的排版声明。布局应感觉像画廊或宣言,具有清晰的层次结构和深思熟虑的节奏。
en · zh-CN · zh-TW · ja · ko