HowAI 駆動開発
お問い合わせ
AIDD デザイン
「全画面分のデザイン作成」を原則廃止し、DESIGN.md を含む規範ドキュメント 4 点（Markdown ベースのデザインシステム定義）を中核に AI が参照可能なデザインシステムを構築します。UI コード自動生成におけるデザイン統一性と開発効率を高めます
デザインの統一感を担保したい UI/UX デザイナーから、AI で意図した UI を効率的に生成したい開発者まで、AI が参照できるデザインシステムの構築を支援し、UI 自動生成の品質と統一感の両立を実現します。
0%
へ（原則ゼロ化）
全画面分のデザイン作成を原則廃止
AI を活用した UI 自動生成プロセスへ転換し
開発工数を大幅削減
こんな課題、ありませんか？
AI が自動生成した UI に、統一感がなく意図しないデザインになってしまう
AI 駆動開発において、AI に UI の自動生成を任せきりにすると、ページごとにボタンの色が異なるなど、意図しないデザインになってしまう課題があります。
AI による高速化メリットが、Figma 依存のデザイン作成工程で相殺されてしまう
全画面分の Figma デザインを作成する従来プロセスはツール依存が強く、AI エージェントを跨いだ再利用も難しいのが実情です。AI による UI コード生成の高速化メリットを十分に享受できていません。
AI が参照できる、信頼性の高いデザインシステムが存在しない
AI によるコード生成のメリットを享受しつつ品質を担保するためには、AI が解釈・参照可能なデザインシステムと、新しい開発プロセスを確立することが不可欠です。
AI 参照可能なデザインシステムを確立し、
新しい AI 駆動開発プロセスを実現
UI/UX デザイナーと開発者に対し、AI が参照可能なデザインシステムと、
それを活用した開発プロセス（スキーム）を確立・提供します
1
規範ドキュメント 4 点で役割分離した AI 参照可能なデザインシステム
デザインシステムの規範を、視覚トークンのDESIGN.md（Google Stitch 発の design.md 仕様）、コンポーネント仕様の COMPONENTS.md、画面パターンの PATTERNS.md、AI の作業プロトコルの AGENTS.md に分け、変更履歴を CHANGELOG.md に記録します。Markdown ベースのため Claude Code / GitHub Copilot / Cursor / Gemini CLI など主要な AI コーディングエージェントから直接参照できます。
- DESIGN.md の YAML front matter にデザイントークン（色・フォント・余白・半径・影など）を機械可読に定義
- 各ファイル冒頭に「何の正本か」を明示し、同じ内容を複数ファイルに書かない。矛盾に出会う状況そのものを減らす
- Shadcn/UI をベース実装とし、DESIGN.md のトークンを CSS 変数 / Tailwind theme へ反映。COMPONENTS.md が使える部品と variant を定義
- 特定の Figma ファイルや MCP 実装に依存せず、Git でバージョン管理・差分レビューが可能
DESIGN.md
COMPONENTS.md
PATTERNS.md
AGENTS.md
+ CHANGELOG.md（変更履歴）／ Shadcn/UI ・ Storybook ・ Chromatic で実装と整合
PRD
→
UI Mock
PRD・UI モック・画面説明書の 3 点セットを成果物とし、全画面分のデザイン作成を原則廃止
2
原則デザイン不要の UI 自動生成プロセスへの転換
全画面分の Figma デザイン作成を原則廃止し、PRD（要件定義書）を起点に、AI コーディングエージェント（Claude Code / GitHub Copilot / Cursor 等）に PATTERNS.md → COMPONENTS.md → DESIGN.md の順で規範を読ませてから、クリックして動かせる UI モックと、その内容を文章にした画面説明書を生成させます。PRD・UI モック・画面説明書の 3 点をセットで成果物とし、同一の PR でまとめてレビューします。
- PRD には見た目の数値を書かない。色・サイズはデザインシステム側の管轄
- 規範に無い UI や要件に無い機能を AI が足そうとしたら停止して人に確認する
- UI モックは確認用の中間成果物。開発チームが実装する実画面が最終成果物
3
デザインと実装の整合性を担保するレビューフロー
規範ドキュメントと Storybook（Shadcn/UI ベースの実装カタログ）を突き合わせることで、デザイン定義と実装 UI コンポーネントの一貫性を確保します。規範を足すときは、それを機械的に確認する検証も同時に足します。
- DESIGN.md と Storybook カタログの整合性確認、design.md 公式 lint による検証
- Chromatic（GitHub 連携）によるビジュアルリグレッションテストと承認フロー
- デザイナー側でデフォルトでレビューを設定する運用
Visual Review
Chromatic + GitHub
Markdown + YAML によるツール・エージェント非依存性
デザインシステムが Markdown + YAML（規範ドキュメント 4 点）であるため、特定の Figma ファイルや MCP 実装に依存しません。Claude Code / GitHub Copilot / Cursor など AI エージェントを跨いで同じデザイン基盤を再利用でき、Git でのバージョン管理・差分レビューも容易です。
規範ドキュメントの構成
規範 4 点と変更履歴に役割を分離し、承認レベルを更新頻度に対応させます。
年に数回しか変わらないブランド定義は重い承認、日常的に増えるコンポーネント定義は軽い承認で回します
| ファイル | 何の正本か | 更新頻度 | 承認レベル |
|---|---|---|---|
DESIGN.md | 視覚トークン（色・タイポグラフィ・余白）とブランド原則 | 年 0〜3 回 | 重承認（ブランド責任者） |
COMPONENTS.md | 使用可能なコンポーネント・Props・variant | 頻繁 | 軽承認（テックリード） |
PATTERNS.md | 画面パターン（一覧・詳細・フォーム・ウィザード等） | 中 | 軽承認 |
AGENTS.md | AI の作業プロトコル（参照順序・停止条件・自己監査） | 稀 | 軽承認 |
CHANGELOG.md | 変更履歴・規範からの逸脱記録 | 継続的 | 自動記録 |
AI に読ませる順序
- 1PRD何を作るか。スコープの確定
- 2PATTERNS.mdどの画面パターンに当てはまるか
- 3COMPONENTS.md使えるコンポーネントと variant
- 4DESIGN.md視覚トークン
- 5UI 表記辞書略号・用語が出た場合
読む前にコードを書かせない。「だいたい分かる」は仮定であり、仮定のまま実装させないことを規範側で明文化します。
適用範囲について
この 4 点構成は、大規模開発案件で運用している現行スキームです。小規模案件でどこまで簡略化できるかは案件ごとに判断します。DESIGN.md 単体に統合する当初の構成は、既に稼働している案件や小規模で分離の必要がない案件向けの参考情報として残しています。
本サイト自身が同じ構成で公開中
gaipack のサイトは自らのデザインシステムを同じ規範 4 点＋変更履歴の構成で公開し、この構成で運用しています。実物のサンプルとしてご覧ください。
AIDD デザインを活用した開発プロセス
UI/UX 設計プロセスの再定義と確立を目指します
1
デザイントークンの
定義
デザインの基礎（色・フォント・余白・半径など）を DESIGN.md の YAML front matter にデザイントークンとして定義します。
2
コンポーネントと
画面パターンの整備
COMPONENTS.md に使えるコンポーネント・Props・variant を、PATTERNS.md に画面パターンを定義し、Shadcn/UI ベースの実装に CSS 変数 / Tailwind theme として反映します。
3
AI エージェントによる
UI 生成
AGENTS.md の参照順序と停止プロセスに従い、AI コーディングエージェント（Claude Code / GitHub Copilot / Cursor 等）に PRD から UI モック（React / Next.js）と画面説明書を生成させます。
4
AI 生成 UI の
レビュー・調整
PRD・UI モック・画面説明書の 3 点を同一の PR でレビューします。修正が必要な場合はまず規範側の不足・曖昧さを補正して CHANGELOG.md に記録し、規範だけで表現しきれない複雑な意匠のみ Figma 等の補助ツールで調整・再実装します。
コードがそのままデザインシステム
左に本サイトの DESIGN.md（規範 4 点のうち視覚の正本）の全文、右にスクロールと連動して切り替わる実 UI プレビューを表示します。読んでいる箇所のトークンが、そのまま右で形になります。
使い方
1
セクション一覧からタブを選択する、または左の DESIGN.md をスクロールします。
2
右に、その箇所のトークンを適用した実際の UI が表示されます。
セクションを選ぶ
定義（コード）DESIGN.md
---
# ─────────────────────────────────────────────────────────
# 0. METADATA
# ─────────────────────────────────────────────────────────
version: alpha
name: gaipack Design System
description: Visual identity specification for the gaipack (ジーエーアイパック) website, https://www.gaipack.ai/. Dark is the reference theme; the implementation stack is Next.js App Router + Tailwind CSS v4 + shadcn/ui. Values originate from the semantic tokens in app/globals.css.
# ─────────────────────────────────────────────────────────
# 1. COLOR TOKENS
# ─────────────────────────────────────────────────────────
# Naming:
# - no suffix : dark-theme value (the reference value — design against this)
# - suffix -light : light-theme value (derived from dark; applied with the `light:` variant)
# - brand-* : brand palette (Trinity, 3 colors × 3 shades; theme-independent)
# Implementation: CSS variables --surface / --content / --accent-cyan etc. in app/globals.css
colors:
# ── Accent (UI accents; primary = cyan is the action color) ──────────
primary: "#00E0FF" # accent-cyan: CTAs, link hover, heading gradients
secondary: "#00FFB2" # accent-green: end stop of the CTA gradient, supporting accent
tertiary: "#C77BFF" # accent-purple: navigation hover, supporting accent
accent-blue: "#518CF9" # brand blue for diagrams, charts, LP accents
accent-amber: "#FF9900" # the only warm color — cautions/warnings (no Tailwind utility; use var(--accent-amber))
# ── Surface (dark reference) ─────────────────────────────────────────
surface: "#0B1218" # Deep Space: page base
surface-raised: "#0F1B25" # Midnight Navy: sections and cards
surface-deep: "#081D2E" # gradient endpoint / sunken areas
surface-card: "#121212" # Dark Charcoal: listing cards
surface-panel: "#121A22" # service-page section panels (--svc-panel)
surface-steel: "#101720" # Steel Navy: problem cards, related-service cards, closing CTA box (legacy #0F161D / #0E1720 belong here)
surface-black: "#000000" # Pure Black: case-study pages, gradient anchors
# ── Content (text) ────────────────────────────────────────────────────
content: "#FFFFFF" # primary headings, high-emphasis text
content-body: "#B9C2CC" # Silver Mist: body text on service and case-study pages
content-muted: "#9CA3AF" # Cool Gray: secondary text
content-subtle: "#6B7885" # Steel Gray: tertiary text, separators
content-label: "#8FA1B5" # Blue Gray: labels on service pages (--svc-muted)
ink: "#000000" # text on bright CTA surfaces
# ── Border ────────────────────────────────────────────────────────────
border-subtle: "#22313D" # Steel Edge: card and section boundaries
border-strong: "#2E3C49" # Bright Steel: emphasized borders (step circles etc.)
# ── Light theme (derived from the dark values) ──────────────────────
primary-light: "#009FAC"
secondary-light: "#00857A"
tertiary-light: "#9A2FB0"
accent-blue-light: "#0E3F99"
accent-amber-light: "#B26A00"
surface-light: "#FFFFFF"
surface-raised-light: "#EDF1F6"
surface-deep-light: "#E3E9F0"
surface-card-light: "#FFFFFF"
surface-panel-light: "#F4F7FA"
surface-steel-light: "#E3E9F0" # cards on surface-steel switch to surface-deep-light
surface-black-light: "#FFFFFF"
content-light: "#0B1218"
content-muted-light: "#51606B"
content-subtle-light: "#6B7885"
border-subtle-light: "#D9D9E0"
# ── Brand palette (Trinity; fixed across themes) ─────────────────────
brand-blue-deep: "#0E3F99" # Deep Sapphire
brand-blue: "#518CF9" # Vivid Azure
brand-blue-light: "#A8C6FF" # Soft Sky
brand-green-deep: "#00555C" # Ocean Teal
brand-green: "#009FAC" # Vivid Cyan
brand-green-light: "#56E1ED" # Electric Aqua
brand-purple-deep: "#770884" # Deep Magenta
brand-purple: "#C64AD4" # Vivid Orchid
brand-purple-light: "#F59FFF" # Soft Fuchsia
# ─────────────────────────────────────────────────────────
# 2. TYPOGRAPHY
# ─────────────────────────────────────────────────────────
# System font stack only (no web fonts are loaded).
# fontSize maps to the Tailwind default scale (text-6xl = 60px, etc.).
typography:
display:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 96px
fontWeight: 700
lineHeight: 1.0
letterSpacing: -0.025em
h1:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 60px
fontWeight: 600
lineHeight: 1.15
letterSpacing: -0.025em
h2-major:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 48px
fontWeight: 600
lineHeight: 1.15
h2-minor:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 30px
fontWeight: 600
lineHeight: 1.2
h3-large:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 24px
fontWeight: 600
lineHeight: 1.2
h3:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 20px
fontWeight: 600
lineHeight: 1.4
h3-small:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 18px
fontWeight: 600
lineHeight: 1.25
lead:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 20px
fontWeight: 400
lineHeight: 1.75
body-lg:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 18px
fontWeight: 400
lineHeight: 1.625
body:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 16px
fontWeight: 400
lineHeight: 1.625
body-sm:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
caption:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 13px
fontWeight: 400
lineHeight: 1.4
micro:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
micro-sm:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 11px
fontWeight: 400
lineHeight: 1.3
nano:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 10px
fontWeight: 400
lineHeight: 1.2
label-caps:
fontFamily: ui-sans-serif, system-ui, sans-serif
fontSize: 12px
fontWeight: 500
lineHeight: 1
letterSpacing: 0.1em
code:
fontFamily: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
fontSize: 13px
fontWeight: 400
lineHeight: 1.6
# ─────────────────────────────────────────────────────────
# 3. SPACING & LAYOUT
# ─────────────────────────────────────────────────────────
# 4px base (Tailwind default). gap / padding / margin use only these steps.
spacing:
xs: 6px # gap-1.5: icon + label
sm: 8px # gap-2: tag groups, compact lists
md: 12px # gap-3: related content clusters
base: 16px # gap-4: grid gaps, minimum card padding
lg: 24px # gap-6: between components, card padding
xl: 32px # gap-8: intra-section blocks, card grids
2xl: 48px # gap-12: hero grids, large blocks
3xl: 64px # gap-16: between major sections
section-y: 128px # py-32: vertical padding of major sections
section-y-compact: 96px # py-24: dense sections (process steps, closing CTA)
page-x: 16px # px-4: minimum horizontal page padding
container: 1280px # max-w-7xl: page shell, header, footer
container-narrow: 1152px # max-w-6xl: card grids
container-prose: 768px # max-w-3xl: lead paragraphs, article bodies
header-h: 80px # header height at the top of the page (includes the 4px line)
header-h-scrolled: 72px # header height once scrolled
brand-line: 4px # tri-color line at the bottom edge of the header
cta-h: 56px # CTA large
cta-h-compact: 44px # CTA compact (minimum tap target)
# ─────────────────────────────────────────────────────────
# 4. ROUNDED
# ─────────────────────────────────────────────────────────
rounded:
sm: 4px # small elements (code spans, small tags)
md: 6px # shadcn default (inside Badge / Button)
lg: 8px # CTAs, inputs, small cards
xl: 12px # cards, panels, metric cards (standard)
2xl: 16px # case-study cards, closing CTA box
full: 9999px # pill tags, outline buttons, step circles
# ─────────────────────────────────────────────────────────
# 5. COMPONENTS (machine-readable token bundles)
# ─────────────────────────────────────────────────────────
# Bundles the visual values of key UI as token references. Props, imports and
# code examples live in COMPONENTS.md. `borderColor` is a deliberate extension
# not yet recognized by the Google alpha spec (see §11).
components:
# ── CTA (shared/components/common/CTA.tsx) ──
cta-primary:
backgroundColor: "{colors.primary}" # implemented as a horizontal primary → secondary gradient
textColor: "{colors.ink}"
typography: "{typography.body}"
rounded: "{rounded.lg}"
height: "{spacing.cta-h}"
padding: "0px 24px"
cta-primary-compact:
backgroundColor: "{colors.primary}"
textColor: "{colors.ink}"
typography: "{typography.body-sm}"
rounded: "{rounded.lg}"
height: "{spacing.cta-h-compact}"
padding: "0px 20px"
cta-secondary:
backgroundColor: "transparent"
textColor: "{colors.content}"
borderColor: "{colors.primary}"
typography: "{typography.body}"
rounded: "{rounded.lg}"
height: "{spacing.cta-h}"
padding: "0px 24px"
cta-tertiary:
backgroundColor: "transparent"
textColor: "{colors.content}"
typography: "{typography.body}"
# ── Card ──
card-service:
backgroundColor: "{colors.surface-raised}"
textColor: "{colors.content}"
borderColor: "{colors.border-subtle}"
rounded: "{rounded.xl}"
padding: "{spacing.xl}"
card-service-hover:
borderColor: "{colors.primary}"
card-article:
backgroundColor: "{colors.surface-card}"
textColor: "{colors.content}"
borderColor: "{colors.border-subtle}"
rounded: "{rounded.2xl}"
card-metric:
backgroundColor: "{colors.surface-raised}"
textColor: "{colors.content}"
borderColor: "{colors.border-subtle}"
typography: "{typography.display}"
rounded: "{rounded.xl}"
padding: "{spacing.2xl}"
card-problem:
backgroundColor: "{colors.surface-steel}"
textColor: "{colors.content}"
borderColor: "{colors.border-subtle}"
rounded: "{rounded.xl}"
padding: "{spacing.xl}"
card-related-service:
backgroundColor: "{colors.surface-steel}"
textColor: "{colors.content}"
borderColor: "{colors.border-subtle}"
rounded: "{rounded.xl}"
padding: "{spacing.xl}"
card-listing:
backgroundColor: "{colors.surface-black}" # implemented as black at 40% with backdrop blur
textColor: "{colors.content}"
borderColor: "{colors.border-subtle}"
rounded: "{rounded.xl}"
padding: "{spacing.lg}"
box-closing-cta:
backgroundColor: "{colors.surface-steel}"
textColor: "{colors.content}"
borderColor: "{colors.border-subtle}"
rounded: "{rounded.2xl}"
padding: "{spacing.2xl}"
# ── Navigation / Footer ──
nav-bar:
backgroundColor: "{colors.surface}"
textColor: "{colors.content}"
height: "{spacing.header-h}"
nav-link-hover:
textColor: "{colors.tertiary}"
footer:
backgroundColor: "{colors.surface}"
textColor: "{colors.content-muted}"
borderColor: "{colors.border-subtle}"
footer-link-hover:
textColor: "{colors.primary}"
# ── Tag / Badge ──
tag:
backgroundColor: "#00E0FF1A" # primary at 10%
textColor: "{colors.primary}"
borderColor: "{colors.primary}"
typography: "{typography.micro}"
rounded: "{rounded.full}"
padding: "4px 12px"
badge-category:
backgroundColor: "#00E0FF26" # category accent at 15% (How = cyan)
textColor: "{colors.primary}"
borderColor: "{colors.primary}" # at 30%
typography: "{typography.nano}"
rounded: "{rounded.full}"
padding: "2px 6px"
# ── Text roles ──
heading-section:
textColor: "{colors.content}"
typography: "{typography.h2-major}"
heading-card:
textColor: "{colors.content}"
typography: "{typography.h3}"
text-body:
textColor: "{colors.content-body}"
typography: "{typography.body}"
text-label:
textColor: "{colors.content-label}"
typography: "{typography.label-caps}"
text-meta:
textColor: "{colors.content-muted}"
typography: "{typography.caption}"
# ── Accordion (FAQ) ──
accordion-item:
backgroundColor: "{colors.surface}"
textColor: "{colors.content}"
borderColor: "{colors.border-subtle}"
typography: "{typography.body}"
padding: "{spacing.base}"
# ── Step indicator (process steps) ──
step-circle:
backgroundColor: "{colors.surface}"
textColor: "{colors.content}"
borderColor: "{colors.border-strong}"
typography: "{typography.h3-large}"
rounded: "{rounded.full}"
size: 64px
number-badge:
backgroundColor: "#00E0FF1A" # primary at 10%
textColor: "{colors.primary}"
borderColor: "{colors.primary}" # at 30%
typography: "{typography.h3-large}"
rounded: "{rounded.lg}"
size: 40px
# ── Text roles (supporting) ──
text-lead:
textColor: "{colors.content-body}"
typography: "{typography.lead}"
text-body-lg:
textColor: "{colors.content-body}"
typography: "{typography.body-lg}"
text-micro-label:
textColor: "{colors.content-muted}"
typography: "{typography.micro-sm}"
---
**Source of Truth**
- **This file is the source of truth for:**
- YAML token values (colors, typography, spacing, radii, component structure)
- Visual principles and their rationale, following the Google DESIGN.md standard sections
- Usage mappings for visual rules (condition → token)
- Universal visual prohibitions (only the judgments that machines cannot detect)
- Handling rules for brand assets (logos, group brands)
- **Refer elsewhere for:**
- Implementation details (props, imports, code examples, technology-specific prohibitions) → `COMPONENTS.md`
- Page and section patterns (home, service detail, listings, articles, LPs, …) → `PATTERNS.md`
- The AI working protocol (reading order, stop process, self-audit) → `AGENTS.md`
- Change history and recorded deviations → `CHANGELOG.md`
**Governance:** Changes to this file require brand-owner approval (§11). Frequent updates to implementation APIs, code examples, and page templates are completed in `COMPONENTS.md` / `PATTERNS.md`.
**Publication:** This file is published at https://www.gaipack.ai/DESIGN.md, and the "AIDD デザイン" service page renders it live. Edits are visible on the public site.
Brand Name: gaipack (Generative AI Pack / Japanese: ジーエーアイパック)
Tagline: Generative AI Solutions
Catchphrase (日本語): AIで、ビジネスを加速させる。
URL: https://www.gaipack.ai/
Brand Owner: KDDI iret, Inc. (KDDIアイレット株式会社)
Last Updated: 2026-09-03
---
The gaipack UI expresses a single idea: light carving a path through deep darkness. Dark is the signature look. On a near-black-to-navy canvas, gradient lines in the three symbol colors (blue, green, purple) run across the surface — sometimes as sharp straight rays, sometimes as sweeping concentric arcs. The light theme re-casts the same structure into a flat, white-based enterprise surface: glows, shadows, and grid textures are suppressed, and content is separated by borders and tonal shifts instead.
| Aspect | Direction |
| --- | --- |
| Audience | A marketing site for enterprise decision makers, IT departments, and developers |
| Impression | Forward-looking yet sincere. Technical certainty expressed through light rather than flash |
| Theming | Both themes are supported. Dark is the reference theme and the default for new visitors. A toggle in the header switches themes and the choice is persisted |
| Density | Spacious between sections (64px+), dense inside card grids |
| The three colors | Blue = Technology, Green = Trust, Purple = Innovation. The three are equal peers; when expressing the Trinity concept they always appear together |
### Absolute principles
1. Every visual value comes from a token defined in the YAML front matter
- Colors are referenced only through the semantic tokens in
app/globals.css (bg-surface / text-content / text-accent-cyan …) - When a new value is needed, confirm with a human, then update the YAML and
globals.css together2. DESIGN.md is the source of truth for visuals, not for implementation
- Props / imports / JSX examples / technology-specific prohibitions →
COMPONENTS.md - Page structure for home, service detail, listings, articles, and LPs →
PATTERNS.md - Stop process / fail-loud reporting / self-audit →
AGENTS.md3. Dark is authoritative; light is an override
- Every token is designed against its dark value; the light value is derived from it
- Implementations write the dark look in base classes and override only for light with the
light: variant. A dark-only page is an incomplete page4. Token naming follows the site's semantic names
- Use
surface / content / accent-* / border-subtle. The shadcn defaults (background / foreground) stay inside shadcn primitives onlyAI inference rules (defaults when unspecified, never "pick the more prominent one", no rules of thumb) live in `AGENTS.md §1.1`.
---
### 2.1 Token Reference
See the
colors: section of the YAML front matter. Tokens without a suffix are dark (reference) values, -light tokens are light values, and brand-* tokens are the theme-independent brand palette.### 2.2 The Trinity palette (the three colors behind the brand)
Each color corresponds to one strand of iret's DNA and spans a three-shade band from deep to light.
| Color | Origin | Value | Deep | Mid | Light |
| --- | --- | --- | --- | --- | --- |
| Blue | An homage to iret's corporate color, "iret Blue" | Technology (System Development) |
brand-blue-deep #0E3F99 | brand-blue #518CF9 | brand-blue-light #A8C6FF || Green | An homage to cloudpack's "Emerald Green" | Trust (Cloud Integration) |
brand-green-deep #00555C | brand-green #009FAC | brand-green-light #56E1ED || Purple | The mystery and promise of an AI-driven future | Innovation (AI Intelligence) |
brand-purple-deep #770884 | brand-purple #C64AD4 | brand-purple-light #F59FFF |UI accents are referenced through the semantic tokens derived from this palette per theme:
primary (cyan), secondary (green), tertiary (purple), and accent-blue. In dark they are neon (#00E0FF …); in light they deepen so they do not wash out on white (#009FAC …).### 2.3 Usage mapping (exhaustive)
A complete condition → token table. "Pick an appropriate color" is prohibited. If a condition is not listed, stop and confirm (
AGENTS.md §3).| Condition | Dark | Light | Implementation |
| --- | --- | --- | --- |
| Page base background |
{colors.surface} | {colors.surface-light} | bg-surface || Section / card surface |
{colors.surface-raised} | {colors.surface-raised-light} | bg-surface-raised || Gradient endpoint / sunken area |
{colors.surface-deep} | {colors.surface-deep-light} | bg-surface-deep || Listing card surface |
{colors.surface-card} | {colors.surface-card-light} | bg-surface-card || Service-page section panel |
{colors.surface-panel} | {colors.surface-panel-light} | var(--svc-panel) || Problem / related-service cards, closing CTA box |
{colors.surface-steel} | {colors.surface-steel-light} | existing: bg-[#101720] light:bg-surface-deep; new work: a bg-surface-steel utility once added to globals.css || Case-study page backgrounds, listing panels (black at 40%) |
{colors.surface-black} | {colors.surface-black-light} | bg-black light:bg-surface / bg-black/40 light:bg-surface-card || Primary headings, high-emphasis text |
{colors.content} | {colors.content-light} | text-content || Body text on service / case-study pages |
{colors.content-body} | {colors.content-muted-light} | existing: text-[#B9C2CC] light:text-content-muted; new work: text-content-muted || Secondary text, meta |
{colors.content-muted} | {colors.content-muted-light} | text-content-muted || Tertiary text, separators |
{colors.content-subtle} | {colors.content-subtle-light} | text-content-subtle || English labels (uppercase, wide tracking) |
{colors.content-label} | {colors.content-muted-light} | var(--svc-muted) || Text on a bright CTA surface |
{colors.ink} | {colors.content} (white) | text-white dark:text-black || Primary accent (CTA, link hover, heading gradient) |
{colors.primary} | {colors.primary-light} | text-accent-cyan / bg-accent-cyan || Supporting accent (CTA gradient end) |
{colors.secondary} | {colors.secondary-light} | accent-green || Navigation hover |
{colors.tertiary} | {colors.tertiary-light} | hover:text-accent-purple || Blue in diagrams and charts |
{colors.accent-blue} | {colors.accent-blue-light} | accent-blue || Caution / warning |
{colors.accent-amber} | {colors.accent-amber-light} | var(--accent-amber) || Card and section boundaries |
{colors.border-subtle} | {colors.border-subtle-light} | border-border-subtle (often at 50–70%) || Emphasized borders (step circles …) |
{colors.border-strong} | {colors.border-subtle-light} | border-[#2E3C49]/70 light:border-border-subtle/70 || Interactive borders and hover states | accent at 20–45% | same |
border-accent-cyan/30 || Card hover fill | accent at 5–10% | same |
bg-accent-cyan/10 |### 2.4 Gradient definitions
Gradients cannot be expressed in the YAML, so this section is their source of truth. Implementations reference the constants in
lib/brand.ts.| Name | Definition | Usage |
| --- | --- | --- |
| Tri-color brand line |
linear-gradient(90deg, #0E3F99 0%, #518CF9 20%, #009FAC 40%, #56E1ED 60%, #C64AD4 80%, #770884 100%) | The 4px line at the bottom of the header; the slide progress bar || Heading gradient | white →
primary → white with bg-clip-text | H1 and major H2 || CTA gradient |
primary → secondary, horizontal | Primary CTA surface || Deep Space Field |
linear-gradient(to right bottom, #0B1218 0%, #121A22 50%, #0B1218 100%) | Full-page background || Void Corridor |
linear-gradient(#000000, #081D2E, #000000) | Vertical transition between sections || Dark Surface |
linear-gradient(to right bottom, #1A1A1A 0%, #0F0F0F 100%) | Elevated surfaces such as case-study cards || Grid overlay |
linear-gradient(<accent> 1px, transparent 1px), linear-gradient(90deg, <accent> 1px, transparent 1px) at 9–10% opacity, 48–64px cells | Hero and section background texture || Radial glow |
bg-gradient-radial with an accent color at low opacity | Ambient light blobs (with blur) |Lines composed from the three symbol-color bands (deep → mid → light) are the core brand motif (§7.7).
### 2.5 Opacity scale (accent-color layering)
| Opacity | Usage |
| --- | --- |
| 5% | Faintest background tint (card hover fill) |
| 10% | Subtle background fill, soft glow |
| 12% | Slightly lifted background tint |
| 20% | Medium background fill, border emphasis |
| 30% | Prominent border, medium glow |
| 40–45% | Strong border, emphasis glow |
| 50% | Strong glow, spotlight |
| 80% | Near-solid glow (focal points only) |
### 2.6 Selection flow (deterministic)
```
START
├── Q1: Does the value change with the theme?
│ └── YES → reference a semantic token (surface / content / accent-*). Never write raw hex
├── Q2: Is this a diagram or logo context that expresses the Trinity?
│ └── YES → use all three brand-* colors together. Never let one dominate
├── Q3: Is this the primary action (CTA, link)?
│ └── YES → primary (cyan). One primary action per screen
├── Q4: Is this a caution or warning?
│ └── YES → accent-amber. Text, icons, thin borders only — never a fill
└── Q5: None of the above
└── [STOP] confirm with the brand owner (not automatically decidable)
END
```
### 2.7 Universal prohibitions
→ See
§8 Do's and Don'ts (all color-related prohibitions are consolidated there).### 2.8 Legacy raw values still in the codebase
Older sections still contain raw hex. The table maps each to its token so that new work and opportunistic clean-ups converge on the same value. Do not add new occurrences.
| Raw value in code | Token | Note |
| --- | --- | --- |
|
#B9C2CC | content-body | Body text on service and case-study pages (the most frequent legacy value) ||
#8FA1B5 | content-label | Muted labels on service pages ||
#101720 / #0F161D / #0E1720 | surface-steel | Problem cards, related-service cards, closing CTA box ||
#1A1A1A → #0F0F0F | Dark Surface gradient (§2.4) | Case-study and column cards ||
#0A0A0A | surface-black (gradient midpoint) | Case-study section gradients, older listing backgrounds ||
#2E3C49 | border-strong | Step circles, emphasized borders ||
#2C2C2C / #2E2E2E / #2A2A2A | border-subtle | Dividers in older sections (recruit, case studies) ||
#22313D | border-subtle | Written raw instead of the utility ||
#00E0FF / #00FFB2 | primary / secondary | Written raw inside rgba() glows and inline gradients ||
#B8C4CC / #888888 / #AAAAAA | content-muted | Legacy grays; the live preview on the AIDD デザイン page uses them on a fixed dark canvas ||
#ff4444 / #FF7B7B / #FFC24B / #A500FF | (no token yet) | Danger / warning / special accents in LPs and demos — a token decision is pending (CHANGELOG.md) |### 2.9 Why (why nothing else works)
- Why dark is the reference: The brand's world — light carving through darkness — only exists on a dark surface. Designing light first loses the rationale behind glows and luminous effects, so every design starts dark and is then translated to light.
- Why light is "flat": Neon glows blow out on white and shadows look like dirt. To align with the iret / cloudpack enterprise surfaces, light separates content with borders and tonal steps only, and the
.light scope disables box-shadow and drop-shadow globally in CSS.- Why the action color is cyan only: Letting all three Trinity colors compete in the UI leaves the user unsure what to do next. Brand expression uses three colors; action guidance uses one (cyan). Separating the two roles lets both coexist.
- Why `accent-amber` is the only warm color: In a palette unified around cool tones, a warm color draws strong attention. Reserving it for cautions keeps meaningless warm colors from creeping in.
- Why the legacy `text-[#B9C2CC] light:text-content-muted` is tolerated: It is a transitional notation used heavily on service and case-study pages; a mechanical replacement would bloat diffs. New work uses token classes; existing occurrences are normalized opportunistically.
---
### 3.1 Token Reference
See the
typography: section of the YAML front matter. Only the system font stack is used; no web fonts are loaded. English labels ("VALUE PROPOSITION" …) are uppercase with wide tracking, while UI copy and navigation are Japanese.### 3.2 Usage mapping (exhaustive)
| Usage | Token | Value | Tailwind |
| --- | --- | --- | --- |
| Hero statistics (0%, 50% …) |
{typography.display} | 96px / 700 | text-7xl md:text-8xl font-bold || Page title (H1, gradient text) |
{typography.h1} | 60px / 600 | text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-semibold || Section heading (major H2) |
{typography.h2-major} | 48px / 600 | text-4xl md:text-5xl font-semibold || Subsection heading (minor H2: numbered solutions, case-study sections) |
{typography.h2-minor} | 30px / 600 | text-3xl font-semibold (older sections: font-bold) || Wide-card titles, step numbers, supporting-card headings |
{typography.h3-large} | 24px / 600 | text-2xl font-semibold (number badges: font-bold) || Card and feature titles (H3) |
{typography.h3} | 20px / 600 | text-xl font-semibold || Step titles, metric labels, compact headings |
{typography.h3-small} | 18px / 600 | text-lg font-semibold (older sections: font-bold) || Section lead paragraphs |
{typography.lead} | 20px / 400 | text-xl (max-w-3xl mx-auto) || Solution-block paragraphs |
{typography.body-lg} | 18px / 400 | text-lg leading-relaxed || Body text, descriptions |
{typography.body} | 16px / 400 | text-base leading-relaxed || Supporting text, meta |
{typography.body-sm} | 14px / 400 | text-sm || Dates, understated labels |
{typography.caption} | 13px / 400 | text-[13px] || Tags, badges, annotations |
{typography.micro} | 12px / 400 | text-xs || Small technical labels (live preview, brand lockup) |
{typography.micro-sm} | 11px / 400 | text-[11px] || Disclaimers, category badges, smallest labels |
{typography.nano} | 10px / 400 | text-[10px] || English section labels |
{typography.label-caps} | 12px / 500 / 0.05–0.1em | text-xs tracking-wider uppercase (tracking-widest for the widest) || Code, file names |
{typography.code} | 13px / 400 mono | font-mono text-[13px] |### 3.3 Size selection flow (deterministic)
```
START
├── Q1: A symbolic hero number? → display
├── Q2: The page's top-level heading (h1)? → h1 (heading gradient required)
├── Q3: A section heading (h2)?
│ ├── title of the whole section → h2-major
│ └── sub-heading inside the section → h2-minor
├── Q4: A card or feature title (h3)? → h3
├── Q5: A metric label or compact heading? → h3-small
├── Q6: Body text? → body (supporting text: body-sm)
├── Q7: A date, tag, or annotation? → caption / micro
├── Q8: Disclaimer or legal text? → nano
└── Q9: None of the above → [STOP] confirm
END
```
### 3.4 Font weights
| Weight | Class | Usage |
| --- | --- | --- |
| 400 |
font-normal | Body, supporting text, labels || 500 |
font-medium | Navigation, "read more" links, category labels || 600 |
font-semibold | All headings (H1, H2, H3 levels), CTA labels, category badges || 700 |
font-bold | Hero numbers, number badges, footer column titles, emphasized labels |Headings default to 600. Where older sections use
font-bold for the same level, leave them until the section is next touched; do not introduce new 700 headings.### 3.5 Special effects
- Heading gradient:
bg-gradient-to-r from-content via-accent-cyan to-content bg-clip-text text-transparent, applied to H1 and major H2- Tracking: Large headings are tight (
-0.025em). English labels and badges are wide — tracking-wider (0.05em) as the default, tracking-widest (0.1em) for the smallest all-caps labels- Line height: H1 and major H2 set
lineHeight: 1.15 inline (Tailwind's leading-* scale cannot express 1.15; this is the one tolerated inline style for that purpose)### 3.6 Universal prohibitions
→ See
§8 Do's and Don'ts.### 3.7 Why
- Why system fonts only: Loading web fonts degrades LCP. The brand's personality comes from color, light, and gradient text rather than typefaces.
- Why 16px body text: A Japanese marketing site asks readers for long-form reading; 14px is too small. Only supporting and meta text drops to 14px or below.
- Why English labels are uppercase with wide tracking: Inside a Japanese UI, English labels are decorative headings. Their letterforms keep them from blending into body copy.
---
### 4.1 Token Reference
See the
spacing: section of the YAML front matter: a 4px base (Tailwind default) with steps from xs (6px) to 3xl (64px), plus named tokens for container widths and section padding.### 4.2 Spacing usage mapping (exhaustive)
| Usage | Token | Value | Tailwind |
| --- | --- | --- | --- |
| Icon + label |
{spacing.xs} | 6px | gap-1.5 || Tag groups, compact lists |
{spacing.sm} | 8px | gap-2 || Related content clusters |
{spacing.md} | 12px | gap-3 || Grid gaps, minimum card padding |
{spacing.base} | 16px | gap-4 / p-4 || Between components, card padding |
{spacing.lg} | 24px | gap-6 / p-6 || Intra-section blocks, card grids |
{spacing.xl} | 32px | gap-8 / p-8 || Hero grids, large blocks |
{spacing.2xl} | 48px | gap-12 || Between major sections |
{spacing.3xl} | 64px | gap-16 || Vertical padding of major sections |
{spacing.section-y} | 128px | py-32 || Vertical padding of dense sections |
{spacing.section-y-compact} | 96px | py-24 || Minimum horizontal page padding |
{spacing.page-x} | 16px | px-4 |### 4.3 Containers and grids
| Configuration | Width | Usage |
| --- | --- | --- |
| Page shell, header, footer |
{spacing.container} 1280px | container mx-auto max-w-7xl || Card grids |
{spacing.container-narrow} 1152px | max-w-6xl || Lead paragraphs, article bodies |
{spacing.container-prose} 768px | max-w-3xl (closing-CTA copy uses max-w-2xl) || 2-column hero | ~616px × 2, gap 48px | Hero, case-study highlights |
| 2-column content | ~560px × 2, gap 32px | Problem / solution, feature comparison |
| 3-column cards | ~405px × 3, gap 32px | Problem cards, news, blog |
| 4-column grid | ~308px × 4, gap 16–32px | Process steps, service cards |
Containers are centered (
mx-auto); horizontal padding scales with the viewport.### 4.4 Breakpoints
Tailwind defaults are used; no custom breakpoints are defined.
| Prefix | Width | Main changes |
| --- | --- | --- |
| (none) | up to 639px | Single column. The hero service grid becomes two marquee rows |
|
sm: | 640px+ | Headings step up one size ||
md: | 768px+ | Two columns. The navigation brand lockup appears ||
lg: | 1024px+ | The intended 2–4 column grids. The hero visual moves to the right column |Grids collapse 4 → 2 → 1 columns progressively. Display and H1 sizes scale down proportionally on small screens.
### 4.5 Spacing selection flow (deterministic)
```
START
├── Q1: Between small elements inside one component? → xs / sm
├── Q2: Between related components? → md / base
├── Q3: Padding inside a card? → lg (xl for large cards)
├── Q4: Between blocks inside a section? → xl / 2xl
├── Q5: Between sections? → section-y (section-y-compact when dense)
└── Q6: None of the above → [STOP] confirm
END
```
### 4.6 Universal prohibitions
→ See
§8 Do's and Don'ts.### 4.7 Why
- Why 64px+ between sections: Boundaries are hard to see on a dark surface; whitespace alone signals where a section ends. Tighter spacing reads as one giant panel.
- Why card grids are dense: Twenty services are listed side by side in many places. Wider gaps push comparison targets off screen. Contrasting dense grids with spacious sections creates rhythm.
---
### 5.1 Principle
Depth is conveyed through outward-radiating glows in accent colors rather than traditional drop shadows. Only resting cards use the neutral
--shadow-card token. In the light theme all of these are stripped automatically by CSS (§2.8 "Why light is flat").### 5.2 Glow levels (exhaustive)
| Level | Name | Opacity / Blur | Usage |
| --- | --- | --- | --- |
| 0 | Flat | none | Default resting state |
| 1 | Whisper | 8% /
0 0 30px | Ambient background light || 2 | Soft | 10% /
0 0 20px | Card hover || 3 | Medium | 16% /
0 4px 16px | CTA buttons, active cards || 4 | Focused | 30% /
0 0 15–20px | Emphasized elements, badges || 5 | Intense | 50% /
0 0 40px | Hero sections, spotlights || 6 | Beacon | 80% /
0 0 10px | Focus states, maximum emphasis |### 5.3 Neutral shadow tokens
| Token | Dark | Light | Usage |
| --- | --- | --- | --- |
|
--shadow-card | 0 3px 14px rgba(0,0,0,0.16) | none | Resting cards (the workhorse) ||
--tile-shadow | drop-shadow(0 4px 20px rgba(0,0,0,0.6)) | none | Tile-shaped elements |### 5.4 Atmospheric blur
| Class | Blur | Usage |
| --- | --- | --- |
|
blur-sm | 8px | Translucent bars, fine-grained effects ||
blur-2xl | 40px | Medium light orbs ||
blur-3xl | 64px | Large ambient light blobs ||
blur-[120px] | 120px | Massive background glow pools |### 5.5 Universal prohibitions
→ See
§8 Do's and Don'ts.### 5.6 Why
- Why glows instead of shadows: Black shadows are invisible on a dark surface. Using light as the "lift" signal aligns the world view with the affordance.
- Why light strips them globally: If each implementation had to add
light:shadow-none, one omission leaves a grey smudge on white. Disabling box-shadow / drop-shadow under .light in global CSS means forgetting cannot break the page.---
### 6.1 Token Reference
See the
rounded: section of the YAML front matter.### 6.2 Usage mapping (exhaustive)
| Usage | Token | Value | Tailwind |
| --- | --- | --- | --- |
| Code spans, small tags |
{rounded.sm} | 4px | rounded || Inside shadcn primitives (Badge, Button) |
{rounded.md} | 6px | rounded-md || CTAs, inputs, small cards |
{rounded.lg} | 8px | rounded-lg || Cards, panels, metric cards (standard) |
{rounded.xl} | 12px | rounded-xl || Case-study cards, closing CTA box |
{rounded.2xl} | 16px | rounded-2xl || Pill tags, outline buttons, step circles |
{rounded.full} | 9999px | rounded-full |### 6.3 Universal prohibitions
→ See
§8 Do's and Don'ts.### 6.4 Why
- Why cards are unified at 12px: Corner radius sets how "soft" the brand feels. When radii drift within a page, identical components stop reading as the same part.
- Why tags are pills: Fully rounded labels inside rectangular cards distinguish the information hierarchy (container vs. label) by shape alone.
---
This section is the
Components section of the Google DESIGN.md format and covers only the visual principles shared across components. Props, imports, JSX examples, technology-specific prohibitions, and the stop process for undefined UI are owned by COMPONENTS.md / AGENTS.md.### 7.1 Component Tokens
The YAML
components: section bundles the structural style values of key UI (CTAs, cards, navigation, tags, headings) as token references. Update this file only when adding a new visual token or changing how something looks; prop additions, code examples, and implementation notes that use existing tokens stay in COMPONENTS.md.### 7.2 Action Hierarchy (CTA)
| Meaning | CTA variant | Visual treatment |
| --- | --- | --- |
| The screen's primary action (お問い合わせ / サービスを見る) |
primary | Horizontal primary → secondary gradient surface, Medium glow; on hover the glow intensifies and a shine sweeps across. One per screen (the hero and the closing CTA count as separate screens) || Secondary action (詳細を見る / 一覧へ) |
secondary | Transparent surface with a 1px primary border; a 10% fill appears on hover || Text action |
tertiary | Underline only, for de-emphasized paths || White CTA (exceptions such as partner inquiries) | — | White surface with black text. Only where the brand owner has approved it |
Sizes are
large (56px tall, 280px minimum width) and compact (44px tall) — nothing else. Both satisfy the 44px minimum tap target. The implementation API is owned by COMPONENTS.md §1.1.### 7.3 Cards And Containers
| Kind | Surface | Border | Radius | Rest → Hover |
| --- | --- | --- | --- | --- |
| Service card |
surface-raised (or transparent) | border-subtle at 50–70% | xl | --shadow-card → border shifts to the accent, Soft glow || Problem card |
surface-steel (light: surface-steel-light) | border-subtle at 70% + a 1px accent line at 45% along the top edge | xl | Border brightens slightly || Related-service card |
surface-steel (light: surface-steel-light) | border-subtle at 70% + top accent line | xl | Border to accent at 40%, icon gains a glow || Case-study card | Dark Surface gradient (light:
surface-card) | 2px border-subtle (legacy #2C2C2C) | 2xl | Border turns accent, Intense glow, image scales 110% || Listing panel (news / blog) |
surface-black at 40% + backdrop-blur-sm (light: surface-card) | white at 10% (light: border-subtle) | xl | Static || Metric card |
surface-raised | border-subtle at 70% | xl | Outer glow 13% and inner radial 7.5%, fixed || Closing CTA box |
surface-steel (light: surface-steel-light) | border-subtle at 70% | 2xl | Static; 32px grid overlay and an 8% radial glow inside |A 1px accent line (45%) along the top edge of a card is the shared treatment for the "problems", "related services", and "tool independence" cards on service detail pages. Thumbnails are 16:9 with
object-cover.### 7.4 Navigation And Footer
- Header: A fixed header shared by every page (
z-50). Theme-aware translucent surface — bg-surface/80 + backdrop-blur(8px) at the top of the page, tightening to bg-surface/95 + backdrop-blur(12px) once scrolled. A 4px tri-color line (§2.4) along the bottom edge. Height is ≈80px at the top (py-4) and ≈72px when scrolled (py-3). The logo is left-aligned and theme-aware (white on dark, black on light), 144px wide (168px on md+). Links use Japanese labels in content at 80% (text-content/80); hover is tertiary (purple) over 300ms. The「その他」submenu is a surface at 95% panel with backdrop-blur-md, an accent border at 20%, lg radius, and a 0 8px 24px black shadow at 40%. The theme toggle and a compact「お問い合わせ」CTA sit at the right. The mobile panel opens below the header (top-[80px] / top-[72px] when scrolled) over a black/60 backdrop- Footer: A flat
surface with a 2% cyan grid underlay; the top border is the accent at 10%. Five columns (2 → 3 → 5). The provider statement is text only (no KDDI iret logo, §10.3). The cloudpack logo sits on a white plate- Follow Us: A standalone section directly above the footer. Social icons are line-style, monochrome
content; hover shifts to cyanComposition and implementation of the header and footer are owned by
COMPONENTS.md §2; their position in the page by PATTERNS.md "Shared layout".### 7.5 Tags And Badges
Two treatments exist:
| Kind | Treatment | Where |
| --- | --- | --- |
| Accent pill tag | Accent at 10% fill, 1px accent border, accent 12px text,
px-3 py-1, pill | Hero category tag on service pages, tool tags in typographic visuals, case tags on cards || Category badge (How / Base / What) | Category accent at 15% fill, accent border at 30%, accent 10px
font-semibold text, px-1.5 py-0.5, pill | Footer column titles, hero category tag, service hubs |The category accents are fixed: How = cyan (`primary`), Base = purple (`tertiary`), What = green (`secondary`). Never convey state or category by color alone — always pair with text. Feature chips inside service cards use the shadcn
Badge (secondary / outline, COMPONENTS.md §1.2).### 7.6 Iconography
Only
lucide-react line icons. Sizes by context: w-4 (16px, inline) / w-5 (20px, lists and checkmarks) / w-6 (24px, buttons and navigation) / w-8 (32px, card lead icons) / w-12 (48px, problem cards and empty states). Colors are an accent or content-muted. Social icons follow each platform's official mark, rendered monochrome. The usage → icon table is owned by COMPONENTS.md §3.### 7.7 Imagery
- Motif: Gradient lines in the three symbol colors abstractly express "carving open the future" — sometimes sharp, sometimes harmonious. Multiple compositions and variations are encouraged rather than one locked form
- Background: Lines glow against a dark canvas
- Photography: Real-world tech and business scenes composited onto dark surfaces. Thumbnails are 16:9,
object-cover, inside rounded cards- Decoration: Abstract gradient blobs, grid textures, and glows. No illustrative or explanatory graphics
- Applications: The same visual language extends to banners, apparel, stationery, and event materials
### 7.8 Out Of Scope
A UI name that does not appear in this section is never grounds to add a new component from DESIGN.md alone. Feasibility is decided in
COMPONENTS.md; stopping and approval follow AGENTS.md. Web slides (/slides) inherit these tokens but follow their own stage rules.---
This section is the **single consolidation point for brand-wide universal prohibitions**.
§2–§7 only reference this section and never repeat prohibitions (Source of Truth principle).
Component-specific prohibitions (e.g. building a CTA from a raw `<a>`) live in `COMPONENTS.md`.
### 8.1 Tokens and theming
- ❌ Raw hex in new work (
bg-[#0B1218] …) — use semantic tokens- ❌ Tailwind default colors (
bg-blue-500 / text-gray-300 …)- ❌ Dark-only implementations (no
light: overrides). Light support is mandatory- ❌ Building light first and deferring dark (dark is the reference)
- ❌ Double-defining tokens with
dark: (theme switching is a one-way light: override)- ❌ Theme-unaware pages outside the static LP
/lp/aidd-camp### 8.2 Color and gradients
- ❌ Expressing the brand with one Trinity color dominating the other two
- ❌ Two or more primary actions (CTAs) on one screen
- ❌
accent-amber as a surface fill- ❌ Recoloring logos or group-brand marks (§10)
- ❌ Conveying state or category by color alone (pair with text)
### 8.3 Typography
- ❌ Loading additional web fonts
- ❌ Font sizes below 10px
- ❌ Body text below 14px
- ❌ An H1 without the heading gradient
- ❌ English labels in lowercase or normal tracking
### 8.4 Layout and shape
- ❌ Arbitrary spacing outside the 4px base (
p-[15px] / gap-[18px] …)- ❌ Less than 64px between major sections
- ❌ Mixing radii within one component
- ❌ Containers wider than
max-w-7xl- ❌ Layouts that cause horizontal page scroll (tables and diagrams scroll inside their own container)
### 8.5 Depth and motion
- ❌ Black drop shadows as the main depth cue in dark (use glows)
- ❌ Glows, shadows, or grid textures left visible in light
- ❌ Hover transitions longer than 300ms (theatrical effects such as the shine may go up to 700ms)
- ❌ Decorative loops that do not stop under
prefers-reduced-motion: reduce- ❌ Meaningless animation (blinking body text, perpetual spinning)
### 8.6 Accessibility
- ❌ Icon-only interactive elements without
aria-label / sr-only- ❌ Removing focus visibility (
outline-none alone)- ❌ Tap targets smaller than 44px
- ❌ Links opening in a new tab without the
sr-only「（新しいタブで開く）」note- ❌ Contrast below WCAG AA (4.5:1 for body text)
### 8.7 Brand expression and copy
- ❌ Redrawing, approximating, or regenerating logos and icons (§10 "NO RECREATION")
- ❌ Writing the company name as「アイレット」alone (use「KDDIアイレット」)
- ❌ Numbers, results, or guarantees in the UI that are not in the source-of-truth service definitions
- ❌ Customer or project names without permission
---
### 9.1 Defaults
| Item | Value |
| --- | --- |
| Easing |
cubic-bezier(0.4, 0, 0.2, 1) || Default duration | 150ms |
### 9.2 Duration scale (exhaustive)
| Duration | Usage |
| --- | --- |
| 200ms | Quick color and border changes |
| 300ms | Hover states (including navigation links), background color, opacity, glow |
| 500ms | Section fade-ins |
| 700ms | Transforms, scroll-triggered reveals, the CTA shine |
### 9.3 Named animations (global)
| Animation | Definition | Usage |
| --- | --- | --- |
| Pulse |
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite | Breathing glow on luminous elements || Bounce |
bounce 1s infinite | Scroll indicator || Shimmer |
shimmer 1.6s infinite (translateX sweep) | Skeleton loading || Flow Dash |
flow-dash 1.4s linear infinite (stroke-dashoffset) | Animated SVG connector lines in diagrams || Marquee |
scroll-left / scroll-right, 25s linear infinite | Hero service grid on mobile (two counter-flowing rows) || Skeleton fade / pulse | Fade in after a 200ms delay, then pulse | Prevents skeleton flicker on ISR-cached navigations |
Entrance/exit utilities (
animate-in / animate-out), accordion, and caret-blink come from tw-animate-css. LP pages define their own scoped keyframe families (pf* / gp* / camp*).### 9.4 Rules
- Interactive elements transition their color properties together (
color, background-color, border-color, fill, stroke …)- Decorative loops (e.g. Flow Dash) are disabled under
prefers-reduced-motion: reduce- Hover scaling stays around
scale-105. Prefer border-color and glow changes over scaling whole cards---
This section is the single source of truth for every brand mark (gaipack logo, gaibot icon, group brands). All asset paths and usage rules live here — never rely on partial information elsewhere.
### ⚠️ CRITICAL — NO RECREATION. USE THE ASSET FILES.
**This rule applies to every logo and icon in this section, and it binds AI agents reading this file.**
- **NEVER** redraw, reinterpret, approximate, trace, or recreate any gaipack / gaibot mark — not from text descriptions in this document, not from memory, not from a thumbnail you have seen
- **NEVER** generate substitute artwork: no hand-written SVG paths, no CSS/HTML art, no emoji compositions, no AI-image-generation of the marks
- The **only** correct way to display a mark is to reference or download one of the official asset files listed below — via the local path (this repository: `public/images/…`, served as `/images/…`) or the public URL (`https://www.gaipack.ai/images/…`)
- If an asset file cannot be fetched or embedded, render the brand name as **plain text** (e.g. "gaipack", "gaibot") in the standard font stack — never a lookalike graphic
- The verbal descriptions below ("Trinity Loop", "hexagonal speech bubble") exist **only so you can recognize the correct asset**. They are not drawing instructions
### 10.1 gaipack logo
Design intent — Trinity Loop *(brand context for recognition only — NOT drawing instructions)*
Concept: "An evolution loop driven by iret's DNA." The logo mark consists of three interlocking elements forming a continuous loop, each representing one of iret's core DNA strands:
| DNA | Origin | Value |
| --- | --- | --- |
| System Development | iret's founding strength in software engineering | Technology |
| Cloud Integration | Infrastructure expertise cultivated through cloudpack | Trust |
| AI Intelligence | Generative AI innovation pioneered by gaipack | Innovation |
These three strands unite as a Trinity, cycling in a perpetual Loop to generate unstoppable momentum for business transformation.
Usage rules:
- Standard form: Trinity Loop mark + "gaipack" wordmark (™)
- Tagline: "Generative AI Solutions" placed above the logo is the default composition
- Color: Monochrome by default — white logo on dark backgrounds, black logo on light backgrounds. Never recolor (the "black" asset's actual fill is dark gray
#595959)- Placement: Consistently top-left in navigation and footer
Official assets:
| Asset | Local Path | Public URL |
| --- | --- | --- |
| Logo White — for dark backgrounds (default), PNG (827×219) |
/images/gaipack-logo-white.png | https://www.gaipack.ai/images/gaipack-logo-white.png || Logo White — for dark backgrounds (default), SVG |
/images/gaipack-logo-white.svg | https://www.gaipack.ai/images/gaipack-logo-white.svg || Logo Black — for light backgrounds, PNG (827×219) |
/images/gaipack-logo-black.png | https://www.gaipack.ai/images/gaipack-logo-black.png || Logo Black — for light backgrounds, SVG |
/images/gaipack-logo-black.svg | https://www.gaipack.ai/images/gaipack-logo-black.svg || Symbol mark only (Trinity Loop, black), SVG |
/images/gaipack_logo_symbolmark_black.svg | https://www.gaipack.ai/images/gaipack_logo_symbolmark_black.svg |Asset notes:
- All wordmark SVG/PNG files have transparent backgrounds. Exception: the symbol-mark SVG contains an opaque white 360×360 background rectangle — it is *not* transparent; do not place it directly on dark surfaces
- Byte-identical copies of both wordmark SVGs also exist at the site root (
/gaipack-logo-white.svg, /gaipack-logo-black.svg); they are referenced by OG-image generation and Media Kit downloads. Treat /images/… as the canonical paths for new work### 10.2 gaibot icon
gaibot is gaipack's AI Products brand — a multi-channel AI agent platform (Slack / Web / MCP). Its icon is a standalone badge mark: a hexagonal speech-bubble silhouette in a blue-to-green gradient with a white loop swirl at the center *(recognition aid only)*.
Official assets (transparent background):
| Asset | Local Path | Public URL |
| --- | --- | --- |
| gaibot icon, SVG |
/images/gaibot-icon.svg | https://www.gaipack.ai/images/gaibot-icon.svg || gaibot icon, PNG (1180×1307) |
/images/gaibot-icon.png | https://www.gaipack.ai/images/gaibot-icon.png |Intended applications:
- Slack app icon / bot avatar — use the PNG. Slack crops avatars to a square; the transparent margin handles this safely
- Slack custom emoji — downscale the PNG before registering (e.g. to 128px; Slack requires ≤ 128KB). Do not simplify or redraw the mark for small sizes
- Architecture diagrams — embed the SVG/PNG to represent the gaibot service/agent node. In diagram tools where external images are not allowed (e.g. DrawIO with built-in shapes only), represent gaibot as a labeled generic node ("gaibot") instead of imitating the icon
Rules:
- Use the icon standalone (no wordmark lockup is defined for gaibot)
- Keep the original aspect ratio; never stretch, recolor, add effects, or place on clashing backgrounds
- When gaipack and gaibot appear together (e.g. service overview diagrams), the gaipack logo represents the company/brand and the gaibot icon represents the product — do not swap them
### 10.3 Group brands (KDDIアイレット / cloudpack)
Marks owned by the provider (KDDIアイレット株式会社) and its sibling service (cloudpack). They are not gaipack assets, but the NO RECREATION rule applies in full — plus one more: never recolor them.
KDDI iret — text only. Do not place the KDDI iret logo on this site in any form. Reference the company by name:「KDDIアイレット株式会社」. The notation is always「KDDIアイレット」, never「アイレット」alone.
cloudpack — official asset only.
| Asset | Local Path | Upstream Source |
| --- | --- | --- |
| cloudpack logo, SVG (238×40, emerald
#039FAD + gray #888889) | /images/partners/cloudpack-logo.svg | https://cloudpack.jp/assets/common/logo-cloudpack-color.svg |- No white/black variant exists. The asset is single-color-scheme artwork on a transparent background and its gray wordmark is unreadable on
surface in dark. Place it on a white plate (bg-white rounded-lg px-4 py-3) instead of recoloring or inverting the file. The plate is intentional in both themes: in light it merges into the surrounding card; in dark it isolates the mark so the brand colors stay accurate- Keep the original aspect ratio; size by height (
h-6 w-auto) and always pass width/height from the viewBox so the ratio is fixed before load (no layout shift)-
alt is cloudpack. Every placement links to https://cloudpack.jp/ in a new tab (target="_blank" rel="noopener noreferrer") with an sr-only「（新しいタブで開く）」note- Never lock the mark up with the gaipack logo as if they were one brand, and never substitute one for the other
---
### 11.1 Change procedure
Changes to this file (DESIGN.md) require brand-owner approval.
| Change | Approval level | Example |
| --- | --- | --- |
| Changing an existing token value | Heavy (brand owner + design team) | The value of
primary, typography.body || Adding a new token | Heavy (brand owner) | A new semantic color |
| Changing the Trinity treatment or theming principles | Heavy (brand owner + design team + business owner) | Revisiting "dark is the reference" |
| Adding a visual token or visual principle (§7) | Heavy (brand owner + tech lead) | How a new card kind looks |
| Changing universal prohibitions (§8) | Heavy (brand owner + tech lead) | Lifting the web-font ban |
| Changing logo or group-brand rules (§10) | Heavy (brand owner + provider PR) | Adding or replacing an asset |
| Adjusting "Why" wording, fixing typos | Light (tech lead) | Wording fixes |
### 11.2 Updates that are not changes (managed in COMPONENTS.md / PATTERNS.md)
Not managed in this file:
- Component prop changes, code examples, import paths →
COMPONENTS.md- New variants / sizes that only combine existing tokens →
COMPONENTS.md- Technology-specific prohibitions (raw
<a> bans etc.) → COMPONENTS.md- Page and section composition changes, new page patterns →
PATTERNS.md- AI working procedures, stop conditions, verification commands →
AGENTS.md### 11.3 Mandatory record on change
Every change is recorded in
CHANGELOG.md (values before/after, reason, impact, approver). When a value changes, update the YAML and app/globals.css in the same PR and record it in CHANGELOG.md.### 11.4 Relationship with the Google lint
This file conforms to the Google
design.md specification (alpha) and can be validated with npx @google/design.md lint DESIGN.md. The following are deliberate gaipack extensions that the spec does not yet cover; the lint reports them as warnings and they are accepted as intentional.| Kind | Target | Note |
| --- | --- | --- |
| Expected warning (orphaned tokens) |
*-light / brand-* / accent-blue / accent-amber … | Light values and the brand palette are not referenced from components directly; they are consumed through the usage mapping (§2.3) and globals.css || Expected warning (extended sub-token) |
borderColor | The Google alpha recognizes only backgroundColor / textColor / typography / rounded / padding / size / height / width. Border color is essential to this site's visuals, so it is extended || Expected warning (contrast on translucent fills) |
tag / badge-category / number-badge | Their fills are the accent at 10–15% alpha (#00E0FF1A / #00E0FF26) over a dark surface. The lint ignores alpha and compares the accent against itself; the real contrast is the accent against surface |An error is a defect rather than an extension and is fixed before merge.
Live Preview適用後の UI§ 0. トークン (YAML)
colors — dark (reference)
primary
secondary
tertiary
accent-blue
accent-amber
surface
surface-raised
surface-deep
surface-card
surface-panel
surface-steel
surface-black
content
content-body
content-muted
content-subtle
content-label
ink
border-subtle
border-strong
colors — brand (Trinity)
#0E3F99
#518CF9
#A8C6FF
#00555C
#009FAC
#56E1ED
#770884
#C64AD4
#F59FFF
typography:17 tokens
spacing:19 tokens
rounded:6 tokens
components:29 tokens
機械可読レイヤー。値はここが正本で、本文はその選び方のルール
事例紹介
gaipack の AIDD デザインサービス導入による成功事例をご紹介します
事例紹介
AIDD デザインで開発工数を約50%短縮。全画面 Figma デザイン作成プロセスを原則廃止し、モダンな UX を実現。
商業施設内の DX 推進プロジェクトにおいて、gaipack の AIDD デザインを導入。AI 技術を活用して従来の全画面デザイン作成プロセスを原則廃止し、開発工数全体を約 50% 短縮しました。
詳しく見る
事例紹介
税制改正対応の「マスタ管理システム」開発に gaipack を導入。AIDD デザインで更新工数 50% 削減を目指す。
税制改正対応のマスタ管理システム刷新プロジェクトにおいて、gaipack の AIDD デザインを導入。UI の標準化と再利用性を高め、更新工数の削減とミス防止の仕組みを構築しました。
詳しく見る
FOLLOW US
SNS 公式アカウント
gaipack の最新情報を SNS で発信しています