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

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

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

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.

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

15. Motion & Easing

Durations:

Easings:

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