popular

新拟态 Neumorphism

软凸起与凹槽，像一块打磨过的陶瓷面板。

适合: 健康、冥想、轻交互硬件配套 App

不适合: 高对比无障碍场景、数据密后台

---
version: alpha
name: Neumorphism
description: Soft emboss on a ceramic control panel.
colors:
  primary: "#5B8DEF"
  secondary: "#8B93A1"
  tertiary: "#E8C4C8"
  background: "#E8ECF2"
  surface: "#E8ECF2"
  onPrimary: "#F4F4F5"
  onSecondary: "#F4F4F5"
  onTertiary: "#18181B"
  onBackground: "#18181B"
  onSurface: "#18181B"
  outline: "#D5DBE6"
  muted: "#6F7785"
  success: "#4C9A73"
  warning: "#C4A24A"
  error: "#D06A6A"
typography:
  h1:
    fontFamily: Outfit
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.03em
  h2:
    fontFamily: Outfit
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.02em
  h3:
    fontFamily: Outfit
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  body:
    fontFamily: Outfit
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0em
  label:
    fontFamily: Outfit
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.02em
  caption:
    fontFamily: Outfit
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  mono:
    fontFamily: JetBrains Mono
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0em
rounded:
  sm: 12px
  md: 16px
  lg: 22px
  xl: 28px
  full: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  navbar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.onBackground}"
  hero:
    backgroundColor: "{colors.background}"
    textColor: "{colors.onBackground}"
  stat:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.onSurface}"
    rounded: "{rounded.lg}"
  slider:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.full}"
  toggle:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 51px
  footer:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted}"
---

# Neumorphism

## Overview

软凸起与凹槽，像一块打磨过的陶瓷面板。 整体气质是 日常应用适中、对称可预期、动效 流畅 CSS 动效。品牌语气：soft / tactile / calm。密度 5/10，变化 3/10，动效 5/10。 材质：表面色必须等于背景色。凸起用双阴影，输入/按下用内阴影。单一左上光源。

How to use: 把本文件放到仓库根目录。在 Cursor / Claude Code / Codex 提示词中写：请阅读 DESIGN.md 并严格遵守其中的 tokens 与 Do/Don't。

## Colors

Semantic roles for the light theme. Keep a single accent; do not introduce a second brand hue.

- **primary** (`#5B8DEF`)
- **secondary** (`#8B93A1`)
- **tertiary** (`#E8C4C8`)
- **background** (`#E8ECF2`)
- **surface** (`#E8ECF2`)
- **outline** (`#D5DBE6`)
- **muted** (`#6F7785`)
- **success** (`#4C9A73`)
- **warning** (`#C4A24A`)
- **error** (`#D06A6A`)
- **onPrimary** (`#F4F4F5`)
- **onSecondary** (`#F4F4F5`)
- **onTertiary** (`#18181B`)
- **onBackground** (`#18181B`)
- **onSurface** (`#18181B`)

## Typography

Hierarchy comes from weight and size, not from shouting. Body line length stays near 65 characters.

- **h1**: Outfit 600 / 40px / 1.12 / -0.03em
- **h2**: Outfit 600 / 28px / 1.2 / -0.02em
- **h3**: Outfit 600 / 20px / 1.3 / -0.01em
- **body**: Outfit 400 / 16px / 1.55 / 0em
- **label**: Outfit 500 / 13px / 1.3 / 0.02em
- **caption**: Outfit 400 / 12px / 1.4 / 0em
- **mono**: "JetBrains Mono" 500 / 13px / 1.45 / 0em

## Layout

Spacing scale: xs=4px, sm=8px, md=16px, lg=24px, xl=32px, 2xl=48px, 3xl=64px.

iOS：触控目标 ≥ 44pt，尊重 Safe Area 与 Dynamic Type，图标用 SF Symbols，导航使用 Large Title / 分组列表。

Web：移动优先，<768px 单列，正文 ≥ 16px，标题用 clamp()，容器 max-width 约 1120–1400px，全高区块用 min-h-[100dvh]。

Every element occupies its own spatial zone. No overlapping hero text. Collapse multi-column layouts below 768px.

## Elevation & Depth

- sm: `6px 6px 12px #c5c9d1, -6px -6px 12px #ffffff`
- md: `10px 10px 20px #c5c9d1, -10px -10px 20px #ffffff`
- lg: `16px 16px 32px #c5c9d1, -16px -16px 32px #ffffff`
- surface: `neu`
- inset: `inset 8px 8px 16px #c5c9d1, inset -8px -8px 16px #ffffff`
- recipe: 表面色必须等于背景色。凸起用双阴影，输入/按下用内阴影。单一左上光源。

Tint shadows toward the background hue. High-density layouts may replace cards with hairline dividers.
新拟态表面色必须等于背景色；凸起用双阴影，输入/按下用内阴影。

## Shapes

Radius scale: sm=12px, md=16px, lg=22px, xl=28px, full=999px.

## Components

- **导航栏** (`web.navbar` / default / md): 桌面横导航含 logo、带图标的链接和一个主 CTA。
- **Hero** (`web.hero` / left / lg): Hero 使用 left 布局，最多一个主 CTA，禁止「Scroll to explore」。
- **指标块** (`stat` / default / md): 数字用等宽字体，标签用大写弱化。
- **滑杆** (`slider` / default / md): 音量/亮度滑杆，轨道和拇指用 primary。
- **滑杆** (`slider` / default / md): 音量/亮度滑杆，轨道和拇指用 primary。
- **滑杆** (`slider` / default / md): 音量/亮度滑杆，轨道和拇指用 primary。
- **开关** (`toggle` / on / md): iOS 风格胶囊开关，开启态用 primary。
- **页脚** (`web.footer` / default / md): 页脚克制，链接分组清晰。

## Do's and Don'ts

### Do
- Use semantic color tokens, never raw hex in components.
- Keep a single accent; hierarchy comes from type weight and space.
- Define default, hover, focus-visible, pressed, disabled, and loading states.
- Meet WCAG 2.2 AA contrast for body text and interactive labels.
- Touch targets are at least 44×44pt on iOS and 44px on web.
- Pair emboss with a single light source from the top-left.

### Don't
- Do not use Inter as the display face for premium work.
- Do not use pure black #000000 for large surfaces.
- Do not add neon outer glows or custom mouse cursors.
- Do not ship three equal feature cards as the default layout.
- Do not hide focus rings or drop below AA contrast.
- Do not rely on neumorphic fills for text contrast.