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