oh-my-design-cli 1.6.7 → 1.7.1

package/web/references/ikala/DESIGN.md

@@ -0,0 +1,400 @@
+---
+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/web/references/inflearn/DESIGN.md

@@ -10,6 +10,44 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=inflearn.com&sz=256"
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#00c471"
+    primary-pressed: "#00a760"
+    heading: "#212529"
+    body: "#495057"
+    muted: "#868e96"
+    canvas: "#ffffff"
+    surface-neutral: "#f8f9fa"
+    border: "#dee2e6"
+    disabled-bg: "#f1f3f5"
+    disabled-fg: "#adb5bd"
+    error: "#fa5252"
+    info: "#228be6"
+    warning: "#fcc419"
+    teal-tag: "#1098ad"
+  typography:
+    family: { sans: "Pretendard", mono: "ui-monospace, SFMono-Regular, monospace" }
+    h1:      { size: 34, weight: 700, lineHeight: 1.3, use: "Page hero phrase" }
+    h2:      { size: 20, weight: 700, lineHeight: 1.35, use: "Section title" }
+    body:    { size: 16, weight: 400, lineHeight: 1.5, use: "Default running text" }
+    nav:     { size: 16, weight: 600, lineHeight: 1.5, use: "Nav label, button label" }
+    caption: { size: 14, weight: 400, lineHeight: 1.4, use: "Instructor name, view count, price subtext" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 8, lg: 32, full: 9999 }
+  shadow:
+    flat: "none"
+  components:
+    button-search: { type: button, bg: "#00c471", fg: "#ffffff", radius: 9999, font: "16px weight 400", use: "Signature green circle search-submit, 42px" }
+    button-primary: { type: button, bg: "#00c471", fg: "#ffffff", radius: 8, padding: "0 24px", font: "16px weight 600", use: "Filled label CTA, hover #00a760" }
+    nav-pill: { type: tab, bg: "#f8f9fa", fg: "#495057", radius: 32, font: "16px weight 600", use: "GNB nav pill, resting", active: "green tint bg, #00c471 text" }
+    button-ghost: { type: button, bg: "#ffffff", fg: "#495057", radius: 32, font: "16px weight 600", use: "Inline secondary GNB item, hover #f8f9fa" }
+    pagination-default: { type: button, bg: "#ffffff", fg: "#212529", radius: 8, font: "14px weight 400", use: "Page number button, gray border" }
+    pagination-active: { type: button, bg: "#00c471", fg: "#ffffff", radius: 8, font: "14px weight 400", use: "Selected page" }
+    button-disabled: { type: button, bg: "#f1f3f5", fg: "#adb5bd", radius: 8, use: "Form-incomplete state" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Inflearn

package/web/references/intercom/DESIGN.md

@@ -10,6 +10,44 @@ logo:
   slug: intercom
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  note: "primary text/buttons are off-black #111111; Fin Orange #ff5600 is the singular brand accent"
+  colors:
+    off-black: "#111111"
+    white: "#ffffff"
+    canvas: "#faf9f6"
+    fin-orange: "#ff5600"
+    report-orange: "#fe4c02"
+    report-blue: "#65b5ff"
+    report-green: "#0bdf50"
+    report-red: "#c41c1c"
+    report-pink: "#ff2067"
+    black-80: "#313130"
+    black-60: "#626260"
+    muted: "#7b7b78"
+    tertiary: "#9c9fa5"
+    border: "#dedbd6"
+    warm-sand: "#d3cec6"
+  typography:
+    family: { sans: "Saans", serif: "Serrif", mono: "SaansMono" }
+    display-hero: { size: 80, weight: 400, lineHeight: 1.00, tracking: -2.4, use: "Display hero, ultra-compressed" }
+    section:      { size: 54, weight: 400, lineHeight: 1.00, tracking: -1.6, use: "Section heading" }
+    feature:      { size: 24, weight: 400, lineHeight: 1.00, tracking: -0.48, use: "Feature title" }
+    body:         { size: 16, weight: 400, lineHeight: 1.5, use: "Standard reading text" }
+    nav:          { size: 18, weight: 400, lineHeight: 1.00, use: "Nav / UI" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 6, lg: 8, full: 9999 }
+  shadow:
+    flat: "none"
+  components:
+    button-primary: { type: button, bg: "#111111", fg: "#ffffff", radius: 4, padding: "0px 14px", use: "Primary dark button, scale(1.1) hover" }
+    button-outlined: { type: button, bg: "#faf9f6", fg: "#111111", radius: 4, use: "Outlined button, 1px off-black border" }
+    button-warm: { type: button, bg: "#faf9f6", fg: "#111111", padding: "16px", use: "Warm card button" }
+    card: { type: card, bg: "#faf9f6", radius: 8, use: "Warm cream card, oat border, no shadow" }
+    nav-link: { type: tab, fg: "#111111", font: "16px Saans", use: "Nav link, off-black on white" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Intercom