theme-foundation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Theme Foundation

主题基础

Generate a complete theme color system from a single brand color. Creates primary accent, secondary accent (complementary), and neutral ramps - all mathematically derived.

从单一品牌色生成完整的主题颜色系统。通过数学推导生成主强调色、次要强调色（互补色）和中性色阶。

When to Use

适用场景

"Create a theme from my brand color"
"I need colors for light and dark mode"
"Generate a color system for my app"
"Start a new design system with this color"

"用我的品牌色创建主题"
"我需要适配明暗模式的颜色"
"为我的应用生成颜色系统"
"用这个颜色启动新的设计系统"

Installation

安装

bash

npx @basiclines/rampa

bash

npx @basiclines/rampa

Recipe

使用方案

Given a user's brand color, generate three ramp types:

给定用户的品牌色，生成三种色阶类型：

1. Primary Accent Ramp

1. 主强调色色阶

The main brand color expanded to a full 10-shade scale.

bash

rampa -C "<brand-color>" -L 95:10 --size=10 -O css --name=accent

将主品牌色扩展为完整的10级色阶。

bash

rampa -C "<brand-color>" -L 95:10 --size=10 -O css --name=accent

2. Secondary Accent (Complementary)

2. 次要强调色（互补色）

Mathematically opposite on the color wheel - perfect for CTAs, highlights, or secondary actions.

bash

rampa -C "<brand-color>" --add=complementary -L 95:10 --size=10 -O css

This outputs two ramps:

```
base
```
- the primary accent
```
complementary-1
```
- the secondary accent

在色轮上的数学互补色——非常适合用于CTA、高亮或次要操作。

bash

rampa -C "<brand-color>" --add=complementary -L 95:10 --size=10 -O css

此命令输出两个色阶：

```
base
```
- 主强调色
```
complementary-1
```
- 次要强调色

3. Neutral Ramp

3. 中性色色阶

Derived from the brand color but heavily desaturated. This creates "warm" or "cool" neutrals that feel cohesive with the brand.

bash

rampa -C "<brand-color>" -L 98:5 -S 5:10 --size=10 -O css --name=neutral

从品牌色衍生而来但饱和度极低。生成的“暖调”或“冷调”中性色会与品牌色保持协调。

bash

rampa -C "<brand-color>" -L 98:5 -S 5:10 --size=10 -O css --name=neutral

Complete Example

完整示例

For brand color

#3b82f6

(blue):

bash

undefined

对于品牌色

#3b82f6

（蓝色）：

bash

undefined

Primary accent

主强调色

rampa -C "#3b82f6" -L 95:10 --size=10 -O css --name=accent

Secondary + Primary together

同时生成次要色和主色

rampa -C "#3b82f6" --add=complementary -L 95:10 --size=10 -O css

Neutrals (slightly warm from the blue)

中性色（从蓝色衍生出轻微暖调）

rampa -C "#3b82f6" -L 98:5 -S 5:10 --size=10 -O css --name=neutral

undefined

rampa -C "#3b82f6" -L 98:5 -S 5:10 --size=10 -O css --name=neutral

undefined

Output Structure

输出结构

css

:root {
  /* Primary Accent */
  --accent-0: #f0f7ff;
  --accent-1: #dbeafe;
  /* ... */
  --accent-9: #1e3a5f;

  /* Secondary Accent (complementary) */
  --complementary-1-0: #fff7ed;
  --complementary-1-1: #ffedd5;
  /* ... */

  /* Neutrals */
  --neutral-0: #fafafa;
  --neutral-1: #f5f5f5;
  /* ... */
  --neutral-9: #171717;
}

css

:root {
  /* 主强调色 */
  --accent-0: #f0f7ff;
  --accent-1: #dbeafe;
  /* ... */
  --accent-9: #1e3a5f;

  /* 次要强调色（互补色） */
  --complementary-1-0: #fff7ed;
  --complementary-1-1: #ffedd5;
  /* ... */

  /* 中性色 */
  --neutral-0: #fafafa;
  --neutral-1: #f5f5f5;
  /* ... */
  --neutral-9: #171717;
}

Light vs Dark Mode

明暗模式适配

The same ramps work for both modes - just map them differently:

Light Mode:

Background:
```
neutral-0
```
to
```
neutral-2
```
Text:
```
neutral-8
```
to
```
neutral-9
```
Accent:
```
accent-5
```
to
```
accent-7
```

Dark Mode:

Background:
```
neutral-9
```
to
```
neutral-7
```
Text:
```
neutral-0
```
to
```
neutral-2
```
Accent:
```
accent-3
```
to
```
accent-5
```

同一色阶可同时用于两种模式，只需按不同方式映射：

浅色模式：

背景色：
```
neutral-0
```
至
```
neutral-2
```
文字色：
```
neutral-8
```
至
```
neutral-9
```
强调色：
```
accent-5
```
至
```
accent-7
```

深色模式：

背景色：
```
neutral-9
```
至
```
neutral-7
```
文字色：
```
neutral-0
```
至
```
neutral-2
```
强调色：
```
accent-3
```
至
```
accent-5
```

Tips

小贴士

The complementary color is mathematically guaranteed to contrast with the primary
Neutrals inherit subtle warmth/coolness from the brand color
Use
```
--size=11
```
for more granular control
Adjust
```
-L
```
range for more/less contrast (e.g.,
```
-L 90:20
```
for less extreme)

互补色在数学上保证与主色形成足够对比
中性色会继承品牌色的微妙暖调/冷调
使用
```
--size=11
```
可获得更精细的控制
调整
```
-L
```
范围可增加/减少对比度（例如，
```
-L 90:20
```
可降低极端程度）