OpenDesign·你的设计资产库

网页参考

Atlas Obscura

一份精美的策展编辑指南,带你领略世界上最非凡的隐秘之地。

EditorialTravel

封面待补录,可通过原站查看设计。

01

设计气质 DNA

策展旅行隐秘奇观图集发现

复古探险家日志与现代数字发现的结合

02

色彩

#E21F26Accent
#000000Ink
#383434Ink soft
#ffffffBG
#f7f7f7BG soft
#f1f1f1BG quiet
#808080Muted
rgba(0,0,0,0.1)Line

以高对比度的黑白编辑基底为主,搭配单一醒目的红色点缀色,用于品牌识别和强调

03

字体

transitional-serif · humanist-sans

  • display56px · 700
  • subtitle14px · 700
  • body16px · 400
  • caption14px · 400

标题使用衬线字体,营造经典的编辑感 · 正文和UI元素使用Open Sans以确保可读性 · 导语文字使用大写字母和字母间距以示强调

04

间距

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

标准4px基础网格,编辑区块内留有充足空白

05

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

sm · 4px
md · 0px
lg · 0px
pill · 999px

1px solid rgba(0,0,0,0.1),用于卡片和输入框

rgba(0,0,0,0.24) 0px 0px 5px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

顶部设有简洁的导航栏,后接全宽居中的主视觉区,包含搜索功能

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

悬停状态的平滑过渡 · 页面导航的平滑滚动

交互元素上微妙的颜色过渡 · 即时响应,伴有视觉反馈

08

组件

  • button 黑色药丸形按钮,配有白色文字和图标,用于‘附近地点’等主要操作
  • card 以图片为主的编辑式卡片,边框极简
  • chip 带轮廓的圆角按钮,用于‘随机地点’等次要操作
  • input 全宽圆角搜索输入框,带有占位文本和集成搜索图标
  • hero 居中的大标题,配有导语文字、描述和突出的搜索栏

09

文案语气与禁用清单

  • 语气 权威、引人入胜且充满好奇
  • 标题风格 宏大、富有感染力的衬线体标题,激发好奇心
  • 按钮文案 清晰、以行动为导向的按钮,配有描述性标签
  • 不要使用深色模式或深色背景 —— 截图显示以白色(#ffffff)背景为主
  • 不要在容器上使用活泼的圆角 —— 截图显示主视觉区为锐利的矩形边缘
  • 不要使用多种相互竞争的点缀色 —— 截图显示仅使用一种主导的红色(#E21F26)点缀
  • 不要为标题使用纤细、轻量的无衬线字体 —— 截图显示主标题使用粗体、有字重的衬线字体
  • 不要用过多的阴影使界面杂乱 —— 截图显示非常简洁的扁平化设计,投影极少
  • 不要使用小而紧凑的文字 —— 截图显示行高和间距充足,阅读舒适
  • 避免: 过于随意的语言
  • 避免: 过多的感叹号
  • 避免: 泛泛的旅行陈词滥调

10

包内真实截图

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

11

System Prompt

这是一个专注于发现隐秘奇观的高级策展旅行编辑平台。其视觉标识依赖于鲜明的黑白基底(#000000墨迹色在#ffffff背景上),并搭配单一醒目的红色点缀色(#E21F26)用于品牌标识和强调。排版上,标题结合了经典的过渡衬线字体,正文则采用人文主义无衬线字体(Open Sans)。布局为简洁的全宽编辑网格,留有充足空白。关键特征包括圆角药丸形输入框、锐利边缘的容器以及粗体大写的导语文字。不要使用深色模式,不要添加不必要的阴影或边框,也不要用多种点缀色使界面杂乱。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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