精选 · 开放 · 免费
Ka Ra Studio
为木工设计实践打造的、以排版为核心的克制型作品集。
StudioPhotographicCurationRestraintClean
01
设计气质 DNA
手工打造家具木材极简工作室实践
一个定制木艺作品的精选画廊展览。
02
色彩
#674A1DInk
#FFFFFFBG
rgba(103, 74, 29, 1)Line
以温暖白色与浓郁的木质棕色墨色为主导的双色调色板。
03
字体
transitional-serif
- display
34px · 400 - body
15px · 400
主字体 'A B C Laica' 专用于所有文本元素。 · 所有文本均保持统一的 400 字重。 · 文本颜色严格限定为白色背景上的温暖木质棕色。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充裕的内边距与边距营造出从容不迫的浏览体验。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
边框使用主墨色，偶尔会搭配微妙的灰色用于非活动状态。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
一个拥有充裕留白与居中文本的、垂直滚动的单栏布局。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素在 hover 时的微妙透明度过渡。
文本链接通过降低透明度来指示可交互性。 · 标准的浏览器导航。
08
组件
- button 包裹在括号内的文本链接，依赖光标变化和透明度过渡来实现交互。
- card 无边框的大型摄影卡片，下方配有居中的文本描述。
- hero 一个以文本为主的介绍性区块，后接网格或单张大图。
09
文案语气与禁用清单
- 语气 精致、沉静且自信。
- 标题风格 陈述式，通常标明物品名称与材质。
- 按钮文案 微妙，使用括号来框定如“查看”或“信息”之类的简单操作。
- 勿使用深色背景——截图显示的是干净的白色背景。
- 勿使用无衬线字体——截图显示的是独特的过渡衬线字体。
- 勿使用明亮的强调色——截图使用的是单色棕色墨色调色板。
- 勿使用厚重的投影——截图显示的是完全扁平的表面处理。
- 勿使用复杂的多栏网格——截图显示的是简单的、居中的垂直流。
- 勿使用粗体字重——截图显示所有文本均使用统一的 400 字重。
- 避免: 营销术语
- 避免: 喧嚣的行动号召
- 避免: 过度的装饰
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
将此定位为一个精致、极简的设计工作室作品集。关键色彩是温暖的白色背景与木质棕色墨色。字体仅为一种过渡衬线体，且使用单一字重。关键禁忌：不要引入深色模式或黑色背景，不要使用无衬线字体，不要为组件添加装饰性投影。保持交互的微妙，依赖透明度变化与充裕的留白。
en · zh-CN · zh-TW · ja · ko