webconsulting-branding

webconsulting デザインシステム

出典：https://github.com/dirnbauer/webconsulting-skills

現在の webconsulting のデザイン言語は、フラットでスクエア、正確で、コンテンツを重視しています。 タイポグラフィ、余白、サーフェスカラー、塗りつぶしによる強調で階層を表現します。 装飾的な枠線や角丸カードは旧来のスタイルです。

1. 参照の優先順位

参照元の内容に食い違いがある場合は、次の順に従います。

1. 情報量の多い情報、フォーム、テーブル、文書の階層には、現在の請求書 UI を使用します。
2. プロジェクトトラッカーや GitLab テーマなど、現在の社内プロダクトを使用します。
3. エディトリアルレイアウト、マーケティングページ、大規模な構成には、現在の公開サイト webconsulting.at を使用します。
4. 再利用可能なトークンと実装ルールには、このスキルを使用します。

利用可能であれば、実際の画面を確認してください。コンポーネントライブラリにすでに存在するという理由だけで、古いパターンを再導入しないでください。

2. 必ず守るべきビジュアルルール

• 角はスクエアにします。border-radius: 0 および Tailwind の rounded-none を使用します。
• カード、パネル、コールアウト、ボタン、テーブル、セクションの周囲に装飾的な枠線を使用しません。
• 余白、背景の変化、文字の太さ、ゼブラ行、配置によって区切りを表現します。
• メニュー、ダイアログ、固定オーバーレイなど、一時的な浮き上がりにのみシャドウを使用します。
• ヘッダー上部にブランド告知やアクセントを1つだけ配置します。フッターの上や内部に繰り返し配置しないでください。
• フッターは開放的で控えめに保ちます。上枠線、アクセントのストライプ、重複したシステム告知、枠で囲んだカラムは使用しません。
• 主要アクションには、塗りつぶしたティールまたはほぼ黒のコントロールを使用します。副次アクションをアウトラインで囲まないでください。
• フォーカスインジケーターは維持します。キーボードフォーカスのアウトラインは、装飾的な枠線ではなく、アクセシビリティを支援するものです。
• 実際のプロジェクトのアイデンティティアセットを使用します。プロジェクトのロゴを優先し、ロゴがない場合はプロジェクトのファビコンを使用します。

削除する旧来のパターン

次のものは生成しないでください。

• 視覚的なグループ化のための border、border-*、divide-*、カードのアウトライン
• rounded、rounded-md、rounded-lg、ピル型カード、角丸のテーブル外枠
• ヘッダーとフッターで重複する告知バー
• フッターの border-top、署名用の区切り線、シアンやティールのストライプ
• プロジェクトのロゴやファビコンがある場合の、汎用的な Lucide ピクトグラム
• 枠線で囲まれた副次ボタンやコールアウト
• 枠で囲まれたコンテンツの中に、さらに枠で囲まれたコンテンツを配置すること

ネイティブの文書区切り、グラフの軸、図表の線、下線付きテキストリンク、フォーカスアウトラインは、装飾的なコンテナー枠ではありません。意味を伝える場合にのみ使用してください。

3. ブランドのアイデンティティと語調

ペルソナ： 革新的で、技術に精通したプロフェッショナルな、シニアソリューションアーキテクトです。

語調： 明快で簡潔、具体的かつ確信に満ちた表現にします。マーケティング的な誇張は避けてください。

言語： 公開向けおよびビジネス向けのコンテンツはドイツ語、技術文書はプロジェクトで別途指定がない限り英語にします。

4. ビジュアルトークン

基本パレット

Token	ライト	ダーク	用途
--webcon-primary	#1b7a95	#66c4e1	主要アクション、リンク、アクティブ状態
--webcon-primary-dark	#155d73	#9dd8eb	ホバー状態、強調されたティールのテキスト
--webcon-primary-strong	#0f4555	#c5e8f2	深みのあるブランドサーフェス
--webcon-accent	#66c4e1	#66c4e1	ヘッダーのシグネチャ、テキスト以外のアクセント
--webcon-primary-pale	#e8f4f8	#0f3d4a	選択状態および情報表示用のサーフェス
--webcon-canvas	#f5f8f9	#071f26	アプリの背景
--webcon-surface	#ffffff	#0f252c	メインの閲覧用サーフェス
--webcon-surface-muted	#eef2f3	#16343d	ナビゲーションおよびメタデータの帯
--webcon-ink	#171a1d	#f8fafb	主要テキスト
--webcon-muted	#5e6870	#b8c5ca	副次テキスト

明るいシアンはアクセントであり、白地の本文テキストには使用しません。ブランドカラーをテキストに使用する前に、コントラストを確認してください。

セマンティック状態

状態	前景色	ライトサーフェス	ダークサーフェス
成功	#166534	#dcfce7	#14532d
エラー	#b42318	#fee2e2	#450a0a
警告	#9a4a00	#fef3c7	#451a03
情報	#155d73	#e8f4f8	#0f3d4a

状態は塗りつぶしたサーフェス、アイコン、ラベル、テキストで表現します。色付きの ボーダーだけを唯一の手がかりとして使用しないでください。

CSS の基盤

:root {
  --webcon-primary: #1b7a95;
  --webcon-primary-dark: #155d73;
  --webcon-primary-strong: #0f4555;
  --webcon-accent: #66c4e1;
  --webcon-primary-pale: #e8f4f8;
  --webcon-canvas: #f5f8f9;
  --webcon-surface: #ffffff;
  --webcon-surface-muted: #eef2f3;
  --webcon-ink: #171a1d;
  --webcon-muted: #5e6870;
  --radius: 0;
}

*, *::before, *::after {
  border-radius: 0;
}

グローバルに border: 0 を適用しないでください。意味のあるコントロール、フォーカス インジケーター、チャートの軸、サードパーティ製ウィジェットが消えてしまう可能性が あります。装飾的なボーダーはコンポーネント単位で取り除いてください。

5. タイポグラフィ

製品および公開サイト全体で Hanken Grotesk を使用します。

役割	ウェイト	ガイドライン
本文	400	基本サイズは 16px、行の高さは 1.5〜1.65
ディスプレイおよびページ見出し	500-650	トラッキングを詰め、行の高さをコンパクトに
UI ラベルおよび副見出し	600-650	短く、ひと目で把握できるように
主要アクションおよびテーブル見出し	650-700	強調する場合に使用
コードおよび識別子	400-700	JetBrains Mono またはシステムの等幅フォント

import { Hanken_Grotesk } from 'next/font/google'

export const hankenGrotesk = Hanken_Grotesk({
  subsets: ['latin'],
  variable: '--font-hanken-grotesk',
  display: 'swap',
})

--font-sans: var(--font-hanken-grotesk), ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;

公開ページのヒーロー見出しには、およそ clamp(2.5rem, 5vw, 4.75rem)、 ウェイト 500、わずかに負のトラッキングを使用します。内部ツールは引き続き 情報密度を高く保ちます。

6. レイアウトとスペーシング

4px を基本グリッドとして使用します。

トークン	値	用途
space-1	4px	アイコンとテキストの間隔を詰めた配置
space-2	8px	インラインのグループ
space-3	12px	コンパクトなコントロール
space-4	16px	コンポーネントのパディング
space-6	24px	関連するブロック
space-8	32px	ページ内のグループ
space-12	48px	コンパクトなセクション
space-16	64px	標準的な公開セクション
space-24	96px	大きなセクションのリズム
space-32	128px	エディトリアル／ヒーローの間隔

• 公開ページ：余白を広く取り、黒／白または淡いサーフェスを全幅で切り替え、読みやすいコンテンツ幅にします。
• 内部ツール：淡いキャンバスに、開放感のある白い作業サーフェスをひとつ配置し、情報密度は控えめにします。
• 同じ見た目のボーダー付きカードを並べたグリッドは避けます。開放的なカラム、帯、タイポグラフィのグループを使用します。
• 配置を正確に保ちます。ベースラインやエッジがずれると、スクエアなシステムの見た目が損なわれます。

7. ヘッダーとフッター

システムでは、ヘッダーの告知を 1 つ、または細いアクセントラインを 1 本使用できます。体験の最上部に 1 度だけ表示してください。

<header className="bg-white text-webcon-ink">
  <div aria-hidden="true" className="h-1 w-full bg-webcon-accent" />
  <nav className="mx-auto flex max-w-7xl items-center px-6 py-5">
    {/* logo, navigation, utilities */}
  </nav>
</header>

<main>{/* page */}</main>

<footer className="bg-webcon-ink px-6 py-16 text-white">
  {/* no top border, no accent rule, no repeated announcement */}
</footer>

GitLab のようにヘッダーとフッターの両方に告知を表示できるシステムでは、 ヘッダーの告知だけを設定し、フッターの告知は空にします。すべてのページの両端で、 セキュリティやプラットフォームに関する文言を重複して表示しないでください。

8. コンポーネントのパターン

ボタン

<button class="bg-webcon-primary px-6 py-3 font-semibold text-white transition-colors hover:bg-webcon-primary-dark focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-webcon-primary-dark">
  Primary action
</button>

<button class="bg-neutral-100 px-6 py-3 font-semibold text-webcon-ink transition-colors hover:bg-webcon-primary-pale focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-webcon-primary-dark">
  Secondary action
</button>

<button class="bg-transparent px-4 py-2 font-semibold text-webcon-muted hover:bg-neutral-100 hover:text-webcon-primary-dark focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-webcon-primary-dark">
  Ghost action
</button>

すべてのボタンで border-0 rounded-none shadow-none を使用します。情報量の多い背景から 浮き上がらせる必要がある場合に限り、単一の主要アクションに控えめなシャドウを 使用できます。

フォーム

• フォームコントロールは、枠で囲むのではなく、コントラストのある塗りつぶしたサーフェスに配置します。
• ライトテーマの入力欄には bg-neutral-100 border-0 rounded-none を使用します。
• ラベルは常に表示します。プレースホルダーでラベルを代用しないでください。
• コントラスト比を少なくとも 3:1 にした、3px のフォーカスアウトラインを使用します。
• 関連するフィールドは、周囲をフィールドセットのボーダーで囲まず、スペーシングと見出しでグループ化します。
• ネイティブのチェックボックス／ラジオボタンの表示を維持するか、accent-color: #1b7a95 を使用します。

テーブルとリスト

• 台帳形式のテーブルには、白いテキストを使った塗りつぶしのティール色のテーブルヘッダーを使用します。
• ゼブラ行には白と #f8fafb を使用し、ホバーと選択には淡いティール色を使用します。
• 外側のテーブルボーダー、セルのグリッド、角丸のテーブルシェルは使用しないでください。
• 数値は右揃えにし、識別子には等幅フォントを使用します。
• 行のアクションはコンパクトにし、ホバーまたはフォーカス時以外は目立たないようにします。
• モバイルでは、横スクロール、優先カラム表示、またはセマンティックなリストを選択します。

カードとパネル

• カードは使わないことを優先します。コンテンツはページ上、または全幅のサーフェス帯に配置します。
• グループ化が必要な場合は、bg-white または bg-webcon-primary-pale にパディングを加えて使用します。
• 階層が弱いことを補うために、ボーダーや角丸を追加しないでください。
• 静的なコンテンツにはシャドウを使用しません。

タブとナビゲーション

• タイポグラフィ、塗りつぶしの選択状態、または短いアクティブインジケーターを使います。
• すべてのタブを四角い枠で囲まないでください。
• ヘッダーのアクセントとタブの選択状態を区別し、ページ全体に別の線を引かないでください。

コールアウト、コード、オーバーレイ

• コールアウト：色を付けた四角いサーフェス、明確なアイコン、タイトル、テキストを使い、枠線は付けません。
• コード：ほぼ黒の四角いサーフェス、シンタックスカラー、ファイル名ラベルを使い、装飾的なフレームは付けません。
• メニュー／ダイアログ：控えめな影のある四角いサーフェスを使い、常設のカード枠線は付けません。

9. プロジェクトのアイデンティティとアイコン

プロジェクトアイコンには、インターフェースで選択したカテゴリではなく、プロジェクトそのものを表すものを使います。

次の優先順位で選びます。

1. プロジェクトのリポジトリ、ブランドキット、またはデプロイ済みサイトにある公式プロジェクトロゴ。
2. プロジェクトが提供する製品／アプリのアイコン。
3. デプロイ済みサイトで宣言された、最も高品質なファビコン（SVG、Web マニフェスト、Apple touch icon、次に PNG／ICO）。
4. ロゴもファビコンも見つからない場合に限り、中立的な webconsulting の代替アイコンを使用します。

ルール：

• 利用可能なロゴを、汎用の Lucide アイコン、絵文字、文字、カテゴリのピクトグラムに置き換えないでください。
• ブランドガイドラインで許可されていない限り、サードパーティのロゴを描き直したり、色を変更したり、切り抜いたり、背後にティール色のタイルを追加したりしないでください。
• SVG を優先します。それ以外の場合は、最も大きく鮮明なラスタ画像を使い、アスペクト比を維持します。
• プロジェクトのアバターは、object-fit: contain と 12〜16% のセーフスペースを使って正方形のキャンバスに収めます。
• 透明または目立たない中立色のキャンバスを使い、枠線や角丸のマスクは付けません。
• ロゴは視覚的に中央に配置します。ワードマークを無理に正方形いっぱいに広げないでください。
• 後からアセットを更新できるよう、ソース URL またはリポジトリ内のパスを記録します。
• アイコンの直後にプロジェクト名が表示される場合は、空の代替テキストを使います。 それ以外の場合は、アクセシブルなラベルとしてプロジェクト名を使います。

可能であれば、ファビコンの解決にはページのメタデータまたは Web マニフェストを使います。プロジェクトサイトから独自のアセットを取得できる場合、サードパーティのファビコンプロキシを既定で使わないでください。

10. MDX コンポーネント

コンポーネントが用意されている場合は、生の HTML ではなく、プロジェクトの MDX コンポーネントを使います。

<Tabs defaultValue="v14">
  <TabsList>
    <TabsTrigger value="v14">TYPO3 v14</TabsTrigger>
  </TabsList>
  <TabsContent value="v14">Content for TYPO3 v14...</TabsContent>
</Tabs>

<ComparisonTable
  headers={['Feature', 'TYPO3 v14']}
  rows={[
    { label: 'Content Blocks 2.x', values: [true] },
    { label: 'Symfony 7.4', values: [true] },
  ]}
/>

<Callout type="info" title="Best Practice">
  Use a filled semantic surface without a border.
</Callout>

<MDXImage
  src="/images/architecture-diagram.png"
  alt="TYPO3 extension architecture"
  caption="Figure 1: Domain-driven TYPO3 architecture"
/>

上流のコンポーネントに枠線や角丸があっても、これらのコンポーネントは四角く、枠線のないサーフェスとして実装します。

11. Mermaid 図

意味のあるグラフのエッジは維持し、装飾的なノードとクラスタの線は削除します。

%%{init: {'theme': 'base', 'themeVariables': {
  'primaryColor': '#1b7a95',
  'primaryTextColor': '#ffffff',
  'primaryBorderColor': '#1b7a95',
  'lineColor': '#5e6870',
  'secondaryColor': '#e8f4f8',
  'tertiaryColor': '#f5f8f9',
  'clusterBorder': '#f5f8f9',
  'edgeLabelBackground': '#ffffff'
}}}%%
graph TD
    A[Client request] --> B[TYPO3]
    B --> C[Response]

四角形のノードとクラスタには rx: 0、ry: 0、stroke-width: 0 を適用します。 矢印や関係線は情報を伝えるため、削除しないでください。

12. アクセシビリティ（WCAG 2.2 AA）

• 通常のテキスト：コントラスト比を少なくとも 4.5:1 にします。
• 大きなテキストと重要な UI グラフィック：コントラスト比を少なくとも 3:1 にします。
• :focus-visible を使い、コントラストの高い 3px のアウトラインと 2px のオフセットを設定します。
• DOM とタブの順序を論理的に保ち、正の値の tabindex は使わないでください。
• 適切な場合は、コンテンツ、ナビゲーション、フッターへのスキップリンクを設けます。
• 情報を伝える画像には意味のある代替テキストを設定し、装飾画像には alt="" を使います。
• 色だけで状態を伝えないでください。
• タッチターゲットは少なくとも 24×24 CSS px とし、主要なコントロールには 44×44 を推奨します。
• 320 CSS px でも、ページを二方向にスクロールせずにリフローできるようにします。

13. レスポンシブ動作

ブレークポイント	幅	Tailwind
モバイル	< 640px	default
タブレット	>= 640px	sm:
デスクトップ	>= 1024px	lg:
ワイド	>= 1280px	xl:

読みやすい文字サイズを小さくする前に、列数を減らします。サーフェスの階層を維持し、モバイルの各項目を角丸の枠線付きカードに変えないでください。

14. ダークモード

ダークモードでも、同じ四角く枠線のない階層を維持します。ほぼ黒またはネイビーのキャンバス、わずかに明るい作業面、インタラクティブな強調には明るいシアン、テキストには明るい色を使います。ライトモードにない枠線を追加して、構造を示さないでください。

15. shadcn/ui の統合

セマンティックトークンを割り当ててから、デフォルトのカードスタイルを取り除きます。

:root {
  --radius: 0rem;
  --background: 195 20% 97%;
  --foreground: 210 11% 10%;
  --primary: 193 69% 35%;
  --primary-foreground: 0 0% 100%;
  --muted: 195 17% 94%;
  --accent: 195 61% 94%;
  --ring: 193 69% 27%;
}

• カード、ボタン、フィールド、タブ、コールアウトに rounded-none border-0 shadow-none を追加します。
• 塗りつぶしのサーフェスとフォーカスアウトラインで、フィールドの境界を再構築します。
• Radix のセマンティクス、キーボード操作、フォーカス管理は維持します。
• フォーカスリングやネイティブの無効状態をグローバルに非表示にしないでください。

16. レビューチェックリスト

リリース前に、以下を確認してください。

• 本質的に円形のデータやアイコンの形状を除き、すべての角の丸みがゼロになっています。
• 静的コンテナに装飾的な境界線がありません。
• ヘッダーの告知／アクセントは一度だけ表示され、フッターには告知／アクセントがありません。
• フッターに上部の区切り線がなく、ヘッダーの文言も重複していません。
• アウトラインボタンを使わなくても、主要なアクションが視覚的に明確です。
• サーフェス、余白、文字のスタイルだけで階層が明確に保たれています。
• プロジェクトのアイコンには、出典を記録した実際のロゴまたはファビコンの代替が使われています。
• 境界線を取り除いた後も、フォーカスが視認できます。
• ライト／ダークモードのコントラストと、幅 320px でのリフローに問題がありません。

出典：https://github.com/dirnbauer/webconsulting-skills