Interface Lab

Full Promptv1.0 Published

Full Prompt Design System本设计系统专为旅游网站定制，以深色背景为基础，通过柔和的色彩、细腻的阴影和渐进模糊，构建出层次丰富、视觉舒适的界面。图像优先的网格布局让目的地照片成为主角，GSAP动效增添流畅的交互感，整体传递出值得信赖、现代简洁且鼓舞人心的品牌调性。

Typography

Heading systemui-sans-serif / 48px / 600 / - / -Body systemui-sans-serif / 14px / 400 / - / -ui-sans-serif

LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09

Colors

Primary#0B1A2A

28% usage signal

Secondary#5EEAD4

29% usage signal

Tertiary#8B5CF6

6% usage signal

Neutral#E2E8F0

39% usage signal

linear-gradient(to bottom, var(--tw-gradient-stops))linear-gradient(to bottom right, var(--tw-gradient-stops))linear-gradient(to right, var(--tw-gradient-stops))linear-gradient(to top, var(--tw-gradient-stops))

Layout

LayoutGridWidthFull BleedGridStrongFramingGlass

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

Spacing

12px10pxTitle block

Description copy reflects measured rhythm, icon offset, and CTA spacing.

10px12px16px20px24px40px50px60px80px100px

Icons

LinearborderRadius: 12px 用于卡片和按钮，8px 用于输入框和小型组件。 rationale: 圆角半径较大，传递友好、现代的感觉，与旅行主题的轻松氛围相符，同时减少尖锐边角带来的紧张感。

Elevation & Depth

shadows: 1: 0 2px 8px rgba(0,0,0,0.3): 轻微悬浮的卡片，如目的地卡片 2: 0 4px 16px rgba(0,0,0,0.4): 弹窗、下拉菜单 3: 0 8px 32px rgba(0,0,0,0.5): 模态框、重要提示 rationale: 精致阴影在深色背景下营造出清晰的层次感，模拟真实世界的光影，使界面元素具有浮起的效果，增强可点击性和空间感。

Blur / backdrop filterBlur / backdrop filter / Reusable shadows / Gradient surfaces

Surface sampleGlass

SurfaceGlassBorder1px solid currentColor / low opacityShadow0 25px 50px rgba(0,0,0,.35)Blur12px

Shapes

borderRadius: 12px 用于卡片和按钮，8px 用于输入框和小型组件。 rationale: 圆角半径较大，传递友好、现代的感觉，与旅行主题的轻松氛围相符，同时减少尖锐边角带来的紧张感。

4pxradius-19999pxradius-2

Card surfaceInput fieldStatus pill

Do's and Don'ts

Use these constraints as design lint rules for future generations.

Dodos: 使用图像优先的网格展示目的地，确保图片高质量且色彩丰富。保持充足的留白，避免信息过载。在交互元素上使用GSAP微动效，如悬停、点击反馈。利用渐进模糊突出前景内容，如模态框打开时。

Don't