このスキルは、ユーザーが明示的に選択した場合、または確定したプロジェクト設定で指定されている場合にのみ使用してください。説明のない新しいUIリクエストには、ユーザーの好みを推測する代わりに、スタイルセレクターなどを使用してください。既存のブランド、アクセシビリティ、ユーザーによる上書きは、以下のすべての例よりも優先されます。以下のスタイルガイドは、スタイル選択前にUIコーディングを開始する許可を与えるものではありません。
スタイルパック: ネオ・ブルータリズム
ID: neo-brutalism
シグネチャ: 遊び心のある大胆な色、高コントラストの黒い境界線、ぼかしのないハードなオフセットシャドウ、触覚的なメカニカルな押下感。
これはスタイルパックであり、必須のデフォルトではありません。明示的な選択後、または確認された該当プロジェクトスタイルの場合にのみロードしてください。プロジェクトの指示は個々の選択を上書きできます。アクセシビリティ、ユーティリティ、ブランドの制約を維持してください。フォントは提案であり、必須の依存関係ではありません。角丸でソフトなぼかしシャドウを持つフラットなカードは、ネオ・ブルータリズムには該当しません。
適した用途/トレードオフ
- 適している: クリエイターツール、遊び心のあるB2B SaaS、モダンな開発者ポータル、ハッカソン/イベントプラットフォーム、インディー製品ウェブサイト、そして紛れもない個性が求められるマーケティングページ。
- 注意が必要: 正式な金融レポートやエンタープライズの法務ワークフロー。特に、エネルギッシュで型にはまらないオーディエンス向けにブランディングされている場合を除く。
- 参考方向:
- Light Pop Canvas: 鮮明なクリーム色または暖かいペーパーベース（
#FFFDF7/#F4F0EA）に高コントラストの黒いストローク（#121212）、電飾風のアクセントフィル（鮮やかなイエロー#FFDE59、パンチの効いたシアン#4DEEEA、コーラル#FF5E5B）、そして鮮明でぼかしのないドロップシャドウ（5px 5px 0 #121212）。 - Dark Pop Contrast: 深いインクキャンバス（
#18181B）に鮮明な白い境界線（2.5px solid #FAFAFA）、鮮やかなライム/バイオレットのアクセント、白/アクセントのオフセットシャドウ（4px 4px 0 #FAFAFA）。
- Light Pop Canvas: 鮮明なクリーム色または暖かいペーパーベース（
ネオ・ブルータリズム素材の忠実度ゲート — 必須
ネオ・ブルータリストページを完了と呼ぶ前に、最初のビューポートが本物のネオ・ブルータリスト構成として視覚的に読める必要があります。 ユーザーがこのスタイルを選択した場合、微妙な角丸と標準的なぼかしシャドウを持つ汎用的なカードは、CSSクラスにneoが含まれていても不合格です。
成功するネオ・ブルータリスト実装は、以下のすべてを示します:
- 高コントラストのソリッドアウトライン: コアコンテナ、アクション可能なボタン、入力、バッジは、鮮明なソリッド境界線（
2px–3px solid #121212）を備えています。薄いグレーのヘアラインストロークは不可。 - ハードなぼかしなしオフセットシャドウ: サーフェスは、シャープでぼかしのない方向性のあるドロップシャドウ（コントロールは
4px 4px 0 #121212、カードは6px 6px 0 #121212〜8px 8px 0 #121212）を落とします。ソフトなぼかしシャドウは直接的な失敗です。 - メカニカルな押下による収縮:
:activeまたはクリック時に、インタラクティブなボタンはシャドウ軸に沿って物理的に押し下げられます（transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;）。紛れもない触覚的なメカニカルフィードバックを提供します。 - 鮮やかで意図的なカラーブロッキング: バランスの取れた高コントラストパレット: 1つのキャンバスベース + 1つの鮮明なインクカラー + 1〜2つの目的のある彩度の高いアクセント（プライマリアクションとセマンティックなグループ化に使用）。
- 大胆な非対称タイポグラフィ構造: タイトな行間と、巨大なディスプレイ見出しと読みやすいボディテキストの明確なコントラストを備えた、自信に満ちたグロテスクまたは幾何学的なタイポグラフィ。
最初のビューポートテスト: デスクトップのスクリーンショットで、ページタイトルを読まずに、太い黒いアウトライン、ハードなぼかしゼロのオフセットシャドウ、触覚的なボタンの状態を特定します。標準的なフラットSaaSレイアウトのように見える場合は、先に進む前に境界線とシャドウトークンを修正してください。
明示的なネオ・ブルータリストのハードシャドウ例外 — シャドウはシャープであってもよい
ネオ・ブルータリズム固有のオーバーライド: 過度な装飾や気を散らすシャドウに対する普遍的な緩さ注意は、ここではハードオフセットシャドウや黒いアウトラインの禁止として解釈されてはなりません。これらは、ネオ・ブルータリズムの物理法則と視覚的明瞭さに不可欠な素材を可能にするプロパティです。
- 許可される素材処理: ソリッドでぼかしのないオフセットシャドウ（
4px 4px 0 #000）、2〜3pxの黒い境界線、バッジの回転（バッジのみ-2°〜+2°）、高コントラストのカラーピル。 - 色のコントラスト規律: 鮮やかなアクセント背景（イエロー、シアン、ライム、コーラル）に配置されたすべてのテキストは、黒インク（
#121212）に対してテストし、WCAG AA（4.5:1）を超える必要があります。純白のテキストは、濃いインクフィルのために厳密に予約されています。 - 緩さの解釈: ネオ・ブルータリスト要素は、ハードシャドウの数ではなく、アフォーダンス、レイアウト構造、可読性によって評価します。汎用的な最小限のヒューリスティックを満たすためにハードオフセットシャドウを削除することは、デザインの後退です。
タイポグラフィとタイプライティング
表現力豊かで自信に満ちたグロテスクサンセリフ: Space Grotesk、Archivo、Syne、またはシステムサンセリフ。見出しは36〜56 px（デスクトップ）/ 28〜40 px（モバイル）。ウェイト700〜800。ボディテキストは15〜17 px、ウェイト400〜500。行間は1.45〜1.55。セクションインデックスとメタデータには大文字トラッキング（letter-spacing: 0.05em）を使用できます。中身のないスローガンではなく、パンチの効いた人間らしいマイクロコピー。
カラー方向
- ライトモード（パンチの効いたポップライト）:
- キャンバスベース: オフホワイト/ライトクリーム（
#FFFDF7または#F7F5F0）。 - カード背景: ピュアホワイト（
#FFFFFF）または薄い色合いのブロック。 - インク/ストローク: ジェットブラック（
#121212）。 - オフセットシャドウ: ソリッドブラック（
4px 4px 0 #121212）。
- キャンバスベース: オフホワイト/ライトクリーム（
- ダークモード（ダークポップコントラスト）:
- キャンバスベース: 深いインクキャンバス（
#18181B）。 - カード背景: 高めのダークチャコール（
#222227）またはディープスレート（#27272A）。 - インク/ストローク: 鮮明な白/クリーム（
#FAFAFA）。 - オフセットシャドウ: 鮮明な白または鮮やかなアクセント（
4px 4px 0 #FAFAFAまたは4px 4px 0 var(--taste-neo-accent-primary)）。
- キャンバスベース: 深いインクキャンバス（
- プライマリアクセント: 鮮やかなポップカラー（例: エレクトリックイエロー
#FFE600、ホットコーラル#FF5757、ロイヤルコバルト#3B5BFF）。 - セカンダリアクセント: 補完的なコントラスト（例: クリスプミント
#00F0A8またはライラックポップ#D8B4FE）。 - テーマ結合と衝突防止ルール: ダークモードでは、境界線とオフセットシャドウは必ず明るい色/白または明るいアクセントに反転する必要があります。黒い境界線と黒いシャドウを暗いキャンバスに残すと、奥行きとコントラストが完全に失われます（黒に黒）。鮮やかなアクセント背景（イエロー、シアン、ライム、コーラル）上のすべてのテキストは、黒インク（
#121212）に対してテストし、WCAG AA（4.5:1）を超える必要があります。純白のテキストは、濃いインクフィルのために厳密に予約されています。
レイアウトとジオメトリ
コーナーはスクエアまたは微妙に丸めます（0px–8px 最大）。 generous padding（カードは20px〜32px）。2px〜3pxのソリッド境界線。4px〜8pxのハードオフセットシャドウ。スペーシングはしっかりした8pxグリッドを使用します。レイアウトは、グラウンディングされ、パンチが効いていて、自信に満ちている感じにする必要があります。
サーフェス、奥行き、テクスチャ
サーフェスはクリーンで不透明、ソリッド:
- ボタン（Raised）:
background: var(--taste-neo-accent); border: 2.5px solid #121212; box-shadow: 4px 4px 0 #121212; - ボタン（Active/Pressed）:
transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212; - カード＆パネル:
background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 6px 6px 0 #121212; - 入力フィールド:
background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 3px 3px 0 #121212;（フォーカス時に締まる）。
コンポーネントの構造とインタラクション
- プライマリアクション（CTA）: ハードオフセットシャドウ、太いストローク、触覚的なクリックによる押し込みを備えた、大胆な色のピル/長方形。
- セカンダリアクション: 白または透明の塗りつぶしに黒い境界線、ホバー効果を反転（
background: #121212; color: #FFFFFF;）。 - フォームコントロール: 鮮明なラベル、色付きオフセットグローまたは深められたストロークによる明確なフォーカス状態を持つアウトライン入力ボックス。
- ステータスバッジ/タグ: 2pxのストローク、微妙な2pxのオフセットシャドウ、短く具体的なラベルを持つ高コントラストのピル。
- カード: カードヘッダー、ボディ、アクションフッターを区切る鮮明な区切り線（
border-bottom: 2px solid #121212）。
モーション
100〜160 msの crisp なリニアまたはイーズアウトトランジション。押下時に直接1〜2pxの変位。長く弾むようなスプリング、フロートループ、漫画のような振動は決して使用しないでください。
オプションのAnime.js v4レシピ
- モーションの決定: 一致するハードシャドウ応答を伴う短く直接的な1〜2pxのボタンシフト。巨大なシャドウをアニメーション化しないこと。
- 開始時間: 130ms（0 = 即時）。タスクとユーザーの好みに合わせて調整。
- 避けること: バウンスやエンドレスに動くステッカー。
- 依存関係: デフォルトではCSS/ネイティブ。要求されたインタラクションがそれを正当化する場合にのみ、Anime.js v4を使用してください。利用可能な場合はTaste Engineの
references/motion-engine.mdに従い、スタンドアロンスキルは上記の reduced-motion および no-decorative-loop の原則に従います。
UIライティングとマイクロコピー
エネルギッシュで、率直で、直接的。例: 「Start building」「Get code」「Copied to clipboard」。プロダクションツールでは、企業の専門用語や気取ったミームテキストを避けてください。
スタータートークン（提案であり、完全なテーマではありません）
| トークン | ライトモードデフォルト | ダークモードデフォルト |
|---|---|---|
--taste-neo-bg | #fffdf7 | #18181b |
--taste-neo-card-bg | #ffffff | #222227 |
--taste-neo-ink | #121212 | #fafafa |
--taste-neo-border | 2.5px solid #121212 | 2.5px solid #fafafa |
--taste-neo-shadow-sm | 3px 3px 0 #121212 | 3px 3px 0 #fafafa |
--taste-neo-shadow-md | 5px 5px 0 #121212 | 5px 5px 0 #fafafa |
--taste-neo-shadow-lg | 8px 8px 0 #121212 | 8px 8px 0 #fafafa |
--taste-neo-accent-primary | #ffe600 | #ffe600 |
--taste-neo-accent-secondary | #ff5757 | #ff5757 |
--taste-neo-radius | 6px | 6px |
--taste-neo-font-body | Space Grotesk, Archivo, system-ui, sans-serif | Space Grotesk, Archivo, system-ui, sans-serif |
--taste-neo-motion-duration | 130ms | 130ms |
トークンは方向性を表し、すべてのパレット/プラットフォームでコピーペーストして保証されるものではありません。プロジェクトレベルで --taste-neo-* を定義し、色のコントラストを確保し、リテラル値を散在させるのではなく、テーマトークンを介して適応させてください。
ヒーロー構成（最初のビューポート全体）
公開向けポートフォリオ/ランディング/ホームページにヒーローがある場合: 1画面分のヘッダー+ヒーロー構成を使用します。ベースの高さは min-height: 100svh とし、100vh をフォールバックとして、実際のヘッダーがノーマルフローにある場合にのみそれを差し引きます。アクセシビリティと短いモバイル画面のためにヒーローを拡張できるようにします。プライベートダッシュボードや他のタスク画面にはこれを適用しないでください。ユーザーによる直接の上書きが優先されます。スタイル固有の方向: 大胆な非対称ブロック、しっかりとグラウンディングされたディスプレイタイポグラフィ、1つの高コントラストのプライマリアクションを通じて、ビューポート全体をエネルギッシュにします。太い境界線とオフセットシャドウは意図的なままにします。画面を埋めるためにステッカー、余分なアウトラインボックス、回転する装飾を積み重ねないでください。存在する場合はルーターの references/hero-layout.md を参照してください。スタンドアロン使用も同じレスポンシブおよびアンチスロップの原則に従います。
スタイル固有の品質ゲート
- Yes: ハードでぼかしのないオフセットシャドウを確認。2〜3pxのソリッド境界線を維持。触覚的な押下変位をテスト。彩度の高いアクセントに対するテキストコントラスト（黄色/シアン/ミント上の黒インク）をテスト。ダーク/ライトモードの切り替えをテストし、境界線、オフセットシャドウ、インクが適切に反転し、暗い背景に溶け込まないようにする。
- No: ネオ・ブルータリストのシャドウにぼかしや広がりを追加しない。ミュートされた低コントラストのパステルを避ける。黄色やミントのボタンに純白のテキストを配置しない。暗いキャンバスに黒い境界線/シャドウを残さない。
- デスクトップとモバイルの一貫性を確認。視覚的なキーボードフォーカス（
:focus-visible）。ローディング、空、無効、エラー、成功状態。reduced-motion動作（prefers-reduced-motion）。 - スタイル固有の想定を無関係なプロジェクトに注入しないでください。スタイルを組み合わせる場合は、プライマリスタイルと借用した機能を明示的に指定します。
普遍的なアンチスロップゲート（自己完結型）
すべての要素はその場所に値する必要があります。装飾よりもコンテンツ。不確実性を装飾しないでください。 残高、指標、 testimonial、ユーザー、ロゴ、承認、確認済み/ライブ/オンラインステータス、偽のアクティビティ、成功確認をでっち上げないでください。代わりに、正直な空/ローディング/エラー状態を使用してください。デモデータは、要求され、かつ明示的にラベル表示されている場合にのみ許容されます。
装飾的なカード内カードレイヤーを追加しないでください。ネストされたサーフェスは、明確なインタラクションまたは情報の境界を表す必要があります。自動生成された3つの機能グリッド、4つの統計ダッシュボード、偽のヒーローの主張、目的のないチャート、バッジ/チップ/アイコンのスパム、無関係な装飾アート、ビューポートを埋めるためだけのランダムループを避けてください。タイポグラフィ、スペーシング、整列、区切り線によるグループ化を優先します。同等のピアには、意図的な視覚的バランスが必要です。
アンチスロップコピーライティング: 「Unlock your potential」「Experience the future」「Supercharge your workflow」「seamless」などの一般的な主張、または翻訳された同等物は使用しないでください。見出しは実際の内容を伝え、CTAはアクションを指定し、空/エラー/成功テキストは実際の状態と次のステップを説明する必要があります。偽の緊急性、でっち上げられた数字、曖昧なAIの誇大宣伝、不必要な絵文字、アクセシブルでないオールキャップスの壁を避けてください。真実を変えずに、このスタイルとユーザーの言語に合わせて表現を調整してください。
テーマとモードのコントラスト整合性: ユーザーがダークモードまたはライトモードを要求した場合（またはテーマスイッチャーを構築した場合）、背景色と前景色は、すべてのサーフェス、テキスト、境界線、入力、セマンティックバッジにわたって同期されたペアで反転する必要があります。暗い背景に黒いテキスト、白い背景に白いテキスト、または読みにくい低コントラストのステータスピルを絶対に残さないでください。すべての状態はWCAG AAコントラスト（本文/通常テキストは最小4.5:1、大きな見出しとインタラクティブな境界は3:1）を満たす必要があります。
レスポンシブとモーション: モバイルを意図的に構成し、長いラベル、フォーカス状態、アクセシブルなコントラストを確認します。流行のレイアウトに合わせてテキストをクリッピングしないでください。デフォルトでは静的。意味のあるインタラクションにモーションを使用し、reduced-motion設定を尊重し、実際の状態なしにバウンス/フローティング/パルス装飾を避けてください。
Critical/High Findingsのブロック完了: 偽造されたステータス/データ、壊れたアクション、アクセスできない/クリップされたコントロール、誤解を招くコピー、テーマコントラストの衝突、または重大なモバイル障害は修正する必要があります。実際に検証したことを報告し、実行しなかったテストを主張しないでください。
美観拒否ではない: 表現力豊かな色、シャドウ、グラデーション、カードレイアウト、または…（原文の切り捨てによりここで終了）
[翻訳のため以下省略]