---
name: tax-design
description: Use this skill to generate well-branded interfaces and copy for TAX — an editorial-style beauty salon brand. Covers visual tokens, content tone, iconography, and component patterns.
user-invocable: true
---

## Brand fast facts

| Item | Value |
|------|-------|
| Name | TAX |
| Category | 美容・サロン（ヘアサロン・エステ・ネイル） |
| Target | 近隣エリアの30〜50代 |
| Concept | 品質・素材へのこだわり |
| Language | 日本語（普通体・だ・である調） |
| Aesthetic | エディトリアル（雑誌風） — 知的な落ち着き、編集誌的な信頼感 |
| Accent color | `#4a6c8c` (--color-accent) / dark `#2d4f6e` / soft `#c2d4e4` |
| Neutral base | paper `#f5f4f2` / paper-deep `#eceae6` / surface `#ffffff` / ink `#1a1a1e` |
| Ink scale | 06 / 12 / 24 / 40 / 60 / 80 / 100 — `rgba(26,26,30, α)` |
| Color direction | 寒色系（アクセントはスチールブルー系） |
| Type stack | システムフォント優先（游明朝 → Noto Serif JP → serif）見出し、本文は游ゴシック → Noto Sans JP → sans-serif も可。TAXの判断でおまかせ |
| Icons | Filled（塗りつぶし）スタイルのみ使用。アウトラインアイコンは使用しない |
| Radii | 控えめ（2–6px 程度）。過度な丸みはエディトリアル感を損なうため避ける |
| Shadows | 薄く・低高度。`box-shadow: 0 1px 4px var(--color-ink-12)` を基準とする |
| Motion | 最小限。transition は 150–250ms / ease-out。派手なアニメーションは使用しない |

---

## When to use

- UIコンポーネント（カード・ボタン・フォーム・ナビゲーションなど）を生成するとき
- ブランドに合ったコピー・キャッチコピー・メニュー説明文を書くとき
- デザイントークン（色・タイポ・スペーシング）を参照・実装するとき
- ページレイアウトやセクション構成をエディトリアル文脈で設計するとき

---

## Key constraints

1. **文体は必ず普通体（だ・である調）**。「ます・です」調、「あなた」呼びは禁止。ユーザーは「お客様」、ブランド自称は「TAX」または「当サロン」。
2. **1文60字以内**を目安にする。同一語尾の3連続は禁止（「〜である。〜である。〜である。」不可）。
3. **強調は太字のみ**。アンダーライン使用禁止。形容詞の重複を避け、修飾は1語に絞る（「美しく上品な」→「上品な」）。
4. **アイコンはFilledスタイルのみ**。アウトラインアイコンへの差し替え・混在は禁止。
5. **カラーはCSS変数から参照**する。ハードコードは避け、寒色系アクセント（`--color-accent`系）とニュートラル（`--color-paper`/`--color-ink`系）の組み合わせを基本とする。

---

## Component conventions

### Buttons

```css
/* Primary */
background: var(--color-accent);
color: var(--color-surface);
border-radius: 4px;
font-weight: 600;
letter-spacing: 0.08em;

/* Ghost */
background: transparent;
border: 1px solid var(--color-accent);
color: var(--color-accent);
```

### Typography scale（参考）

| Role | Size | Weight | Note |
|------|------|--------|------|
| 大見出し (H1) | 2.0–2.4rem | 700 | セリフ系推奨 |
| 中見出し (H2) | 1.4–1.6rem | 600 | |
| 本文 | 1.0rem | 400 | line-height: 1.8 |
| キャプション | 0.75rem | 400 | `--color-ink-60` |
| ラベル / タグ | 0.7rem | 600 | letter-spacing: 0.12em / uppercase |

### Cards

```css
background: var(--color-surface);
border: 1px solid var(--color-ink-12);
border-radius: 4px;
box-shadow: 0 1px 4px var(--color-ink-12);
padding: 24px;
```

---

## Copy examples

| Context | NG（禁止） | OK（推奨） |
|---------|-----------|-----------|
| ブランド紹介 | 「私どものサロンへようこそ！」 | 「TAXは、素材の力を最大限に引き出す施術を提供するサロンである。」 |
| CTA | 「あなたも試してみてください♪」 | 「お客様の髪質に合わせた施術プランを、スタイリストがご提案する。」 |
| メニュー説明 | 「美しく輝く艶髪に」 | 「艶と質感を整えるトリートメントメニュー。」 |