OpenDesign·你的设计资产库

网页参考

Lpalo

一个以排版为核心、风格独特的儿童播客平台。

ConsumerPlayfulTypographyFriendlyEditorial
Lpalo 网站截图

01

设计气质 DNA

儿童播客叙事奇思妙想教育

一个充满童趣的儿童故事书与现代数字插图的结合。

02

色彩

#EF724FAccent
#151515Ink
#FDDFE1BG
#4A4A4AMuted
rgba(0, 0, 0, 0.8)Line

温暖的柔和色调背景,搭配高对比度的黑色字体和充满趣味、平涂色彩的点缀。

03

字体

slab-serif · humanist-sans

  • display120px · 800
  • body16px · 400
  • label12px · 500

展示型字体专门用于巨大的、引人注目的标题。 · 正文使用清晰、中性的无衬线字体以保证可读性。 · 导航项混合使用胶囊按钮和标准链接。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

慷慨、开放的间距,让大号字体得以呼吸。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 48px
pill · 999px

按钮和插图使用粗2px实线黑色轮廓

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

不对称、有趣的布局,包含重叠元素和散落的插图。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.68, -0.6, 0.32, 1.6)easing

UI 元素使用富有弹性的弹簧过渡。 · 背景插图使用微妙的浮动动画。

按钮上的颜色变化和微妙缩放。 · 通过自定义弹性缓动提供富有弹性的触感反馈。

08

组件

  • button 药丸形状,带有粗黑色边框,填充白色或强调色。
  • card 通过青色形状暗示,具有粗轮廓和有趣的插图。
  • chip 用于次要导航的小型药丸形状标签。
  • hero 在柔和色调背景上,左对齐的巨大板式衬线标题,配有浮动插图。

09

文案语气与禁用清单

  • 语气 有趣、充满奇思妙想且精力充沛。
  • 标题风格 大胆、不拘一格且大尺寸。
  • 按钮文案 清晰、可操作,并以药丸形状按钮呈现。
  • 不要使用标准系统字体——截图显示的是粗板式衬线和人文主义无衬线字体。
  • 不要使用微妙的阴影——截图显示的是带有粗2px黑色轮廓的平面设计。
  • 不要使用白色背景——截图使用了统一的温暖柔和粉色调背景。
  • 不要使用纤细、精致的字体——截图采用了极其粗重、加粗的字体字重。
  • 不要使用僵硬、严格对齐的网格——截图展示了有趣、重叠且不对称的布局。
  • 不要使用灰暗、低饱和度的颜色——截图使用了鲜艳、饱和的橙色和青色等点缀色。
  • 避免: 企业化
  • 避免: 呆板
  • 避免: 极简
  • 避免: 严肃
  • 避免: 术语

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个以排版为核心的有趣设计系统,用于儿童播客平台。核心身份建立在巨大、高对比度的板式衬线标题和温暖的柔和色调美学之上。调色板以柔粉色背景(#FDDFE1)为中心,搭配醒目的黑色(#151515)文字和充满活力的橙色(#EF724F)点缀。布局不对称且充满活力,包含散落的线条艺术插图和带有粗黑色边框的药丸形状按钮。关键设计规则:1) 永远不要使用白色背景或微妙的阴影;2) 字体必须粗重、加粗,避免纤细或企业化风格;3) 拥抱重叠元素和不对称构图,以保持奇思妙想和趣味感。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。