---
name: 株式会社ゴイミ-design
description: Use this skill to generate well-branded interfaces for 株式会社ゴイミ. Covers visual tokens, content tone, iconography, and component patterns for a natural-aesthetic beauty salon brand.
user-invocable: true
---

## Brand fast facts

| 項目 | 値 |
|---|---|
| **Name** | 株式会社ゴイミ |
| **Category** | 美容・サロン（ヘアサロン・エステ・ネイル） |
| **Aesthetic** | ナチュラル — 素材感・余白・誠実さを大切にした穏やかなビジュアル |
| **Language** | 日本語（丁寧体・です／ます統一） |
| **Accent color** | `#8B7355`（warm taupe） / dark `#6B5540` / soft `#C9B99A` |
| **Neutral base** | Paper `#F7F4F0` → Paper-deep `#EDE8E1` → Surface `#FFFFFF` / Ink `#2C2420` |
| **Type stack** | ゴシック体統一（見出し〜本文〜UIテキストすべて同系ゴシック） |
| **Icons** | Lucide React（stroke アイコン、filled 禁止）を基本とし、ブランドの柔らかさに合わせ stroke-width 1.5 を推奨 |
| **Radii** | sm `4px` / md `8px` / lg `16px` / pill `9999px`（角を立てすぎず、丸めすぎない自然な丸み） |
| **Shadows** | `ink-06`〜`ink-12` ベースの淡いドロップシャドウのみ。強いシャドウ禁止 |
| **Motion** | ease-out 200〜300ms。アニメーションは控えめに、必要最小限 |
| **Voice** | 丁寧・温かみ・専門性。1文50字以内目安 |

---

## Design tokens（CSS variables）

```css
:root {
  /* Base neutrals */
  --color-paper:      #F7F4F0;
  --color-paper-deep: #EDE8E1;
  --color-surface:    #FFFFFF;
  --color-ink:        #2C2420;

  /* Ink opacity scale */
  --color-ink-06:  rgba(44, 36, 32, 0.06);
  --color-ink-12:  rgba(44, 36, 32, 0.12);
  --color-ink-24:  rgba(44, 36, 32, 0.24);
  --color-ink-40:  rgba(44, 36, 32, 0.40);
  --color-ink-60:  rgba(44, 36, 32, 0.60);
  --color-ink-80:  rgba(44, 36, 32, 0.80);
  --color-ink-100: rgba(44, 36, 32, 1.00);

  /* Accent */
  --color-accent:      #8B7355;
  --color-accent-dark: #6B5540;
  --color-accent-soft: #C9B99A;
}
```

---

## When to use

- UIコンポーネント（ボタン・カード・フォーム・ナビゲーション等）を生成するとき
- ブランドに合ったコピー・UIテキスト・エラーメッセージを書くとき
- デザイントークン（色・余白・タイポ）を参照・適用するとき
- ページレイアウトやセクション構成を検討するとき

---

## Key constraints

**Do**
- 文体は必ず「です・ます」体に統一し、一人称は「私ども」「当店」を使う
- 背景は `--color-paper` / `--color-paper-deep` を基調とし、真っ白・真っ黒は避ける
- アクセントカラー（`#8B7355`）はCTAボタン・リンク・アクティブ状態など要所のみに絞って使用する
- 余白を十分に取り、コンテンツ密度を低めに保つ（ナチュラル感の核心）
- アイコンは Lucide React の stroke スタイル（stroke-width 1.5）のみ使用する

**Don't**
- 文体を「だ・である」「〜じゃん」など砕けた表現に変えない
- 鮮やかな寒色・ビビッドカラーをアクセントとして混入しない
- filled（塗りつぶし）アイコンや過装飾なイラストをコンポーネントに混在させない
- ドロップシャドウを `ink-24` より濃くしない
- 1文を50字以上に引き延ばさない（長い場合は2文に分割する）

---

## Component defaults

### Button

```html
<!-- Primary -->
<button style="
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: 9999px;
  padding: 12px 28px;
  font-family: inherit; /* ゴシック統一 */
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  border: none;
  transition: background 200ms ease-out;
">ご予約はこちら</button>

<!-- Secondary / Ghost -->
<button style="
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent-soft);
  border-radius: 9999px;
  padding: 11px 28px;
">詳しく見る</button>
```

### Card

```html
<div style="
  background: var(--color-surface);
  border: 1px solid var(--color-ink-12);
  border-radius: 16px;
  box-shadow: 0 2px 8px var(--color-ink-06);
  padding: 24px;
">
  <!-- content -->
</div>
```

### Body text

```html
<p style="
  color: var(--color-ink-80);
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
">施術についてご不明な点がございましたら、お気軽にお問い合わせください。</p>
```

---

## Copywriting cheat sheet

| シーン | 良い例 | 悪い例 |
|---|---|---|
| CTA | 「ご予約はこちらからどうぞ」 | 「今すぐ予約！」 |
| エラー | 「入力内容をご確認ください。」 | 「エラーが発生しました」 |
| 空状態 | 「まだ予約がございません。」 | 「データなし」 |
| 完了 | 「ご予約を承りました。当日お待ちしております。」 | 「送信完了」 |
| 案内 | 「私どものサロンでは、天然素材にこだわったケアをご提供しております。」