Omnichat DESIGN.md

Design System Inspiration of Omnichat

Overview

Visual Theme & Atmosphere

Omnichat is Taiwan and Hong Kong's leading omnichannel chat-commerce platform, and its zh-TW marketing surface reads like a confident AI-era SaaS pitch deck: a pure black (#000000) hero stage where the headline itself glows in an animated aurora gradient — lavender (#ac9cff) through violet (#8e4dff), mint (#69dfb2) and sky blue (#379afd) — clipped directly into the Outfit letterforms. Below that cinematic opening, the page settles onto a white (#ffffff) and soft-grey (#f8f9fa) canvas with periodic light-blue tint bands (#ecf4ff), so the dark AI theatre and the bright commercial sections alternate in clean cycles.

The system speaks two typographic languages at once. Latin display text — including the rounded "Omnichat" wordmark moments — is set in Outfit at weight 500, while Traditional Chinese UI copy runs in Noto Sans HK. Crucially, every heading uses positive letter-spacing (+1px to +1.4px) at a medium 500 weight, the opposite of the tight-tracked heavyweight convention: headlines feel open, geometric, and friendly rather than aggressive. Heading color is itself a hierarchy device — deep navy-blue (#0202a6) for trust-bearing section titles, sky blues (#4e97ff, #75adfc) for AI feature heads on dark, and neutral inks (#2e2e2e, #3d3d3d) for plain content.

The most distinctive signature is Omnichat's asymmetric corner geometry. Header CTAs round three corners at 13px and square the bottom-right ("13px 13px 0px"); pricing and form CTAs round only opposing corners ("0px 24px"), producing a ribbon-like parallelogram feel; pricing cards sit at a generous 20px with feather-soft shadows. Nothing is a plain rectangle and nothing is a default pill — the corner language alone identifies the brand. Combined with the chat-bubble logo mark and the blue monochrome action palette (#006aff primary, #408fff action), the whole surface signals "conversational, automated, commerce-grade".

Key Characteristics:

• Black hero stage with aurora-gradient text (#ac9cff → #8e4dff → #69dfb2 → #379afd) clipped into the headline
• Outfit (Latin) + Noto Sans HK (zh-TW) pairing at medium weight 500 — never bold-heavy
• Positive letter-spacing (+1px / +1.4px) on all headings — open, geometric, friendly
• Asymmetric corner signatures: notched "13px 13px 0px" header CTAs, ribbon "0px 24px" action CTAs
• Blue-only action palette: #006aff primary chrome, #408fff action CTAs, #0202a6 deep headings
• White/#f8f9fa canvas with #ecf4ff and #d9e8ff light-blue tint bands
• Feather shadows (rgba(0,0,0,0.06) 3px 3px 15px) on 20px-radius pricing cards
• Heading color as hierarchy: deep blue for trust claims, sky blue for AI features, ink for plain content

Primary tasks

• Sell to customers inside chat threads on LINE and WhatsApp
• Send a segmented LINE campaign and check its open rate
• Compare plan groups by switching between the three product lines
• Read a case study before deciding on the platform
• Book a demo or talk to a specialist instead of buying online

Brand Narrative

Omnichat was founded in 2017 by Alan Chan in Hong Kong, beginning — as the company's own about page tells it — with a single rented coworking desk where Chan coded the first MVP of a website chat tool that quickly attracted hundreds of e-commerce businesses. The founding insight was that in Asia's mobile-first markets, commerce doesn't happen on web forms — it happens inside chat threads on LINE, WhatsApp, Facebook Messenger, Instagram and WeChat. Omnichat unified those channels into one conversational commerce platform, and Taiwan became its largest market: the zh-TW surface leads the brand, LINE 官方帳號 sits first in the platform menu, and Taiwanese retail names (信義房屋, à la sha, 博士助聽器) headline its case studies.

The company states its mission plainly: "Omnichat 讓品牌與顧客保持緊密連結互動，以提升品牌的轉換率為使命" — keep brands and customers tightly connected, with raising conversion rate as the mission. Founder Alan Chan compresses it further: "Omnichat 的目標永遠只有一個，就是提高品牌的轉換率" (Omnichat has only ever had one goal: raising brands' conversion rates). Backed by a US$1.8M Pre-A round in 2022 and consecutive years of ~300% ARR growth, the platform now serves 5,000+ companies across Taiwan, Hong Kong, Malaysia, Singapore, Thailand and Indonesia as an official WhatsApp Business Solution Provider and authorized partner of Meta and LINE — partner logos the design treats as first-class trust assets. The 2025-era reinvention as an "Agentic AI customer experience platform" (Omni AI) put the black-stage aurora hero at the front of the brand.

What Omnichat refuses: faceless automation. The company's stated belief — "Omnichat 相信有溫度的顧客體驗，是品牌成功的關鍵" (warm customer experience is the key to brand success) — explains the design's character: a friendly rounded wordmark, open positive-tracked headings, consultative CTAs that offer a human expert, and chat bubbles as the recurring visual motif. The aesthetic says AI infrastructure; the voice says there's a person on the other end of the conversation.

Principles

1. Conversion is the only scoreboard. Every surface ties capability to 轉換率. UI implication: every section ends in a measurable next step (試用, 諮詢, 報價); decorative sections without a CTA are off-brand.
2. Conversation is the interface. Commerce happens in chat threads, so chat is the hero artifact. UI implication: show real LINE/WhatsApp-style bubbles and threads in product mockups; the logo's speech-bubble motif echoes through rounded, asymmetric shapes.
3. Warmth over automation theatre. "有溫度的顧客體驗" is the stated belief. UI implication: medium weights, open tracking, consultative CTA language ("專家諮詢" not "立即購買"), and human-team imagery beside AI features.
4. Prove it with partners and numbers. Official Meta/LINE/WhatsApp partnership and 5,000+ clients carry the trust load. UI implication: partner logos and quantified case-study metrics are first-class design elements, placed early and styled prominently.
5. One drama per page. The black aurora hero is the spectacle; everything after is calm white shelf. UI implication: reserve gradient and black bands for the opening statement and one AI showcase; keep pricing and content sections flat, tinted, and quiet.

Personas

Personas below are fictional archetypes informed by publicly observable Omnichat customer segments (Taiwanese omnichannel retailers, e-commerce marketing teams, customer-service leads), not individual people.

林佳穎, 34, 台北. E-commerce marketing manager at a mid-size apparel brand running LINE OA, Instagram and a Shopline store. Lives in broadcast open-rate dashboards; chose Omnichat because segmented LINE pushes lifted open rates past 50% without raising message costs. Wants every new AI feature explained as a campaign she can ship this quarter.

陳俊宏, 41, 台中. Retail operations director for a 60-store chain rolling out OMO member binding. Cares about 門市 staff adoption more than features — the platform must let a store clerk pick up a web chat without training. Trusts Omnichat because case studies name brands his scale, with numbers attached.

黃以涵, 28, 高雄. Customer-service team lead at a beauty D2C brand drowning in repeated FAQs across five channels. Evaluates AI agents by how gracefully they hand off to her human team. The "專家諮詢" button — a person, not a paywall — is exactly the vendor relationship she wants.

Colors

Primary

• Omnichat Blue (#006aff): Primary brand action color — header CTA fill and outline, featured pricing-card border, the 最受歡迎 badge. The chrome-level "do this" blue.
• Action Blue (#408fff): Lighter working blue for in-page CTAs (聯絡專人, 送出資料, 獲得報價), the active pricing toggle, inline link CTAs (了解完整案例), and the rounded wordmark moments.
• Deep Blue (#0202a6): Near-navy section-heading color for trust statements ("深受全球 5,000+ 客戶信賴") and the dark solid button (更多成功案例). A close variant #0403b7 appears on feature H3s.

Aurora Gradient (hero signature)

• Gradient Lavender (#ac9cff): First and last stop of the 270° hero text gradient.
• Gradient Violet (#8e4dff): Second stop — the purple depth of the aurora.
• Gradient Mint (#69dfb2): Center stop — the green flash that ties to the logo's mint petals.
• Gradient Sky (#379afd): Fourth stop — bridges the aurora back to brand blue.
• Gradient Base (#3337f6): Indigo base color of the hero gradient CTA button (stops run #3332f6 → #379afd → #69dfb2).

Headings on Dark

• Heading Sky (#4e97ff): AI feature H3s ("Omni AI Message Flow：AI 行銷活動產生器").
• Heading Sky Soft (#75adfc): Large section H2s on black bands.
• Hero Sub (#8ca8cf): Muted blue-grey hero subtitle ("Omni AI by Omnichat").

Neutral & Ink

• Ink (#333333): Document body color and nav links.
• Ink Strong (#2e2e2e): Strong section H2s on white ("為何 Omnichat 是最好的選擇？").
• Ink Heading (#3d3d3d): H3s, plan names, partner statements.
• Muted (#666666): Secondary copy and descriptions.
• Icon Grey (#69727d): Footer social icons and tertiary glyphs.

Surface

• Canvas (#ffffff): Page background, cards, button text on blue.
• Surface (#f8f9fa): The dominant section-band grey (most frequent background on the homepage).
• Surface Alt (#f9f9f9): Form-field fill.
• Tint Blue (#ecf4ff): Light-blue pricing hero band.
• Tint Blue Deep (#d9e8ff): Deeper blue tint for feature chips and translucent panels (rgba(217,232,255,0.75)).
• Hero Dark (#000000): Full-bleed black hero and AI showcase bands.
• Input Border (#c5c5c5): Form-field hairline.

Accent (menu-only)

• Menu Accent (#cc3366): Raspberry-pink link color inside the mega-menu dropdowns (platform/product lists). It lives only in the opened navigation panels — never on buttons or body copy — acting as a hidden wayfinding accent inside an otherwise all-blue system.

Typography

Font Family

• Display / Latin: Outfit — geometric rounded sans for all headings and English display text.
• Traditional Chinese UI: "Noto Sans HK" — buttons, nav, body-level zh-TW copy.
• Body default: system stack (-apple-system, "Segoe UI", Roboto, "Noto Sans"...) at 16px/24px.

Hierarchy

Principles

• Medium, never bold: Weight 500 is the display weight across every size. Omnichat persuades with color and gradient, not with heavy strokes.
• Positive tracking as identity: +1px to +1.4px letter-spacing on headings — open and airy where most tech brands track tight. Body returns to normal tracking.
• Color is the type hierarchy: The same 40px/500 heading switches between deep blue (#0202a6) for trust claims, ink (#2e2e2e) for questions, and sky (#75adfc) on dark — meaning is encoded in hue, not weight.
• Two scripts, one voice: Outfit's geometric rounds and Noto Sans HK's clean strokes are matched in optical weight so bilingual lines feel uniform.

Layout

Spacing System

• Base unit: ~4px with measured stops at 3px, 8px, 10px, 16px, 20px, 27px, 36px
• Notable: pricing cards run asymmetric 36px 26px padding with a deep 130px bottom reserve for the anchored CTA; panels use 27px

Grid & Container

• Full-bleed alternating bands: black hero → white/#f8f9fa content → black AI showcase → #ecf4ff pricing tint
• Centered single-column hero with a single inline question field ("你想從哪裡著手?")
• Pricing: 4-up equal-width plan cards (288px) under a centered 99px segmented pill
• Case studies: logo-led cards with 了解完整案例 link CTAs in repeating rows

Whitespace Philosophy

• Stage vs. shelf: black bands are theatrical and sparse (one headline, one CTA); white bands are denser, shelf-like product sections. The contrast in density is intentional rhythm.
• Tint as chapter break: #ecf4ff and #d9e8ff bands mark commercial chapters (pricing, lead capture) without needing rules or borders.
• Soft separation: shadows are feather-light; most separation comes from background alternation.

Border Radius Scale

• Small (5px): badges, dropdown bottoms
• Medium (8–10px): inputs, gradient/deep buttons
• Notch (13px 13px 0px): header CTAs, tab panels (inverted)
• Large (20px): pricing cards
• Ribbon (0px 24px): action CTAs — opposing corners only
• Full (99px): segmented pills

Responsive Behavior

Breakpoints

Touch Targets

• Action ribbon CTAs at 45px height with 20px side padding
• Segmented pill options at 36px inside a generously padded track
• Form fields at 44px height
• Nav rows at 60px with dropdown items at 42px

Collapsing Strategy

• Hero: 52px aurora headline compresses while keeping gradient clip and +letter-spacing
• Pricing: 4-up cards → stacked column, featured card keeps its #006aff border and badge
• Mega-menu: hover dropdowns → accordion drawer
• Black showcase bands keep full-bleed treatment with reduced internal padding

Image Behavior

• Product UI mockups (chat threads, dashboards) sit directly on band backgrounds without frames
• Client logos render monochrome on white cards in case-study rows
• Cards maintain 20px radius across breakpoints

Elevation & Depth

Shadow Philosophy: Omnichat keeps elevation nearly invisible. The two measured shadows are a feather-soft 6%-alpha card lift and a slightly firmer 15%-alpha panel drop — both tight and neutral. Drama is delegated entirely to the black bands and the aurora gradient; surfaces themselves stay calm and flat so the conversational UI mockups inside them (chat bubbles, LINE/WhatsApp threads) carry the visual interest. When the system wants emphasis it changes the background color of a whole band, never the z-axis of a single card.

Values kept in prose

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

• shadow.card: rgba(0,0,0,0.06) 3px 3px 15px 0px
• shadow.panel: rgba(0,0,0,0.15) 0px 3px 7px 0px

Motion & Easing

Durations:

Easings:

Motion rules: The aurora gradient is the brand's only continuous motion — a slow linear 270° sweep across the hero headline and gradient CTA, ambient like the AI it represents. Everything else is quick and functional: dropdown mega-menus slide down with motion-standard / ease-enter, the pricing pill slides its active state, chat-bubble mockups may type in once on scroll-into-view. No bounce, no spring — the product sells reliability to retailers. Under prefers-reduced-motion: reduce, the aurora freezes to a static gradient and all transitions collapse to instant; nothing functional is lost.

Components

Buttons

Header Primary (專家諮詢)

• Background: #006aff
• Text: #ffffff
• Border: 1px solid #006aff
• Radius: 13px 13px 0px
• Padding: 3px
• Font: 16px / 500 / Noto Sans HK
• Use: Header expert-consult CTA — signature notched bottom-right corner

Header Outline (免費試用)

• Background: #ffffff
• Text: #006aff
• Border: 1px solid #006aff
• Radius: 13px 13px 0px
• Padding: 3px
• Font: 16px / 500 / Noto Sans HK
• Use: Free-trial secondary CTA, identical notched geometry next to the primary

Hero Gradient (專家諮詢)

• Background: #3337f6
• Text: #ffffff
• Radius: 10px
• Padding: 10px
• Font: 16px / 500 / Noto Sans HK
• Hover: animated 270° gradient sweep (#3332f6 → #379afd → #69dfb2 → #379afd → #3332f6)
• Use: Hero CTA on the black stage — the aurora gradient made clickable

Action Ribbon (聯絡專人 / 送出資料 / 獲得報價 / 預約示範)

• Background: #408fff
• Text: #ffffff
• Border: 1px solid #006aff
• Radius: 0px 24px
• Padding: 8px 20px 11px
• Font: 16px / 500 / Noto Sans HK
• Use: All pricing and form CTAs — opposing corners rounded into a ribbon shape; compact 33px variant uses 2px 20px 5px padding

Deep Solid (更多成功案例)

• Background: #0202a6
• Text: #ffffff
• Radius: 10px
• Padding: 10px
• Font: 16px / 500 / Outfit
• Use: Case-study section CTA — deep blue gravity without the gradient

Tabs

Pricing Product Switcher

• Background: #ffffff
• Text: #408fff
• Radius: 99px
• Padding: 6px
• Font: 16px / 500 / Noto Sans HK
• Active: #408fff background + #ffffff text
• Use: Segmented pill switching 線上對話商務 / OMO全渠道銷售 / Social CDP plan groups

Inputs & Forms

Lead-Form Field

• Background: #f9f9f9
• Text: #3d3d3d
• Border: 1px solid #c5c5c5
• Radius: 8px
• Padding: 8px 16px
• Font: 16px / 400
• Use: Demo-request form fields (name, company, email)

Cards & Containers

Pricing Plan Card

• Background: #ffffff
• Border: 2px solid #ffffff
• Radius: 20px
• Padding: 36px 26px
• Shadow: rgba(0,0,0,0.06) 3px 3px 15px
• Use: Plan cards (高效客服方案, 基本行銷商務…); featured plan swaps the invisible border for 2px solid #006aff

Tab Content Panel

• Background: #ffffff
• Radius: 0px 0px 13px 13px
• Padding: 27px
• Shadow: rgba(0,0,0,0.15) 0px 3px 7px
• Use: Content panel hanging below active tabs — top corners squared into the tab bar

Badges

最受歡迎 (Most Popular)

• Background: #006aff
• Text: #ffffff
• Radius: 5px
• Padding: 1px 32px
• Font: 16px / 400
• Use: Plan ribbon floating above the featured pricing card

Navigation

• Background: #ffffff
• Text: #333333
• Font: 17px / 400 / Noto Sans HK
• Height: 60px rows
• Use: Top nav (平台 / 產品 / 案例 / 價格 / 資源 / 關於 Omnichat); active section turns #408fff
• Dropdown items: #cc3366 text, 14px / 500, radius 0px 0px 5px 5px, 42px rows

---

Verified: 2026-06-10 Tier 1 sources: https://www.omnichat.ai/tw/ (homepage, live inspect), https://www.omnichat.ai/tw/pricing/ (pricing, live inspect), https://www.omnichat.ai/tw/about/ (brand story), https://blog.omnichat.ai/tw/ (official blog) Tier 2 sources: none available (getdesign.md/omnichat → 404 "No designs found"; styles.refero.design/?q=omnichat → not listed) Conflicts unresolved: none

States

Do's and Don'ts

Do

• Stage hero statements on pure black (#000000) with the aurora gradient (#ac9cff → #8e4dff → #69dfb2 → #379afd) clipped into the headline text
• Set headings in Outfit weight 500 with positive +1px letter-spacing; pair zh-TW copy in Noto Sans HK
• Use the notched corner ("13px 13px 0px") on header CTAs and the ribbon ("0px 24px") on action CTAs — the asymmetric corners are the brand signature
• Keep the action palette blue-only: #006aff chrome, #408fff in-page CTAs, #0202a6 deep headings
• Separate sections with background alternation (white / #f8f9fa / #ecf4ff / black), not rules or heavy shadows
• Use heading color (deep blue vs sky vs ink) to signal content register
• Float the #006aff badge above the featured pricing card and mark it with a 2px #006aff border
• Keep shadows at feather strength (rgba(0,0,0,0.06))

Don't

• Use bold (700+) display weights — the system persuades at weight 500
• Track headings tight or negative — Omnichat's letter-spacing is always open and positive
• Round buttons symmetrically into default pills or plain rectangles — every CTA carries an asymmetric corner
• Introduce warm accent colors on actions — the raspberry #cc3366 lives only inside mega-menu dropdowns
• Stack heavy drop shadows on cards — elevation stays whisper-quiet
• Put the aurora gradient on body text or small UI — it belongs to hero-scale statements and the hero CTA only
• Use grey hairline dividers between sections — switch the band background instead
• Mix a second blue system into chrome — #006aff and #408fff have fixed, separate jobs

Voice & Tone

Omnichat's voice is confident, conversion-obsessed, and warmly pragmatic — a sales engineer who genuinely believes conversation is commerce. Every headline ties technology to a business outcome: AI is never demoed for its own sake, it "賦能客服、行銷、銷售轉換" (empowers service, marketing, and sales conversion). Numbers do the persuading — 5,000+ clients, 50% open rates, 轉換率 (conversion rate) appears in nearly every section — while the register stays polite Taiwanese business Mandarin with English product nouns (Omni AI, Social CDP, OMO) left untranslated as badges of category leadership.

Voice samples (verbatim from live zh-TW surfaces):

• "AI 全通路顧客體驗平台 全方位賦能客服、行銷、銷售轉換" — hero H1 (verified live 2026-06-10)
• "全渠道 AI 對話商務平台 深受全球 5,000+ 客戶信賴" — homepage H2 (verified live 2026-06-10)
• "為何 Omnichat 是最好的選擇？" — homepage H2 (verified live 2026-06-10)
• "選擇最適合您的方案，優化客戶服務，提升銷售業績！" — pricing subtitle (verified live 2026-06-10)
• "Omnichat 讓品牌與顧客保持緊密連結互動，以提升品牌的轉換率為使命。" — about page mission (fetched 2026-06-10)

Forbidden register: vague AI mysticism without a metric, hard-sell urgency ("限時搶購"), untranslated jargon walls, and cold enterprise stiffness — the brand believes "有溫度的顧客體驗" (warm customer experience) and its copy must feel like a helpful consultant, not a vending machine.

Agent Prompt Guide

Quick Color Reference

• Primary chrome CTA: Omnichat Blue (#006aff)
• In-page action CTA: Action Blue (#408fff)
• Deep heading / dark button: Deep Blue (#0202a6)
• Hero gradient: #ac9cff → #8e4dff → #69dfb2 → #379afd (270°)
• Hero CTA gradient base: #3337f6
• Background: White (#ffffff) / Surface (#f8f9fa)
• Tint bands: #ecf4ff, #d9e8ff
• Hero stage: Black (#000000)
• Body text: Ink (#333333); headings #2e2e2e / #3d3d3d
• Headings on dark: #75adfc, #4e97ff; hero subtitle #8ca8cf

Example Component Prompts

• "Create a hero on pure black #000000. Headline at 52px Outfit weight 500, line-height 64px, letter-spacing +1.4px, with a 270deg linear-gradient (#ac9cff, #8e4dff, #69dfb2, #379afd, #ac9cff) clipped into the text. Subtitle 24px Outfit 500 in #8ca8cf. One CTA: #3337f6 background with animated gradient sweep to #379afd and #69dfb2, 10px radius, 44px height, white 16px/500 text."
• "Design a header: white background, 17px Noto Sans HK #333333 nav links. Two CTAs with radius '13px 13px 0px' (notched bottom-right): outline version with 1px solid #006aff border and #006aff text, filled version with #006aff background and white text, both 32px tall."
• "Build a pricing card: white background, 20px radius, 2px solid #006aff border, shadow rgba(0,0,0,0.06) 3px 3px 15px, padding 36px 26px. Plan name 24px Outfit 500 #3d3d3d, letter-spacing +1px. Floating badge above: #006aff background, white 16px text, 5px radius, 1px 32px padding. CTA at bottom: #408fff background, white 16px/500 text, radius '0px 24px', 45px tall."
• "Create a segmented switcher: 99px-radius track on white with 1px blue outline. Options 16px/500: active option #408fff background with white text, inactive options white with #408fff text, 36px tall."
• "Design a lead form: fields with #f9f9f9 fill, 1px solid #c5c5c5 border, 8px radius, 44px height, 16px text #3d3d3d. Submit button #408fff with white text, radius '0px 24px', padding 9px 80px 10px."

Iteration Guide

1. Weight 500 + positive letter-spacing on every heading — never bold, never tight
2. Asymmetric corners on every CTA: "13px 13px 0px" in chrome, "0px 24px" in page
3. Blue roles are fixed: #006aff = chrome/featured, #408fff = in-page action, #0202a6 = deep heading
4. The aurora gradient appears exactly twice per page: hero headline clip + hero CTA
5. Separate sections by switching band background (white / #f8f9fa / #ecf4ff / black)
6. Shadows stay at rgba(0,0,0,0.06)–0.15 — barely visible
7. Heading hue encodes register: deep blue = trust claim, sky = AI feature on dark, ink = plain content
8. zh-TW copy in Noto Sans HK, Latin display in Outfit, matched optical weight

---

Governance

Known Gaps

• Contrast, button-action. Text #ffffff on #408fff measures 3.19:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.