Design System Inspiration of iKala

Overview

Visual Theme & Atmosphere

iKala is a Taiwanese AI company that describes itself as “a data science native company” and sells AI transformation to enterprises. Its About page says it was “Co-founded by Sega Cheng in 2012” and “originated with its core software technology in data analysis”. Today it runs two pillars, “AI Adoption and Marketing Super-Intelligence”. The site’s solution menu lists iKala Nexus (enterprise knowledge and AI agents), Kolr (an “influence search engine” that tracks “over 300 million influencers”), iKala Cloud and iKala Foundry. The footer of every page states the scale: “Headquartered in Taiwan with a global footprint, iKala serves over 1,000 enterprises and 50,000 brands across more than 190 countries”. The home’s news list shows where the company stands in 2026. iKala is extending TMMLU+, a Traditional Chinese benchmark, “to Strengthen Taiwan’s Sovereign AI Evaluation Capabilities”, and co-founder and chairman Sega Cheng was named the 2026 Jeffrey Koo Fellow.

The site is a white, bilingual corporate page in English, Traditional Chinese and Japanese. Its tagline is “Data → Intelligence → Impact”, or “數據 → 智慧 → 決策” on /zh-tw/. The hero sets that line in white at 72px / 600 with tight -2.99px tracking over a full-bleed image. Beneath it sits one dark navy call-to-action, Get in Touch (聯絡我們 on the Chinese page), filled #061232 with an 8px radius. Below the hero the page turns light. Section headings are #333333 at 36px / 600, body copy is a warm grey #525151 at 18px, and links take the theme’s blue #3a82dd. Blue appears in several shades rather than one: #2563eb fills Read More Articles, #3b81db fills the iKala Nexus hero button and the form’s Submit, #1677ff labels the Nexus timeline pills, and #4770df underlines the footer logo.

Type is Google’s Noto Sans TC, set first in the stack ("Noto Sans TC", "Noto Sans", sans-serif) so Han and Latin text share one family. The marketing buttons are set in the Latin Noto Sans. Depth is used sparingly: one soft glow under the white View More News button, a cool blue-grey shadow under the Nexus carousel arrows, and translucent black pills for the News and Insight labels.

Key Characteristics:

• Deep navy #061232 as the hero call-to-action fill on the English and Chinese home pages
• Several working blues, each tied to a surface: #2563eb, #3b81db, #1677ff, #3a82dd
• Noto Sans TC first in every text stack; Noto Sans on the marketing buttons
• A 72px / 600 white hero with -2.99px tracking, then calm 36px / 600 section headings in #333333
• Warm grey #525151 body copy at 18px
• 8px radius on buttons and tabs, 30px on label pills, 50px on round arrows, 2px on form fields
• Translucent black rgba(0, 0, 0, 0.7) pills for News and Insight labels

Primary tasks

• Contact iKala about an AI transformation project
• Find the solution for a goal: iKala Nexus for enterprise knowledge, Kolr for creator and social intelligence
• Read the same material in English, Traditional Chinese or Japanese
• Read iKala’s news and AI insights
• Check the credibility signals before shortlisting iKala as a vendor

Brand Narrative

iKala’s About page tells the story in its own words: “Co-founded by Sega Cheng in 2012, iKala originated with its core software technology in data analysis.” The company now offers AI solutions to enterprises and brand owners through two pillars, AI Adoption and Marketing Super-Intelligence. It reports over 1,000 enterprises using its AI implementation solutions and more than 50,000 brand owners and advertisers using its marketing technology. Kolr, the “influence search engine” iKala built, “collects and continuously tracks data on over 300 million influencers and billions of social data points worldwide everyday”. iKala Nexus turns enterprise data into structured knowledge and deploys AI agents. The home says the platforms, models and solutions are built in-house by “iKala’s AI Lab, a team of 50+ AI and data science experts”.

The About page lists the recognition the company leads with: Google Cloud Partner of the Year (2025), Best AI Transformation Solution Provider in APAC by APAC Insider (2024 and 2023), Taiwan’s Top 10 Innovative Enterprises by Startup City Taiwan (2023), Top 10 Emerging Giants in Taiwan by KPMG and HSBC (2022), the Taiwan government’s NEXT BIG national startups project (2021) and Gartner Cool Vendor (2020). The 2026 news adds work on Taiwan’s sovereign AI evaluation through TMMLU+.

The design follows the positioning. A Traditional-Chinese-first typeface signals a company rooted in Taiwan. A navy hero action and a white canvas present it as a credible vendor to procurement-minded enterprise buyers. Industry sections and an FAQ about ROI keep the page about outcomes.

Principles

1. Impact over algorithms. The brand frames itself as Data → Intelligence → Impact; pages lead with outcomes and industries.
2. Regional authenticity. Noto Sans TC leads every stack; the brand reads as Taiwanese and serves three languages.
3. Enterprise credibility. A navy hero action, a white canvas and plain answers about security and ROI.
4. One loud moment. The 72px hero is the only display-size type on the home; everything below is 36px or smaller.
5. Bilingual parity. The English and Chinese home pages share the same layout and components.

Personas

Fictional archetypes informed by the audiences iKala’s pages address (enterprise AI buyers, marketers using creator intelligence, IT leads). They are not real people.

Wei-Chen Lin, 42, Taipei. Head of digital transformation at a precision manufacturer. Evaluates vendors on whether they understand his processes. Reads the Manufacturing section and the FAQ on timelines.

Priya Raman, 35, Singapore. Regional marketing director at a consumer brand. Uses Kolr to vet creators and measure campaigns across Southeast Asia.

Hiroshi Tanaka, 48, Tokyo. Enterprise IT director assessing AI partners for an APAC rollout. Reads the Japanese page and checks the information security page before shortlisting.

Mei-Ling Wu, 29, Kaohsiung. Data analyst at a retail group. Follows iKala’s insight articles on new models.

Colors

Primary

• Deep Navy (#061232): The hero call-to-action fill, on Get in Touch (home, 167 × 58) and 聯絡我們 (/zh-tw/, 132 × 58). It is the primary because it fills the first and only hero action on both home pages. No single blue plays that role across all three captured pages; each blue belongs to one page or one component.
• White (#ffffff): The page canvas, the label on every filled button, and the white hero and footer headings.

Action blues

• Action Blue (#2563eb): The fill of Read More Articles (閱讀更多文章) and the label of View More News (查看更多新聞) under the home news list.
• Nexus Blue (#3b81db): The fill of the iKala Nexus hero button (Contact Us) and of the contact form’s Submit.
• Timeline Blue (#1677ff): The label of the four timeline pills on iKala Nexus (1st Month, 2nd Month, 3rd Month, Go Live).
• Arrow Blue (#005cec): The icon colour of the round carousel arrows on iKala Nexus.
• Link Blue (#3a82dd): The theme’s link colour (a{color:#3a82dd} in the page CSS), measured on the header logo link.
• Footer Blue (#4770df): The 1px underline and text colour of the footer logo block.

Tabs

• Tab Selected (#2a415e): The fill of the selected solution tab on iKala Nexus (Answer FAQs).
• Tab Idle (#95a2b2): The fill of the six unselected solution tabs.

Neutrals

• Heading (#333333): Section and card headings, and the header navigation links.
• Body (#525151): The body’s text colour on all three pages, and form text.
• Black (#000000): The header menu item, and the 2px underline of the current section on iKala Nexus.
• Field Border (#cccccc): The 1px border of the contact form inputs.
• Hairline (#dbdbdb): The 1px border of the Nexus case table and the form textarea.

Brand assets and declared values

• #2168c2 is declared in the header CSS for the menu toggle but did not compute on any captured element.
• Translucent values stay in component fields: the news label fill rgba(0, 0, 0, 0.7), the accordion border rgba(0, 0, 0, 0.02) and both shadows.

Typography

Font Family

• Noto Sans TC — live surface use on 479 elements: body, headings, tabs, form fields and labels. It is the first family in the theme’s rule for body, button, .entry-content, .entry-content h2 and .entry-content p (font-family:"Noto Sans TC","Noto Sans",sans-serif!important). Served by the site’s own @font-face rules. Official distributed asset: Noto Sans CJK / Noto Sans TC from the Noto project, SIL Open Font License 1.1.
• Noto Sans — live surface use on 33 elements, mainly the Elementor buttons (Get in Touch, Read More Articles, View More News, Contact Us, the timeline pills). SIL Open Font License 1.1.
• Declared only — Montserrat, AdobeClean-Bold, AdobeClean-Regular, forminator-icons-font and swiper-icons have @font-face rules but no observed use.
• Official product use — no ikala.ai page opened names its typefaces.

Hierarchy

Principles

• Han first: Noto Sans TC leads every text stack, with Noto Sans as the Latin fallback.
• Tracking tightens with size: -2.99px at 72px, -1.5px at 36px, -1px at 24px, -0.27px at 18px. The Nexus page breaks the pattern with +0.5px on its 60px title.
• Weight 600 carries most headings; 700 appears on the Nexus page.

Layout

Spacing

• The bundle’s spacing histogram is led by 20px (71 uses) and 10px (51).
• Measured paddings: 20px 30px on the hero button, 16px 24px on the news buttons, 8px 16px on tabs, 12px 24px on timeline pills, 20px on accordion rows, 3px 10px on labels, 9px in fields.

Grid and container

• Hero and section headings run 1180px wide on home and /zh-tw/; the Nexus page uses 1200px.
• Industry cards sit four across in 215px columns; data-science cards three across at about 300px; news cards in 318px and 259px columns.
• The FAQ accordion is a 940px column of 60px rows.
• iKala Nexus shows its customer cases in a bordered table (1px #dbdbdb, 18px Noto Sans TC body) and a carousel of case names.

Border radius

• 0px for most elements (474 of 512 recorded radii).
• 2px on form fields and Submit; 8px on buttons, tabs and pills; 30px on labels; 50px on round arrows.

Responsive Behavior

Only a 1440px-wide desktop view was captured. No breakpoint, collapse or touch-target behaviour was measured, and none is declared. At that width the hero button is 58px tall, the news buttons 50px and the form fields 41px.

Elevation & Depth

The filled buttons are flat; shadow marks only the white button on a white field and the arrows that float over the case carousel.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.glow: rgba(0, 0, 0, 0.19) 0px 0px 10px 0px
• shadow.floating: rgba(135, 158, 180, 0.7) 0px 6px 25px 0px

Motion & Easing

No motion was measured. The header’s submenu toggle declares data-toggle-duration="250" in its markup, which is a declared attribute and not an observed transition, so no duration or easing token is set.

<!– Sources: three logged-out ikala.ai pages captured through the owner’s browser on 2026-10-01 (bundle artifacts/reference-evidence/ikala.json, raw docs/research/2026-09-29-growth/raw/aside/ikala-capture.json); page text and the About page read by plain HTTP the same day. ikala.tw serves a GoDaddy parking page and contributes nothing. Full proof block in .verification.md. –>

Components

Buttons

Hero call-to-action (navy)

• Background: #061232
• Text: #ffffff
• Radius: 8px
• Padding: 20px 30px
• Height: 58px
• Font: 18px / 500 / 18px Noto Sans
• Use: Get in Touch on home, 聯絡我們 on /zh-tw/

Filled blue button

• Background: #2563eb
• Text: #ffffff
• Radius: 8px
• Padding: 16px 24px
• Height: 50px
• Font: 18px / 500 / 18px Noto Sans
• Use: Read More Articles / 閱讀更多文章 under the news list

White button

• Background: #ffffff
• Text: #2563eb
• Radius: 8px
• Padding: 16px 24px
• Height: 50px
• Font: 18px / 500 / 18px Noto Sans
• Shadow: rgba(0, 0, 0, 0.19) 0px 0px 10px 0px
• Use: View More News / 查看更多新聞 beside the blue button

Nexus hero button

• Background: #3b81db
• Text: #ffffff
• Radius: 0px
• Padding: 20px 40px
• Height: 60px
• Font: 20px / 700 / 20px Noto Sans
• Use: Contact Us on the iKala Nexus hero

Timeline pill

• Background: #ffffff
• Text: #1677ff
• Radius: 8px
• Padding: 12px 24px
• Height: 38px
• Font: 14px / 700 / 14px Noto Sans
• Use: 1st Month, 2nd Month, 3rd Month, Go Live in the iKala Nexus four-step section

Carousel arrow

• Background: #ffffff
• Icon: #005cec
• Radius: 50px
• Size: 44px x 44px
• Shadow: rgba(135, 158, 180, 0.7) 0px 6px 25px 0px
• Disabled: the previous arrow is disabled at rest with the same values
• Use: Next and previous arrows of the Nexus case carousel

Form submit

• Background: #3b81db
• Text: #ffffff
• Radius: 2px
• Padding: 10px
• Height: 40px
• Font: 14px / 500 / 20.3px Noto Sans TC
• Use: Submit on the iKala Nexus contact form

Tabs and navigation

Solution tab

• Background: #95a2b2
• Text: #ffffff
• Radius: 8px
• Padding: 8px 16px
• Height: 50px
• Font: 16px / 600 / 20px Noto Sans TC, letter-spacing 0.53px
• Selected: background #2a415e (Answer FAQs)
• Use: Seven use-case tabs on iKala Nexus (Answer FAQs, Doc Review, Smart Customer Service, Sales Data Insights, Marketing Automation, CEO Trend Reports, Industry Trends)

FAQ accordion row

• Border: 1px solid rgba(0, 0, 0, 0.02)
• Padding: 20px
• Height: 60px
• Use: Getting-started questions on home and /zh-tw/ and the iKala Nexus FAQ; the question text sits in a child element the capture did not record

Header navigation link

• Text: #333333
• Padding: 0px 20px 0px 0px
• Font: 18px / 400 / 27px Noto Sans TC, letter-spacing -0.5px
• Selected: 2px solid #000000 bottom border on the current section’s menu item (Solutions on iKala Nexus)
• Use: Solutions, AI Technology, Blog, About in the white fixed header

Inputs

Text field

• Background: #ffffff
• Text: #525151
• Border: 1px solid #cccccc
• Radius: 2px
• Padding: 9px
• Height: 41px
• Font: 16px / 400 / 20.8px Noto Sans TC, letter-spacing -0.24px
• Use: Contact form fields on iKala Nexus

Badges

News label

• Background: rgba(0, 0, 0, 0.7)
• Text: #ffffff
• Radius: 30px
• Padding: 3px 10px
• Height: 24px
• Font: 12px / 400 / 17.7px Noto Sans TC
• Use: News / Insight (新聞 / 洞察) labels over news card images

States

No state frames were captured: the capture recorded rest values only, with interactionCount: 0, which does not mean the site has no states. Read from rest values are the selected solution tab (#2a415e), the current-section underline in the header (2px #000000) and the disabled carousel arrow. Hover, pressed, focus, loading, error and success treatments are not declared.

Live state probe, 2026-10-16 (), hero-cta: pressed — text-decoration underline (+2 nested-layer changes).

Do’s and Don’ts

Do

• Put Noto Sans TC first in the font stack, with Noto Sans as the Latin fallback
• Fill the hero call-to-action with deep navy #061232 and an 8px radius
• Use #333333 for headings and #525151 for body copy
• Track large headings tight (-2.99px at 72px, -1.5px at 36px)
• Use the 0.19-alpha glow only on a white button that sits on white
• Mark the selected tab with the darker #2a415e and keep idle tabs #95a2b2

Don’t

• Treat any one blue as universal; each blue belongs to a specific page or component
• Replace Noto Sans TC with a Latin-only font
• Add shadows to the filled navy or blue buttons; they are flat
• Use pure black for body copy; #000000 marks only the header menu item and the current-section underline
• Use positive tracking on hero headings; the +0.5px Nexus title is the one exception
• Promote #2168c2 to a token; it never computed on the captured pages

Voice & Tone

iKala speaks as an enterprise AI partner that talks about business outcomes, not algorithms. The tagline “Data → Intelligence → Impact” and the section heading “Total AI Transformation Solutions and Services for Key Verticals” set the register. Copy leads with results (“turning data into measurable financial and performance results”) and reassures newcomers (“Even if you don’t have a data science team or prior AI experience…”). Calls-to-action are short imperatives: “Get in Touch”, “Contact Us”, “Try it Now”, “Read More Articles”. The Traditional Chinese page carries the same voice (“數據 → 智慧 → 決策”, “全方位 AI 轉型解決方案，專注核心垂直產業”).

Forbidden register. Hype superlatives, emoji on enterprise pages, and AI claims that are not tied to a business outcome.

Agent Prompt Guide

Quick colour reference

• Hero action fill: #061232
• White: #ffffff
• Action blue: #2563eb
• Nexus blue: #3b81db
• Timeline blue: #1677ff
• Arrow blue: #005cec
• Link blue: #3a82dd
• Footer blue: #4770df
• Tab selected / idle: #2a415e / #95a2b2
• Heading: #333333
• Body: #525151
• Black: #000000
• Field border: #cccccc
• Hairline: #dbdbdb

Example component prompts

• “Hero: full-bleed image, white Noto Sans TC 72px / 600 headline with -2.99px tracking and 100.8px line; one #061232 button, white Noto Sans 18px / 500 label, 20px 30px padding, 8px radius, 58px tall.”
• “News footer: a #2563eb filled button and a white button with #2563eb label and rgba(0, 0, 0, 0.19) 0px 0px 10px 0px glow, both 16px 24px padding, 8px radius, 50px tall.”
• “Use-case tabs: 50px tall, 8px radius, white Noto Sans TC 16px / 600 labels; idle #95a2b2, selected #2a415e.”

Iteration guide

1. Noto Sans TC first, always.
2. Navy for the hero action, blues for page-level actions.
3. Headings #333333, body #525151.
4. Radii come in four sizes: 2, 8, 30 and 50px.
5. Shadows only where a white control sits on white or floats over content.

Governance

Known Gaps

• Contrast, nexus-hero-button. Text #ffffff on #3b81db measures 3.93:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, timeline-pill. Text #1677ff on #ffffff measures 4.10:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, form-submit. Text #ffffff on #3b81db measures 3.93:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, solution-tab. Text #ffffff on #95a2b2 measures 2.60:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.