AmazingTalker DESIGN.md

Design System Inspiration of AmazingTalker

Overview

Visual Theme & Atmosphere

AmazingTalker is a Taiwanese language-learning marketplace, and its design speaks the language of friendly, approachable confidence rather than institutional gravity. The page opens on a clean white canvas (#ffffff) with a single, unmistakable brand signal: a bright aquatic teal (#02cab9) that owns every primary call-to-action. This is not the corporate blue of legacy ed-tech, nor the playful primary-color chaos of consumer apps — it is one saturated, optimistic teal carried with discipline across every surface, from the en. global site to the tw. Traditional-Chinese home that anchors the brand in Taiwan. The atmosphere is warm, human, and conversion-focused: large hero imagery of real tutors, generous white CTAs, and a layout that always knows what it wants you to click next.

The typographic foundation is Roboto — Google's humanist workhorse — used at a friendly weight 600 for the 50px hero headline ("Languages and learning made fun"). On CJK section titles the stack gracefully falls back to Helvetica Neue, PingFang, and Microsoft JhengHei, the standard high-quality Traditional-Chinese rendering chain. This dual-script awareness is core to the brand: a marketplace serving Taiwan, Korea, Japan, and the broader Asian language market must read beautifully in both Latin and CJK, and AmazingTalker's font strategy treats that as a first-class concern rather than an afterthought.

Where Stripe whispers and Apple subtracts, AmazingTalker reassures. The secondary accent — a warm coral (#ff5f5f) — appears for badges, highlights, and moments of energy, providing emotional counterweight to the cool teal. The result is a palette that feels like a conversation between calm competence (teal) and human warmth (coral), set on abundant white, with body copy in a soft near-black slate (#484848) that never bites the way pure black would.

Key Characteristics:

• One disciplined brand teal (#02cab9) owning all primary CTAs across en./tw. surfaces
• Coral (#ff5f5f) as the warm secondary accent for badges, urgency, and highlights
• Roboto as the Latin workhorse; Helvetica Neue / PingFang / Microsoft JhengHei for CJK
• Soft slate body text (#484848) instead of pure black — friendlier, warmer reading
• Conservative small radii (3px–5px on buttons, 8px on cards) — approachable, not aggressive
• White-dominant canvas with light-gray (#f3f5f7) surface alternation for rhythm
• Conversion-first hero: real tutor imagery, white overlay text, large teal CTA
• Dual-script discipline — the design assumes both Latin and Traditional-Chinese readers

Primary tasks

• Compare tutors by profile, reviews, and per-lesson price
• Get matched with a tutor for the language you want
• Book a one-on-one lesson with a tutor you picked
• Arrange weekly lessons for your children with several tutors
• Apply to teach on the platform as a tutor

Brand Narrative

AmazingTalker is a Taiwan-founded online language-learning marketplace that connects learners with professional tutors for one-on-one lessons. Born in Taipei, the company built its identity around a simple, design-forward premise: language learning should be personal, flexible, and genuinely enjoyable — a far cry from rigid classroom curricula or impersonal app gamification. The marketplace model puts real, vetted human tutors at the center, and the brand's visual language reflects that human warmth.

The company expanded from its Traditional-Chinese home market (tw.amazingtalker.com) across Asia and globally (en.amazingtalker.com plus dozens of language-locale subdomains), serving learners of English, Spanish, Korean, Japanese, French, Chinese, and more. This multi-market reach is why the design treats dual-script rendering — Latin via Roboto, CJK via the PingFang/Microsoft JhengHei stack — as a foundational requirement rather than a localization afterthought.

What AmazingTalker rejects: the cold, institutional aesthetic of legacy education platforms and the over-gamified noise of mass-market language apps. What it embraces: one confident teal that signals trust and calm, a coral accent that keeps the experience warm and human, abundant white space, and real tutor imagery. The design-forward startup ethos shows in the restraint — a tightly held two-hue palette, disciplined typography, and a relentless focus on guiding the learner to their next lesson.

Principles

1. Human warmth over institutional gravity. The marketplace is built on real tutors and real connection; the design must feel approachable, never clinical. Soft slate text, warm coral accents, and friendly Roboto all serve this.
2. One brand color, held with discipline. Teal #02cab9 does all the interactive work. The restraint is the brand — a single confident hue reads as more trustworthy than a rainbow.
3. Dual-script as a first-class concern. Serving Taiwan, Korea, Japan, and the global market means Latin and CJK must both render beautifully. The font stack is a deliberate design decision.
4. Conversion is a kindness, not a trick. Every layout funnels toward the next teal CTA — but the goal is to help a hesitant learner actually start, which the brand frames as a genuine service.
5. Fun is functional. "Made fun" is not marketing fluff; it is a design constraint. If a surface feels like a chore, it has failed the brand.
6. Restraint signals quality. Two hues, neutral shadows, conservative radii, no custom-font theatrics — the discipline is what makes a design-forward Taiwanese startup read as premium and reliable.

Personas

Personas below are fictional archetypes informed by AmazingTalker's publicly observable user segments (adult language learners, working professionals upskilling, parents arranging lessons for children, and tutors), not individual people.

Yi-Chen Lin, 28, Taipei. Marketing professional who books English lessons twice a week to advance her career. Found AmazingTalker through the tw. site and loves that she can browse tutor profiles, read reviews, and see per-lesson prices upfront before committing. Trusts the brand because it feels human and transparent — not a faceless subscription app.

Daniel Cho, 34, Seoul. Engineer learning Japanese for a planned move to Tokyo. Uses the en. interface but appreciates that the platform clearly serves Asian-language learners. Picks tutors by reading detailed profiles and the coral-tagged "popular" markers. Would abandon a platform that hid pricing or felt like a generic gamified app.

Mei Wong, 41, Hong Kong. Parent arranging weekly Mandarin and English lessons for her two children. Values the warm, reassuring design — the teal CTAs and clean course cards make a complex catalog feel manageable. Books across multiple tutors and trusts the review system.

Carlos Mendez, 30, who tutors Spanish on the platform. Came in through "Apply To Teach". Values that the marketplace presents tutors with dignity and clear earning potential, and that the brand's friendly design attracts motivated, respectful learners.

Colors

Primary

• Brand Teal (#02cab9): The signature. Primary CTA backgrounds ("English tutors", "Match me with tutors", "開始挑選教師吧！"), active nav state, link highlights. A bright, saturated aquatic teal (rgb 2,202,185) that anchors the entire identity.
• Teal Deep (#02b3a4): Pressed / hover-darkened variant of the primary teal for interactive feedback on CTAs.
• Pure White (#ffffff): Page background, card surfaces, and the text color sitting on every teal button.

Accent

• Coral (#ff5f5f): The warm energy accent (rgb 255,95,95). Badges, urgency tags, highlight numbers, decorative emphasis. Provides emotional warmth against the cool teal.
• Coral Soft (#ffe5e5): Tinted coral surface (derived from coral at low alpha, rgba(255,95,95,0.1) observed live) for highlight-card backgrounds and badge fills.

Neutral Scale

• Heading (#363636): Darkest text tone (rgb 54,54,54). Strong section titles, emphasis labels.
• Body (#484848): The dominant text color (rgb 72,72,72) — by far the most-used color on the page. Standard reading copy, price labels, nav.
• Muted (#767676): Secondary text (rgb 118,118,118). Descriptions, metadata, helper copy.
• Slate (#909399): Icon and tertiary-detail gray (rgb 144,147,153). Inactive icons, subtle markers.

Surface & Borders

• Surface (#f3f5f7): Light cool-gray section background (rgb 243,245,247) for alternating bands and grouped content.
• Surface Alt (#fbfbfb): Near-white surface for subtle card separation.
• Hairline (#dcdfe6): Standard border / divider color (rgb 220,223,230) for cards and inputs.
• Hairline Soft (#ebebeb): Lightest divider for low-emphasis separation.

On-Brand

• On Primary (#ffffff): Text and icons on teal and coral fills — always white for maximum contrast and friendliness.

Color budget note. AmazingTalker runs a tight two-hue identity: teal does all the interactive work, coral provides warmth and urgency, and everything else is a disciplined neutral scale on white. There is no third brand color competing for attention — the restraint is what makes the teal read as confident.

Typography

Font Family

• Latin Primary: Roboto, sans-serif — humanist, friendly, exceptionally legible at small sizes
• CJK Stack: "Helvetica Neue", Helvetica, Arial, "PingFang HK", PingFang-SC-Regular, PingFang, "Hiragino Sans GB", STHeiti, "Microsoft JhengHei", sans-serif — high-quality Traditional/Simplified Chinese rendering chain
• No custom webfont: AmazingTalker deliberately uses system-available and Google fonts, prioritizing fast load and broad CJK coverage over a bespoke typeface

Hierarchy

Principles

• Weight as hierarchy, not drama: AmazingTalker uses 600 only at the hero, 500 for section titles, 400 for body and CTAs, and 300 for price/intro lines. The range is broad but each weight has a clear job — there is no "heavy everywhere" shouting.
• Roboto for trust and legibility: The choice of Roboto signals friendliness and neutral competence; it never competes with the content. It reads identically across the dozens of language-locale subdomains AmazingTalker serves.
• CJK-aware fallback is intentional: Section titles on tw. surfaces resolve to the Helvetica/PingFang/Microsoft JhengHei stack so that Traditional-Chinese renders crisply. This is a deliberate dual-script design decision, not an accident of CSS.
• Generous line-height (1.5): Body and section text run at 1.5 line-height for relaxed, scannable reading — appropriate for a content-heavy marketplace browsed by learners comparing tutors.
• No letter-spacing tricks: Tracking stays normal everywhere. The friendliness comes from weight and warmth, not from typographic engineering.

Layout

Spacing System

• Base unit: ~8px with frequent 18px (lg) rhythm observed in CTA padding (8px 18px)
• Scale: 4px, 8px, 12px, 16px, 18px, 24px, 36px, 64px
• Section vertical rhythm: generous 64px+ bands separating content groups

Grid & Container

• Centered max-width content column with full-bleed hero imagery
• Hero: large background image + white overlay headline/subtitle + teal CTA, left or center aligned
• Course grids: multi-column responsive card grids (English / Spanish / Korean / Japanese tutors)
• Alternating white and #f3f5f7 section bands for visual rhythm
• Mega-menu navigation for the large tutor-category taxonomy

Whitespace Philosophy

• Generous and inviting: As a consumer marketplace, AmazingTalker uses ample whitespace to keep the dense catalog of tutors, languages, and prices from feeling overwhelming.
• Conversion-anchored: Whitespace always funnels the eye toward the next teal CTA. Empty space is never decorative — it is directional.
• Band rhythm: White and light-gray (#f3f5f7) bands alternate to chunk the long marketing page into digestible, scannable sections.

Border Radius Scale

• Sharp (3px): Section CTAs, tags — crisp, modern
• Standard (5px): Hero buttons, inputs — the workhorse
• Comfortable (8px): Cards, containers — friendly but restrained
• Pill (9999px): Avatars, occasional filter chips only

Responsive Behavior

Breakpoints

Touch Targets

• Primary CTAs are large (hero CTA ~54px tall section variant) — comfortably tappable
• Nav links at 16px with adequate spacing
• Course cards are full tap targets

Collapsing Strategy

• Hero: 50px H1 → ~32px on mobile, weight 600 maintained
• Navigation: horizontal links + mega-menu → hamburger drawer
• Course grids: 4-column → 2-column → single-column stacked
• Section CTA: full-width teal button on mobile
• Surface bands maintain full-width treatment, reduce internal padding

Image Behavior

• Hero imagery uses responsive cropping, keeping the tutor's face and CTA visible
• Course-card thumbnails maintain 8px radius across breakpoints
• Locale-specific imagery may swap between en. and tw. surfaces

Elevation & Depth

Shadow Philosophy: AmazingTalker uses honest, neutral soft shadows — no chromatic tinting. Depth is gentle and functional: cards lift just enough to read as tappable, dropdowns sit clearly above content, and nothing floats dramatically. This restraint keeps the visual energy concentrated in the teal CTAs and coral accents rather than in elevation theatrics. The shadows are warm-neutral black at low alpha, which suits the friendly, content-first marketplace register.

Decorative Depth

• Hero imagery provides natural depth; overlay text sits flat in white for maximum legibility
• Light-gray surface bands (#f3f5f7) create depth through value contrast rather than shadow
• Coral and teal accents provide chromatic energy without relying on elevation

Values kept in prose

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

• shadow.ambient: rgba(0,0,0,0.06) 0px 2px 8px
• shadow.standard: rgba(0,0,0,0.10) 0px 4px 16px
• shadow.elevated: rgba(0,0,0,0.12) 0px 8px 28px

Motion & Easing

Durations:

Easings:

Signature motions.

1. Card hover lift. Course cards lift gently on hover using motion-fast / ease-standard with a small shadow increase — signaling tappability without bounce.
2. Mega-menu reveal. Tutor-category dropdowns open with motion-standard / ease-enter, fading and sliding down a few pixels — calm, never abrupt.
3. CTA feedback. Teal CTAs darken toward #02b3a4 on press with motion-fast — immediate, reassuring tactile feedback.
4. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant. Hover lifts become instantaneous; the marketplace stays fully functional.

Components

Buttons

Primary Hero CTA

• Background: #02cab9
• Text: #ffffff
• Radius: 5px
• Font: 20px Roboto weight 400
• Use: Hero primary action ("English tutors", "Match me with tutors")

Primary Section CTA

• Background: #02cab9
• Text: #ffffff
• Padding: 8px 18px
• Radius: 3px
• Height: ~54px
• Font: 24px Roboto weight 300
• Use: Section conversion CTA — observed live on tw. as "開始挑選教師吧！" (Start picking your teacher)
• Hover: darken toward #02b3a4

Header Utility (Ghost)

• Background: transparent
• Text: #484848 (or rgba(0,0,0,0.87) in nav context)
• Border: none
• Font: 14px Roboto weight 400
• Use: "Sign In", "Apply To Teach" — low-emphasis header actions

Coral Accent Button / Badge

• Background: #ff5f5f
• Text: #ffffff
• Radius: 3px–5px
• Use: Urgency tags, promotional highlights, energy moments

Cards & Containers

Course Card

• Background: #ffffff
• Radius: 8px
• Shadow: rgba(0,0,0,0.10) 0px 4px 16px (standard ambient)
• Structure: tutor/course image top, category head (24px), price label in #484848 weight 300 (e.g. "₩14,580/lesson")
• Border: optional 1px solid #dcdfe6 hairline

Surface Band

• Background: #f3f5f7 (alternating section bands) or #fbfbfb
• Used to group "Popular Courses", "4 reasons to learn", "Who can learn with AmazingTalker?" sections

Navigation

• Clean horizontal header on white
• Brand logotype left-aligned, utility actions right ("Sign In", "Apply To Teach")
• Links: Roboto 16px weight 400, rgba(0,0,0,0.87) text, teal #02cab9 on active/hover
• Dropdown mega-menus for tutor categories (English / Spanish / Korean / Japanese / French / Chinese Tutors)
• Locale awareness: header adapts between en. and tw. subdomains

Badges / Tags / Pills

• Coral Badge: #ff5f5f background, white text, ~3px radius — urgency / promotional
• Coral Soft Tag: #ffe5e5 (rgba(255,95,95,0.1)) background, coral text — low-emphasis highlight
• Teal Tint Tag: rgba(2,202,185,0.2) background, teal text — on-brand category markers

Inputs & Forms

• Border: 1px solid #dcdfe6
• Radius: 3px–5px
• Focus: teal #02cab9 border / ring
• Text: #484848
• Placeholder: #909399

---

Verified: 2026-06-08 (Tier 1 live inspect — playwright getComputedStyle on en. and tw. surfaces) Tier 1 sources: https://www.amazingtalker.com (redirects to https://en.amazingtalker.com — body/CTA/h1/h2/nav getComputedStyle, live DOM); https://tw.amazingtalker.com (Traditional-Chinese home — teal CTA #02cab9 3px radius confirmed, second surface) Method: Live computed-style extraction; rgb()→hex conversion. >=6 real samples captured (teal CTA, coral accent, body #484848, h1 50px/600, h2 30px/500, nav teal active). .verification.md: web/references/amazingtalker/.verification.md

States

Do's and Don'ts

Do's and Don'ts (Component Quick-Reference)

Do

• Use teal #02cab9 for every primary CTA — it is the single brand signal
• Use coral #ff5f5f for warmth, urgency, and highlight moments only
• Use #484848 for body text — never pure black
• Keep button radius at 3px–5px and card radius at 8px
• Use Roboto for Latin and the PingFang/Helvetica stack for CJK
• Alternate white and #f3f5f7 bands to chunk long pages

Don't

• Don't introduce a third brand hue competing with teal and coral
• Don't use pure black (#000000) for body copy — #484848 is warmer
• Don't use large pill radii on primary buttons — stay sharp (3–5px)
• Don't tint shadows — AmazingTalker uses neutral soft shadows
• Don't drop the CJK fallback stack — Traditional-Chinese must render crisply
• Don't bury the teal CTA — every section funnels toward it

Do

• Use teal #02cab9 as the single primary interactive color across all surfaces
• Reserve coral #ff5f5f for warmth, urgency, and highlight moments
• Use #484848 body / #363636 heading text — warm, never pure black
• Pair Roboto (Latin) with the PingFang/Helvetica/Microsoft JhengHei stack (CJK)
• Keep button radii at 3–5px and card radii at 8px
• Use neutral soft shadows and alternate white / #f3f5f7 bands
• Make every section funnel toward the next teal CTA
• Frame copy as encouraging and learner-first — "made fun" is a constraint

Don't

• Don't add a third brand hue — teal + coral is the whole identity
• Don't use pure black for text — #484848 keeps the warmth
• Don't use large pill radii on primary buttons — stay crisp
• Don't tint shadows or over-elevate — keep depth gentle and neutral
• Don't drop the CJK fallback stack — Traditional-Chinese must render crisply
• Don't make coral a second CTA color — it is accent only
• Don't write cold institutional ed-tech copy — keep it human and inviting
• Don't bury or weaken the teal CTA in any layout

Voice & Tone

AmazingTalker's voice is encouraging, plain-spoken, and learner-first — the tone of a friendly guide who genuinely wants you to start learning today. The tagline "Languages and learning made fun" sets the register: warm, optimistic, zero jargon. CTAs are direct and inviting ("Find tutors", "Match me with tutors", "Apply To Teach"), and on Traditional-Chinese surfaces they carry the same warmth ("開始挑選教師吧！" — "Let's start picking your teacher!", complete with an inviting exclamation that the brand allows because the register is genuinely consumer-friendly).

Forbidden register. Cold institutional ed-tech jargon ("pedagogical outcomes", "learning solutions"). Hype superlatives stacked on capabilities. Anything that makes language learning feel like an obligation rather than an opportunity. The brand's whole premise is that learning should feel human and fun — the copy never betrays that.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Brand Teal (#02cab9)
• CTA pressed: Teal Deep (#02b3a4)
• Accent / urgency: Coral (#ff5f5f)
• Accent soft bg: Coral Soft (#ffe5e5)
• Background: Pure White (#ffffff)
• Surface band: Light Gray (#f3f5f7)
• Heading text: Dark (#363636)
• Body text: Slate (#484848)
• Muted text: Gray (#767676)
• Border: Hairline (#dcdfe6)

Example Component Prompts

• "Create a hero on a tutor photo with white overlay. H1 at 50px Roboto weight 600, line-height 1.3, color #ffffff. Subtitle at 24px weight 400, white. Primary CTA: teal #02cab9 fill, white text, 5px radius, 20px Roboto weight 400 — label 'Find tutors'."
• "Design a course card: white background, 8px radius, shadow rgba(0,0,0,0.10) 0px 4px 16px. Category head 24px Roboto weight 400 #363636. Price label 18px weight 300, color #484848, e.g. '₩14,580/lesson'."
• "Build a section CTA: teal #02cab9 fill, white text, 3px radius, 8px 18px padding, 24px Roboto weight 300 — label 'Start now'. Place it centered on a #f3f5f7 band."
• "Create a coral urgency badge: #ff5f5f background, white text, 3px radius, 14px Roboto weight 400. Soft variant: #ffe5e5 background with coral text."
• "Design navigation: white header. Links Roboto 16px weight 400, rgba(0,0,0,0.87), teal #02cab9 on active. Utility buttons 'Sign In' / 'Apply To Teach' at 14px weight 400, #484848, transparent."

Iteration Guide

1. Teal #02cab9 is the one interactive color — every CTA, every active state
2. Coral #ff5f5f is warmth and urgency only — never a second CTA color
3. Body is #484848, headings #363636 — never pure black
4. Roboto for Latin; keep the Helvetica/PingFang/Microsoft JhengHei stack for CJK
5. Button radius 3–5px, card radius 8px — friendly but crisp
6. Neutral soft shadows only — no chromatic tinting
7. Alternate white and #f3f5f7 bands to structure long marketplace pages
8. Every layout decision funnels toward the next teal CTA

---

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #02cab9 measures 2.07:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-primary-cta. Text #ffffff on #02cab9 measures 2.07:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, accent-coral. Text #ff5f5f on #ffe5e5 measures 2.49:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.