# Design System: gaipack

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

---

## 1. Visual Theme & Atmosphere

**Mood:** Dual-theme (dark & light), with **dark as the signature look** — immersive and luminous. A deep near-black-to-navy canvas serves as the stage, with gradient lines in three symbol colors laid across it — 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 (iret / cloudpack aligned): glows, shadows, and grid textures are suppressed, and content is separated by borders and tonal shifts instead.

**Theming:** Both themes are supported. **Dark is the default** for new visitors (`defaultTheme="dark"`); a toggle in the header lets users switch manually, and the choice is persisted (`next-themes`, class-based, `localStorage`). Users who explicitly select "system" follow their OS setting. See §2.6 for the semantic-token palette that drives both themes.

**Density:** Spacious between sections, denser within service grids. Generous vertical breathing room separates major content blocks, while card grids pack information tightly.

**Key Atmospheric Qualities:**
- Deep, immersive dark backgrounds that push content forward into the light
- Tri-color gradient lines (straight and concentric) woven through the visual language
- Heading text that bleeds from white into accent color gradients
- Subtle grid textures and diffused glows as ambient underlays
- A floating translucent navigation bar (theme-aware) capped with a 4px tri-color gradient line

> The three symbol colors are treated as equal peers — no single color dominates. They always appear together when expressing the Trinity concept.

---

## 2. Color Palette & Roles

### 2.1 Symbol Colors — The Trinity Palette

Three equal symbol colors, each mapped to a DNA strand and value (see §11.1 for the brand DNA definitions). Every color spans a three-shade band from deep to light.

#### Blue = Technology (System Development)
An homage to iret's corporate color, "iret Blue."

| Shade | Hex | RGB |
|-------|-----|-----|
| **Deep Sapphire** | `#0E3F99` | `rgb(14, 63, 153)` |
| **Vivid Azure** | `#518CF9` | `rgb(81, 140, 249)` |
| **Soft Sky** | `#A8C6FF` | `rgb(168, 198, 255)` |

#### Green = Trust (Cloud Integration)
An homage to cloudpack's "Emerald Green."

| Shade | Hex | RGB |
|-------|-----|-----|
| **Ocean Teal** | `#00555C` | `rgb(0, 85, 92)` |
| **Vivid Cyan** | `#009FAC` | `rgb(0, 159, 172)` |
| **Electric Aqua** | `#56E1ED` | `rgb(86, 225, 237)` |

#### Purple = Innovation (AI Intelligence)
Evokes the mystery and promise of an AI-driven future.

| Shade | Hex | RGB |
|-------|-----|-----|
| **Deep Magenta** | `#770884` | `rgb(119, 8, 132)` |
| **Vivid Orchid** | `#C64AD4` | `rgb(198, 74, 212)` |
| **Soft Fuchsia** | `#F59FFF` | `rgb(245, 159, 255)` |

> **Semantic mapping:** Blue = Technology, Green = Trust, Purple = Innovation. When expressing Trinity, all three colors appear together. Individual UI element color assignment is flexible within these roles.

### 2.2 Background Canvas

The background palette is a tightly controlled range of near-black and deep navy tones, creating a cosmic depth field. **(Dark theme — for the light-theme equivalents, see §2.6.)**

| Name | Hex | Role |
|------|-----|------|
| **Deep Space** | `#0B1218` | Page base (`--surface`), hero background origin |
| **Midnight Navy** | `#0F1B25` | Raised sections and cards (`--surface-raised`) |
| **Gunmetal Navy** | `#0F161D` | Service-page panels and cards |
| **Steel Navy** | `#0E1720` / `#101720` | Service page section background |
| **Dark Charcoal** | `#111111` / `#121212` | Alternating section background, card surfaces (`#121212` = `--surface-card`) |
| **Abyssal Black** | `#0B0B0B` | Midpoint of listing-page background gradients (news / FAQ) |
| **Pure Black** | `#000000` | Gradient anchor, deepest shadow |

> The footer sits on plain `--surface` (flat, no dedicated black) — see §5 Footer.

### 2.3 Text Colors

| Name | Value | Role |
|------|-------|------|
| **Pure White** | `#FFFFFF` | Primary headings, high-emphasis body text, logo/wordmark |
| **Frosted White** | `rgba(255,255,255,0.95)` | Standard body text on dark backgrounds |
| **Cool Gray** | `#9CA3AF` | Secondary text (`--content-muted`) |
| **Silver Mist** | `#B9C2CC` | Body / secondary text on service and case-study pages |
| **Blue Gray** | `#8FA1B5` | Muted labels on service pages (`--svc-muted`) |
| **Steel Gray** | `#6B7885` | Tertiary text, separators (`--content-subtle`) |
| **Ink Black** | `#000000` | Text on light-colored CTA buttons |

> Legacy grays (`#B8C4CC`, `#888888`, `#AAAAAA`) linger in a few older sections; use the values above for new work.

### 2.4 Border Colors

| Name | Value | Role |
|------|-------|------|
| **Steel Edge** | `#22313D` | Primary card and section boundaries (`--border-subtle`) |
| **Bright Steel** | `#2E3C49` | Elevated / emphasized borders on service pages |
| **Dark Slate** | `#2C2C2C` / `#2E2E2E` | Subtle dividers in legacy sections (recruit, case studies) |
| **Navy Whisper** | `#1B365D` at 30% | Very faint structural boundaries (rare) |

> Interactive element borders and hover states use symbol colors at low-to-medium opacity.

### 2.5 Functional Opacity Scale

Symbol color opacity tiers that create depth layering:
- **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 Semantic Tokens & Light Theme

Both themes are driven by a single set of **semantic CSS variables** (defined in `app/globals.css`; `:root` holds the light values and `.dark` overrides them, switched via `next-themes` with `attribute="class"`). **Dark is the canonical (reference) theme** in design terms: every token is designed against its dark value, and the light theme is derived from it. Both `dark:` and `light:` Tailwind variants are available (`@custom-variant`).

| Token | Role | Dark | Light |
|-------|------|------|-------|
| `--surface` | Page base background | `#0B1218` | `#FFFFFF` |
| `--surface-raised` | Section / card surface | `#0F1B25` | `#EDF1F6` |
| `--surface-deep` | Gradient endpoint / sunken area | `#081D2E` | `#E3E9F0` |
| `--surface-card` | Card surface | `#121212` | `#FFFFFF` |
| `--content` | Primary text | `#FFFFFF` | `#0B1218` |
| `--content-muted` | Secondary text | `#9CA3AF` | `#51606B` |
| `--content-subtle` | Tertiary text / separators | `#6B7885` | `#6B7885` |
| `--border-subtle` | Borders / dividers | `#22313D` | `#D9D9E0` |
| `--accent-cyan` | Cyan accent | `#00E0FF` | `#009FAC` |
| `--accent-green` | Green accent | `#00FFB2` | `#00857A` |
| `--accent-purple` | Purple accent | `#C77BFF` | `#9A2FB0` |
| `--accent-blue` | Blue accent | `#518CF9` | `#0E3F99` |
| `--accent-amber` | Amber accent — no Tailwind utility; reference via `var(--accent-amber)` | `#FF9900` | `#B26A00` |

**Supplementary tokens** (same dark-as-reference principle):

| Token | Role | Dark | Light |
|-------|------|------|-------|
| `--shadow-card` | Standard card shadow (the workhorse — used across most cards) | `0 3px 14px rgba(0,0,0,0.16)` | `none` |
| `--tile-shadow` | Drop-shadow filter for tiles | `drop-shadow(0 4px 20px rgba(0,0,0,0.6))` | `none` |
| `--nav-btn-bg` | Navigation button background | `rgba(11,18,24,0.72)` | `rgba(255,255,255,0.9)` |

Scoped token families follow the same pattern: `--lp-*` (LP diagrams / charts — panels, borders, grid lines, muted text, faint fills), `--gov-*` (governance LP), and `--svc-*` (service pages, e.g. `--svc-panel: #121A22`, `--svc-muted: #8FA1B5`).

**Governing rules:**
- **Light mode is not optional.** Every new page and component ships with light-theme support from its first implementation — build dark-first, then add the `light:` overrides before the change is merged. A dark-only page is an incomplete page.
- **Dark is authoritative.** Each token's dark value is the reference; light-mode values are layered on with the `light:` variant, leaving the dark definition intact.
- **Accents deepen in light.** On white, neon accents are too bright, so the light theme uses deeper, more saturated tones (Vivid Cyan / Deep Teal / Vivid Orchid / Deep Sapphire).
- **Light is flat.** Glows, drop-shadows, and grid textures are suppressed in light; separation comes from borders (`--border-subtle`) and tonal steps (surface → surface-raised). This is enforced globally: `.light` strips `box-shadow` and `drop-shadow` via CSS, so light-mode shadows never need manual removal.
- **Theme-dependent colors go through tokens.** New work references semantic tokens (or ships explicit `light:` overrides for any raw hex). Hard-coded dark-theme hex values remain in older sections and are normalized opportunistically — don't add new ones.

> The §2.2–2.4 palettes describe the **dark** theme (the signature look). Light-theme values are defined by the tokens above.

---

## 3. Gradient Definitions

### 3.1 Symbol Color Bands

Each symbol color spans a three-shade gradient band from deep to light (hex values in §2.1):

| Color | Band (Deep → Light) |
|-------|---------------------|
| **Blue** | Deep Sapphire → Vivid Azure → Soft Sky |
| **Green** | Ocean Teal → Vivid Cyan → Electric Aqua |
| **Purple** | Deep Magenta → Vivid Orchid → Soft Fuchsia |

Brand imagery composes gradient lines from all three bands — see §10 Imagery Direction.

### 3.2 Heading Gradient Pattern

Headings use `background-clip: text` to create a gradient text effect that bleeds from white into a symbol color. Applied to H1 and major H2 elements.

### 3.3 Tri-Color Brand Line

A signature 4px gradient line runs through all three bands. Used as the header's bottom edge:

```
linear-gradient(90deg, #0E3F99 0%, #518CF9 20%, #009FAC 40%, #56E1ED 60%, #C64AD4 80%, #770884 100%)
```

### 3.4 Surface Gradients

Neutral dark-surface gradients that provide subtle depth without accent colors:

| Name | Definition | Usage |
|------|-----------|-------|
| **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%)` | Card background, elevated surfaces |

### 3.5 Atmospheric Effects

| Name | Definition | Usage |
|------|-----------|-------|
| **Grid Overlay** | `linear-gradient(<symbol-color> 1px, transparent 1px), linear-gradient(90deg, <symbol-color> 1px, transparent 1px)` at low opacity | Hero background grid texture, footer underlay |
| **Translucent Bar** | `bg-surface/80` + `backdrop-blur(8px)` (at top) → `bg-surface/95` + `backdrop-blur(12px)` (scrolled) | Navigation bar |
| **Radial Glow** | `bg-gradient-radial` with symbol color at low opacity | Ambient background light blobs |

---

## 4. Typography Rules

### Font Stack
- **Primary (Sans-serif):** `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`
- **Monospace:** `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`

Native system font stack — no custom web fonts loaded.

### Type Scale

| Level | Size | Weight | Line Height | Usage |
|-------|------|--------|-------------|-------|
| **Display** | `96px` (6rem) | 700 (Bold) | 1.0 | Hero statistics (30%, 60%, 99%) |
| **H1** | `60px` (3.75rem) | 600 (Semibold) | 1.0 | Page titles — gradient text |
| **H2 (Major)** | `48px` (3rem) | 600 (Semibold) | 1.0 | Section headings |
| **H2 (Minor)** | `30px` (1.875rem) | 700 (Bold) | 1.2 | Subsection headings |
| **H3** | `20px` (1.25rem) | 600 (Semibold) | 1.4 | Card and feature titles |
| **H3 (Small)** | `18px` (1.125rem) | 700 (Bold) | 1.25 | Metric labels, compact headings |
| **Body** | `16px` (1rem) | 400 (Regular) | 1.625 | Body text, descriptions |
| **Body (Small)** | `14px` (0.875rem) | 400–500 | 1.43 | Supporting text, meta |
| **Caption** | `13px` | 400 (Regular) | 1.4 | Timestamps, understated labels |
| **Micro** | `12px` (0.75rem) | 400 (Regular) | 1.33 | Tags, badges, annotations |
| **Nano** | `10px` | 400 (Regular) | 1.2 | Legal text, smallest labels |

### Special Text Effects
- **Gradient Text:** `bg-clip-text` + `text-transparent` over a gradient background. Used on H1 and major H2.
- **Letter Spacing:** Large headings use tight tracking (`-0.025em`). English labels and badges use wider tracking (`0.05em` to `0.1em`). English section labels ("VALUE PROPOSITION", "PROCESS", etc.) are set in all-caps with wide tracking, while UI copy and navigation labels are Japanese.

---

## 5. Component Stylings

### Buttons

**Primary CTA**
- **Background:** Symbol color gradient
- **Text:** Ink Black (`#000000`) or White, weight 500–600
- **Shape:** Generously rounded corners (`border-radius: 12px`)
- **Padding:** `0px 64px` (hero) / `0px 24px` (standard)
- **Shadow:** Soft outward glow — symbol color at 16% opacity, `0px 4px 16px`
- **Hover:** Glow intensifies, subtle scale-up

**Secondary CTA — "Outline Pill"**
- **Background:** Transparent
- **Text / Border:** Symbol color (border at ~30% opacity)
- **Shape:** Pill-shaped (`border-radius: 9999px`)
- **Padding:** `8px 16px`
- **Hover:** Border brightens, faint fill appears

**White CTA — "Frost Button"**
- **Background:** Pure White (`#FFFFFF`)
- **Text:** Ink Black (`#000000`)
- **Border:** 1px solid White
- **Shape:** Generously rounded corners (`border-radius: 12px`)
- **Padding:** `0px 24px`
- **Usage:** Alternative CTA for partner inquiries, etc.

### Cards & Containers

**Service Card — "Dark Glass Panel"**
- **Background:** Transparent or Steel Navy (`#0E1720`), optionally with backdrop-filter
- **Border:** 1px solid Steel Edge (`#22313D`) — sometimes at 50–70% opacity
- **Corner Radius:** Generously rounded (`12px`)
- **Shadow:** `--shadow-card` at rest; on hover, a faint outward glow — symbol color at 10%, `0px 0px 20px`
- **Padding:** `24px` to `32px`
- **Hover:** Border shifts to a brighter symbol color, glow intensifies

**News / Case Study Card**
- **Background:** Transparent
- **Border:** 1px solid `#22313D` at 70% opacity
- **Image:** Full-width thumbnail, 16:9 aspect ratio, `object-cover`
- **Title:** 16px / weight 500 / Frosted White
- **Date:** Caption size, muted gray
- **Hover:** Subtle scale, border color shift

**Metric Highlight Card**
- **Background:** Symbol color at 5–10% opacity
- **Border:** 1px solid symbol color at 20–30% opacity
- **Featured Number:** Display size (60–96px) / Bold / White
- **Label:** Gradient text (white → symbol color)
- **Shadow:** Symbol color glow

### Navigation

- **Position:** Fixed at top (`z-50`), shared by every page including LPs
- **Background:** 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 (dark: near-black navy; light: white)
- **Brand Line:** 4px tri-color gradient line along the bottom edge (§3.3)
- **Height:** Variable — ≈80px at the top of the page, ≈72px when scrolled (padding compresses; both include the 4px line)
- **Logo:** Left-aligned gaipack wordmark; theme-aware (white SVG on dark, black SVG on light), 144px wide (168px on md+)
- **Links (Japanese labels):** サービス一覧 `/services` / 事例紹介 `/column` / お知らせ `/news` / 採用情報 `/recruit` / ギャラリー `/gallery` / ブログ `/blog` / FAQ `/faq` — 300ms color transitions, hover in accent purple
- **Theme Toggle:** Sun/Moon button (desktop: right side; mobile: inside the hamburger panel)
- **CTA:** Compact gradient button「お問い合わせ」→ `/contact`
- **Mobile:** Hamburger menu; the panel adds a Home link and a「表示テーマ」toggle row

### Footer

- **Background:** Plain `--surface` (flat) with a barely-visible cyan grid underlay (2% opacity, 48px cells); top border in accent cyan at 10%
- **Layout:** 5-column grid (2 → 3 → 5 columns responsive). Four service columns grouped by category with How / Base / What badges, plus an「その他」column: サービス一覧 / ブログ / 事例紹介 / お知らせ / 採用情報 / ギャラリー / FAQ / メディアキット
- **Header Area:** Logo (160px) + one-line description (20 services, AI-era development support)
- **Text:** Links in `--content-muted`, hover in accent cyan; dividers in `--border-subtle`
- **Bottom:** Metric disclaimers + `Copyright© KDDI iret, Inc. All Rights Reserved.`
- **Note:** Social icons live in the Follow Us section (below), **not** in the footer.

### Social Media Section — "Follow Us"

A standalone section (`FOLLOW US` / `SNS 公式アカウント`) placed at the end of the homepage and content pages, above the footer.
- **Layout:** Card grid, 2 columns (3 on md+), `max-w-6xl`
- **Accounts:** X `@gaipack_ai` / YouTube `@gaipack` / Facebook `gaipackai` / LinkedIn `gaipack` / Instagram `@gaipack_ai` / TikTok `@gaipack_ai`
- **Icons:** Line-style, monochrome `--content`; hover shifts card accents to cyan

### Tags & Badges
- **Background:** Transparent or symbol color at 5%
- **Text:** Symbol color, 12px
- **Border:** 1px solid symbol color at low opacity
- **Shape:** Pill-shaped
- **Padding:** `4px 12px`

### Accordion (FAQ)
- **Container:** Full-width, dark background
- **Question Row:** Semibold, clickable with expand/collapse icon
- **Dividers:** Faint Steel Edge (`#22313D`) horizontal lines
- **Answer:** Standard body text, generous line spacing

---

## 6. Depth, Elevation & Glow System

Instead of traditional box shadows, depth is conveyed through **outward-radiating glows** using symbol colors, plus the neutral `--shadow-card` token (§2.6) for resting cards. In light mode all of these are stripped automatically (§2.6 "Light is flat").

| Level | Name | Opacity / Blur | Usage |
|-------|------|----------------|-------|
| **0** | Flat | No glow | Default resting state |
| **1** | Whisper | 8% / `0px 0px 30px` | Ambient background light |
| **2** | Soft | 10% / `0px 0px 20px` | Card hover |
| **3** | Medium | 16% / `0px 4px 16px` | CTA buttons, active cards |
| **4** | Focused | 30% / `0px 0px 15–20px` | Emphasized elements, badges |
| **5** | Intense | 50% / `0px 0px 40px` | Hero sections, spotlights |
| **6** | Beacon | 80% / `0px 0px 10px` | Focus states, maximum emphasis |

### Atmospheric Blur
- `blur-sm` (8px) — Translucent bars, fine-grained effects
- `blur-2xl` (40px) — Medium-sized light orbs
- `blur-3xl` (64px) — Large ambient light blobs
- `blur-[120px]` — Massive background glow pools

---

## 7. Layout Principles

### Spacing System (Tailwind 4px base)

| Token | Value | Usage |
|-------|-------|-------|
| `gap-1.5` | 6px | Icon + label pairs |
| `gap-2` | 8px | Compact lists, tag groups |
| `gap-3` | 12px | Related content clusters |
| `gap-4` | 16px | Grid gaps, card internal padding |
| `gap-6` | 24px | Between components, card padding |
| `gap-8` | 32px | Intra-section spacing, card grids |
| `gap-12` | 48px | Major section padding, hero grids |
| `gap-16` | 64px | Between major page sections |

### Grid Systems

| Configuration | Column Widths | Gap | Usage |
|---------------|---------------|-----|-------|
| **2-column Hero** | ~616px × 2 | 48px | Hero, case study highlights |
| **2-column Content** | ~560px × 2 | 32px | Feature comparison, problem/solution |
| **3-column Service** | ~195px × 3 | 16px | Service category groups |
| **3-column Cards** | ~405px × 3 | 32px | News, blog cards |
| **4-column Grid** | ~142px × 4 | 16px | Icon grids, certification badges |
| **4-column Wide** | ~308px × 4 | 16px | Service cards, feature lists |

### Container Strategy
- **Max Width:** `80rem` (1280px, `max-w-7xl`) for page shells, header, and footer. Narrower containers (`max-w-6xl` / `5xl` / `4xl` / `3xl`) step content down for sub-sections and prose.
- **Page Padding:** Responsive horizontal padding scaled to viewport
- **Centering:** Auto margins

### Whitespace Philosophy
Generous vertical spacing (64px+) between major sections; denser packing within sections.

---

## 8. Animation & Motion Design

### Transition Defaults
- **Timing:** `cubic-bezier(0.4, 0, 0.2, 1)` (ease-out curve)
- **Default Duration:** `150ms`

### Duration Scale

| Duration | Usage |
|----------|-------|
| `200ms` | Quick color and border changes |
| `300ms` | Hover states (incl. navigation links), background color, opacity, glow |
| `500ms` | Section fade-ins |
| `700ms` | Transforms, scroll-triggered reveals |

### 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 (contact form) |
| **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) |

Entrance/exit utilities (`animate-in` / `animate-out`), accordion, and caret-blink come from `tw-animate-css`. LP pages additionally define their own scoped keyframe families (`pf*` for platform-engineering, `gp*` for governance, `camp*` for AIDD Camp) — reveals, floats, shimmers, and spins local to each LP.

**Reduced motion:** Decorative loops (e.g. Flow Dash) are disabled under `prefers-reduced-motion: reduce`.

### Transition Properties
Interactive elements transition these properties together:
`color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to`

---

## 9. Responsive Behavior

### Navigation
- **Desktop:** Horizontal menu (logo + links + theme toggle + CTA) on the translucent bar
- **Mobile:** Hamburger menu with collapsible panel (adds Home link and theme toggle row)

### Grid Collapse
- **4-column → 2-column → 1-column**, collapsing progressively as the viewport shrinks
- Service cards maintain readability at every breakpoint
- Hero metrics stack vertically on mobile
- The hero's 20-service grid is static on desktop (5 × 4) and becomes two counter-flowing marquee rows on mobile

### Typography Scaling
Display and H1 sizes scale down proportionally on smaller screens.

---

## 10. Icon & Imagery Style

### Icons
- Minimal line-style icons. Accents use symbol colors.
- Social icons (Follow Us section, §5) are rendered in muted monochrome, following each platform's official mark.

### Imagery Direction
- **Motif:** Gradient lines in three symbol colors abstractly express "carving open the future." The gaipack DNA unites as a Trinity — **sometimes sharp, sometimes harmonious** — painting the path forward.
- **Variation:** Visual diversity is a core principle. Multiple compositions and variations are encouraged rather than locked to a single form.
- **Background:** Lines glow against a dark canvas.
- **Applications:** The same visual language extends to banners, apparel, stationery, and event materials.
- **Photography:** Real-world tech and business scenes, composited onto dark surfaces. Thumbnails use 16:9 aspect ratio, `object-cover`, within rounded cards.
- **Decoration:** Abstract gradient blobs, grid textures, and glows. No illustrative or explanatory graphics.

### Logo Assets
All official logo/icon files, their asset paths, and usage rules are consolidated in **§11 Logo Usage Rules**. That section is the single source of truth — never place a logo or brand icon anywhere without following §11.

---

## 11. Logo Usage Rules

This section is the **single source of truth** for every brand mark (gaipack logo, gaibot icon). All asset paths and usage rules live here — do not rely on partial information elsewhere in this document.

> ### ⚠️ 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.
> - Verbal descriptions of the marks below (e.g., "Trinity Loop", "hexagonal speech bubble") exist **only so you can recognize the correct asset**. They are not drawing instructions.

### 11.1 gaipack Logo

**Design Intent — Trinity Loop** *(brand context for recognition only — NOT drawing instructions; see the NO RECREATION rule above)*

**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 DNA strands unite as a Trinity, cycling in a perpetual Loop to generate unstoppable momentum for business transformation. gaipack is the **symbol of AI-driven development** — built on deep expertise in systems and cloud, pushing forward with AI innovation.

**Usage rules:**

- **Standard Form:** Trinity Loop mark + "gaipack" wordmark (™).
- **Tagline:** "Generative AI Solutions" placed above the logo as the default composition.
- **Color:** Monochrome by default — white logo on dark backgrounds, black logo on light backgrounds. Never recolor. (Note: 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 above have transparent backgrounds. **Exception:** the symbol-mark SVG contains an opaque white 360×360 background rectangle — it is *not* transparent; don't 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.

### 11.2 gaibot Icon

gaibot is gaipack's AI Products brand (§12) — 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 — see the NO RECREATION rule above.)*

**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 icon's transparent margin handles this safely.
- **Slack custom emoji (reactions)** — downscale the PNG (e.g., to 128px; Slack requires ≤ 128KB) before registering. Do not simplify or redraw the mark for small sizes.
- **Architecture diagrams (構成図)** — embed the SVG/PNG asset to represent the gaibot service/agent node. In diagram tools where embedding external images is 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 lock-up 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.

---

## 12. Page Structure Patterns

### Service Architecture (How / Base / What)

20 services across three categories. Category names are displayed in Japanese with How / Base / What badges:

| Category | Badge | Services |
|----------|-------|----------|
| **AI 駆動開発** (AI-Driven Development) | *How* | AIDD モダナイズ / AIDD MVP (featured) — AIDD 要件定義 / AIDD デザイン / AIDD CMS / AIDD PMO / AIDD インハウス / AIDD キャンプ (8) |
| **AI 活用基盤** (AI Platform) | *Base* | (コンサル・導入) gaipack コンサルティング / スターター / ペイ / BPO — (セキュリティ) ガバナンス / セキュア — (教育・人材) タレント — (運用・データ) オプス / BI / コネクト (10) |
| **AI 活用プロダクト** (AI Products) | *What* | gaibot / gaibot Pro (2) |

### Route Map

| Area | Routes |
|------|--------|
| **Home** | `/` |
| **Services** | `/services` (hub) → `/services/aidd` (AIDD hub) → `/services/[service]` (20 detail pages, SSG) |
| **Case Studies** | `/column` (list) + 8 static case-study pages (`/column/case-study-*`) |
| **News** | `/news` + pagination + `/news/[slug]` + `/news/category/[slug]` (+ pagination) + RSS feeds |
| **Blog** | `/blog` + pagination + `/blog/[slug]` + category / author pages (+ pagination) + RSS + client-side search + view-count ranking |
| **Landing Pages** | `/lp/aidd-camp` (canonical → `/services/aidd-camp`) / `/lp/governance` / `/lp/platform-engineering` |
| **Other** | `/gallery` (+ `/gallery/[id]`) / `/faq` / `/recruit` / `/contact` (HubSpot form) / `/media-kit` |

### Homepage Flow
1. **Navigation** — Fixed translucent bar (§5): 7 links + theme toggle + Contact CTA
2. **Hero** — Headline「AIで、ビジネスを加速させる。」+ sub-copy + 2 CTAs (お問い合わせ / サービス一覧) + 20-service icon grid (5 × 4 desktop; dual marquee on mobile) + scroll indicator, over an animated canvas background
3. **Value Proposition** — Three key metrics (30% dev cost reduction / 60% ops cost reduction / 99% data leak risk reduction)
4. **Process** — AIDD development process overview + video + 4 steps (要件定義 → 設計 → 実装 → 運用)
5. **AIDD Showcase** — Banner linking to the external demo gallery (https://showcase.gaipack.ai/)
6. **Services** — How / Base / What card grid (table above)
7. **Related LP Carousel** — Cross-links to the three landing pages
8. **Trust & Credentials** — AWS TSE-VPP / ISO 42001 (AIMS) / SOC 2 Type II / Google Cloud Award / Premier Partner / 2,500+ cloud deployments
9. **Case Studies** — 2-column highlight cards + link to `/column`
10. **News, Blog & Partner / Recruit** — Latest news, weekly blog ranking, then partner program (販売 / 開発 / ソリューション / テクノロジー) alongside recruit
11. **Closing CTA** — Full-width call to action
12. **Follow Us** — Social account card grid (§5)
13. **Footer** — 5-column service + other-page links (§5)

### Service Page Flow
1. Breadcrumb (AIDD services nest under `/services/aidd`)
2. Hero — H1 gradient title + key-metric cards + CTA; about half the pages embed a YouTube video in the hero
3. Problem Statement（こんな課題、ありませんか？）
4. Solution Overview（feature highlights）
5. Service-specific sections (comparison tables, pricing, phases, interactive demos)
6. Process Steps（導入の流れ）
7. FAQ (some pages)
8. Case Studies (some pages)
9. Related Services (cross-links; most pages)
10. CTA（まずはお気軽にご相談ください）+ Footer

> **Note:** The AIDD デザイン service page (`/services/aidd-design`) renders this very document live — it fetches `https://www.gaipack.ai/DESIGN.md` (revalidated hourly) and displays it as its content. Edits to this file are user-visible on that page.