---
# ─────────────────────────────────────────────────────────
# 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}"
---

# gaipack — Design Foundation & Brand Rules

> **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

---

## 1. Overview

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` together
2. **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.md`
3. **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 page
4. **Token naming follows the site's semantic names**
   - Use `surface` / `content` / `accent-*` / `border-subtle`. The shadcn defaults (`background` / `foreground`) stay inside shadcn primitives only

> AI inference rules (defaults when unspecified, never "pick the more prominent one", no rules of thumb) live in `AGENTS.md §1.1`.

---

## 2. Colors

### 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. Typography

### 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. Layout

### 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. Elevation & Depth

### 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. Shapes

### 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.

---

## 7. Components

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 cyan

Composition 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.

---

## 8. Do's and Don'ts

> 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. Motion

### 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

---

## 10. Logo Usage Rules

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

**Motion logo (official animation):**

The three Trinity colors circle into the Loop mark, then the wordmark resolves beside it — white logo on black. Use it for video openings/endings and event visuals. Both files are MP4 (H.264, 1920×1080, 60fps) with a silent audio track.

| Asset | Local Path | Public URL |
| --- | --- | --- |
| Motion logo — Standard (≈4.6s, ends holding the logo) | `/videos/media-kit/gaipack_motion_logo.mp4` | https://www.gaipack.ai/videos/media-kit/gaipack_motion_logo.mp4 |
| Motion logo — Long (≈6.1s, the Loop dissolves after the hold) | `/videos/media-kit/gaipack_motion_logo_long.mp4` | https://www.gaipack.ai/videos/media-kit/gaipack_motion_logo_long.mp4 |
| Poster frame (final logo state), JPG (1280×720) | `/images/media-kit/motion-logo-poster.jpg` | https://www.gaipack.ai/images/media-kit/motion-logo-poster.jpg |

- Trimming, resizing, and re-encoding the files are fine (Media Kit terms). **NEVER** re-animate the mark with CSS/SVG/Lottie or regenerate the animation — the NO RECREATION rule above applies to motion as well
- Videos live under `/videos/…` (not `/images/…`); the table above lists the canonical paths
- The animation is black-background only; do not key it out or place it on light surfaces. On light pages, show it inside a black frame (as the Media Kit does)
- On the web, embed with `muted` + `loop` + `playsInline`, use `preload="none"` with the poster, start playback only while the video is in view and `prefers-reduced-motion` is not `reduce` (follow runtime changes to that preference; otherwise leave it on the poster frame), and keep `controls` so viewers can pause (§9.4)

### 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. Brand Governance

### 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.