什么是热带天堂风格？

热带度假风设计，棕榈叶、鲜艳花卉色彩、阳光沙滩的明快基调。适合旅游、度假村、生活方式和餐饮品牌。它的设计理念：Tropical Paradise（热带天堂）风格汲取热带岛屿的自然色彩与度假氛围，将阳光、海洋、棕榈叶和热带花卉的鲜活能量注入数字界面。核心理念： - 明快色彩：珊瑚红、芒果黄、棕榈绿与蓝绿色的大胆组合，传递热带的活力与热情 - 阳光基调：温暖的淡黄底色如同阳光洒落的沙滩，让人感到放松与愉悦 - 自然灵感：棕榈叶的有机形态、花卉的缤纷色彩融入设计元素中 - 度假体验：整体氛围传达轻松、自在、充满期待的度假感受这种风格非常适合旅游度假村、热带餐饮、冲浪品牌、热带水果饮料、岛屿婚礼策划以及户外生活方式品牌。设计时应大胆使用鲜艳色彩但保持协调，通过圆润的形状和充足的留白让画面保持通透感。热带风格不是杂乱无章的色彩堆砌，而是像热带花园一样——缤纷却有秩序，热烈却不失优雅。

热带天堂风格常用什么配色？

热带天堂的主色是 #00897b，辅色是 #fffde7，强调色包括 #ff6f61、#ffc107、#4caf50、#a09314。每个色值都可以在本页色板中复制。

怎样把热带天堂风格做对？

关键做法：使用蓝绿主色 #00897b 搭配暖黄底色 #fffde7. 强调色使用珊瑚红 #ff6f61 和芒果黄 #ffc107. 圆角使用 rounded-2xl 或 rounded-full，传达柔和度假感.

热带天堂风格最常见的错误是什么？

应避免：禁止使用深色/黑色背景主题. 禁止使用灰色调为主的配色. 禁止使用尖锐的直角和棱角 rounded-none.

如何让 AI 生成热带天堂风格的界面？

复制本页提供的 AI 提示词（含设计 tokens 与组件规则），粘贴到 ChatGPT、Claude、Claude Code 或 Codex。提示词中应包含关键词：热带、天堂、棕榈、花卉。

热带天堂

Tropical Paradise

47/100较差

给这个风格评分

热带度假风设计，棕榈叶、鲜艳花卉色彩、阳光沙滩的明快基调。适合旅游、度假村、生活方式和餐饮品牌。

热带天堂棕榈花卉阳光度假明快moderncontemporarysleek

导出

适合场景

热带 / 天堂 / 棕榈

设计重点

使用蓝绿主色 #00897b 搭配暖黄底色 #fffde7

注意事项

禁止使用深色/黑色背景主题

Showcase 入口

Showcase 页面的实时预览，点击查看完整体验。

查看完整 Showcase →

配色方案

Primary

#00897b

Secondary

#fffde7

Accent 1

#ff6f61

Accent 2

#ffc107

Accent 3

#4caf50

Accent 4

#a09314

design.md

热带天堂的设计文档

一份文档说明这套风格的配色职责、字体规则、间距与组件构造。复制或下载后直接交给 Claude Code、Cursor、Codex 或 v0。

热带天堂 — 风格参考

棕榈叶、芒果黄、珊瑚红：一张度假村的海报。

Theme: light

热带天堂来自度假村的视觉：暖黄底（#fffde7）、蓝绿主色（#00897b）、珊瑚红（#ff6f61）与芒果黄（#ffc107）作强调、叶绿（#4caf50）作植物。圆角放大到 16 至 24px 甚至全圆，传达柔和的度假感；阴影带颜色（蓝绿 20%）而不是灰；标题用圆润的大字并压紧字距；hover 用明快的亮色变化。棕榈叶与花瓣是主要图形，允许大面积遮挡构图。

Colors

Name	Value	Token	Role
Teal	`#00897b`	`--color-teal`	主色：主按钮、文字与海水的语义。
Warm Yellow	`#fffde7`	`--color-warm-yellow`	页面底。像阳光下的沙地。
Coral	`#ff6f61`	`--color-coral`	第一强调：主 CTA 与花。
Mango	`#ffc107`	`--color-mango`	第二强调与高亮，像果肉与阳光。
Leaf	`#4caf50`	`--color-leaf`	棕榈叶与植物语义。
Olive	`#a09314`	`--color-olive`	压在黄上的文字，也是沙的暗部。

Typography

Nunito — 圆润无衬线，标题用 800 并压紧字距到 -0.02em。字形不能尖，度假不该有棱角。

Substitute: 'Trebuchet MS', 'PingFang SC', system-ui, sans-serif
Weights: 400, 700, 800
Sizes: 13, 16, 20, 28, 38, 52
Line height: 1.2 (display), 1.3 (headings), 1.65 (body)
Letter spacing: -0.02em on display, 0.06em on uppercase labels

Type Scale

Role	Family	Weight	Size	Line Height	Letter Spacing	Token
display	—	800	52px	1.2	-0.02em	`--text-display`
heading	—	800	38px	1.25	-0.02em	`--text-heading`
subheading	—	700	28px	1.35	—	`--text-subheading`
body-lg	—	400	20px	1.6	—	`--text-body-lg`
body	—	400	16px	1.65	—	`--text-body`
label	—	700	13px	1.45	0.06em	`--text-label`

Spacing & Layout

Base unit: 8px Density: comfortable

Spacing Scale

Name	Value	Token
8	8px	`--spacing-8`
16	16px	`--spacing-16`
24	24px	`--spacing-24`
32	32px	`--spacing-32`
48	48px	`--spacing-48`
64	64px	`--spacing-64`
96	96px	`--spacing-96`
128	128px	`--spacing-128`

Border Radius

Element	Value
cards	24px
buttons	999px
inputs	16px
images	24px

Page max-width: 1160px
Section gap: 96px
Card padding: 28px
Element gap: 20px

Components

Island Button

Role: 行动按钮

珊瑚红填充、白字、999px 全圆角、无描边、16px/700、padding 14px 32px，彩色阴影 0 4px 20px 蓝绿 20%。hover 时填充转芒果黄、文字转橄榄、阴影扩到 32px；按下缩放 0.97。过渡 180ms ease-out。

Sizes: padding 14px 32px; label 16px
States: hover: mango fill, wider shadow; active: scale 0.97

Resort Card

Role: 内容卡与行程卡

白底、24px 圆角、无描边、内边距 28px，彩色阴影 0 4px 20px 蓝绿 20%。标题 28px/700 蓝绿，正文 16px 行高 1.65。图片 24px 圆角铺满卡宽、4:3。hover 时阴影扩到 32px、上浮 4px，图片放大 1.03。

Palm Frond

Role: 棕榈叶装饰（签名）

一片 160 到 400px 的棕榈叶（用 SVG path 画 8 到 12 片羽状小叶），填叶绿的 60% 到 100%，允许从页面角上斜插进来并遮挡部分内容。它是最能标识这套风格的图形，单屏 1 到 2 片。

Sun Circle

Role: 太阳与光斑

一个 120 到 240px 的圆，填芒果黄到珊瑚红的径向渐变，不透明度 70%，配 3 到 5 个更小的光斑（各 24 到 48px、20% 不透明度）。放在区块角落作为氛围，不做动画或只做极慢的明暗呼吸。

Pill Field

Role: 表单输入

白底、999px 全圆角、1px 蓝绿 25% 描边、padding 12px 22px、16px 字。占位符蓝绿 50%。聚焦时描边转蓝绿 80% 并加 3px 的蓝绿 15% 外环。

Do's and Don'ts

Do

暖黄底配蓝绿与珊瑚红
圆角 16 到 24px 或全圆
阴影带蓝绿颜色而不是灰
棕榈叶大面积遮挡构图
标题圆润大字并压紧字距
hover 用明快亮色变化

Don't

不要用暗调或冷色摄影
不要用锐利直角
不要用灰黑阴影
不要用小于 12px 的圆角
不要用衬线字体
不要超过两片棕榈叶

Surfaces

Level	Name	Value	Purpose
0	Warm Yellow	`#fffde7`	页面底
1	White	`#ffffff`	卡片
2	Teal Wash	`rgba(0,137,123,0.10)`	区块底

Elevation

Teal soft: 0 4px 20px rgba(0,137,123,0.20)
Teal hover: 0 10px 32px rgba(0,137,123,0.28)

Imagery

度假场景摄影：海滩、棕榈、水果、泳池、热带植物。必须高亮、暖调、饱和。允许俯拍平铺。不使用暗调摄影、冷色图像与写实人物特写。

Layout

上限 1160px、容器内边距 24px，区块间距 96px。允许棕榈叶与光斑大面积遮挡构图。圆角统一偏好大值（16 到 24px 或全圆），绝不低于 12px。

Agent Prompt Guide

QUICK COLOR REFERENCE:

text: #00897b
background: #fffde7
coral: #ff6f61
mango: #ffc107
leaf: #4caf50
olive: #a09314

EXAMPLE COMPONENT PROMPTS:

做一个热带天堂卡片：白底、24px 圆角、无边框、内边距 28px、box-shadow 0 4px 20px rgba(0,137,123,0.2)。标题 28px/700 Nunito、色 #00897b、字距 -0.02em；正文 16px、行高 1.65、色 #2f3e3c。图片 4:3、24px 圆角。左上角斜插一片 240px 的棕榈叶（SVG path、填 #4caf50、不透明度 80%），可遮挡部分内容。主按钮 #ff6f61 填充、白字、999px 全圆角、padding 14px 32px、彩色阴影，hover 时填充转 #ffc107、文字转 #a09314。页面底色 #fffde7，全站圆角不小于 12px。

Similar Brands

Solarpunk — 同为绿色乐观，但太阳朋克讲生态未来，热带天堂讲度假
Fresh Market — 同样暖亮，但鲜活市集偏生鲜零售，热带天堂偏旅行业

Quick Start


:root {
  /* Colors */
  --color-teal: #00897b;
  --color-warm-yellow: #fffde7;
  --color-coral: #ff6f61;
  --color-mango: #ffc107;
  --color-leaf: #4caf50;
  --color-olive: #a09314;

  /* Typography — Font Families */
  --font-sans: 'Nunito', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 52px;
  --leading-display: 1.2;
  --tracking-display: -0.02em;
  --text-heading: 38px;
  --leading-heading: 1.25;
  --tracking-heading: -0.02em;
  --text-subheading: 28px;
  --leading-subheading: 1.35;
  --text-body-lg: 20px;
  --leading-body-lg: 1.6;
  --text-body: 16px;
  --leading-body: 1.65;
  --text-label: 13px;
  --leading-label: 1.45;
  --tracking-label: 0.06em;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Layout */
  --page-max-width: 1160px;
  --section-gap: 96px;
  --card-padding: 28px;
  --element-gap: 20px;
  --density: comfortable;

  /* Border Radius */
  --radius-cards: 24px;
  --radius-buttons: 999px;
  --radius-inputs: 16px;
  --radius-images: 24px;

  /* Surfaces */
  --surface-warm-yellow: #fffde7;
  --surface-white: #ffffff;
  --surface-teal-wash: rgba(0,137,123,0.10);
}

查看接入文档远程 MCP 端点，无需 token

社区

评分与反馈

还没有人评分，来当第一个登录后评分

正在加载评论…

登录后才能发表评论。

去登录

正在加载评论…

组件模板

组件预览

按钮

热带天堂风格按钮，圆润鲜艳

常见问题

关于热带天堂的常见问题

什么是热带天堂风格？: 热带度假风设计，棕榈叶、鲜艳花卉色彩、阳光沙滩的明快基调。适合旅游、度假村、生活方式和餐饮品牌。它的设计理念：Tropical Paradise（热带天堂）风格汲取热带岛屿的自然色彩与度假氛围，将阳光、海洋、棕榈叶和热带花卉的鲜活能量注入数字界面。核心理念： - 明快色彩：珊瑚红、芒果黄、棕榈绿与蓝绿色的大胆组合，传递热带的活力与热情 - 阳光基调：温暖的淡黄底色如同阳光洒落的沙滩，让人感到放松与愉悦 - 自然灵感：棕榈叶的有机形态、花卉的缤纷色彩融入设计元素中 - 度假体验：整体氛围传达轻松、自在、充满期待的度假感受这种风格非常适合旅游度假村、热带餐饮、冲浪品牌、热带水果饮料、岛屿婚礼策划以及户外生活方式品牌。设计时应大胆使用鲜艳色彩但保持协调，通过圆润的形状和充足的留白让画面保持通透感。热带风格不是杂乱无章的色彩堆砌，而是像热带花园一样——缤纷却有秩序，热烈却不失优雅。
热带天堂风格常用什么配色？: 热带天堂的主色是 #00897b，辅色是 #fffde7，强调色包括 #ff6f61、#ffc107、#4caf50、#a09314。每个色值都可以在本页色板中复制。
怎样把热带天堂风格做对？: 关键做法：使用蓝绿主色 #00897b 搭配暖黄底色 #fffde7. 强调色使用珊瑚红 #ff6f61 和芒果黄 #ffc107. 圆角使用 rounded-2xl 或 rounded-full，传达柔和度假感.
热带天堂风格最常见的错误是什么？: 应避免：禁止使用深色/黑色背景主题. 禁止使用灰色调为主的配色. 禁止使用尖锐的直角和棱角 rounded-none.
如何让 AI 生成热带天堂风格的界面？: 复制本页提供的 AI 提示词（含设计 tokens 与组件规则），粘贴到 ChatGPT、Claude、Claude Code 或 Codex。提示词中应包含关键词：热带、天堂、棕榈、花卉。

全局样式

全局 CSS

css

/* Tropical Paradise 全局样式 */

:root {
  --tp-teal: #00897b;
  --tp-teal-dark: #00796b;
  --tp-sunshine: #fffde7;
  --tp-coral: #ff6f61;
  --tp-mango: #ffc107;
  --tp-palm: #4caf50;
}

/* 阳光渐变背景 */
.tp-sunshine-bg {
  background: linear-gradient(180deg, var(--tp-sunshine) 0%, #fff8e1 100%);
}

/* 热带色彩渐变 */
.tp-tropical-gradient {
  background: linear-gradient(135deg, var(--tp-teal) 0%, var(--tp-palm) 100%);
}

/* 珊瑚强调 */
.tp-coral-accent {
  background-color: rgba(255, 111, 97, 0.1);
  color: var(--tp-coral);
}

/* 棕榈叶装饰阴影 */
.tp-palm-shadow {
  box-shadow: 0 4px 20px rgba(0, 137, 123, 0.15);
}

/* 度假卡片悬停效果 */
.tp-card-hover {
  transition: all 0.3s ease;
}
.tp-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 137, 123, 0.2);
}
@keyframes tropical-paradise-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tropical-paradise-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.tropical-paradise-card {
  position: relative;
  overflow: hidden;
}

.tropical-paradise-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(0, 137, 123, 0.05), transparent);
  pointer-events: none;
}

.tropical-paradise-card:hover::before {
  opacity: 1;
}

.tropical-paradise-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(0, 137, 123, 0.08);
}

.tropical-paradise-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.tropical-paradise-animate-in {
  animation: tropical-paradise-fade-in 0.5s ease-out both;
}

维度	热带天堂	非对称网格
主色	#00897b	#0f0f0f
辅助色	#fffde7	#ffffff
适合场景	热带 / 天堂 / 棕榈	非对称 / 网格 / 不规则
独有标签	—	high-contrast

一次点击拿到

查看完整 Showcase →

7 个风格文件，包含 SKILL.md。

逐个预览或下载文件

Metadata

Style metadata including version information

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

设计哲学

Tropical Paradise（热带天堂）风格汲取热带岛屿的自然色彩与度假氛围，将阳光、海洋、棕榈叶和热带花卉的鲜活能量注入数字界面。

无障碍

无障碍评分

基于颜色对比度和排版可读性的 WCAG 2.1 合规分析。

综合评分

等级: D - 较差

对比度

分数: 30/100平均比率: 4.35:1

AA 未通过AAA 未通过

场景	颜色	比率
Text on background	/#00897b / #fffde7	4.21:1
Secondary text on background	/#374151 / #fffde7	10.04:1
Muted text on background	/#6b7280 / #fffde7	4.71:1
Text on secondary background	/#00897b / #ffffff	4.32:1
Secondary text on secondary	/#374151 / #ffffff	10.31:1
Button primary	/#ffffff / #00897b	4.32:1
Text on accent 1	/#00897b / #00897b	1:1
Alt text on accent 1	/#374151 / #00897b	2.39:1
Text on accent 2	/#00897b / #ff6f61	1.58:1
Alt text on accent 2	/#374151 / #ff6f61	3.78:1
Text on accent 3	/#00897b / #ffc107	2.65:1
Alt text on accent 3	/#374151 / #ffc107	6.32:1
Text on accent 4	/#00897b / #4caf50	1.55:1
Alt text on accent 4	/#374151 / #4caf50	3.71:1

可读性

分数

87/100

字号

text-sm md:text-base

字重

font-bold tracking-tight

行高

default

评分基于 WCAG 2.1 标准。AA 级要求普通文本对比度 4.5:1、大文本 3:1；AAA 级要求普通文本 7:1、大文本 4.5:1。