jpskill.com
🎨 デザイン コミュニティ

corporate-colors

企業のブランドカラーやテーマシステムを、Catppuccinの暖色系トーンとライト/ダークモードの慣習に基づき定義するSkill。

📜 元の英語説明(参考)

Define corporate color palettes based on Catppuccin warm tones with light/dark mode conventions. Trigger: When defining brand colors, creating theme systems, or implementing light/dark modes.

🇯🇵 日本人クリエイター向け解説

一言でいうと

企業のブランドカラーやテーマシステムを、Catppuccinの暖色系トーンとライト/ダークモードの慣習に基づき定義するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

使用場面

  • アプリケーションのブランドカラーシステムを定義する場合
  • ライト/ダークテーマの切り替えを実装する場合
  • デザインシステムやスタイルシステムを作成する場合
  • チーム間でカラー命名規則を確立する場合

デザイン哲学

暖色系のみ。 Bastetはペットケアプラットフォームであるため、ブランドは暖かく、親しみやすく、信頼できるものである必要があります。コールドブルー/パープルは、プライマリおよびセカンダリの役割では明示的に避けています。

Catppuccinのフレーバーに基づいています。

  • ライトモード: Latte
  • ダークモード: Mocha

ブランドカラー

役割 Catppuccin名 ライト (Latte) ダーク (Mocha) 用途
プライマリ Maroon #E64553 #EBA0AC CTA、ボタン、リンク、フォーカスリング
セカンダリ Flamingo #DD7878 #F2CDCD バッジ、タグ、補助要素
強調 Peach #FE640B #FAB387 ホバー状態、ハイライト、アクセント
暖色系情報 Rosewater #DC8A78 #F5E0DC 情報、控えめなアクセント

これらの色を使用する理由

  • Maroon — 大胆な暖色系の赤。「行動」を自信と暖かさで表現します。
  • Flamingo — Maroonと競合することなく補完する柔らかなピンクです。
  • Peach — 強調/ホバー用のエネルギッシュなオレンジで、ハイライトに注意を引きます。
  • Rosewater — 情報表示用の繊細なピンクで、全体の一貫性を保ちます。

プライマリ/セカンダリとして使用しない色

色 理由
Blue, Sapphire 冷たすぎる、企業的な印象を与える
Lavender, Mauve 紫は冷たく、ペットケアの暖かさに合わない
Teal 冷たい、臨床的
Green 意味的な「成功」のみに予約されている

カラーカテゴリ

カテゴリ 目的 用途
プライマリ 主要なブランドアクション (CTA、リンク、フォーカス状態) ボタン、アクティブ状態、主要なアクション
セカンダリ 補助要素、目立たないアクション バッジ、タグ、セカンダリボタン
アクセント 強調、ハイライト、通知 アラート、ハイライト、重要な情報
サーフェス 背景、コンテナ カード、モーダル、パネル
テキスト タイポグラフィの階層 本文、見出し、ラベル
ボーダー 区切り線、アウトライン セパレータ、入力ボーダー

Catppuccinカラーマッピング

ライトモードとダークモードの両方におけるすべてのカラートークン定義 (プライマリ、セカンダリ、アクセント、サーフェス、テキスト、ボーダー) です。

assets/color-tokens.ts を参照してください。

デザインシステム

CSSカスタムプロパティ (ライト + ダーク)

assets/styles.css を参照してください。

Tailwind設定

assets/tailwind-colors.js を参照してください。

TypeScriptテーマシステム

assets/theme-tokens.ts を参照してください。

Reactコンポーネントの例

assets/example-component.tsx を参照してください。

Flutter実装

参照: mobile/lib/app/theme/app_colors.dart

// Foruiテーマ経由でアクセス
final colors = context.theme.colors;
colors.primary;    // Maroon
colors.secondary;  // Flamingo

ライト/ダークモードの慣例

コントラスト要件

要素 ライトモード ダークモード
背景上のテキスト 明るいサーフェスに暗いテキスト 暗いサーフェスに明るいテキスト
プライマリアクション 高コントラスト (Base #eff1f5 に Maroon #E64553) 柔らかいコントラスト (Base #1e1e2e に Maroon #EBA0AC)
ボーダー 背景よりわずかに暗い、控えめな色 背景よりわずかに明るい、控えめな色
ホバー状態 Peachに変化 (より暖かく、エネルギッシュに) Peachに変化 (より暖かく、エネルギッシュに)

意味的な色の使用

// 良い例: 意味的な名前を使用する
<Button color="primary">Submit</Button>
<Alert variant="error">Failed</Alert>

// 悪い例: 特定の色の名前を使用する
<Button color="peach">Submit</Button>
<Alert variant="red">Failed</Alert>

モード切り替え

アプリはデバイスのシステム輝度設定を尊重する必要があります。単一のモードを強制してはいけません。

// Flutter — システム設定を自動的に読み取る
final brightness = MediaQuery.platformBrightnessOf(context);
final scheme = brightness == Brightness.dark
    ? AppColors.dark
    : AppColors.light;

アクセシビリティガイドライン

  • WCAG AA準拠: 通常のテキストで最低4.5:1、大きなテキストで3:1のコントラスト
  • フォーカスインジケーター: プライマリカラーを2pxのアウトラインで使用
  • エラー状態: エラーカラーは常にアイコン/テキストと組み合わせ、色だけに頼らない
  • 色覚異常: Peach/Flamingoはプロタノピアでは似て見える可能性があるため、常に形状/テキストの合図と組み合わせる

コマンド

# Catppuccinパレットパッケージをインストール (任意)
npm install @catppuccin/palette

# コントラスト比をテスト
npx polypane # または contrast-ratio.com のようなオンラインツールを使用

リソース

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

When to Use

  • Defining brand color systems for applications
  • Implementing light/dark theme switching
  • Creating design tokens or style systems
  • Establishing color naming conventions across teams

Design Philosophy

Warm tones only. Bastet is a pet care platform — the brand must feel warm, inviting, and trustworthy. Cold blues/purples are explicitly avoided for primary and secondary roles.

Based on Catppuccin flavors:

  • Light mode: Latte
  • Dark mode: Mocha

Brand Colors

Role Catppuccin Name Light (Latte) Dark (Mocha) Usage
Primary Maroon #E64553 #EBA0AC CTAs, buttons, links, focus rings
Secondary Flamingo #DD7878 #F2CDCD Badges, tags, supporting elements
Emphasis Peach #FE640B #FAB387 Hover states, highlights, accents
Warm info Rosewater #DC8A78 #F5E0DC Informational, subtle accents

Why These Colors

  • Maroon — Bold warm red. Reads as "action" with confidence and warmth
  • Flamingo — Soft pink that complements Maroon without competing
  • Peach — Energetic orange for emphasis/hover, draws attention to highlights
  • Rosewater — Delicate pink for info states, keeps everything cohesive

Colors NOT Used as Primary/Secondary

Color Reason
Blue, Sapphire Too cold, corporate feel
Lavender, Mauve Purple is cold, doesn't match pet care warmth
Teal Cold, clinical
Green Reserved for semantic "success" only

Color Categories

Category Purpose Usage
Primary Main brand actions (CTA, links, focus states) Buttons, active states, primary actions
Secondary Supporting elements, less prominent actions Badges, tags, secondary buttons
Accent Emphasis, highlights, notifications Alerts, highlights, important info
Surface Backgrounds, containers Cards, modals, panels
Text Typography hierarchy Body text, headings, labels
Border Dividers, outlines Separators, input borders

Catppuccin Color Mappings

All color token definitions (primary, secondary, accent, surface, text, border) for both light and dark modes:

See assets/color-tokens.ts

Design Tokens

CSS Custom Properties (light + dark)

See assets/styles.css

Tailwind Configuration

See assets/tailwind-colors.js

TypeScript Theme System

See assets/theme-tokens.ts

React Component Examples

See assets/example-component.tsx

Flutter Implementation

Reference: mobile/lib/app/theme/app_colors.dart

// Access via Forui theme
final colors = context.theme.colors;
colors.primary;    // Maroon
colors.secondary;  // Flamingo

Light/Dark Mode Conventions

Contrast Requirements

Element Light Mode Dark Mode
Text on backgrounds Dark text on light surfaces Light text on dark surfaces
Primary actions High contrast (Maroon #E64553 on Base #eff1f5) Softer contrast (Maroon #EBA0AC on Base #1e1e2e)
Borders Subtle, darker than background Subtle, lighter than background
Hover states Shift to Peach (warmer, energetic) Shift to Peach (warmer, energetic)

Semantic Color Usage

// DO: Use semantic names
<Button color="primary">Submit</Button>
<Alert variant="error">Failed</Alert>

// DON'T: Use specific color names
<Button color="peach">Submit</Button>
<Alert variant="red">Failed</Alert>

Mode Switching

The app MUST respect the device's system brightness preference. Never force a single mode.

// Flutter — reads system preference automatically
final brightness = MediaQuery.platformBrightnessOf(context);
final scheme = brightness == Brightness.dark
    ? AppColors.dark
    : AppColors.light;

Accessibility Guidelines

  • WCAG AA Compliance: Minimum 4.5:1 contrast for normal text, 3:1 for large text
  • Focus Indicators: Use primary color with 2px outline
  • Error States: Always pair error color with icons/text, never rely on color alone
  • Color Blindness: Peach/Flamingo may appear similar to protanopia — always pair with shape/text cues

Commands

# Install Catppuccin palette packages (optional)
npm install @catppuccin/palette

# Test contrast ratios
npx polypane # or use online tools like contrast-ratio.com

Resources