neo-brutalism

ネオ・ブルータリズム

ひとつのアイデンティティ：オンライン全開のプロダクトを象徴するスキルポスター――派手で、正直で、四角い。

1. カラーパレット（固定）

• ペーパー：#FFF8E7（明るく温かみのある色）。代替の背景色：#FFEFC2（少し深みのある色）。
• インク：#0A0A0A — すべての境界線（2.5px）、テキスト、シャドウに使用します。
• アクセント — ちょうど2色：主役となるホットアクセント #FF3878（背景、目立つ要素、ヒーロー部分）＋補助となるクールアクセント #7CC6FE（セカンダリの背景、マーク、ホットな背景上のステッカー）。上限は2色です。1色でもかまいません。
• グラデーションは禁止、柔らかい／ぼかしたシャドウは禁止（box-shadow は 6px 6px 0 #0A0A0A のような硬いシャドウにすること）、ガラス風表現は禁止、ヒーローセクションのダークモードは禁止。

2. タイポグラフィ（固定）

• ディスプレイ： ウェイト700の幾何学的なグロテスク体（Space Grotesk 700、Archivo 800）、clamp(2.6rem, 7vw, 5.5rem)、行間0.98、文字間隔 −0.02em。文頭のみ大文字の表記で問題ありません。斜体は禁止、流行だからという理由で全て小文字にするのも禁止です。
• 本文： 同じファミリーの400／500、16〜17px、行間1.5。
• ラベル： モノスペースの大文字（IBM Plex Mono、Space Mono）、11px、letter-spacing: 0.06em — スタンプ、ステータス、「NEW」、バージョン表記に使用します。
• 強調表現はひとつの手法に統一します。ホット／スカイの半透明な色面に単語を置くか、6pxのインク色の下線を引きます。どちらか一方を選び、使用は3回までにします。

3. 構成（固定）

• すべてに境界線を付けます。 カード、ボタン、パネル、ステッカー、入力欄のすべてに、インク色の2.5pxの境界線を付けます。角は四角またはピル型にします（コンポーネントがピル型でない限り、半径6〜20pxの柔らかい角丸は禁止）。浮き上がった要素の60〜70%に、硬いオフセットシャドウを付けます。フラットなコンポーネント（境界線あり、シャドウなし）を使うことで、ページが混沌としないようにします。
• ヒーロー： 巨大なディスプレイ文字＋特大のピル型CTA＋スカイ色のステッカーを載せたホットな背景パネル。パネルとステッカーは1〜2°傾けてもかまいません。回転は1ページあたり最大3要素までです。
• 色の配分： 1つのビューポートにホットな背景は最大2つ、スカイ色の背景は最大2つ、その他はすべてペーパーにします。ホットな背景を2つ並べるのは禁止です。
• セクション： ペーパーとインクの背景を交互にします（インク色のセクションでは文字をペーパー色にします）。画面幅いっぱいに広げてもかまいません。料金プランは3つのカードで構成します — ペーパー／ホット／ペーパー。ホットなカードには最大のシャドウを付けます。
• ボタン：高さは最低56px、境界線は2.5px、シャドウは6px 6px 0 #0A0A0A。押下状態ではシャドウを取り除き、translate(6px, 6px)を適用します。

4. コンテンツの表現

• 絵文字は禁止です。装飾的なマークは ✳、★、→、◦、•• と、シンプルなSVGイラスト（太い線、ベタ塗り、使う色は2つのアクセント＋インクのみ）にします。
• コピーもアイデンティティの一部です。率直で、少し生意気にし、企業的な無難な表現は一切使いません（「SQLを学ぶより、他にやることがあるでしょう」＞「分析ワークフローを効率化しましょう」）。
• 感嘆符はページあたり最大1つです。読者を褒めてもかまいません（「よくできています。」）。
• 価格の詳細はパッケージラベル風に表記します。モノスペース、境界線付き、「MOST POPULAR」のスタンプを使用します。

5. モーション（きびきび、目に見えて、短く）

• 登場時：影を2pxオーバーシュートさせる150〜250msのスナップ（cubic-bezier(0.34, 1.56, 0.64, 1)）、または120msのシンプルなポップにします。長い映画のような演出は禁止です。
• ホバー時：境界線の色をアクセントカラーに切り替えるか、シャドウを2px大きくします。押下時：シャドウを縮めます（§3参照）。
• ループ：一切禁止です。マーキー、跳ねる矢印、無限の揺れは禁止です。ページには自信を持たせ、不安げに見せないでください。

6. チェックリスト（該当する項目があればページは不合格）

• 背景と画像を除き、インク色の2.5pxの境界線がない要素がある。
• 柔らかいシャドウやグラデーションがある。
• アクセントカラーが2色を超えている。
• 回転した要素が約3つを超えている。
• 絵文字がある。
• コピーに「企業的なトーン」の文がひとつでもある。
• ホットアクセントの背景が2つ並んでいる。
• Tailwindのテンプレート由来に見える要素がある。