Design System

Overview

VibeSkill 是一个方法论驱动的 Vibe Coding 学习门户。设计系统围绕"清晰、温暖、有结构"的品牌人格构建，采用浅色系米白底色 + 珊瑚橙强调色的配色策略，传递友好开放的学习氛围。

Theme

Scene sentence: 一个产品经理在明亮的咖啡厅里，用笔记本电脑浏览 VibeSkill，寻找如何用 AI 做对产品的系统化方法——页面应该像一本精心编排的教材，既有知识的厚重感，又有探索的愉悦感。

Theme decision: Light mode only (for now). The learning context is daytime, focused reading, and the warm cream palette creates an inviting atmosphere that reduces cognitive load.

Color Strategy

Full palette — 3 named roles, each used deliberately:

Primary (Coral Orange — 活力与行动)

Token	Value	Usage
`--color-primary-50`	`#FFF7ED`	最浅背景 tint
`--color-primary-100`	`#FFEDD5`	悬停/高亮背景
`--color-primary-200`	`#FED7AA`	边框、分隔线
`--color-primary-300`	`#FDBA74`	次要强调
`--color-primary-400`	`#FB923C`	图标、标签
`--color-primary-500`	`#F97316`	主按钮、核心强调
`--color-primary-600`	`#EA580C`	主按钮悬停、链接
`--color-primary-700`	`#C2410C`	深色强调
`--color-primary-800`	`#9A3412`	文字强调
`--color-primary-900`	`#7C2D12`	最深色

Neutral (Warm Gray — 结构与层次)

Token	Value	Usage
`--color-neutral-50`	`#FFFBF5`	页面背景（米白）
`--color-neutral-100`	`#F5F0E8`	卡片背景、交替行
`--color-neutral-200`	`#E8E0D4`	边框、分隔线
`--color-neutral-300`	`#D4C8B8`	禁用状态边框
`--color-neutral-400`	`#A89B8C`	占位符文字
`--color-neutral-500`	`#8C7F6E`	次要文字
`--color-neutral-600`	`#6B5F4F`	正文文字
`--color-neutral-700`	`#4A4238`	标题文字
`--color-neutral-800`	`#2D2924`	最深文字
`--color-neutral-900`	`#1A1814`	几乎黑色

Accent (Teal — 平衡与信任)

Token	Value	Usage
`--color-accent-50`	`#F0FDFA`	浅背景 tint
`--color-accent-100`	`#CCFBF1`	信息提示背景
`--color-accent-200`	`#99F6E4`	成功状态
`--color-accent-500`	`#14B8A6`	成功图标、完成标记
`--color-accent-600`	`#0D9488`	链接悬停
`--color-accent-700`	`#0F766E`	深色强调

Domain Colors (for Skill Constellation)

Domain	Color	Token
PM (产品)	`#3B82F6` (Blue)	`--color-domain-pm`
UI (设计与前端)	`#8B5CF6` (Purple)	`--color-domain-ui`
Backend (后端)	`#10B981` (Green)	`--color-domain-backend`
Cross (跨领域)	`#F59E0B` (Amber)	`--color-domain-cross`

Semantic Colors

Token	Value	Usage
`--color-success`	`#10B981`	成功状态
`--color-warning`	`#F59E0B`	警告状态
`--color-error`	`#EF4444`	错误状态
`--color-info`	`#3B82F6`	信息提示

Typography

Font Families

Token	Value	Usage
`--font-display`	`"Manrope", system-ui, sans-serif`	标题、Hero 文字
`--font-body`	`"Inter", system-ui, sans-serif`	正文、UI 元素
`--font-mono`	`"JetBrains Mono", "Fira Code", monospace`	代码、Skill 名称、数据

Type Scale

Fluid scale using clamp() for headings:

Token	Size	Line Height	Weight	Letter Spacing
`--text-hero`	`clamp(2.5rem, 5vw, 4rem)`	1.1	800	-0.02em
`--text-h1`	`clamp(2rem, 4vw, 3rem)`	1.2	700	-0.01em
`--text-h2`	`clamp(1.5rem, 3vw, 2.25rem)`	1.3	700	-0.01em
`--text-h3`	`clamp(1.25rem, 2vw, 1.75rem)`	1.4	600	0
`--text-h4`	`1.125rem`	1.5	600	0
`--text-body`	`1rem`	1.7	400	0
`--text-body-sm`	`0.875rem`	1.6	400	0
`--text-caption`	`0.75rem`	1.5	500	0.02em
`--text-code`	`0.875rem`	1.6	400	0

Spacing

Base Unit

--space-unit: 0.25rem (4px)

Scale

Token	Value
`--space-1`	`0.25rem` (4px)
`--space-2`	`0.5rem` (8px)
`--space-3`	`0.75rem` (12px)
`--space-4`	`1rem` (16px)
`--space-5`	`1.25rem` (20px)
`--space-6`	`1.5rem` (24px)
`--space-8`	`2rem` (32px)
`--space-10`	`2.5rem` (40px)
`--space-12`	`3rem` (48px)
`--space-16`	`4rem` (64px)
`--space-20`	`5rem` (80px)
`--space-24`	`6rem` (96px)
`--space-32`	`8rem` (128px)

Section Spacing

Token	Value
`--section-padding-y`	`clamp(3rem, 8vw, 6rem)`
`--section-padding-x`	`clamp(1rem, 5vw, 3rem)`
`--content-max-width`	`1200px`
`--content-narrow`	`720px`

Elevation

Token	Value	Usage
`--shadow-sm`	`0 1px 2px 0 rgb(0 0 0 / 0.05)`	轻微提升
`--shadow-md`	`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`	卡片
`--shadow-lg`	`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`	下拉、弹窗
`--shadow-xl`	`0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)`	模态框
`--shadow-glow`	`0 0 20px rgb(234 88 12 / 0.15)`	主按钮悬停光晕

Border Radius

Token	Value	Usage
`--radius-sm`	`0.375rem` (6px)	小元素、标签
`--radius-md`	`0.5rem` (8px)	按钮、输入框
`--radius-lg`	`0.75rem` (12px)	卡片
`--radius-xl`	`1rem` (16px)	大卡片、模态框
`--radius-2xl`	`1.5rem` (24px)	Hero 区域
`--radius-full`	`9999px`	胶囊按钮、头像

Components

Button

Primary Button

Background: --color-primary-500
Text: white
Padding: 0.75rem 1.5rem
Border radius: --radius-full
Font: --font-body, weight 600
Hover: Background --color-primary-600, shadow --shadow-glow
Active: Scale 0.98

Secondary Button

Background: transparent
Border: 1.5px solid --color-neutral-200
Text: --color-neutral-700
Hover: Background --color-neutral-100, border --color-neutral-300

Ghost Button

Background: transparent
Text: --color-primary-600
Hover: Background --color-primary-50

Card

Standard Card

Background: white
Border: 1px solid --color-neutral-200
Border radius: --radius-lg
Padding: --space-6
Shadow: --shadow-sm
Hover: Shadow --shadow-md, border --color-neutral-300
Transition: all 200ms ease-out

Feature Card (for Skill cards, stage cards)

Background: white
Border: 1px solid --color-neutral-200
Border radius: --radius-xl
Padding: --space-8
Shadow: none (flat)
Hover: Shadow --shadow-md, translateY -2px, border --color-primary-200
Transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1)

Tag / Badge

Domain Tag

Padding: 0.25rem 0.75rem
Border radius: --radius-full
Font: --font-mono, --text-caption
Background: domain color at 10% opacity
Text: domain color

Stage Badge

Background: --color-primary-50
Text: --color-primary-700
Border: 1px solid --color-primary-200

Navigation

Top Nav

Background: white with 80% opacity + backdrop blur
Border bottom: 1px solid --color-neutral-200
Height: 64px
Position: sticky top

Nav Link

Text: --color-neutral-600
Hover: --color-primary-600
Active: --color-primary-700, font-weight 600
Underline on active: 2px solid --color-primary-500

Layout Patterns

Container

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}

.container-narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}

Section

.section {
  padding: var(--section-padding-y) 0;
}

.section-alt {
  background: var(--color-neutral-100);
}

Grid

.grid-skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.grid-stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-8);
}

Animation

Timing

Token	Value
`--duration-fast`	`150ms`
`--duration-normal`	`250ms`
`--duration-slow`	`400ms`
`--ease-out`	`cubic-bezier(0.4, 0, 0.2, 1)`
`--ease-out-expo`	`cubic-bezier(0.16, 1, 0.3, 1)`
`--ease-spring`	`cubic-bezier(0.34, 1.56, 0.64, 1)`

Common Patterns

Fade Up

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

Scale In

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

Stagger Children

Delay increment: 50ms
Max stagger: 500ms (cap at 10 items)

Responsive Breakpoints

Token	Value
`--breakpoint-sm`	`640px`
`--breakpoint-md`	`768px`
`--breakpoint-lg`	`1024px`
`--breakpoint-xl`	`1280px`

Z-Index Scale

Token	Value	Usage
`--z-base`	`0`	默认
`--z-dropdown`	`100`	下拉菜单
`--z-sticky`	`200`	粘性导航
`--z-modal`	`300`	模态框
`--z-toast`	`400`	通知
`--z-tooltip`	`500`	工具提示

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design System

Overview

Theme

Color Strategy

Primary (Coral Orange — 活力与行动)

Neutral (Warm Gray — 结构与层次)

Accent (Teal — 平衡与信任)

Domain Colors (for Skill Constellation)

Semantic Colors

Typography

Font Families

Type Scale

Spacing

Base Unit

Scale

Section Spacing

Elevation

Border Radius

Components

Button

Card

Tag / Badge

Navigation

Layout Patterns

Container

Section

Grid

Animation

Timing

Common Patterns

Responsive Breakpoints

Z-Index Scale

FilesExpand file tree

DESIGN.md

Latest commit

History

DESIGN.md

File metadata and controls

Design System

Overview

Theme

Color Strategy

Primary (Coral Orange — 活力与行动)

Neutral (Warm Gray — 结构与层次)

Accent (Teal — 平衡与信任)

Domain Colors (for Skill Constellation)

Semantic Colors

Typography

Font Families

Type Scale

Spacing

Base Unit

Scale

Section Spacing

Elevation

Border Radius

Components

Button

Card

Tag / Badge

Navigation

Layout Patterns

Container

Section

Grid

Animation

Timing

Common Patterns

Responsive Breakpoints

Z-Index Scale