cdragon 0.1.0

package/skills/to-html/designs/hyundaicard.DESIGN.md

@@ -0,0 +1,177 @@
+---
+id: "hyundaicard"
+name: "Hyundai Card"
+country: KR
+category: fintech
+homepage: "https://www.hyundaicard.com"
+primary_color: "#000000"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=hyundaicard.com&sz=128"
+verified: "2026-06-01"
+omd: "0.1"
+ds:
+  name: Hyundai Card Design Library
+  url: "https://newsroom.hyundaicard.com/front/board/Hyundai-Card-Design-Library?country=en"
+  type: brand
+  description: Hyundai Card's official Design Library — the brand's design philosophy, the proprietary Youandi typeface, and visual identity.
+---
+# Design System Inspiration of Hyundai Card
+
+## 1. Visual Theme & Atmosphere
+
+Hyundai Card is Korea's most design-celebrated credit-card brand, and its visual identity is an exercise in disciplined restraint: monochrome premium minimalism built almost entirely from ink black (#000000) on a clean white (#FFFFFF) ground. Color is not used as decoration here — it is withheld on purpose, treated as a luxury that the brand chooses not to spend, so that the absence of color becomes the statement. The signature element is typography itself: the proprietary "Youandi" (유앤아이) typeface carries the brand's voice, making letterforms the primary expressive medium rather than imagery or palette. The atmosphere is gallery-like and editorial — generous whitespace, high contrast, and a quiet confidence that reads as understated wealth rather than loud premium cues. Surfaces are flat and unadorned, headers are transparent, and every element earns its place. The result feels less like a banking product and more like a cultural design platform, which is exactly how the DIVE surface presents the brand. This is typography-as-identity, where the discipline of black, white, and a custom face does all the work.
+
+## 2. Color Palette & Roles
+The palette is deliberately monochrome. The ground is white (#FFFFFF) and the ink is black (#000000), and the brand color is essentially black itself — color is the thing that is held back, which is the entire point of the identity. The only chromatic accents appear as functional category tags on the DIVE content surface, never as primary brand expression.
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Ground | #FFFFFF | Page and surface background; the dominant field |
+| Ink | #000000 | Body text, headings, primary brand color; the monochrome anchor |
+| Accent — red (functional) | #F36464 | Content category tag on DIVE only |
+| Accent — green (functional) | #15A91F | Content category tag on DIVE only |
+
+The accents are strictly utilitarian. They classify content; they do not brand. Treat #F36464 and #15A91F as labeling tools confined to tags, and keep the rest of the experience in pure black-and-white.
+
+## 3. Typography Rules
+Typography is the brand. The display layer uses the proprietary "Youandi" typeface (confirmed in the DOM as YouandiNewKr, with HEB / TR / HB weights) for headings and branding — it is the signature element and should be reserved for moments that carry the brand's voice. Body text is set in Noto Sans KR for legibility across Korean and Latin content. The captured body size is 13px, and the heading size is 26px at weight 600, giving a clear two-step hierarchy: a confident editorial heading over a quiet, readable body.
+
+| Token | Value |
+| --- | --- |
+| Display / branding | Youandi (YouandiNewKr — HEB / TR / HB weights), proprietary |
+| Body | Noto Sans KR |
+| Body size | 13px |
+| Heading | 26px / 600 |
+
+Rule of thumb: let Youandi own the brand and headline moments; let Noto Sans KR carry running text at 13px; reserve the 26px/600 step for section-level headings.
+
+## 4. Component Stylings
+
+### Page Surface (DIVE)
+
+**Default**
+- Background: #FFFFFF
+- Text: #000000
+- Border: none
+- Padding: generous whitespace (editorial)
+- Height: full viewport
+- Font: 13px / 400 (Noto Sans KR)
+- Use: the base content canvas — white ground, black ink, maximal restraint
+
+### Heading
+
+**Section heading**
+- Background: transparent
+- Text: #000000
+- Border: none
+- Padding: editorial spacing above and below
+- Height: auto
+- Font: 26px / 600
+- Use: section-level titles; pair with Youandi for true brand moments
+
+### Button
+
+**Primary (minimal pill)**
+- Background: #FFFFFF
+- Text: #000000
+- Border: minimal outline (monochrome)
+- Radius: 24px
+- Padding: balanced for a 48px pill
+- Height: 48px
+- Font: body scale (Noto Sans KR)
+- Use: primary action; the rounded pill is the one soft gesture in an otherwise hard, flat system
+
+### Header
+
+**Transparent header**
+- Background: transparent
+- Text: #000000
+- Border: none
+- Padding: edge-aligned to the content grid
+- Height: auto
+- Font: Noto Sans KR
+- Use: lets the white ground read continuously from header into content; no chrome, no shadow
+
+### Content Tag
+
+**Category tag (red)**
+- Background: tag fill
+- Text: #F36464
+- Border: none
+- Radius: pill
+- Padding: compact
+- Height: compact label
+- Font: small body scale
+- Use: functional content classification on DIVE only — not brand color
+
+**Category tag (green)**
+- Background: tag fill
+- Text: #15A91F
+- Border: none
+- Radius: pill
+- Padding: compact
+- Height: compact label
+- Font: small body scale
+- Use: functional content classification on DIVE only — not brand color
+
+## 5. Layout Principles
+The layout is editorial and gallery-like, built on generous whitespace and a continuous white ground. The transparent header dissolves into the content so the page reads as one uninterrupted surface, and the absence of borders, fills, and chrome keeps attention on type and spacing. Black ink on white field creates the contrast that structures the page; there is no competing color to organize around. Hierarchy is established through the typographic step — 26px/600 headings over 13px body — and through the rhythm of negative space rather than through dividers or boxes. The pill button at 24px radius is the single soft moment in an otherwise crisp, rectilinear field. Treat layout as composition: align to a clean grid, let whitespace breathe, and resist the urge to add color or ornament.
+
+## 6. Depth & Elevation
+This is a flat system. There are no documented shadows, gradients, or elevation layers — the header is transparent and surfaces sit at a single plane on the white ground. Depth, to the extent it exists, comes from contrast (black ink against white) and from spacing, not from drop shadows or stacking. Keep elements coplanar; if separation is needed, use whitespace and the typographic hierarchy rather than introducing elevation. The only curvature in the system is the 24px button radius, which softens the action without implying lift. Restraint applies to depth exactly as it applies to color.
+
+## 7. Do's and Don'ts
+
+### Do
+- Keep the palette monochrome: #FFFFFF ground, #000000 ink.
+- Treat black (#000000) as the brand color — withholding color is the point.
+- Reserve Youandi (proprietary) for headings and branding moments.
+- Set body in Noto Sans KR at 13px; use 26px/600 for headings.
+- Use the 48px pill button with 24px radius as the soft action gesture.
+- Keep the header transparent and surfaces flat.
+
+### Don't
+- Introduce color as a brand element — the accents #F36464 and #15A91F are for functional content tags only.
+- Add shadows, gradients, or elevation; the system is flat.
+- Substitute a generic display face where Youandi carries the brand voice.
+- Crowd the layout — whitespace is structural.
+- Box content in borders or fills; let contrast and spacing do the work.
+
+## 8. Responsive Behavior
+The captured surface (DIVE) is a content/culture platform whose responsive logic follows its editorial, whitespace-driven layout: the continuous white ground and transparent header scale naturally from desktop to mobile, with the typographic hierarchy (26px/600 heading over 13px body) carrying structure at every width. The 48px pill button provides a comfortable touch target on mobile. Beyond these observed values, responsive specifics were not captured (the main banking site is security-plugin-walled), so adapt qualitatively: preserve generous whitespace, keep the monochrome contrast, maintain the flat single-plane surface, and let the type hierarchy — not added chrome — communicate structure as the viewport narrows.
+
+## 9. Agent Prompt Guide
+When generating UI in the Hyundai Card style, instruct the agent: "Design a monochrome, editorial interface — white (#FFFFFF) ground, black (#000000) ink, and treat black as the brand color. Withhold color entirely; the absence of color is the statement. Use a proprietary-feeling display typeface (Youandi, weights HEB/TR/HB) for headings and branding, and Noto Sans KR for body at 13px, with 26px/600 section headings. Keep everything flat — no shadows, no gradients, no elevation, transparent header. The only soft gesture is a 48px pill button with 24px radius, white fill, black text. Lean on generous whitespace and high black-on-white contrast for structure. If you must classify content, you may use red #F36464 or green #15A91F as small functional tag colors only — never as brand color." Emphasize restraint above all: when in doubt, remove rather than add.
+
+## 10. Voice & Tone
+The voice is quietly confident and editorial — the tone of a design gallery rather than a bank. It speaks with the assurance of a brand that has nothing to prove, letting restraint imply premium. There is no shouting, no urgency, no decorative flourish; the message lands through clarity and discipline. Like the monochrome palette, the language withholds: it says only what is needed, and it trusts the audience to read the sophistication in the negative space. The tone is cultured, deliberate, and self-assured.
+
+## 11. Brand Narrative
+Hyundai Card built its reputation as Korea's most design-celebrated credit-card brand by treating design as the product, not the packaging. The brand's central idea is that luxury is restraint: a monochrome world of black and white, anchored by a typeface it commissioned for itself — Youandi (유앤아이) — so that even the letters belong to the brand alone. Color is the resource it refuses to spend, turning absence into a signature. The DIVE platform extends this story from finance into culture and design, presenting the same monochrome, Youandi-led identity as a creative point of view rather than a transactional one. The narrative is consistent at every touchpoint: typography-as-identity, discipline-as-luxury, and the quiet confidence of a brand that lets what it leaves out speak as loudly as what it puts in.
+
+## 12. Principles
+- **Withhold color.** Black (#000000) on white (#FFFFFF) is the identity; color is deliberately held back.
+- **Typography is the brand.** Youandi (proprietary) carries the voice; let letterforms lead.
+- **Restraint as luxury.** Remove before you add; whitespace and contrast do the structural work.
+- **Flat and honest.** No shadows, no gradients, no chrome — a single clean plane.
+- **One soft gesture.** The 24px-radius, 48px pill button is the system's only concession to softness.
+- **Function over decoration.** The only accents (#F36464, #15A91F) exist to classify, never to brand.
+
+## 13. Personas
+- **The design-literate cardholder** — values craft and discretion over flash; reads the monochrome restraint as a marker of taste and expects the interface to feel like a curated space.
+- **The culture seeker on DIVE** — comes for design, art, and editorial content rather than banking, and responds to the gallery-like white-ground layout and Youandi typography.
+- **The premium minimalist** — wants the confidence of black-and-white sophistication, prefers whitespace to ornament, and trusts a brand that says less.
+
+## 14. States
+Observed component states are minimal by design — the system favors flat, high-contrast defaults over elaborate interactive feedback. From the captured values: the default surface is #FFFFFF ground with #000000 text; the primary button defaults to white fill, black text, 24px radius, 48px height; the header defaults to transparent. Hover, pressed, focus, disabled, and error states were not captured in the blob, so do not invent them — derive them qualitatively in keeping with the monochrome, flat philosophy (e.g., subtle black/white contrast shifts rather than colored state changes), and keep any feedback as restrained as the rest of the system. Functional content tags carry the red (#F36464) or green (#15A91F) accent to signal category, the closest thing to a "stateful" color in the system.
+
+## 15. Motion & Easing
+No motion or easing values were captured in the blob. In keeping with the brand's restraint, motion should be treated qualitatively: quiet, minimal, and unobtrusive — transitions that respect the gallery-like calm rather than drawing attention to themselves. The flat, monochrome system implies subtle, understated movement (gentle fades and clean transitions) over expressive or bouncy animation. Do not invent specific durations or curves; let any motion echo the same discipline as the visual identity — present only when it serves clarity, never as decoration.
+
+---
+**Verified:** 2026-06-01
+**Tier 1 sources:** https://www.hyundaicard.com (homepage / brand context — main site security-plugin-walled), https://dive.hyundaicard.com (live DOM inspect — monochrome surface, Youandi display fonts, Noto Sans KR body, button + tag values), https://newsroom.hyundaicard.com (brand-owned regional source)
+**Tier 2 sources:** getdesign.md/hyundaicard — NOT LISTED. refero — not listed. Note: hyundaicard.com main site is security-plugin-walled; DIVE (dive.hyundaicard.com) is the accessible brand surface and carries the same Youandi/monochrome identity.
+**Conflicts unresolved:** none
+**Proof:** see .verification.md (## Proof block)

package/skills/to-html/designs/ibm.DESIGN.md

@@ -0,0 +1,420 @@
+---
+id: ibm
+name: IBM
+country: US
+category: consumer-tech
+homepage: "https://www.ibm.com"
+primary_color: "#0f62fe"
+logo:
+  type: github
+  slug: IBM
+verified: "2026-05-15"
+omd: "0.1"
+ds:
+  name: Carbon
+  url: "https://carbondesignsystem.com"
+  type: system
+  description: IBM's open-source design system with React, Angular, Vue, and Web Components.
+  og_image: "https://carbondesignsystem.com/ogimage.png"
+---
+
+# Design System Inspiration of IBM
+
+## 1. Visual Theme & Atmosphere
+
+IBM's website is the digital embodiment of enterprise authority built on the Carbon Design System — a design language so methodically structured it reads like an engineering specification rendered as a webpage. The page operates on a stark duality: a bright white (`#ffffff`) canvas with near-black (`#161616`) text, punctuated by a single, unwavering accent — IBM Blue 60 (`#0f62fe`). This isn't playful tech-startup minimalism; it's corporate precision distilled into pixels. Every element exists within Carbon's rigid 2x grid, every color maps to a semantic token, every spacing value snaps to the 8px base unit.
+
+The IBM Plex type family is the system's backbone. IBM Plex Sans at light weight (300) for display headlines creates an unexpectedly airy, almost delicate quality at large sizes — a deliberate counterpoint to IBM's corporate gravity. At body sizes, regular weight (400) with 0.16px letter-spacing on 14px captions introduces the meticulous micro-tracking that makes Carbon text feel engineered rather than designed. IBM Plex Mono serves code, data, and technical labels, completing the family trinity alongside the rarely-surfaced IBM Plex Serif.
+
+What defines IBM's visual identity beyond monochrome-plus-blue is the reliance on Carbon's component token system. Every interactive state maps to a CSS custom property prefixed with `--cds-` (Carbon Design System). Buttons don't have hardcoded colors; they reference `--cds-button-primary`, `--cds-button-primary-hover`, `--cds-button-primary-active`. This tokenized architecture means the entire visual layer is a thin skin over a deeply systematic foundation — the design equivalent of a well-typed API.
+
+**Key Characteristics:**
+- IBM Plex Sans at weight 300 (Light) for display — corporate gravitas through typographic restraint
+- IBM Plex Mono for code and technical content with consistent 0.16px letter-spacing at small sizes
+- Single accent color: IBM Blue 60 (`#0f62fe`) — every interactive element, every CTA, every link
+- Carbon token system (`--cds-*`) driving all semantic colors, enabling theme-switching at the variable level
+- 8px spacing grid with strict adherence — no arbitrary values, everything aligns
+- Flat, borderless cards on `#f4f4f4` Gray 10 surface — depth through background-color layering, not shadows
+- Bottom-border inputs (not boxed) — the signature Carbon form pattern
+- 0px border-radius on primary buttons — unapologetically rectangular, no softening
+
+## 2. Color Palette & Roles
+
+### Primary
+- **IBM Blue 60** (`#0f62fe`): The singular interactive color. Primary buttons, links, focus states, active indicators. This is the only chromatic hue in the core UI palette.
+- **White** (`#ffffff`): Page background, card surfaces, button text on blue, `--cds-background`.
+- **Gray 100** (`#161616`): Primary text, headings, dark surface backgrounds, nav bar, footer. `--cds-text-primary`.
+
+### Neutral Scale (Gray Family)
+- **Gray 100** (`#161616`): Primary text, headings, dark UI chrome, footer background.
+- **Gray 90** (`#262626`): Secondary dark surfaces, hover states on dark backgrounds.
+- **Gray 80** (`#393939`): Tertiary dark, active states.
+- **Gray 70** (`#525252`): Secondary text, helper text, descriptions. `--cds-text-secondary`.
+- **Gray 60** (`#6f6f6f`): Placeholder text, disabled text.
+- **Gray 50** (`#8d8d8d`): Disabled icons, muted labels.
+- **Gray 30** (`#c6c6c6`): Borders, divider lines, input bottom-borders. `--cds-border-subtle`.
+- **Gray 20** (`#e0e0e0`): Subtle borders, card outlines.
+- **Gray 10** (`#f4f4f4`): Secondary surface background, card fills, alternating rows. `--cds-layer-01`.
+- **Gray 10 Hover** (`#e8e8e8`): Hover state for Gray 10 surfaces.
+
+### Interactive
+- **Blue 60** (`#0f62fe`): Primary interactive — buttons, links, focus. `--cds-link-primary`, `--cds-button-primary`.
+- **Blue 70** (`#0043ce`): Link hover state. `--cds-link-primary-hover`.
+- **Blue 80** (`#002d9c`): Active/pressed state for blue elements.
+- **Blue 10** (`#edf5ff`): Blue tint surface, selected row background.
+- **Focus Blue** (`#0f62fe`): `--cds-focus` — 2px inset border on focused elements.
+- **Focus Inset** (`#ffffff`): `--cds-focus-inset` — white inner ring for focus on dark backgrounds.
+
+### Support & Status
+- **Red 60** (`#da1e28`): Error, danger. `--cds-support-error`.
+- **Green 50** (`#24a148`): Success. `--cds-support-success`.
+- **Yellow 30** (`#f1c21b`): Warning. `--cds-support-warning`.
+- **Blue 60** (`#0f62fe`): Informational. `--cds-support-info`.
+
+### Dark Theme (Gray 100 Theme)
+- **Background**: Gray 100 (`#161616`). `--cds-background`.
+- **Layer 01**: Gray 90 (`#262626`). Card and container surfaces.
+- **Layer 02**: Gray 80 (`#393939`). Elevated surfaces.
+- **Text Primary**: Gray 10 (`#f4f4f4`). `--cds-text-primary`.
+- **Text Secondary**: Gray 30 (`#c6c6c6`). `--cds-text-secondary`.
+- **Border Subtle**: Gray 80 (`#393939`). `--cds-border-subtle`.
+- **Interactive**: Blue 40 (`#78a9ff`). Links and interactive elements shift lighter for contrast.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `IBM Plex Sans`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
+- **Monospace**: `IBM Plex Mono`, with fallbacks: `Menlo, Courier, monospace`
+- **Serif** (limited use): `IBM Plex Serif`, for editorial/expressive contexts
+- **Icon Font**: `ibm_icons` — proprietary icon glyphs at 20px
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | Maximum impact, light weight for elegance |
+| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | Secondary hero, responsive fallback |
+| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | Expressive heading |
+| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | Section headings |
+| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | Sub-section titles |
+| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | Card titles, feature headers |
+| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | Lighter card headings |
+| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Standard reading text |
+| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | Emphasized body, labels |
+| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | Compact body, captions |
+| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | Bold captions, nav items |
+| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | Metadata, timestamps |
+| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | Inline code, terminal |
+| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Code blocks |
+| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Hero mono decorative |
+
+### Principles
+- **Light weight at display sizes**: Carbon's expressive type set uses weight 300 (Light) at 42px+. This creates a distinctive tension — the content speaks with corporate authority while the letterforms whisper with typographic lightness.
+- **Micro-tracking at small sizes**: 0.16px letter-spacing at 14px and 0.32px at 12px. These seemingly negligible values are Carbon's secret weapon for readability at compact sizes — they open up the tight IBM Plex letterforms just enough.
+- **Three functional weights**: 300 (display/expressive), 400 (body/reading), 600 (emphasis/UI labels). Weight 700 is intentionally absent from the production type scale.
+- **Productive vs. Expressive**: Productive sets use tighter line-heights (1.29) for dense UI. Expressive sets breathe more (1.40-1.50) for marketing and editorial content.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Blue)**
+- Background: `#0f62fe` (Blue 60) → `--cds-button-primary`
+- Text: `#ffffff` (White)
+- Padding: 14px 63px 14px 15px (asymmetric — room for trailing icon)
+- Border: 1px solid transparent
+- Border-radius: 0px (sharp rectangle — the Carbon signature)
+- Height: 48px (default), 40px (compact), 64px (expressive)
+- Hover: `#0353e9` (Blue 60 Hover) → `--cds-button-primary-hover`
+- Active: `#002d9c` (Blue 80) → `--cds-button-primary-active`
+- Focus: `2px solid #0f62fe` inset + `1px solid #ffffff` inner
+
+**Secondary Button (Gray)**
+- Background: `#393939` (Gray 80)
+- Text: `#ffffff`
+- Hover: `#4c4c4c` (Gray 70)
+- Active: `#6f6f6f` (Gray 60)
+- Same padding/radius as primary
+
+**Tertiary Button (Ghost Blue)**
+- Background: transparent
+- Text: `#0f62fe` (Blue 60)
+- Border: 1px solid `#0f62fe`
+- Hover: `#0353e9` text + Blue 10 background tint
+- Border-radius: 0px
+
+**Ghost Button**
+- Background: transparent
+- Text: `#0f62fe` (Blue 60)
+- Padding: 14px 16px
+- Border: none
+- Hover: `#e8e8e8` background tint
+
+**Danger Button**
+- Background: `#da1e28` (Red 60)
+- Text: `#ffffff`
+- Hover: `#b81921` (Red 70)
+
+### Cards & Containers
+- Background: `#ffffff` on white theme, `#f4f4f4` (Gray 10) for elevated cards
+- Border: none (flat design — no border or shadow on most cards)
+- Border-radius: 0px (matching the rectangular button aesthetic)
+- Hover: background shifts to `#e8e8e8` (Gray 10 Hover) for clickable cards
+- Content padding: 16px
+- Separation: background-color layering (white → gray 10 → white) rather than shadows
+
+### Inputs & Forms
+- Background: `#f4f4f4` (Gray 10) — `--cds-field`
+- Text: `#161616` (Gray 100)
+- Padding: 0px 16px (horizontal only)
+- Height: 40px (default), 48px (large)
+- Border: none on sides/top — `2px solid transparent` bottom
+- Bottom-border active: `2px solid #161616` (Gray 100)
+- Focus: `2px solid #0f62fe` (Blue 60) bottom-border — `--cds-focus`
+- Error: `2px solid #da1e28` (Red 60) bottom-border
+- Label: 12px IBM Plex Sans, 0.32px letter-spacing, Gray 70
+- Helper text: 12px, Gray 60
+- Placeholder: Gray 60 (`#6f6f6f`)
+- Border-radius: 0px (top) — inputs are sharp-cornered
+
+### Navigation
+- Background: `#161616` (Gray 100) — full-width dark masthead
+- Height: 48px
+- Logo: IBM 8-bar logo, white on dark, left-aligned
+- Links: 14px IBM Plex Sans, weight 400, `#c6c6c6` (Gray 30) default
+- Link hover: `#ffffff` text
+- Active link: `#ffffff` with bottom-border indicator
+- Platform switcher: left-aligned horizontal tabs
+- Search: icon-triggered slide-out search field
+- Mobile: hamburger with left-sliding panel
+
+### Links
+- Default: `#0f62fe` (Blue 60) with no underline
+- Hover: `#0043ce` (Blue 70) with underline
+- Visited: remains Blue 60 (no visited state change)
+- Inline links: underlined by default in body copy
+
+### Distinctive Components
+
+**Content Block (Hero/Feature)**
+- Full-width alternating white/gray-10 background bands
+- Headline left-aligned with 60px or 48px display type
+- CTA as blue primary button with arrow icon
+- Image/illustration right-aligned or below on mobile
+
+**Tile (Clickable Card)**
+- Background: `#f4f4f4` or `#ffffff`
+- Full-width bottom-border or background-shift hover
+- Arrow icon bottom-right on hover
+- No shadow — flatness is the identity
+
+**Tag / Label**
+- Background: contextual color at 10% opacity (e.g., Blue 10, Red 10)
+- Text: corresponding 60-grade color
+- Padding: 4px 8px
+- Border-radius: 24px (pill — exception to the 0px rule)
+- Font: 12px weight 400
+
+**Notification Banner**
+- Full-width bar, typically Blue 60 or Gray 100 background
+- White text, 14px
+- Close/dismiss icon right-aligned
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px (Carbon 2x grid)
+- Component spacing scale: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
+- Layout spacing scale: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px
+- Mini unit: 8px (smallest usable spacing)
+- Padding within components: typically 16px
+- Gap between cards/tiles: 1px (hairline) or 16px (standard)
+
+### Grid & Container
+- 16-column grid (Carbon's 2x grid system)
+- Max content width: 1584px (max breakpoint)
+- Column gutters: 32px (16px on mobile)
+- Margin: 16px (mobile), 32px (tablet+)
+- Content typically spans 8-12 columns for readable line lengths
+- Full-bleed sections alternate with contained content
+
+### Whitespace Philosophy
+- **Functional density**: Carbon favors productive density over expansive whitespace. Sections are tightly packed compared to consumer design systems — this reflects IBM's enterprise DNA.
+- **Background-color zoning**: Instead of massive padding between sections, IBM uses alternating background colors (white → gray 10 → white) to create visual separation with minimal vertical space.
+- **Consistent 48px rhythm**: Major section transitions use 48px vertical spacing. Hero sections may use 80px–96px.
+
+### Border Radius Scale
+- **0px**: Primary buttons, inputs, tiles, cards — the dominant treatment. Carbon is fundamentally rectangular.
+- **2px**: Occasionally on small interactive elements (tags)
+- **24px**: Tags/labels (pill shape — the sole rounded exception)
+- **50%**: Avatar circles, icon containers
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, `#ffffff` background | Default page surface |
+| Layer 01 | No shadow, `#f4f4f4` background | Cards, tiles, alternating sections |
+| Layer 02 | No shadow, `#e0e0e0` background | Elevated panels within Layer 01 |
+| Raised | `0 2px 6px rgba(0,0,0,0.3)` | Dropdowns, tooltips, overflow menus |
+| Overlay | `0 2px 6px rgba(0,0,0,0.3)` + dark scrim | Modal dialogs, side panels |
+| Focus | `2px solid #0f62fe` inset + `1px solid #ffffff` | Keyboard focus ring |
+| Bottom-border | `2px solid #161616` on bottom edge | Active input, active tab indicator |
+
+**Shadow Philosophy**: Carbon is deliberately shadow-averse. IBM achieves depth primarily through background-color layering — stacking surfaces of progressively darker grays rather than adding box-shadows. This creates a flat, print-inspired aesthetic where hierarchy is communicated through color value, not simulated light. Shadows are reserved exclusively for floating elements (dropdowns, tooltips, modals) where the element genuinely overlaps content. This restraint gives the rare shadow meaningful impact — when something floats in Carbon, it matters.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use IBM Plex Sans at weight 300 for display sizes (42px+) — the lightness is intentional
+- Apply 0.16px letter-spacing on 14px body text and 0.32px on 12px captions
+- Use 0px border-radius on buttons, inputs, cards, and tiles — rectangles are the system
+- Reference `--cds-*` token names when implementing (e.g., `--cds-button-primary`, `--cds-text-primary`)
+- Use background-color layering (white → gray 10 → gray 20) for depth instead of shadows
+- Use bottom-border (not box) for input field indicators
+- Maintain the 48px default button height and asymmetric padding for icon accommodation
+- Apply Blue 60 (`#0f62fe`) as the sole accent — one blue to rule them all
+
+### Don't
+- Don't round button corners — 0px radius is the Carbon identity
+- Don't use shadows on cards or tiles — flatness is the point
+- Don't introduce additional accent colors — IBM's system is monochromatic + blue
+- Don't use weight 700 (Bold) — the scale stops at 600 (Semibold)
+- Don't add letter-spacing to display-size text — tracking is only for 14px and below
+- Don't box inputs with full borders — Carbon inputs use bottom-border only
+- Don't use gradient backgrounds — IBM's surfaces are flat, solid colors
+- Don't deviate from the 8px spacing grid — every value should be divisible by 8 (with 2px and 4px for micro-adjustments)
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small (sm) | 320px | Single column, hamburger nav, 16px margins |
+| Medium (md) | 672px | 2-column grids begin, expanded content |
+| Large (lg) | 1056px | Full navigation visible, 3-4 column grids |
+| X-Large (xlg) | 1312px | Maximum content density, wide layouts |
+| Max | 1584px | Maximum content width, centered with margins |
+
+### Touch Targets
+- Button height: 48px default, minimum 40px (compact)
+- Navigation links: 48px row height for touch
+- Input height: 40px default, 48px large
+- Icon buttons: 48px square touch target
+- Mobile menu items: full-width 48px rows
+
+### Collapsing Strategy
+- Hero: 60px display → 42px → 32px heading as viewport narrows
+- Navigation: full horizontal masthead → hamburger with slide-out panel
+- Grid: 4-column → 2-column → single column
+- Tiles/cards: horizontal grid → vertical stack
+- Images: maintain aspect ratio, max-width 100%
+- Footer: multi-column link groups → stacked single column
+- Section padding: 48px → 32px → 16px
+
+### Image Behavior
+- Responsive images with `max-width: 100%`
+- Product illustrations scale proportionally
+- Hero images may shift from side-by-side to stacked below
+- Data visualizations maintain aspect ratio with horizontal scroll on mobile
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: IBM Blue 60 (`#0f62fe`)
+- Background: White (`#ffffff`)
+- Heading text: Gray 100 (`#161616`)
+- Body text: Gray 100 (`#161616`)
+- Secondary text: Gray 70 (`#525252`)
+- Surface/Card: Gray 10 (`#f4f4f4`)
+- Border: Gray 30 (`#c6c6c6`)
+- Link: Blue 60 (`#0f62fe`)
+- Link hover: Blue 70 (`#0043ce`)
+- Focus ring: Blue 60 (`#0f62fe`)
+- Error: Red 60 (`#da1e28`)
+- Success: Green 50 (`#24a148`)
+
+### Example Component Prompts
+- "Create a hero section on white background. Headline at 60px IBM Plex Sans weight 300, line-height 1.17, color #161616. Subtitle at 16px weight 400, line-height 1.50, color #525252, max-width 640px. Blue CTA button (#0f62fe background, #ffffff text, 0px border-radius, 48px height, 14px 63px 14px 15px padding)."
+- "Design a card tile: #f4f4f4 background, 0px border-radius, 16px padding. Title at 20px IBM Plex Sans weight 600, line-height 1.40, color #161616. Body at 14px weight 400, letter-spacing 0.16px, line-height 1.29, color #525252. Hover: background shifts to #e8e8e8."
+- "Build a form field: #f4f4f4 background, 0px border-radius, 40px height, 16px horizontal padding. Label above at 12px weight 400, letter-spacing 0.32px, color #525252. Bottom-border: 2px solid transparent default, 2px solid #0f62fe on focus. Placeholder: #6f6f6f."
+- "Create a dark navigation bar: #161616 background, 48px height. IBM logo white left-aligned. Links at 14px IBM Plex Sans weight 400, color #c6c6c6. Hover: #ffffff text. Active: #ffffff with 2px bottom border."
+- "Build a tag component: Blue 10 (#edf5ff) background, Blue 60 (#0f62fe) text, 4px 8px padding, 24px border-radius, 12px IBM Plex Sans weight 400."
+
+### Iteration Guide
+1. Always use 0px border-radius on buttons, inputs, and cards — this is non-negotiable in Carbon
+2. Letter-spacing only at small sizes: 0.16px at 14px, 0.32px at 12px — never on display text
+3. Three weights: 300 (display), 400 (body), 600 (emphasis) — no bold
+4. Blue 60 is the only accent color — do not introduce secondary accent hues
+5. Depth comes from background-color layering (white → #f4f4f4 → #e0e0e0), not shadows
+6. Inputs have bottom-border only, never fully boxed
+7. Use `--cds-` prefix for token naming to stay Carbon-compatible
+8. 48px is the universal interactive element height
+
+## 10. Voice & Tone
+
+IBM's voice is **enterprise-technical and Carbon-systematic.** Carbon Design System discipline shows up in every surface — uppercase labels, IBM Plex font, 0px-radius buttons, IBM Blue `#0f62fe` primary. The voice is closer to a research lab + enterprise contract than to consumer marketing.
+
+| Context | Tone |
+|---|---|
+| CTA | Verb. "Get started", "Try free", "Talk to sales" |
+| Marketing | Enterprise-fluent. SOC 2 / FedRAMP / ISO references |
+| Documentation | Carbon-component-named; deep-linked component docs |
+| Error | Specific. "Authentication failed (HTTP 401). Check API key." |
+
+**Voice samples**
+- Marketing CTA (KR): *"무료로 시작하기"* <!-- verified: ibm.com/kr-ko 2026-05 -->
+
+**Forbidden phrases.** "Revolutionary AI" without specifics. Casual emoji.
+
+## 11. Brand Narrative
+
+IBM was founded **June 16 1911** as the **Computing-Tabulating-Recording Company (CTR)** by **Charles Ranlett Flint** — a Wall Street financier who **amalgamated four companies** (Tabulating Machine Company, International Time Recording Company, Computing Scale Company of America, Bundy Manufacturing Company) ([Charles Ranlett Flint — Wikipedia](https://en.wikipedia.org/wiki/Charles_Ranlett_Flint), [IBM — The origins of IBM](https://www.ibm.com/history/ctr-and-ibm)). **Renamed "International Business Machines" 1924** under **Thomas J. Watson Sr.**, who had joined CTR in 1914. The contemporary brand identity was established through **Paul Rand**, hired by **Thomas J. Watson Jr. in 1956** — Rand replaced Beton Bold with **City Medium** and created the iconic 8-bar (later 13-bar) striped IBM logo, with a directive to "**herald a new era of IBM while also communicating continuity**" ([History of IBM logo — Hatchwise](https://www.hatchwise.com/resources/the-history-of-the-ibm-logo)). The Rand→**Eddy Opara** design legacy continues today through the **Carbon Design System** (open-sourced 2018, [carbondesignsystem.com](https://carbondesignsystem.com/)) — IBM Plex font, IBM Blue `#0f62fe`, 0px-radius buttons. Carbon makes IBM one of the few enterprise vendors with a publicly documented design system that's also adopted by external teams. **In 2024-2025 IBM acquired HashiCorp** ($6.4B announced April 24 2024, **closed February 27 2025**), folding HashiCorp's products into IBM's hybrid cloud strategy.
+
+## 12. Principles
+
+1. **Carbon is the system.** *UI implication:* every component has a Carbon spec — read carbondesignsystem.com before deviating.
+2. **0px radius is intentional.** Carbon's defining aesthetic choice. *UI implication:* never round corners on Carbon-spec elements.
+3. **IBM Plex is the type voice.** Sans / Mono / Serif variants. *UI implication:* don't substitute system fonts; Plex is the brand register.
+4. **48px universal interactive height.** *UI implication:* all clickable elements meet 48px tap target.
+5. **`#0f62fe` IBM Blue is THE accent.** *UI implication:* other Carbon tokens carry semantic meaning; IBM Blue is for "primary action" only.
+
+## 13. Personas
+
+*Personas are fictional archetypes informed by IBM user segments (enterprise IT architects, watsonx AI/ML platform users, regulated-industry compliance), not individual people.*
+
+**Catherine Liu, 47, Toronto.** Principal architect at a global insurance company. IBM Cloud + watsonx the chosen path for compliant AI deployment.
+
+**Hiroshi Tanaka, 52, Tokyo.** CIO at multinational logistics. IBM partnership for hybrid cloud modernization.
+
+**Aisha Khan, 35, Dubai.** Senior consultant at IBM Consulting. Translates client needs into Carbon-compliant deliverables.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no resources)** | "Create your first resource" Carbon Button.Primary |
+| **Empty (no data)** | Carbon EmptyState component pattern + CTA |
+| **Loading** | Carbon InlineLoading or Loading component, never custom |
+| **Error** | Carbon Notification.error variant; persistent until dismissed |
+| **Success** | Carbon Notification.success; auto-dismiss 4s |
+| **Skeleton** | Carbon SkeletonText / SkeletonPlaceholder components |
+| **Disabled** | Carbon disabled state — explicit visual contrast (not just opacity) |
+| **Loading (long)** | Carbon ProgressBar with explicit ETA |
+
+## 15. Motion & Easing
+
+Carbon Motion tokens: `productive` (110ms / 240ms / 400ms), `expressive` (175ms / 240ms / 400ms / 700ms). Curves: `standard / entrance / exit / expressive`.
+
+**Motion rules.**
+1. Carbon productive curves for utility motions
+2. Carbon expressive curves for marketing
+3. `prefers-reduced-motion: reduce` collapses to instant
+
+---
+
+**Verified:** 2026-05-08 (omd:migrate run 28 — Apple-tier)
+**Tier 1 sources:** ibm.com/us-en home + /products (live DOM via playwright — Primary `#0f62fe` IBM Blue 0px / asymmetric 14-15×15-16 / 48px / 14px·400; triple-confirmed against Carbon DS `$blue-60` token ✓).
+**Tier 1 (DS-official):** carbondesignsystem.com — Carbon Design System open-source spec, the rare case where a brand publishes its own DS as authoritative.
+**Tier 2 (Philosophy/history):** Wikipedia (Charles Flint, IBM, CTR, History of IBM), IBM corporate history (`ibm.com/history/ctr-and-ibm`), Hatchwise IBM logo timeline.
+**Style ref:** `stripe`. **Conflicts unresolved:** none.