---
name: 株式会社ttl-design
description: Use this skill to generate well-branded interfaces and copy for 株式会社TTL. Covers visual tokens, content tone, iconography, and component patterns aligned with an editorial (magazine-style) aesthetic.
user-invocable: true
---

## Brand fast facts

| 項目 | 値 |
|---|---|
| ブランド名 | 株式会社TTL |
| 業種 | その他 |
| 美意識 | エディトリアル（雑誌風）― 余白を活かした知的レイアウト |
| 言語 | 日本語主体、英語併用可 |
| アクセントカラー | `#2e5c4f`（深緑）/ dark `#1c3d33` / soft `#d4e4e0` |
| ベースカラー | paper `#f7f5f2` / paper-deep `#ede9e3` / surface `#ffffff` / ink `#1a1814` |
| タイプスタック | ゴシック体統一（見出し・本文・UIラベルすべて）|
| アイコン | 細線アウトライン（stroke-width: 1〜1.5px 推奨、filled 禁止）|
| 角丸 | 控えめ（2〜4px 基準、カード等は 0px も許容）|
| モーション | 穏やか・遅め（200〜350ms / ease-out）|
| 声のトーン | 知的・落ち着き・静かな自信 |

---

## Design tokens（CSS変数 抜粋）

```css
:root {
  /* Base neutrals */
  --color-paper:      #f7f5f2;
  --color-paper-deep: #ede9e3;
  --color-surface:    #ffffff;
  --color-ink:        #1a1814;

  /* Ink opacity scale */
  --color-ink-06:  rgba(26, 24, 20, 0.06);
  --color-ink-12:  rgba(26, 24, 20, 0.12);
  --color-ink-24:  rgba(26, 24, 20, 0.24);
  --color-ink-40:  rgba(26, 24, 20, 0.40);
  --color-ink-56:  rgba(26, 24, 20, 0.56);
  --color-ink-72:  rgba(26, 24, 20, 0.72);
  --color-ink-100: rgba(26, 24, 20, 1.00);

  /* Accent */
  --color-accent:      #2e5c4f;
  --color-accent-dark: #1c3d33;
  --color-accent-soft: #d4e4e0;
}
```

---

## When to use

- UIコンポーネント（カード・ボタン・フォーム等）を新規生成・修正するとき
- ブランドトーンに合ったコピー・見出し・ボディテキストを書くとき
- デザイントークン（色・余白・タイポグラフィ）を参照・提案するとき
- アイコンの選定・仕様を決定するとき
- レイアウトの情報階層やグリッドを設計するとき

---

## Content guidelines

### 文体・トーン

- **普通体（だ・である体）** を基本とする。丁寧体（です・ます）は用途限定
- 一人称は「私たち」または「当社」。「弊社」は文脈依存
- 読者の二人称は原則省略。必要な場合のみ「あなた」。「お客様」はUIラベル限定
- 一文は50字を目安に。超える場合は分割を検討する
- 短文と中文を交互に配置し、雑誌の特集記事のようなリズムをつくる

### Do / Don't（5行）

1. **Do** 余白と行間を十分に確保し、読者の目に呼吸を与える
2. **Do** 見出しは体言止めまたは短い断定形で締める
3. **Don't** 感嘆符・絵文字・過度なキャッチコピーは使わない
4. **Don't** filled（塗りつぶし）アイコンや装飾的グラデーションは使わない
5. **Don't** 馴れ馴れしい口語表現や軽薄な煽り文句は排除する

---

## Component patterns

### タイポグラフィ階層

| ロール | サイズ目安 | ウェイト | 備考 |
|---|---|---|---|
| Display | 48〜64px | 700 | ページ最大見出し、字間 -0.02em |
| H1 | 32〜40px | 700 | セクションタイトル |
| H2 | 24〜28px | 600 | サブセクション |
| H3 | 18〜20px | 600 | カード見出し等 |
| Body | 15〜16px | 400 | 行間 1.8〜2.0 |
| Caption / Label | 12〜13px | 400 | `--color-ink-56` 推奨 |

### カラー運用

- **背景**: `--color-paper` を基本。セクション切り替えに `--color-paper-deep`
- **テキスト**: 本文は `--color-ink-100`、補足情報は `--color-ink-56` または `--color-ink-40`
- **アクセント**: CTAボタン・リンク・強調罫線に `--color-accent`。ホバーは `--color-accent-dark`
- **サーフェス**: カード背景は `--color-surface`、ボーダーは `--color-ink-12`

### アイコン仕様

- スタイル: **outline のみ**（Lucide / Phosphor / Material Symbols Outlined 等を推奨）
- stroke-width: `1px`（小サイズ 16px 以下）〜 `1.5px`（24px 以上）
- サイズグリッド: 16 / 20 / 24 / 32px
- 色: テキストと同じトークンを使用。装飾目的の単独使用禁止

### ボタン

```css
/* Primary */
background: var(--color-accent);
color: var(--color-surface);
border: none;
border-radius: 2px;
padding: 12px 28px;
font-weight: 600;
letter-spacing: 0.04em;

/* Secondary / Ghost */
background: transparent;
color: var(--color-ink-100);
border: 1px solid var(--color-ink-24);
border-radius: 2px;
```

### レイアウト原則

- グリッド: 12カラム / ガター 24〜32px / 最大コンテンツ幅 1200px
- セクション余白: `padding-block: 80〜120px`
- エディトリアルレイアウトでは**非対称グリッド**（例: 7:5 /