精选 · 开放 · 免费

Thefascination

一本探索时尚、生活方式与现代文化交汇点的精心策划的数字出版物。

EditorialCurationPhotographicCleanPremium

Thefascination 网站截图

↓ 下载设计系统包 (49 MB)在 OpenDesign 中打开

原站: https://thefascination.com

📦 浏览包内文件 →

01

设计气质 DNA

编辑风格精心策划现代精致有品位

一本专注于生活方式、时尚和文化的高端数字杂志。

02

色彩

#2EA3F2Accent

#1A202CInk

#797472Ink soft

#FAF8EFBG

#4C40E0Muted

rgba(0,0,0,0.1)Line

温暖的米白色背景，搭配深色、易读的文字，以及充满活力的蓝色和紫色点缀用于强调。

03

字体

transitional-serif · humanist-sans

display96px · 700
headline30px · 700
body18px · 400
caption14px · 400

使用过渡衬线字体用于展示和标题，以增添编辑权威感。 · 使用人文主义无衬线字体用于正文，确保高度可读性和现代感。 · 谨慎组合使用手写体字体（如 Qwitcher Grypen）作为装饰性、手写风格的点缀。

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

一致且富有韵律，基于 4px 网格，创造出结构清晰又透气的布局。

05

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

sm · 2px

md · 6px

lg · 12px

pill · 999px

极简而干净，主要用于结构分隔，使用 1px 线条。

none · 0 0 5px 0 rgba(128, 128, 128, 1)

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

简洁的居中栏式布局，留有充足的空白和清晰的段落标题。

07

动效与交互

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

模态框和交互元素采用平滑的透明度和 transform 过渡。 · 链接和按钮采用微妙的悬停效果。

交互元素上微妙的颜色变化或透明度偏移。 · 通过轻微的 transform 或透明度变化提供即时视觉反馈。

08

组件

button 简洁的、基于文本的按钮，采用干净的排版和极简的样式。
card 图像优先的卡片，带有清晰的标题和元数据，通常由细线分隔。
chip 分类标签，有时顶部带有彩色边框以示强调。
input 标准、干净的输入框，带有 1px 边框。
hero 大型、图像驱动的首屏区域，通常包含推广模态框覆盖层。

09

文案语气与禁用清单

语气精心策划、精致且略带趣味。
标题风格 粗体且具有宣告性，常使用衬线字体以显权威。
按钮文案 直接清晰，使用全大写以示强调。

不要使用深色模式——该网站专一地使用温暖的浅色背景（#FAF8EF）。
不要使用无衬线字体作为标题——该网站主要使用过渡衬线字体用于展示文本。
不要使用充满活力的绿色作为点缀色——该网站使用充满活力的蓝色（#2EA3F2）和柔和的紫色（#4C40E0）。
不要使用浓重的投影——该网站倾向于干净、扁平的表面，仅使用最少或微妙的阴影。
不要对文章使用多栏文本布局——该网站保持单一、居中、易读的栏式结构。
不要使用圆角卡片——该网站使用直角或微小圆角（2-6px）。
避免: 避免使用过于激进或推销式的语言。
避免: 避免杂乱的布局或过多的视觉噪音。
避免: 避免使用超过 2-3 种字体系列。
避免: 避免使用过于明亮或霓虹色的调色板。
避免: 避免使用密集、不间断的大段文字而没有图像。
避免: 避免使用复杂、多层次的阴影或渐变。

10

包内真实截图

Thefascination — 桌面首屏（hero） — 桌面首屏（hero）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Thefascination — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

这是一个专注于生活方式、时尚和文化的精心策划的编辑类网站，定位为一本精致的数字杂志。设计基因的核心是温暖的米白色背景（#FAF8EF）、深色易读的文字（#1A202C）以及充满活力的蓝色（#2EA3F2）和紫色（#4C40E0）点缀。排版将粗体的过渡衬线标题与高度可读的人文主义无衬线正文相结合。关键性的禁忌：切勿使用深色模式，避免将无衬线字体用于展示标题，以及不要引入充满活力的绿色点缀色。布局简洁、居中，并留有充足空白，以图像优先的卡片和极简、功能性的 UI 组件为特色。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko