Soft Utility

柔和工具风

stylekitMITProfessional · professionalLight · lightMedium · mediumCyan · cyanMedium · mediumSerif · serifGeneral · generalLanding · landing

面向高频使用的手机工具 App，使用浅色背景、清晰状态色和柔和层级，在效率与亲和力之间取得平衡。

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

"Soft Utility" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/soft-utility @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/soft-utility · bfa7da909e86 · © AnxForever

Do

使用深青色作为主行动色，保证按钮和正文可读
用薄荷、杏色、蓝色区分状态和模块，而不是装饰性铺色
在移动端采用底部操作栏和清晰的返回路径
所有输入控件提供 focus、error、success 和 disabled 状态
使用 rounded-xl 到 rounded-2xl，保持密度而不过度可爱
为常用操作提供一键完成和可撤销反馈

Don't

不要用低对比度文字承载关键任务信息
不要为了柔和而移除边界、分隔和状态反馈
不要把工具型页面做成纯展示卡片墙
不要使用过度弹跳或影响效率的动画
不要让主操作在不同页面随意改变位置

Prompt

Design a user interface in the "Soft Utility" style (柔和工具风).

面向高频使用的手机工具 App，使用浅色背景、清晰状态色和柔和层级，在效率与亲和力之间取得平衡。

Apply these tokens to every surface. Do not invent a second palette.
- Background #f4f8f6, foreground #2d5b63
- Primary #2d5b63 on #fafaf9
- Accent #a9d8cc, muted #e5e9e7, border #d2d5d4
- 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:
Soft Utility 面向每天都会打开的工具型 App。它保留柔和色彩和圆润触感，但让状态、输入、筛选和确认拥有比装饰更高的权重。
核心原则：
- 先让用户完成任务，再表达风格
- 颜色承担状态，不用颜色替代文字
- 控件有明确的默认、聚焦、完成和错误状态
- 主要动作固定在拇指容易到达的位置
- 信息密度适中，避免空洞的装饰

Do:
- 使用深青色作为主行动色，保证按钮和正文可读
- 用薄荷、杏色、蓝色区分状态和模块，而不是装饰性铺色
- 在移动端采用底部操作栏和清晰的返回路径
- 所有输入控件提供 focus、error、success 和 disabled 状态
- 使用 rounded-xl 到 rounded-2xl，保持密度而不过度可爱
- 为常用操作提供一键完成和可撤销反馈

Don't:
- 不要用低对比度文字承载关键任务信息
- 不要为了柔和而移除边界、分隔和状态反馈
- 不要把工具型页面做成纯展示卡片墙
- 不要使用过度弹跳或影响效率的动画
- 不要让主操作在不同页面随意改变位置

"Soft Utility" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/soft-utility @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Soft Utility. \"Soft Utility\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/soft-utility @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-soft-utility",
      "license": "MIT",
      "attribution": "\"Soft Utility\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/soft-utility @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f4f8f6"
    },
    "foreground": {
      "$type": "color",
      "$value": "#2d5b63"
    },
    "card": {
      "$type": "color",
      "$value": "#f4f8f6"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#2d5b63"
    },
    "primary": {
      "$type": "color",
      "$value": "#2d5b63"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#f4f8f6"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#2d5b63"
    },
    "accent": {
      "$type": "color",
      "$value": "#a9d8cc"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "muted": {
      "$type": "color",
      "$value": "#e5e9e7"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#77949a"
    },
    "border": {
      "$type": "color",
      "$value": "#d2d5d4"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#2d5b63"
    }
  },
  "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 */
/* "Soft Utility" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/soft-utility @ bfa7da909e86. */
:root {
  --background: #f4f8f6;
  --foreground: #2d5b63;
  --card: #f4f8f6;
  --card-foreground: #2d5b63;
  --primary: #2d5b63;
  --primary-foreground: #fafaf9;
  --secondary: #f4f8f6;
  --secondary-foreground: #2d5b63;
  --accent: #a9d8cc;
  --accent-foreground: #1c1917;
  --muted: #e5e9e7;
  --muted-foreground: #77949a;
  --border: #d2d5d4;
  --destructive: #dc2626;
  --ring: #2d5b63;
  --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 */
/* "Soft Utility" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/soft-utility @ bfa7da909e86. */
/** Tailwind theme extend for Soft Utility (stylekit-soft-utility) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f4f8f6",
        "foreground": "#2d5b63",
        "card": "#f4f8f6",
        "primary": "#2d5b63",
        "primary-foreground": "#fafaf9",
        "secondary": "#f4f8f6",
        "accent": "#a9d8cc",
        "muted": "#e5e9e7",
        "border": "#d2d5d4",
        "destructive": "#dc2626",
        "ring": "#2d5b63"
      },
      "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 */
/* "Soft Utility" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/soft-utility @ bfa7da909e86. */
@layer base {
:root {
  --background: #f4f8f6;
  --foreground: #2d5b63;
  --card: #f4f8f6;
  --card-foreground: #2d5b63;
  --primary: #2d5b63;
  --primary-foreground: #fafaf9;
  --secondary: #f4f8f6;
  --secondary-foreground: #2d5b63;
  --accent: #a9d8cc;
  --accent-foreground: #1c1917;
  --muted: #e5e9e7;
  --muted-foreground: #77949a;
  --border: #d2d5d4;
  --destructive: #dc2626;
  --ring: #2d5b63;
  --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);
}
}