01
设计气质 DNA
智识精选出版工艺进步
一个为进步理念打造的现代数字图书馆。
02
色彩
#FFFFFFInk#D0D1D4Ink soft#201819BG#504F4FMutedrgba(255,255,255,0.1)Line深邃、温暖的背景营造出高端画廊氛围，使多彩的书籍对象成为视觉焦点。
03
字体
- display
56px · 600 - heading
25px · 600 - body
16px · 400
所有编辑内容均使用 Ivar Headline 和 Ivar Text（过渡衬线体）。 · 所有文本元素保持一致的轻字间距（0.32px）。 · 书脊使用衬线体与等宽字体的混合排版。
04
间距
4px8px16px24px32px48px64px96px垂直节奏由内容块和书脊间距驱动。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 3px
lg · 0px
pill · 999px
极简；主要使用1px实线白色低透明度作为分隔线。
0 4px 24px rgba(0,0,0,0.4) 用于书脊
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全视口垂直滚动，聚焦于堆叠的3D书籍对象。
07
动效与交互
150msmicro
200mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
书脊揭示的平滑滚动联动过渡。 · 页面加载与导航时的透明度与变换动画。
交互元素上的微妙透明度变化或轻微移动。 · 标准指针光标指示可交互性。
08
组件
- button 极简的文本按钮或简单的胶囊形按钮。
- card 作为交互式卡片的3D渲染书籍对象。
- chip 无可见元素。
- input 无可见元素。
- hero 深色背景上的堆叠3D书脊。
09
文案语气与禁用清单
- 语气 智识、精致、严肃。
- 标题风格 正式的全大写或首字母大写衬线文本。
- 按钮文案 低调且极简。
- 不要为标题使用无衬线字体——截图显示使用的是衬线字体。
- 不要使用明亮、霓虹色背景——截图显示的是深色、柔和背景。
- 不要使用复杂的网格布局——截图显示的是垂直堆叠布局。
- 不要在主要容器上使用圆角——截图显示的是直角。
- 不要使用多种竞争的强调色——截图显示颜色仅限于书籍对象。
- 不要使用厚重的投影——截图显示3D对象上微妙、逼真的光照。
- 避免: 俏皮语言
- 避免: 鲜艳色彩
- 避免: 繁重的装饰元素
10
包内真实截图
11
System Prompt
Stripe Press 是一个具有深邃智识美学的高端数字出版品牌。主背景为深暖黑色（#201819），文本为白色（#FFFFFF）和柔和灰色（#D0D1D4）。排版完全采用过渡衬线体，特别是 Ivar 字族，保持正式且具有编辑感的基调。关键交互涉及150ms的平滑过渡和滚动联动动画。关键禁忌：绝不为标题使用无衬线字体，绝不使用明亮霓虹背景，绝不使用复杂网格布局，绝不在容器上使用圆角，绝不使用多种竞争的强调色，绝不使用厚重的投影。布局是一个在全视口容器中垂直堆叠的3D书籍对象。