Pastel App UI

粉彩应用风

stylekitMITProfessional · professionalLight · lightMedium · mediumPurple · purpleMedium · mediumSerif · serifGeneral · generalLanding · landing

为手机应用设计的温柔粉彩界面，以暖奶油底色、淡紫、薄荷绿和珊瑚色建立轻松但清晰的社区与内容体验。

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Pastel App UI" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/pastel-ui @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/pastel-ui · bfa7da909e86 · © AnxForever

Do

使用暖奶油色作为主背景，粉彩色只承担分组和状态提示
使用 rounded-2xl 到 rounded-3xl 的卡片与触控控件
移动端优先设计底部导航、单列信息流和拇指可达操作
将收藏、使用、评分和快捷反馈放在内容决策点附近
使用深灰或深紫文字保证正文对比度
用细边框和柔和阴影区分层级，避免大面积玻璃效果

Don't

不要让浅色文字放在浅色背景上
不要使用荧光色或高饱和渐变覆盖整个页面
不要把所有卡片做成同一颜色和同一层级
不要把关键操作藏在页面最底部
不要使用过小的触控目标或密集的横向表格

Prompt

Design a user interface in the "Pastel App UI" style (粉彩应用风).

为手机应用设计的温柔粉彩界面，以暖奶油底色、淡紫、薄荷绿和珊瑚色建立轻松但清晰的社区与内容体验。

Apply these tokens to every surface. Do not invent a second palette.
- Background #fff8f0, foreground #66508f
- Primary #66508f on #fafaf9
- Accent #d9c7ff, muted #f0e9e2, border #dbd5ce
- Radius 0.5rem, type ui-sans-serif, system-ui, sans-serif
- Shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)

Direction:
Pastel App UI 不追求把所有元素都染成浅色，而是用暖奶油色托住内容，用少量粉彩色提示状态与情绪。它适合风格发现、生活方式、收藏和社区类手机应用。
核心原则：
- 颜色表达情绪，深色文字表达结构
- 卡片适合触摸，按钮拥有明确主次
- 评分、收藏和快捷反馈在首屏附近可见
- 移动端优先，底部导航保持稳定
- 柔和不等于低对比，正文和控件保持可读

Do:
- 使用暖奶油色作为主背景，粉彩色只承担分组和状态提示
- 使用 rounded-2xl 到 rounded-3xl 的卡片与触控控件
- 移动端优先设计底部导航、单列信息流和拇指可达操作
- 将收藏、使用、评分和快捷反馈放在内容决策点附近
- 使用深灰或深紫文字保证正文对比度
- 用细边框和柔和阴影区分层级，避免大面积玻璃效果

Don't:
- 不要让浅色文字放在浅色背景上
- 不要使用荧光色或高饱和渐变覆盖整个页面
- 不要把所有卡片做成同一颜色和同一层级
- 不要把关键操作藏在页面最底部
- 不要使用过小的触控目标或密集的横向表格

"Pastel App UI" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/pastel-ui @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Pastel App UI. \"Pastel App UI\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/pastel-ui @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-pastel-ui",
      "license": "MIT",
      "attribution": "\"Pastel App UI\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/pastel-ui @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#fff8f0"
    },
    "foreground": {
      "$type": "color",
      "$value": "#66508f"
    },
    "card": {
      "$type": "color",
      "$value": "#fff8f0"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#66508f"
    },
    "primary": {
      "$type": "color",
      "$value": "#66508f"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#fff8f0"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#66508f"
    },
    "accent": {
      "$type": "color",
      "$value": "#d9c7ff"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "muted": {
      "$type": "color",
      "$value": "#f0e9e2"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#9c8db6"
    },
    "border": {
      "$type": "color",
      "$value": "#dbd5ce"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#66508f"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Pastel App UI" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/pastel-ui @ bfa7da909e86. */
:root {
  --background: #fff8f0;
  --foreground: #66508f;
  --card: #fff8f0;
  --card-foreground: #66508f;
  --primary: #66508f;
  --primary-foreground: #fafaf9;
  --secondary: #fff8f0;
  --secondary-foreground: #66508f;
  --accent: #d9c7ff;
  --accent-foreground: #1c1917;
  --muted: #f0e9e2;
  --muted-foreground: #9c8db6;
  --border: #dbd5ce;
  --destructive: #dc2626;
  --ring: #66508f;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Pastel App UI" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/pastel-ui @ bfa7da909e86. */
/** Tailwind theme extend for Pastel App UI (stylekit-pastel-ui) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#fff8f0",
        "foreground": "#66508f",
        "card": "#fff8f0",
        "primary": "#66508f",
        "primary-foreground": "#fafaf9",
        "secondary": "#fff8f0",
        "accent": "#d9c7ff",
        "muted": "#f0e9e2",
        "border": "#dbd5ce",
        "destructive": "#dc2626",
        "ring": "#66508f"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Pastel App UI" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/pastel-ui @ bfa7da909e86. */
@layer base {
:root {
  --background: #fff8f0;
  --foreground: #66508f;
  --card: #fff8f0;
  --card-foreground: #66508f;
  --primary: #66508f;
  --primary-foreground: #fafaf9;
  --secondary: #fff8f0;
  --secondary-foreground: #66508f;
  --accent: #d9c7ff;
  --accent-foreground: #1c1917;
  --muted: #f0e9e2;
  --muted-foreground: #9c8db6;
  --border: #dbd5ce;
  --destructive: #dc2626;
  --ring: #66508f;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}