---
version: alpha
name: "Pop"
description: "粗黑描边、硬投影和柠檬黄，故意做得很大声。 Pop 是讲规矩的新野兽派：米白页面、宽体 Unbounded 标题、所有元素都有黑色描边，实心偏移投影让卡片像一张张贴纸。柠檬黄和珊瑚橙负责吸睛，网格和间距依然很克制。"
colors:
  primary: "#141414"
  on-primary: "#FFE45C"
  secondary: "#FF6B4A"
  tertiary: "#3D7EFF"
  neutral: "#5C5A52"
  surface: "#FFFDF5"
  on-surface: "#141414"
typography:
  display-lg:
    fontFamily: "Unbounded"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: "Unbounded"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Unbounded"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Unbounded"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.55
  body-sm:
    fontFamily: "Manrope"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.45
rounded:
  sm: 10px
  md: 12px
  lg: 14px
  xl: 18px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Pop 是讲规矩的新野兽派：米白页面、宽体 Unbounded 标题、所有元素都有黑色描边，实心偏移投影让卡片像一张张贴纸。柠檬黄和珊瑚橙负责吸睛，网格和间距依然很克制。

## Colors

- **primary (#141414):** 浅色模式下是黑底黄字，深色模式下是柠檬黄，用于主要行动按钮。
- **on-primary (#FFE45C)**
- **secondary (#FF6B4A):** 珊瑚橙，用于贴纸、高亮色块和第二组图表数据。
- **tertiary (#3D7EFF):** 亮蓝，用于卡片里的链接、标签和第三组数据。
- **neutral (#5C5A52):** 暖灰，用于辅助文案和说明文字。
- **surface (#FFFDF5):** 暖调米白，卡片是纯白；整个区块可以铺成柠檬黄。
- **on-surface (#141414)**

## Typography

标题用 Unbounded，字重 600，宽体几何字形，最大 72px，字距 -0.03em；正文用 Manrope，字重 500，17px。价格标签和代码用 JetBrains Mono。

## Layout

12 栏网格，最大宽度 1200px，栏间距 24px，间距单位 4px。米白区块和整块彩色区块交替出现；功能卡片排成厚实的两栏或三栏。

## Shapes

14px 圆角；所有卡片、按钮和输入框都有黑色描边（深色模式下是米白描边）。投影是硬投影：一块实心色块向右下偏移，没有模糊。

## Components

按钮是带硬投影的描边色块，按下时压平到投影的位置。卡片顶部有一条色带。徽章做成贴纸样式，价格表的套餐之间用粗线分隔。

## Do's and Don'ts

- 所有卡片、按钮和输入框用同样的黑色描边。
- 每个区块只挑一个响亮的颜色。
- 投影不要模糊，保持实心和偏移。
- 不要混入粉彩渐变和毛玻璃。