Oku Club

一座宁静的学术图书馆，兼具现代数字气质。

采用黑白高对比度单色系配色以确保清晰度，搭配柔和的中性背景色以营造微妙的层次感。

transitional-serif · humanist-sans

• display56px · 400
• h236px · 400
• body16px · 400
• caption12px · 400

主要标题使用过渡衬线字体，传达文学、精致的语调。 · 正文与界面元素使用人文主义无衬线字体，确保可读性与亲和力。 · 通过标题与正文间充足的间距，建立清晰的排版层级。

采用一致的 4px 基础网格，搭配充足的垂直与水平间距，打造开阔、通透的布局。

1px solid rgba(19,19,20,0.22)

rgba(0, 0, 0, 0.08) 0px 6px 8px 0px · rgba(0, 0, 0, 0.06) 0px 12px 16px 0px · rgba(0, 0, 0, 0.04) 0px 33px 45px 0px

采用居中单列布局用于内容展示，搭配充足的水平内边距与最大宽度容器以控制文本行宽。

按钮与链接的 hover 和 focus 状态采用平滑的 ease-out 过渡。 · 内容区块进入视口时采用柔和的淡入或上滑动画。

按钮、链接等交互元素在 hover 时发生细微的颜色或透明度变化。 · 主要操作按钮点击时略微缩小或提供即时反馈。

• button 黑色填充按钮配白色文字与小圆角（3px），或白色描边按钮配黑色文字。
• card 简洁的卡片，带有柔和阴影与小圆角（8px），常用于展示书单或推文等内容。
• chip 小型描边标签，带有圆角（3px），用于“轻松阅读”或“有趣”等分类标签。
• input 极简的文本输入框，采用底部边框或柔和描边样式。
• hero 采用分割布局：左侧为大型衬线标题与行动号召，右侧为趣味性黑白插图。

• 语气 平静、亲切且富有文采，将应用定位为个人阅读旅程的得力伴侣。
• 标题风格 使用简短、唤起共鸣且个人化的短语，直接与读者体验对话。
• 按钮文案 直接且注重利益点，例如“免费加入”。

• 不要使用明亮、饱和的强调色——截图显示的是严格的黑白灰单色配色。
• 不要使用几何无衬线字体作为标题——截图中主要标题使用的是过渡衬线字体。
• 不要使用厚重的投影或 3D 效果——截图中仅使用了用于体现层次感的柔和、轻微阴影。
• 不要在所有元素上都使用大圆角——截图中按钮和标签使用小半径（3px），而非普遍的大圆角或药丸形状。
• 不要使用深色模式界面——截图显示的是以浅色、白色为主的设计。
• 不要在首屏区域使用复杂的多栏网格——截图中采用的是简单的双栏分割布局。
• 避免: 避免使用过于随意的俚语或行话，以免削弱精致、学术的语调。
• 避免: 避免使用激进或高压的推销语言。
• 避免: 避免在界面上堆砌不必要的文字或复杂的说明。
• 避免: 避免使用与宁静单色调相冲突的明亮、饱和或霓虹色。
• 避免: 避免使用过于复杂或分散阅读注意力的动画与过渡效果。