こんな課題、ありませんか？
AI が自動生成した UI に、統一感がなく意図しないデザインになってしまう
AI 駆動開発において、AI に UI の自動生成を任せきりにすると、ページごとにボタンの色が異なるなど、意図しないデザインになってしまう課題があります。
AI による高速化メリットが、Figma 依存のデザイン作成工程で相殺されてしまう
全画面分の Figma デザインを作成する従来プロセスはツール依存が強く、AI エージェントを跨いだ再利用も難しいのが実情です。AI による UI コード生成の高速化メリットを十分に享受できていません。
AI が参照できる、信頼性の高いデザインシステムが存在しない
AI によるコード生成のメリットを享受しつつ品質を担保するためには、AI が解釈・参照可能なデザインシステムと、新しい開発プロセスを確立することが不可欠です。
AI 参照可能なデザインシステムを確立し、
新しい AI 駆動開発プロセスを実現
UI/UX デザイナーと開発者に対し、AI が参照可能なデザインシステムと、
それを活用した開発プロセス（スキーム）を確立・提供します
1
DESIGN.md を中核とした AI 参照可能なデザインシステム
ブランドガイドライン・デザイントークン・コンポーネント仕様を、DESIGN.md（Markdown + YAML front matter / Google Stitch 仕様）として一元定義します。DESIGN.md が AI 参照のメインソースとなり、Claude Code / GitHub Copilot / Cursor / Gemini CLI など主要な AI コーディングエージェントから直接参照できます。
- YAML front matter にデザイントークン（色・フォント・余白・半径・影など）を機械可読に定義
- Markdown 本文にコンポーネント仕様・利用ガイドライン・アクセシビリティ要件を記述
- Shadcn/UI をベース実装とし、DESIGN.md のトークンを CSS 変数 / Tailwind theme へ反映
- 特定の Figma ファイルや MCP 実装に依存せず、Git でバージョン管理・差分レビューが可能
DESIGN.md
Markdown + YAMLShadcn/UIStorybookChromatic
User Story
→
UI Code
全画面分のデザイン作成を原則廃止
2
原則デザイン不要の UI 自動生成プロセスへの転換
全画面分の Figma デザイン作成を原則廃止し、前提情報・ユーザーストーリー・受け入れ基準とともに @DESIGN.md を明示参照させたうえで、AI コーディングエージェント（Claude Code / GitHub Copilot / Cursor 等） に入力することで、DESIGN.md に準拠した UI コードを直接生成するプロセスを目指します。
- ユーザーストーリーから直接 UI コードを生成
- DESIGN.md に準拠した一貫性のある UI を自動生成
- ベストケース：個別画面のデザイン作成が不要に
3
デザインと実装の整合性を担保するレビューフロー
DESIGN.md と Storybook（Shadcn/UI ベースの実装カタログ）を突き合わせることで、デザイン定義と実装 UI コンポーネントの一貫性を確保します。
- DESIGN.md と Storybook カタログの整合性確認
- Chromatic（GitHub 連携）によるビジュアルリグレッションテストと承認フロー
- デザイナー側でデフォルトでレビューを設定する運用
Visual Review
Chromatic + GitHub
Markdown + YAML によるツール・エージェント非依存性
デザインシステムが Markdown + YAML（DESIGN.md）であるため、特定の Figma ファイルや MCP 実装に依存しません。Claude Code / GitHub Copilot / Cursor など AI エージェントを跨いで同じデザイン基盤を再利用でき、Git でのバージョン管理・差分レビューも容易です。
AIDD デザインを活用した開発プロセス
UI/UX 設計プロセスの再定義と確立を目指します
1
デザイントークンの
定義
デザインの基礎（色・フォント・余白・半径など）を DESIGN.md の YAML front matter にデザイントークンとして定義します。
2
コンポーネント仕様の
記述と実装反映
DESIGN.md 本文にコンポーネント仕様・利用ガイドライン・アクセシビリティ要件を記述し、Shadcn/UI ベースの実装に CSS 変数 / Tailwind theme として反映します。
3
AI エージェントによる
UI 生成
開発者が @DESIGN.md を参照ファイルに指定し、AI コーディン��エージェント（Claude Code / GitHub Copilot / Cursor 等）に画面・コンポーネントの実装コード（React / Next.js）を生成させます。
4
AI 生成 UI の
レビュー・調整
開発者・デザイナーが生成された UI をレビューします。修正が必要な場合はまず DESIGN.md の不足・曖昧さを補正し、DESIGN.md だけで表現しきれない複雑な意匠のみ Figma 等の補助ツールで調整・再実装します。
コードがそのままデザインシステム
左に DESIGN.md の全文、右にスクロールと連動して切り替わる実 UI プレビューを表示します。読んでいる箇所のトークンが、そのまま右で形になります。
使い方
1
セクション一覧からタブを選択する、または左の DESIGN.md をスクロールします。
2
右に、その箇所のトークンを適用した実際の UI が表示されます。
セクションを選ぶ
定義（コード）DESIGN.md
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-07-04
---
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. The default follows the OS setting (
prefers-color-scheme), and a toggle lets users switch manually (persisted). 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 frosted-glass navigation bar hovering above the dark canvas
The three symbol colors are treated as equal peers — no single color dominates. They always appear together when expressing the Trinity concept.
---
### 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 |
|------|-----|------|
| Abyssal Black |
#0B0B0B | Deepest background layer, footer base || Deep Space |
#0B1218 | Primary gradient endpoint, hero background origin || Midnight Navy |
#0F1B25 | Main content background || Dark Charcoal |
#111111 / #121212 | Alternating section background, card surfaces || Steel Navy |
#0E1720 / #101720 | Service page section background || Pure Black |
#000000 | Gradient anchor, deepest shadow |### 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 || Silver Mist |
#B8C4CC | Secondary text, descriptions, meta information || Slate Gray |
#888888 | Muted labels, captions || Ash Gray |
#AAAAAA | Tertiary text, footer links || Ink Black |
#000000 | Text on light-colored CTA buttons |### 2.4 Border Colors
| Name | Value | Role |
|------|-------|------|
| Steel Edge |
#22313D | Primary card and section boundaries || Dark Slate |
#2C2C2C / #2E2E2E | Subtle dividers, secondary boundaries || Navy Whisper |
#1B365D at 30% | Very faint structural boundaries |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. Dark is the canonical (reference) theme: every token is defined against its dark value. The light theme is derived by assigning each token a light-mode value. Components reference tokens only — colors are never hard-coded.
| 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 | #FF9900 | #B26A00 |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. The sole exception is the static AIDD Camp LP (/lp/aidd-camp).- 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).- LP diagrams / charts use an extended token set (
--lp-*) following the same dark-as-reference principle (panels, borders, grid lines, muted text, faint fills).The §2.2–2.4 palettes describe the **dark** theme (the signature look). Light-theme values are defined by the tokens above.
---
### 3.1 Symbol Color Bands
Each symbol color spans a three-shade gradient band from deep to light:
| Color | Band (Deep → Light) |
|-------|---------------------|
| Blue |
#0E3F99 → #518CF9 → #A8C6FF || Green |
#00555C → #009FAC → #56E1ED || Purple |
#770884 → #C64AD4 → #F59FFF |### 3.2 Imagery Gradient Lines
Brand imagery is composed of gradient lines using all three symbol colors (see §10 Imagery Direction).
### 3.3 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.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 || Frosted Glass |
background: rgba(255,255,255,0.95); backdrop-filter: blur(8px) | Navigation bar || Radial Glow |
bg-gradient-radial with symbol color at low opacity | Ambient background light blobs |---
### 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", monospaceNative 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.---
### 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: 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
- Background: Frosted white glass —
rgba(255,255,255,0.95) with backdrop-filter: blur(8px)- Height:
77px- Logo: Left-aligned, gaipack wordmark (image)
- Links: Dark text on frosted glass, medium weight, 200ms transitions
- CTA: Compact gradient button ("Contact Us")
### Footer
- Background: Abyssal Black (
#0B0B0B) fading into Deep Space gradient- Layout: Multi-column. Services organized by category (How / Base / What)
- Text: Silver Mist (links), Slate Gray (labels)
- Social Icons: X / YouTube / Facebook / LinkedIn / Instagram / TikTok
- Dividers: Faint Dark Slate (
#2C2C2C)### 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
---
Instead of traditional box shadows, depth is conveyed through outward-radiating glows using symbol colors.
| 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) — Frosted glass, fine-grained effects-
blur-2xl (40px) — Medium-sized light orbs-
blur-3xl (64px) — Large ambient light blobs-
blur-[120px] — Massive background glow pools---
### 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 | Case study cards, news |
| 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)- Page Padding: Responsive horizontal padding scaled to viewport
- Centering: Auto margins
### Whitespace Philosophy
Generous vertical spacing (64px+) between major sections; denser packing within sections.
---
### Transition Defaults
- Timing:
cubic-bezier(0.4, 0, 0.2, 1) (ease-out curve)- Default Duration:
150ms### Duration Scale
| Duration | Usage |
|----------|-------|
|
200ms | Color, border, hover state changes ||
300ms | Background color, opacity, glow transitions ||
500ms | Section fade-ins ||
700ms | Transforms, scroll-triggered reveals |### Named Animations
- Pulse —
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite — Breathing glow on luminous elements- Bounce —
bounce 1s infinite — Scroll indicator### 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---
### Navigation
- Desktop: Horizontal menu (logo + service links + CTA) on frosted glass
- Mobile: Hamburger menu with collapsible panel
### 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
### Typography Scaling
Display and H1 sizes scale down proportionally on smaller screens.
---
### Icons
- Minimal line-style icons. Accents use symbol colors.
- Footer social icons follow each platform's official brand guidelines, rendered in muted tones.
### 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.
---
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.
- Placement: Consistently top-left in navigation and footer.
Official assets (transparent background):
| Asset | Local Path | Public URL |
|-------|-----------|------------|
| Logo White — for dark backgrounds (default), PNG |
/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 |
/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 |### 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.
---
### Service Architecture (How / Base / What)
| Category | Tagline | Services |
|----------|---------|----------|
| AI-Driven Development | *How* | AIDD Modernize / AIDD MVP / AIDD Requirements / AIDD Design / AIDD CMS / AIDD PMO |
| AI Platform | *Base* | (Consulting) gaipack Consulting / Starter / Pay / BPO — (Security) Governance / Secure — (Training) AIDD Camp / In-house / Talent — (Operations) Ops / BI / Connect |
| AI Products | *What* | gaibot / gaibot Pro |
### Homepage Flow
1. Frosted Nav — Fixed. Links: Services / Case Studies / News / Careers / Gallery / FAQ + Contact CTA
2. Hero — Headline + sub-copy + CTA + scrolling service-name ticker
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 (Requirements → Design → Implementation → Operations)
5. AIDD Showcase — Demo applications (healthcare / broadcast / enterprise sales, etc.)
6. Services — How / Base / What card grid
7. Trust & Credentials — AWS TSE-VPP / ISO 42001 (AIMS) / SOC 2 Type II / Google Cloud Award / Premier Partner / 1,300+ deployments
8. Case Studies — 3-column card layout
9. Partner Program — Sales / Development / Solution / Technology partners
10. Recruit CTA — Careers section
11. Closing CTA — Full-width call to action
12. Follow Us — Official social accounts (X / YouTube / Facebook / LinkedIn / Instagram / TikTok)
13. Footer — Service links by category + other pages (Case Studies / News / Careers / Gallery / FAQ / Media Kit) + legal notices
### Service Page Flow
1. Hero (H1 gradient title + key metrics)
2. Problem Statement
3. Solution Overview (feature highlights)
4. Process Steps (AIDD workflow)
5. Video (optional)
6. Case Studies (related)
7. Related Services (cross-links)
8. CTA (Contact)
9. Footer
Live Preview適用後の UI§ gaipack
Markdown ベースのデザインシステム定義「DESIGN.md」が AI コーディングエージェントのデザイン参照ソースです。
事例紹介
gaipack の AIDD デザインサービス導入による成功事例をご紹介します
事例紹介
AIDD デザインで開発工数を約50%短縮。全画面 Figma デザイン作成プロセスを原則廃止し、モダンな UX を実現。
商業施設内の DX 推進プロジェクトにおいて、gaipack の AIDD デザインを導入。AI ���術を活用して従来の全画面デザイン作成プロセスを原則廃止し、開発工数全体を約 50% 短縮しました。
詳しく見る
事例紹介
税制改正対応の「マスタ管理システム」開発に gaipack を導入。AIDD デザインで更新工数 50% 削減を目指す。
税制改正対応のマスタ管理システム刷新プロジェクトにおいて、gaipack の AIDD デザインを導入。UI の標準化と再利用性を高め、更新工数の削減とミス防止の仕組みを構築しました。
詳しく見る
FOLLOW US
SNS 公式アカウント
gaipack の最新情報を SNS で発信しています