聚川文化
品牌设计系统

聚川成海，智创无界

浏览设计规范 ↓ 聚川文化官网 →
Color System

色彩系统

聚川文化定位于实体行业 AI 赋能，品牌色采用专业咨询的「理性蓝」搭配超级个体的「火焰红」，传递专业但有温度的品牌形象。

主品牌色 Brand Primary
— 知识、信任、理性
Primary
#1B4270
--primary
主要 CTA、链接、品牌识别
Primary Light
#2460A7
--primary-light
Hover 状态、渐层终点
Primary Dark
#0F2A47
--primary-dark
深色强调、按钮渐层
强调色 Accent
— 火焰红系、行动转化、教练 AI 标识
Accent
#E8251A
--accent
次要 CTA、教练 AI 标识
Accent Light
#FF4A40
--accent-light
Hover、高亮状态
Accent Dark
#B51D13
--accent-dark
深色强调
背景色 Background
— 空间层次、深浅对比
Cream
#F5F6F8
--bg-cream
网页主背景（温暖米色）
Neutral
#F5F6F8
--bg-neutral
中性灰底、区块分隔
White
#FFFFFF
--bg-white
卡片背景、干净区块
Dark
#0F1923
--bg-dark
深色区块、封面背景、Premium 质感
文字色 Text
— 阅读层次、资讯权重
Text Dark
#111827
--text-dark
主要标题、重要文字
Text Medium
#4B5563
--text-medium
段落内文、说明文字
Text Light
#9CA3AF
--text-light
辅助文字、标签、备注
Typography

字体系统

中英混排以 Inter + 思源黑体 SC 为主体，代码用 JetBrains Mono，简报标题用字魂扁桃体。

Hero Title
clamp(48px, 7vw, 72px)
Weight 900
Letter-spacing -0.04em
聚川成海，智创无界
Section Title
clamp(32px, 5vw, 48px)
Weight 800
Letter-spacing -0.03em
超级个体的品牌设计
Body Text
clamp(16px, 2vw, 18px)
Weight 400
Line-height 1.7
聚川文化（Confluent Culture Media）是一个专注于「实体行业 AI 获客系统」的品牌，致力于用 AI 能力帮助企业提升获客效率与转化效果。
Display Title
字魂扁桃体
Weight normal
简报 / 影片标题专用
一人公司 AI 工作术
Monospace
JetBrains Mono
代码、技术标签
font-family: 'JetBrains Mono', 'SF Mono', monospace;
Font Stack
完整字体堆叠
可直接复制
--font-sans: "Inter", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", monospace;
--font-display: "zihunbiantaoti", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
Shadows & Radius

阴影与圆角

5 层阴影 + 4 层圆角建立视觉深度。点击卡片复制 CSS 变量值。

阴影系统

Soft
subtle hover, 轻量元素
Medium
一般元素悬浮
Card
卡片预设阴影
Strong
强调元素、弹窗
Elevated
最高层级、Modal

圆角系统

Small
8px — 标签、徽章
Medium
16px — 按钮、输入框
Large
24px — 卡片
Extra Large
32px — Hero 区块
Components

常用组件

品牌常用的 UI 组件，含 live preview 和可复制的代码片段。

即将推出
方格底 CTA 区块
32px 方格底 + 品牌双色透明光晕，适合用于订阅表单、新书预告、活动报名等需要吸引注意力的 CTA 区块。
* 此为 preview，表单不会送出
Grid CTA Block 方格底行动召唤
32px 方格 + 火焰红/理性蓝双色光晕，适用于官网订阅、活动报名和转化入口 
.grid-cta {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(232, 37, 26, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(27, 66, 112, 0.06) 0%, transparent 50%),
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    #f9fafb;
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px, 100% 100%;
  border-radius: var(--radius-lg);
  padding: 40px;
}

.grid-cta-title {
  color: var(--text-dark);
}

.grid-cta-desc {
  color: var(--text-medium);
}

.grid-cta-btn {
  background: var(--accent-light);
  color: #fff;
}

.grid-cta-btn:hover {
  background: var(--accent-dark);
}
Primary Button
主要行动按钮，渐层填充 + 圆角胶囊
.btn-primary {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border: 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

卡片标题

卡片内容说明文字

Card
白底卡片 + shadow-card + hover 上浮
.card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-elevated);
}

Glassmorphism

backdrop-blur + rgba

Glass Card
毛玻璃效果，适用于深色/渐层背景
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
}
--primary --accent --shadow-card --radius-lg
CSS Variables
完整 CSS 变量定义，可直接贴入项目
:root {
  --primary: #1B4270;
  --primary-light: #2460A7;
  --primary-dark: #0F2A47;
  --accent: #E8251A;
  --accent-light: #FF4A40;
  --accent-dark: #B51D13;
  --bg-cream: #F5F6F8;
  --bg-white: #FFFFFF;
  --bg-dark: #0F1923;
  --text-dark: #111827;
  --text-medium: #4B5563;
  --text-light: #9CA3AF;
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  --radius-lg: 24px;
  --font-sans: "Inter", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, sans-serif;
}
Visual Patterns

品牌视觉模式

从课程页、Premium 页面、简报等上线作品中归纳出的常用视觉手法，确保跨项目一致性。

方格底 Grid Pattern
工程纸质感背景，搭配品牌双色透明光晕，传递「有计划地建构」的品牌讯息。
用于：CTA 区块、课程章节页、简报章节页
聚川文化 CIS Menu →
毛玻璃导览栏 Frosted Nav
rgba 背景 + backdrop-filter: blur(20px)，任何背景上都能维持可读性。
用于：所有页面的 Fixed Nav
→
→
多层阴影 + Hover 上浮
卡片预设 shadow-soft，hover 时 translateY(-4~8px) + shadow-elevated，营造漂浮感。
用于：所有可互动卡片（feature、pricing、testimonial）
胶囊按钮 Pill Buttons
border-radius: 50px 胶囊造型。Primary 用品牌渐层 + glow shadow，Secondary 用 outline。
用于：所有 CTA、导览链接、标签按钮
透明色 Icon 容器
56×56px 圆角方块 + rgba(品牌色, 0.08~0.12) 背景，图标用对应品牌色 stroke。
用于：Feature 区块、Benefit 卡片、课程章节 icon
Premium
深色质感区块
Premium 深色区块
深灰渐层 (#1f2937→#111827) + 浅白文字 + 金色分隔线，营造高端质感。
用于：Black Card 区块、定价比较、封面区段
Brand Assets

品牌素材

点击「复制链接」按钮即可复制可直接访问的完整链接，可直接用于网页、文章、简报。含品牌字体与 Logo 素材。

品牌字体

字魂扁桃体 .woff2 · 4.6 MB
字魂扁桃体 ZiHunBianTaoTi
适用：简报标题、影片剪辑标题
@font-face {
  font-family: "zihunbiantaoti";
  src: url("./assets/zihunbiantaoti.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
字体引用 CSS
直接贴入任何项目即可使用

Logo 素材

聚川文化品牌 Icon
品牌 Icon（蓝）
适用：App Icon、社群头像
聚川文化横式 Logo
品牌 Logo（横式）
适用：网站 Header、对外素材
Quick Start

TailwindCSS Config

直接复制到 tailwind.config.js，一键套用品牌设计系统。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: { DEFAULT: "#1B4270", light: "#2460A7", dark: "#0F2A47" },
        accent: { DEFAULT: "#E8251A", light: "#FF4A40", dark: "#B51D13" },
        cream: "#F5F6F8",
        dark: "#0F1923",
      },
      boxShadow: {
        soft: "0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04)",
        card: "0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08)",
        elevated: "0 20px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.1)",
      },
      borderRadius: { sm: "8px", md: "16px", lg: "24px", xl: "32px" },
      fontFamily: {
        sans: ["Inter", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
        mono: ["JetBrains Mono", "SF Mono", "monospace"],
      },
    },
  },
};