zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/ikala/DESIGN.md

@@ -1,400 +0,0 @@
----
-id: ikala
-name: iKala
-country: TW
-category: developer-tools
-homepage: "https://ikala.ai"
-primary_color: "#061232"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=ikala.ai&sz=128"
-verified: "2026-06-08"
-added: "2026-06-08"
-omd: "0.1"
-tokens:
-  source: live-extract
-  extracted: "2026-06-08"
-  components_harvested: true
-  note: "primary = deep navy CTA fill #061232 (live getComputedStyle on 'Get in Touch'); brand-blue accent #3a82dd for links/nav; family Noto Sans TC (Taiwan-localized)"
-  colors:
-    primary: "#061232"
-    primary-deep: "#031234"
-    accent-blue: "#3a82dd"
-    accent-blue-strong: "#4770df"
-    accent-blue-deep: "#2168c2"
-    link: "#2563eb"
-    canvas: "#ffffff"
-    heading: "#333333"
-    body: "#525151"
-    muted: "#6b7280"
-    faint: "#999999"
-    on-primary: "#ffffff"
-    hairline: "#edf1f7"
-    ink: "#000000"
-  typography:
-    family: { sans: "Noto Sans TC", fallback: "Noto Sans, sans-serif" }
-    display-hero: { size: 84, weight: 800, lineHeight: 1.14, tracking: -3.49, use: "Hero headline, full-bleed over imagery, white on dark" }
-    section:      { size: 36, weight: 600, lineHeight: 1.40, tracking: -1.50, use: "Section titles, e.g. solution headlines" }
-    subheading:   { size: 24, weight: 600, lineHeight: 1.00, tracking: -1.00, use: "Card / sub-section heads, industry labels" }
-    body-lg:      { size: 20, weight: 500, lineHeight: 1.40, use: "Intro paragraphs, lead copy" }
-    body:         { size: 18, weight: 400, lineHeight: 1.55, use: "Standard reading text, nav links" }
-    button:       { size: 18, weight: 500, lineHeight: 1.00, use: "Primary button label" }
-    caption:      { size: 15, weight: 400, use: "Small labels, footer, metadata" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 30, xxl: 48, section: 80 }
-  rounded: { sm: 4, md: 8, lg: 30, full: 9999 }
-  shadow:
-    ambient: "rgba(0,0,0,0.04) 0px 0px 10px 0px"
-    standard: "rgba(0,0,0,0.10) 0px 0px 20px 0px"
-    elevated: "rgba(0,0,0,0.19) 0px 0px 10px 0px"
-  components:
-    button-primary: { type: button, bg: "#061232", fg: "#ffffff", radius: "8px", padding: "20px 30px", height: "58px", font: "18px / 500", use: "Primary CTA (Get in Touch, Contact)" }
-    button-ghost: { type: button, bg: "#ffffff", fg: "#061232", radius: "8px", font: "20px / 500", use: "Secondary CTA over dark/imagery (Try it Now)" }
-    nav-link: { type: tab, fg: "#333333", font: "18px / 700", active: "#3a82dd brand-blue", use: "Horizontal nav links on white sticky header" }
-    card: { type: card, bg: "#ffffff", border: "1px solid #edf1f7", radius: "8px", shadow: "rgba(0,0,0,0.04) 0px 0px 10px 0px", hover: "rgba(0,0,0,0.19) 0px 0px 10px 0px", use: "Feature/industry surface cards" }
-    section-title: { type: badge, fg: "#333333", font: "36px / 600", use: "Section/feature titles, tight -1.5px tracking" }
-    link-inline: { type: badge, fg: "#2563eb", font: "18px / 400", use: "Inline body-copy hyperlinks, weight 400-700" }
----
-
-# Design System Inspiration of iKala
-
-## 1. Visual Theme & Atmosphere
-
-iKala's website presents itself as a clean, corporate-confident B2B AI and martech platform built for the Asia-Pacific enterprise buyer. The page opens on a pure white canvas (`#ffffff`) with a restrained, professional palette: deep navy (`#061232`) anchors the primary calls-to-action, a clear corporate blue (`#3a82dd`) carries links and active navigation states, and a soft warm gray (`#525151`) handles body copy. The result feels measured and trustworthy rather than flashy -- the aesthetic of a regional AI leader that sells to manufacturing, retail, and finance buyers who value credibility over spectacle. There is no neon, no gradient-overload, no dark-mode drama on the marketing surface; the design earns trust through clarity.
-
-The defining typographic choice is `Noto Sans TC` -- Google's Traditional-Chinese-optimized humanist sans -- set as the primary family ahead of the Latin `Noto Sans` fallback. This is a deliberate, market-honest decision: iKala is a Taiwanese company serving a bilingual (Traditional Chinese + English) audience, and a font that renders Han characters and Latin glyphs with equal authority signals that the brand is genuinely local, not a Western template translated after the fact. The hero runs enormous -- 84px at weight 800 with aggressively tight `-3.49px` letter-spacing -- giving the headline a dense, billboard-grade presence that reads as ambition and scale. Below the hero, section titles step down to 36px weight 600, and the contrast between the heavy hero and the calmer mid-weight sections creates a clear top-down hierarchy.
-
-The atmosphere is reinforced by soft, diffuse elevation. Rather than hard drop shadows, iKala uses low-alpha, zero-offset, blurred shadows (`rgba(0,0,0,0.04)` to `rgba(0,0,0,0.19)` at `0px 0px 10-20px`) that lift cards gently off the white field like a soft glow. Combined with an 8px workhorse radius, the surface feels modern and approachable -- enterprise-grade without being cold.
-
-**Key Characteristics:**
-- `Noto Sans TC` as the primary family -- a Taiwan-localized humanist sans that renders Han + Latin with equal weight
-- Deep navy (`#061232`) as the primary CTA anchor instead of a bright accent -- gravitas over hype
-- Corporate blue (`#3a82dd`) for links and active nav -- the brand's interactive signal
-- Enormous weight-800 hero (84px, `-3.49px` tracking) stepping down to calm weight-600 sections
-- Pure white canvas (`#ffffff`) with warm-gray body text (`#525151`) -- clean, readable, B2B-credible
-- Soft diffuse glow shadows (zero-offset, low alpha) rather than directional drop shadows
-- 8px workhorse radius with an occasional 30px pill for chips/badges
-- Restrained palette: navy + blue + grays, no decorative gradients on the marketing chrome
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Deep Navy** (`#061232`): Primary brand color and primary CTA background ("Get in Touch", "Contact"). A near-black blue that signals enterprise gravitas and anchors the entire system. Measured live as the fill of the hero CTA button.
-- **Primary Deep** (`#031234`): The darkest navy variant, used for the densest dark fields and footer-grade backgrounds -- a hair deeper than the primary.
-- **Pure White** (`#ffffff`): Page background, card surfaces, button text on navy, hero text over imagery.
-
-### Brand Blue (Interactive)
-- **Accent Blue** (`#3a82dd`): The brand's interactive signal -- active navigation links, inline link hovers, highlighted UI. Measured live as the active nav-link color.
-- **Accent Blue Strong** (`#4770df`): A stronger, more saturated blue for emphasized links and section accents.
-- **Accent Blue Deep** (`#2168c2`): A deeper blue for hover/pressed states and high-contrast accents on light backgrounds.
-- **Link Blue** (`#2563eb`): Standard inline link color for body-copy hyperlinks.
-
-### Neutral Scale
-- **Heading** (`#333333`): Section and card heading color -- a soft near-black, warmer and less harsh than pure black.
-- **Body** (`#525151`): Primary body text color (set on `body`). A warm mid-gray tuned for comfortable long-form reading.
-- **Muted** (`#6b7280`): Secondary text, captions, supporting metadata.
-- **Faint** (`#999999`): Tertiary labels, disabled-adjacent text, fine print.
-- **Ink** (`#000000`): Used sparingly for maximum-contrast UI chrome and certain icon fills.
-
-### Surface & Borders
-- **Hairline** (`#edf1f7`): Soft blue-tinted divider and border color for cards, sections, and table rows.
-
-### Shadow Colors
-- **Shadow Soft** (`rgba(0,0,0,0.04)`): Minimal ambient glow for light card lift.
-- **Shadow Standard** (`rgba(0,0,0,0.10)`): Standard diffuse elevation for content panels.
-- **Shadow Strong** (`rgba(0,0,0,0.19)`): Deeper diffuse glow for hovered/featured cards.
-
-## 3. Typography Rules
-
-### Font Family
-- **Primary**: `Noto Sans TC`, with fallback chain `Noto Sans, sans-serif`
-- **Rationale**: Traditional-Chinese-first family ensures Han and Latin glyphs share a consistent humanist skeleton -- essential for a bilingual Taiwanese B2B audience.
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Hero | Noto Sans TC | 84px (5.25rem) | 800 | 1.14 | -3.49px | Full-bleed hero, white over imagery |
-| Section Heading | Noto Sans TC | 36px (2.25rem) | 600 | 1.40 | -1.50px | Solution/feature section titles, `#333333` |
-| Sub-heading | Noto Sans TC | 24px (1.50rem) | 600 | 1.00 | -1.00px | Card heads, industry labels |
-| Body Large | Noto Sans TC | 20px (1.25rem) | 500 | 1.40 | normal | Lead paragraphs, intro copy |
-| Body | Noto Sans TC | 18px (1.13rem) | 400 | 1.55 | normal | Standard reading text, nav links |
-| Button | Noto Sans TC | 18px (1.13rem) | 500 | 1.00 | normal | Primary button label |
-| Nav Active | Noto Sans TC | 18px (1.13rem) | 700 | normal | normal | Active nav link, `#3a82dd` |
-| Caption | Noto Sans TC | 15px (0.94rem) | 400 | normal | normal | Footer, metadata, fine labels |
-
-### Principles
-- **Heavy hero, calm body**: The weight-800 / 84px hero is the single loud moment. Everything below settles to weight 400-600, so the page reads as confident, not shouty.
-- **Progressive negative tracking**: Letter-spacing tightens dramatically at display sizes (`-3.49px` at 84px, `-1.5px` at 36px, `-1.0px` at 24px) and relaxes to normal at body sizes. Tight tracking gives large headlines a dense, engineered presence.
-- **Warm grays, not black**: Headings are `#333333` and body is `#525151` -- both warm near-blacks rather than pure `#000000`, which keeps long passages comfortable.
-- **Bilingual-first metrics**: Line-heights run generous at body sizes (1.55) to accommodate the taller rhythm of mixed Han + Latin text.
-- **Weight as hierarchy**: 800 for hero, 600-700 for headings and active nav, 500 for buttons and lead copy, 400 for body. Weight, not size alone, carries the structure.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary (Navy)**
-- Background: `#061232`
-- Text: `#ffffff`
-- Padding: 20px 30px
-- Radius: 8px
-- Height: ~58px
-- Font: 18px Noto Sans TC weight 500
-- Use: Primary CTA ("Get in Touch", "Contact")
-
-**Ghost / Light**
-- Background: `#ffffff`
-- Text: `#061232`
-- Radius: 8px
-- Font: 20px Noto Sans TC weight 500
-- Use: Secondary CTA over dark/imagery ("Try it Now")
-
-**Text / Inline Link**
-- Background: transparent
-- Text: `#4770df` or `#2563eb`
-- Font: 18-24px weight 400-700
-- Use: Inline navigation, "learn more" affordances
-
-### Cards & Containers
-- Background: `#ffffff`
-- Border: `1px solid #edf1f7` (hairline) where present
-- Radius: 8px (standard), 4px (tight chips)
-- Shadow (ambient): `rgba(0,0,0,0.04) 0px 0px 10px 0px`
-- Shadow (standard): `rgba(0,0,0,0.10) 0px 0px 20px 0px`
-- Hover: shadow deepens toward `rgba(0,0,0,0.19) 0px 0px 10px 0px`
-
-### Badges / Chips / Pills
-- Radius: 30px (pill) for category chips and tags
-- Background: `#ffffff` or light tint
-- Text: `#333333` heading-gray or `#3a82dd` for active
-- Font: 15px weight 400-500
-
-### Navigation
-- Clean horizontal nav on white background
-- Brand logotype left-aligned
-- Links: Noto Sans TC 18px weight 700
-- Active / hover link color: `#3a82dd` (brand blue)
-- CTA: navy "Contact" / "Get in Touch" button right-aligned
-- Sticky header on white with soft separation from content
-
-### Section Titles
-- Font: 36px Noto Sans TC weight 600
-- Color: `#333333`
-- Tracking: `-1.50px` (tight)
-- Often centered above feature/industry grids
-
-### Inline Links
-- Color: `#2563eb` (link blue) or `#4770df` (strong)
-- Weight: 400-700 depending on emphasis
-
----
-
-**Verified:** 2026-06-08 (omd:add-reference — Tier 1 live inspect)
-**Tier 1 sources:** https://ikala.ai, https://ikala.tw (live getComputedStyle on body, hero h1, section h2/h3, primary CTA "Get in Touch", nav links — 8+ real samples, 2026-06-08)
-**Method:** playwright headless (`--disable-http2`), getComputedStyle on live DOM, rgb()→hex conversion.
-**`.verification.md`:** `web/references/ikala/.verification.md`
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px
-- Scale: 4px, 8px, 12px, 16px, 24px, 30px, 48px, 80px
-- Notable: 30px appears as a recurring rhythm unit (button horizontal padding, pill radius), and section gaps run generous at ~80px to give the white canvas room to breathe.
-
-### Grid & Container
-- Centered max-width content column with generous side gutters
-- Hero: full-bleed image or dark field with the 84px headline overlaid, white text
-- Feature/industry sections: multi-column card grids (Manufacturing, Retail, Finance, etc.)
-- Alternating white sections with occasional dark navy bands for emphasis
-
-### Whitespace Philosophy
-- **Generous and calm**: The white canvas dominates. Sections are separated by large vertical gaps (~80px) so each block reads as a distinct, scannable unit -- appropriate for an enterprise buyer skimming for relevance.
-- **Hero as the anchor**: The oversized hero claims the top of the page; everything below is deliberately quieter, creating a clear visual descent from headline to detail.
-- **Card rhythm**: Industry and solution cards sit on the white field with soft glow shadows, evenly spaced, so the eye moves predictably across the grid.
-
-### Border Radius Scale
-- Tight (4px): chips, small inline elements
-- Standard (8px): buttons, cards, panels -- the workhorse
-- Pill (30px): category chips, tags, rounded badges
-- Full (9999px): circular avatars/icons where used
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Page background, inline text |
-| Ambient (Level 1) | `rgba(0,0,0,0.04) 0px 0px 10px 0px` | Subtle card lift, resting cards |
-| Standard (Level 2) | `rgba(0,0,0,0.10) 0px 0px 20px 0px` | Content panels, feature cards |
-| Strong (Level 3) | `rgba(0,0,0,0.19) 0px 0px 10px 0px` | Hovered / featured cards, popovers |
-
-**Shadow Philosophy**: iKala's elevation is built on diffuse glow rather than directional drop. Every measured shadow uses a `0px 0px` offset -- no x/y displacement -- so the shadow radiates evenly around the element like a soft halo. The alpha steps (0.04 → 0.10 → 0.19) are the entire elevation language: low and subtle at rest, deepening on interaction. There is no colored or brand-tinted shadow; the system keeps shadows neutral black-on-white so the navy-and-blue palette stays unambiguous. The effect is clean and contemporary -- elements feel lifted but never heavy.
-
-### Decorative Depth
-- Dark navy (`#061232` / `#031234`) hero and accent bands create depth through color contrast against the white field
-- Soft hairline (`#edf1f7`) dividers separate dense sections without hard lines
-
-## 7. Do's and Don'ts (overview)
-
-A condensed version lives here; the full Do's and Don'ts are enumerated in §16.
-- **Do** use navy (`#061232`) for primary CTAs and `#3a82dd` blue for interactive links.
-- **Do** keep the white canvas dominant and let sections breathe.
-- **Don't** introduce decorative gradients or neon on marketing chrome.
-- **Don't** swap `Noto Sans TC` for a Latin-only family -- the bilingual rendering is the point.
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <640px | Single column, hero compresses from 84px toward ~40-48px, stacked cards |
-| Tablet | 640-1024px | 2-column grids, moderate gutters |
-| Desktop | 1024-1440px | Full multi-column feature/industry grids |
-| Large Desktop | >1440px | Centered content with wide margins, hero at full scale |
-
-### Touch Targets
-- Primary buttons run ~58px tall with 20px vertical padding -- comfortable tap targets
-- Nav links at 18px with generous spacing
-- Pill chips maintain adequate horizontal padding for tapping
-
-### Collapsing Strategy
-- Hero: 84px display compresses sharply on mobile; weight 800 retained, tracking relaxes as size drops
-- Navigation: horizontal links + navy CTA → hamburger toggle on mobile
-- Industry/feature cards: multi-column → 2-column → single stacked column
-- Section gaps: ~80px → reduced on mobile to keep scroll length reasonable
-
-### Image Behavior
-- Hero imagery is full-bleed with white headline overlaid; maintains aspect and crop across sizes
-- Card thumbnails maintain 8px radius and soft glow shadow at all sizes
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary CTA: Deep Navy (`#061232`)
-- CTA text: White (`#ffffff`)
-- Background: Pure White (`#ffffff`)
-- Heading text: Soft Black (`#333333`)
-- Body text: Warm Gray (`#525151`)
-- Interactive / active nav: Brand Blue (`#3a82dd`)
-- Inline link: Link Blue (`#2563eb`) / Strong (`#4770df`)
-- Divider: Hairline (`#edf1f7`)
-- Dark band: Primary Deep (`#031234`)
-
-### Example Component Prompts
-- "Create a hero on a dark navy (`#061232`) field with full-bleed imagery. Headline in Noto Sans TC at 84px weight 800, line-height 1.14, letter-spacing -3.49px, color #ffffff. Below it, a navy CTA button is unnecessary on dark — use a white ghost button (#ffffff bg, #061232 text, 8px radius, 18px weight 500) reading 'Try it Now'."
-- "Design a feature card: white background, 8px radius, shadow rgba(0,0,0,0.04) 0px 0px 10px 0px. Title at 24px Noto Sans TC weight 600, color #333333, letter-spacing -1.0px. Body at 18px weight 400, color #525151, line-height 1.55."
-- "Build a primary CTA button: #061232 navy background, #ffffff text, 8px radius, 20px 30px padding, ~58px tall, 18px Noto Sans TC weight 500, label 'Get in Touch'."
-- "Create navigation: white sticky header, Noto Sans TC 18px weight 700 links in #333333, active link color #3a82dd. Navy 'Contact' button right-aligned (#061232 bg, white text, 8px radius)."
-- "Design a section title: 36px Noto Sans TC weight 600, color #333333, letter-spacing -1.5px, centered above a 3-column industry card grid."
-
-### Iteration Guide
-1. Set `font-family: "Noto Sans TC", "Noto Sans", sans-serif` on all text -- the TC-first family is the brand's bilingual signature
-2. Navy `#061232` is the primary CTA color; `#3a82dd` blue is the interactive/link signal
-3. Headings use `#333333`, body uses `#525151` -- warm near-blacks, never pure `#000000` for long copy
-4. Shadows are always `0px 0px` diffuse glow: 0.04 alpha at rest, 0.10 standard, 0.19 on hover
-5. Border-radius is 8px for buttons/cards, 30px for pill chips, 4px for tight elements
-6. Tracking tightens hard at display sizes (-3.49px at 84px) and relaxes to normal by 18px body
-7. Keep the white canvas dominant; reserve navy bands for emphasis, never overwhelm
-
----
-
-## 10. Voice & Tone
-
-iKala's voice is that of a regional AI partner that speaks the language of business outcomes, not algorithms. The site's own framing -- *"Data → Intelligence → Impact"* (the page title) and *"Total AI Transformation Solutions and Services"* (a live h2) -- captures the register: outcome-oriented, enterprise-credible, and pragmatic. Copy leads with the customer's transformation, not the model architecture. CTAs are direct and unfussy ("Get in Touch", "Contact", "Try it Now"). The tone respects a buyer who is evaluating ROI and credibility, so it avoids consumer-app exuberance and stays measured.
-
-| Context | Tone |
-|---|---|
-| Hero headlines | Ambitious but concrete. Frames AI as transformation for industries (manufacturing, retail, finance). |
-| Product / solution descriptions | Outcome-first. "AI transformation solutions and services" — capability tied to business value. |
-| CTAs | Direct, low-friction imperatives. "Get in Touch", "Contact", "Try it Now". |
-| Case studies / industries | Sector-specific, credibility-led. Named verticals, concrete deployments. |
-| Bilingual surfaces | Traditional Chinese and English share one voice; the Han text is primary, not an afterthought. |
-
-**Forbidden register.** Hype superlatives ("revolutionary", "game-changing"), emoji on enterprise marketing chrome, and vague "AI magic" claims that don't tie to a business outcome. iKala sells to procurement-minded APAC enterprises; the voice stays professional and evidence-led.
-
-## 11. Brand Narrative
-
-iKala is a Taiwan-headquartered AI company founded in **2015**, widely associated with co-founder and CEO **Sega Cheng**. The company grew out of a thesis that AI's value is realized only when it drives measurable business impact -- a positioning crystallized in its own *"Data → Intelligence → Impact"* framing. iKala built two principal lines of business: an **AI cloud / AI transformation** practice that helps enterprises across manufacturing, retail, and finance operationalize AI, and **iKala Commerce / KOL Radar**, an influencer-marketing (martech) intelligence platform that became one of the most recognized creator-marketing tools in the Greater China and Southeast Asia markets.
-
-What iKala rejects is AI sold as a black-box novelty. Its public posture -- as a Google Cloud partner and an APAC-focused AI services firm -- frames technology as a means to enterprise outcomes, which is why the marketing surface leads with industries and impact rather than model specifications. The design system mirrors this: a credible navy-and-white palette, a Traditional-Chinese-first typeface that signals genuine regional roots, and a calm, scannable layout built for an enterprise buyer rather than a hype-driven consumer.
-
-The bilingual, Taiwan-rooted identity is not incidental. iKala competes regionally against both global cloud vendors and local martech players, and its brand expresses a specific bet: that the most trusted AI partner for an APAC enterprise is one that is unmistakably local in language and unmistakably credible in presentation.
-
-## 12. Principles
-
-1. **Impact over algorithms.** The brand frames itself as *Data → Intelligence → Impact*. Design artifacts should foreground outcomes and clarity, not technical spectacle.
-2. **Regional authenticity.** `Noto Sans TC` as the primary family is a commitment, not a default. The brand reads as genuinely Taiwanese/APAC, and the design should never erase that.
-3. **Enterprise credibility.** Navy gravitas, white space, neutral shadows -- the visual language is built to earn a procurement buyer's trust, not to delight a consumer.
-4. **Calm confidence.** One loud moment (the weight-800 hero), then measured restraint. The system signals authority that does not need to shout.
-5. **Bilingual parity.** Han and Latin text share one humanist skeleton and balanced metrics; neither language is a second-class citizen.
-6. **Neutral elevation.** Diffuse glow shadows keep the palette unambiguous -- the navy and blue carry all the brand color, shadows stay out of the way.
-
-## 13. Personas
-
-*Personas below are fictional archetypes informed by publicly observable iKala customer segments (APAC enterprise AI buyers, retail/manufacturing digital-transformation leads, brand marketers using influencer intelligence), not individual people.*
-
-**Wei-Chen Lin, 42, Taipei.** Head of digital transformation at a Taiwanese precision-manufacturing firm. Evaluates AI vendors on whether they understand his factory's actual processes, not on benchmark scores. Trusts iKala in part because the brand presents in Traditional Chinese as a peer, and because the marketing leads with manufacturing outcomes rather than model jargon.
-
-**Priya Raman, 35, Singapore.** Regional marketing director at a consumer brand running campaigns across Southeast Asia. Uses iKala's influencer-intelligence platform to vet creators and measure campaign impact. Values dashboards that are dense but scannable, and a vendor that speaks credibly to both Chinese- and English-language markets.
-
-**Hiroshi Tanaka, 48, Tokyo.** Enterprise IT director assessing AI-transformation partners for an APAC rollout. Cares about credibility signals -- cloud partnerships, sector case studies, professional presentation. The calm navy-and-white site reassures him that this is a serious infrastructure partner, not a hype startup.
-
-**Mei-Ling Wu, 29, Kaohsiung.** Data analyst at a retail group. Works daily with AI-driven commerce insights. Appreciates the warm-gray body text and generous line-height that make long reports readable, and a layout that lets her scan for the section she needs.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (dashboard, no data)** | White canvas. Single sentence in heading gray (`#333333`) at 20px Noto Sans TC weight 500. One navy CTA (`#061232`) to add/connect a source. No illustration clutter. |
-| **Loading (first paint)** | Soft skeleton blocks in hairline (`#edf1f7`) at final dimensions with a gentle shimmer. No spinner-only states on content-heavy panels. |
-| **Error (request failed)** | Inline message in muted gray (`#6b7280`) with a clear plain-language explanation and a retry affordance. Professional, no apology theatrics. |
-| **Error (form validation)** | Field-level message below the input, concise and specific about what is required. |
-| **Success (action completed)** | Brief inline confirmation; brand-blue (`#3a82dd`) accent on the confirmed element. No emoji, no exclamation. |
-| **Disabled** | Reduced opacity on surface and text together; navy actions fade rather than switch to gray, preserving brand read. |
-
-## 15. Motion & Easing
-
-**Durations**:
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | State commits, selection, focus rings |
-| `motion-fast` | 150ms | Hover, link color shifts, button press |
-| `motion-standard` | 250ms | Card hover-lift, dropdown, sheet |
-| `motion-slow` | 400ms | Section reveals, hero transitions |
-
-**Easings**:
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Default two-way transitions |
-| `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving elements — cards, dropdowns |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
-
-**Signature motions.**
-
-1. **Card hover-lift.** On hover, feature/industry cards deepen their diffuse glow from `rgba(0,0,0,0.04)` toward `rgba(0,0,0,0.19)` over `motion-standard / ease-standard`. The card does not translate sharply; the elevation change carries the feedback.
-2. **Link color shift.** Navigation and inline links transition toward brand blue (`#3a82dd`) on hover over `motion-fast`. The color is the affordance.
-3. **Section reveal.** On scroll, sections fade in with a small upward translate using `motion-slow / ease-enter`, reinforcing the calm top-down reading order.
-4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`; reveals become immediate. The site remains fully functional without motion.
-
-## 16. Do's and Don'ts
-
-### Do
-- Set `Noto Sans TC` first in the font stack on every text element -- the bilingual rendering is the brand
-- Use deep navy (`#061232`) for primary CTAs and dark emphasis bands
-- Use brand blue (`#3a82dd`) for active nav and interactive links; `#2563eb`/`#4770df` for inline links
-- Keep headings at `#333333` and body at `#525151` -- warm near-blacks, not pure black
-- Use diffuse `0px 0px` glow shadows (0.04 / 0.10 / 0.19 alpha) for elevation
-- Keep border-radius at 8px for buttons and cards, 30px for pill chips
-- Let the white canvas dominate and give sections generous (~80px) breathing room
-- Track headlines tight (`-3.49px` at 84px, `-1.5px` at 36px) and relax to normal at body sizes
-
-### Don't
-- Don't replace `Noto Sans TC` with a Latin-only font -- it erases the brand's regional authenticity
-- Don't use decorative gradients or neon on the marketing chrome -- the palette is navy + blue + grays
-- Don't use directional drop shadows -- iKala's elevation is always even, zero-offset glow
-- Don't use pure black (`#000000`) for headings or long body copy -- use `#333333` / `#525151`
-- Don't make the hero quiet and the body loud -- the weight-800 hero is the single loud moment
-- Don't introduce hype superlatives or emoji into enterprise-facing copy
-- Don't use a single navy shade everywhere as a flat fill -- reserve it for CTAs and emphasis bands
-- Don't apply positive letter-spacing at display sizes -- iKala tracks tight

package/.opencode/oh-my-design/web/references/imweb/.verification.md

@@ -1,61 +0,0 @@
-# Imweb (아임웹) — Verification Notes (2026-06-10)
-
-## Proof — Tier 1 live inspect
-
-**Inspected:** 2026-06-10
-**Method:** playwright getComputedStyle (live DOM) — global playwright (chromium, headless), goto https://imweb.me and https://imweb.me/price domcontentloaded + full-page scroll for lazy content, then `getComputedStyle` on body, headings, buttons, tabs, cards, plus full-DOM background/text-color/radius frequency scans.
-**Sources:**
-- https://imweb.me (homepage — hero, nav, CTA, feature cards, data-viz section)
-- https://imweb.me/price (pricing — plan cards, tabs, FAQ accordion, promo strips)
-- https://imweb.me/blog (아임웹 공식 블로그 — brand-owned voice/tone source, WebFetch verified)
-
-### Raw samples
-- `https://imweb.me/` · body · `font-family: Pretendard, …` · `color: rgb(21, 24, 30)` = #15181e · `font-size: 16px` · `line-height: 24px` · `background: rgb(255, 255, 255)`
-- `https://imweb.me/` · hero rotating keyword "매출내기" · `font-size: 80px` · `font-weight: 700` · `line-height: 80px` · `letter-spacing: normal` · `color: rgb(21, 24, 30)`
-- `https://imweb.me/` · primary CTA "지금 무료로 시작하기" · `background-color: rgb(21, 24, 30)` (#15181e) · `color: rgb(255, 255, 255)` · `border-radius: 8px` · `padding: 12px 16px` · height 48px · `font: 16px / 600 "imweb Sans"`
-- `https://imweb.me/` · header search icon button · `background-color: rgba(113, 118, 128, 0.05)` · `color: rgb(188, 192, 198)` (#bcc0c6) · `border-radius: 999999px` · `padding: 8px` · height 32px · font "imweb Sans"
-- `https://imweb.me/` · section heads "시작부터 성장까지 쉬워집니다" 36px/700 lh 48.96px; "디자인이 쉬워요"/"운영이 쉬워요"/"마케팅이 쉬워요" 28px/700 lh 41.44px · color rgb(21,24,30)
-- `https://imweb.me/` · stats section · chart bars `background-color: rgb(0, 185, 255)` (#00b9ff) · `border-radius: 4px 4px 0px 0px` (heights 40/80/160/320px for 2021→2024 "80만 개") · caption "2025 누적 사이트 개설 수" `color: rgb(129, 220, 255)` (#81dcff) 24px/400
-- `https://imweb.me/` · nav links "주요기능/템플릿/요금/전문가 찾기/스토리/고객지원" · `color: rgb(21, 24, 30)` · 16px / 400 · Pretendard
-- `https://imweb.me/` · radius frequency scan: `8px` ×95, `4px 4px 0px 0px` ×7, `12px` ×3, `16px` ×1, `999999px` ×1 — 8px is the workhorse
-- `https://imweb.me/` · fg frequency: rgb(21,24,30) ×592, rgb(0,0,0) ×228, rgb(113,118,128) ×56 (#717680), rgb(45,197,255) ×8 (#2dc5ff), rgb(173,232,255) ×4 (#ade8ff), rgb(223,246,255) ×4 (#dff6ff), rgb(159,163,171) ×3 (#9fa3ab), rgb(188,192,198) ×3
-- `https://imweb.me/price` · pricing headline "요금제를 선택해 보세요" · `font-size: 48px` · `font-weight: 700` · `line-height: 60px` · rgb(21,24,30); eyebrow "브랜드 운영에 꼭 맞는" · `color: rgb(255, 80, 218)` (#ff50da) · 24px / 700
-- `https://imweb.me/price` · plan primary CTA "14일 무료 체험 시작하기" · `background-color: rgb(21, 24, 30)` · white text · `border-radius: 8px` · `padding: 8px 12px` · height 40px · 14px / 600 "imweb Sans"
-- `https://imweb.me/price` · plan secondary CTA · `background-color: rgb(255, 255, 255)` · `color: rgb(75, 81, 91)` (#4b515b) · `outline: rgb(219, 222, 227) solid 1px` (#dbdee3) · `border-radius: 8px` · height 40px
-- `https://imweb.me/price` · FAQ accordion rows · `background-color: rgb(248, 249, 251)` (#f8f9fb) · `border-radius: 8px` · `padding: 28px 32px` · 16px Pretendard · `box-shadow: none`
-- `https://imweb.me/price` · promo strip "PG 가입비 면제 마감 임박" · `background-color: rgba(0, 185, 255, 0.1)` · text `color: rgb(0, 144, 212)` (#0090d4) 14px/600 · `border-radius: 8px 8px 0px 0px` · `padding: 8px 0px` · height 40px; discount tag "20%" `color: rgb(0, 144, 212)` 12px/600
-- `https://imweb.me/price` · feature tabs (`role=tab`) · active "쇼핑몰 창업 지원" `color: rgb(21, 24, 30)` aria-selected=true · inactive "기본/사용자/쇼핑/예약/통계·분석·마케팅" `color: rgb(113, 118, 128)` · transparent bg
-- `https://imweb.me/price` · bg frequency: rgb(248,249,251) ×72, rgb(255,255,255) ×10, rgba(0,185,255,0.1) ×4, rgb(21,24,30) ×3; fg: rgb(21,24,30) ×1744, rgb(159,163,171) ×256, rgb(0,144,212) ×27
-- box-shadow: `none` across nav, hero, CTAs, plan cards, FAQ rows on both surfaces (shadowless system confirmed)
-- document.title: "아임웹" (both surfaces)
-
-## Tier 2 cross-check
-
-- **getdesign.md/imweb** — WebFetch 2026-06-10: "No designs found for 'imweb'" (404 / no entry). No brand-name variant exists on the site for 아임웹.
-- **styles.refero.design** — playwright navigate `?q=imweb` and `?q=아임웹` (2026-06-10): both queries returned only the generic catalog listing (2,000+ styles, e.g. wix.com cards); no Imweb-specific `/style/` page identified. Conclusion: not listed.
-
-## Conflict matrix
-
-| Field | Tier 1 (live) | getdesign | refero | Resolution |
-|---|---|---|---|---|
-| (all fields) | live computed styles above | no entry (404) | not listed | Tier 1 only — no conflicts possible; footer marks Tier 2 "none available" |
-
-## Country sources
-
-KR requirement — brand-owned sources (≥2):
-
-1. **https://imweb.me** — Imweb official homepage (Tier 1 live-inspected source for all token claims).
-2. **https://imweb.me/price** — Imweb official pricing surface (second live-inspected surface).
-3. **https://imweb.me/blog** — 아임웹 공식 블로그 (brand-owned; categories 인사이트/브랜드 인터뷰/아임웹 사용팁; voice/tone source). Verified live via WebFetch 2026-06-10.
-
-Notes:
-- `blog.imweb.me` (tier1 hint) is DEAD — returns "호스팅 기간이 만료되었습니다" (hosting expired). The live official blog is `imweb.me/blog`.
-- `https://imweb.me/story` (nav link) returns 404 when loaded directly — not cited.
-- `github.com/imweb` is Tencent's IMWeb FE team, NOT 아임웹 — not used.
-- getdesign.md / refero.design / Google favicon proxy are NOT counted toward the KR brand-owned requirement.
-
-## Logo
-
-- Google favicon proxy `https://www.google.com/s2/favicons?domain=imweb.me&sz=128` returns a 329-byte HTML error document (FAIL), same for `www.imweb.me`.
-- `cdn.simpleicons.org/imweb` → 404. No official GitHub org.
-- Chosen: direct brand CDN favicon `https://vendor-cdn.imweb.me/images/main/imweb-2309-favicon-120x120.png?v1` — verified 2026-06-10: HTTP 200, 2060 bytes, valid PNG 120×120 RGBA (`logo: { type: favicon, slug: <direct URL> }` — logos.ts uses the slug as a direct URL for favicon type).