# gaipack Design System — CHANGELOG > **Role:** The audit log for changes to the norms (`DESIGN.md` / `COMPONENTS.md` / `PATTERNS.md` / `AGENTS.md`). It is not part of the pre-flight reading list (`AGENTS.md §1`); it exists for change tracking. > > **What gets recorded:** token value changes, new tokens, changes to theming or visual principles, changes to universal prohibitions, promotion of placeholder values, and deviations from the norms that were accepted deliberately. > **Each entry keeps:** values before/after / reason / impact / approver (`DESIGN.md §11.3`). Format follows [Keep a Changelog](https://keepachangelog.com/). Dates are YYYY-MM-DD. --- ## [Unreleased] ### Changed - **Restructured the single `DESIGN.md` into four norm documents plus this changelog** (2026-09-03) - Before: one prose document (`DESIGN.md`, last updated 2026-08-03) holding visual rules, component stylings, navigation and footer specs, and page structure together, with no machine-readable tokens - After: `DESIGN.md` (YAML tokens + visual principles), `COMPONENTS.md` (implementation catalog), `PATTERNS.md` (page and section patterns), `AGENTS.md` (AI working protocol), `CHANGELOG.md` (this file) - Reason: a single file mixes the machine-readable layer with the human-readable layer and grows unreadable as judgment rules accumulate; the AIDD デザイン service now standardizes on the four-document scheme, and the site's own design system serves as its public example - Impact: section numbers changed. §5 "Component Stylings" moved to `DESIGN.md §7` (visual principles) and `COMPONENTS.md` (implementation); §12 "Page Structure Patterns" moved to `PATTERNS.md`; §8 "Animation & Motion Design" became `DESIGN.md §9 Motion`; §11 "Logo Usage Rules" became `DESIGN.md §10`; the light-theme table formerly in §2.6 is now the `-light` tokens plus `DESIGN.md §2.3` - Approver: brand owner (site maintainer) - `typography.h1` / `typography.h2-major` line height: 1.0 → 1.15 - Reason: the implemented pages set `lineHeight: 1.15` inline for H1 and major H2; the token now records the value actually in use - Impact: none on rendered pages (documentation aligned to implementation) - Approver: brand owner - `typography.h2-minor` / `typography.h3-small` weight: 700 → 600 - Reason: `text-3xl font-semibold` (113 uses) and `text-lg font-semibold` (96 uses) outnumber the bold variants (27 / 21) in the implementation; headings now default to 600 across all levels - Impact: none on rendered pages; older `font-bold` headings stay until touched (`DESIGN.md §3.4`) - Approver: brand owner - Primary CTA radius: 12px → 8px (`rounded.lg`) - Reason: the `CTA` component renders `rounded-lg`; the earlier prose value did not match the implementation - Impact: none on rendered pages - Approver: brand owner - New tokens recorded from the implementation: `surface-steel` (#101720) and `surface-black` (#000000) with light counterparts; typography `h3-large` (24px), `lead` (20px), `body-lg` (18px), `micro-sm` (11px) - Reason: these values are used at scale (e.g. 135 `text-2xl font-semibold`, 132 `#101720`) but had no token - Impact: none on rendered pages; `bg-surface-steel` / `bg-surface-black` utilities are still to be added to `globals.css` - Approver: brand owner ### Added - YAML front matter with 45 color tokens (dark reference values, `-light` values, and the `brand-*` Trinity palette), 17 typography levels, 19 spacing tokens, 6 radii, and 29 component token bundles, all derived from `app/globals.css` and the classes actually used in the implementation - `DESIGN.md §2.8` table of legacy raw hex values still in the codebase and the token each maps to - `DESIGN.md §8 Do's and Don'ts` as the single consolidation point for universal prohibitions (previously scattered as notes) - `DESIGN.md §11 Brand Governance` with approval levels and the list of expected `design.md` lint warnings - `COMPONENTS.md` catalog entries for the shadcn primitives, the Common components (CTA, Breadcrumb, Pagination, Logo, ThemeToggle, Skeleton / HeroLoadingShell, ErrorState, ShareButtons / RssLink / ScrollLink, SocialMediaSection, AskAI / LiteYouTubeEmbed / CookieConsent / OfficeOnly, ImageWithFallback, JsonLd), and the Layout components (Header, Footer) - `PATTERNS.md` with 9 page patterns and 8 section patterns - `AGENTS.md` with the reading order, inference rules, norm priority, stop process, fail-loud reporting, checkpoints, the invented-feature ban, project policies, and the self-audit ### Placeholders to confirm (TODO) > The following values were derived from the implementation rather than from a formal brand decision. When confirmed, record "before/after, reason, approver" here (`DESIGN.md §11.1`). - [ ] Light-theme palette (`*-light`) — `app/globals.css` still labels it a proposed palette pending design review - [ ] `surface-steel` / `surface-black` — add `bg-surface-steel` / `bg-surface-black` utilities to `globals.css` and normalize the raw `#101720` / `#0F161D` / `#0E1720` / `bg-black` occurrences (`DESIGN.md §2.8`) - [ ] Danger / warning accents used in LPs and demos (`#ff4444` / `#FF7B7B` / `#FFC24B` / `#A500FF`) — decide whether they become tokens - [ ] `typography.caption` (13px) / `typography.nano` (10px) — sizes observed in the implementation; confirm they are intended levels - [ ] Legacy grays (`#B8C4CC`, `#888888`, `#AAAAAA`) still present in older sections — decide whether to normalize or tokenize - [ ] `components.badge-category` colors per category (How / Base / What) — currently fixed in code, not in tokens - [ ] Whether `borderColor` stays as an extension or is folded into prose once the Google spec settles --- ## Entry template (copy to use) ``` ## [x.y.z] - YYYY-MM-DD ### Changed - : → - Reason: - Impact: - Approver: ### Added - ### Removed - ``` --- ## Versioning policy - **major (x):** breaking changes that ripple everywhere — brand color overhaul, changing the theming principle - **minor (y):** new tokens, new components or patterns, promotion of placeholders - **patch (z):** wording adjustments, typo fixes, code-example additions