Design System Inspiration of MaiCoin / MAX

Overview

Visual Theme & Atmosphere

MaiCoin is the largest crypto-exchange group in Taiwan, and its design splits cleanly across two surfaces with two distinct personalities. The consumer-facing buy/sell site (www.maicoin.com) is warm and approachable: a clean white (#ffffff) canvas, near-black ink text (#262626) rather than pure black, and a signature warm coral (#ee5457) reserved for the one action that matters — “立即註冊” (Register now). The coral sits in a wider red-orange family (#ce4234, #dd4c4a) used for learn-more links and banner accents, giving the consumer brand a friendly, retail-fintech temperature far from the cold blue of legacy finance. A positive-change green (#05bb85) signals price-up on the consumer side. Typography is set in the platform system stack (-apple-system, system-ui, Segoe UI, Roboto), optimized for dense Traditional-Chinese (zh-TW) legibility, with a giant decorative “MaiCoin” Roboto watermark at 123px / 4% opacity behind the hero.

The pro-trading surface, MAX Exchange (max.maicoin.com), swaps that warmth for a trustworthy institutional navy (#2e4692) — the color of the primary “註冊帳號 / 立即註冊” CTA — backed by a deeper navy (#253158) and a vivid accent blue (#007aff) for promotional chips. MAX is where the market data lives, so it introduces a true trading-color pair: an up-green (#49a870) and a down-red (#ec5b5c), each rendered as fill or text against the order book and ticker rows. MAX also brings a dedicated numeric typeface — Iosevka (and Iosevka-Bold) — for prices and order-book figures, so digits align in monospaced columns the way a professional terminal demands, while UI chrome stays on the system-ui sans stack.

Both surfaces are deliberately shadowless and flat: live inspection found box-shadow: none across navs, hero CTAs, promo cards, and stat strips on both sites. Depth comes from cool-blue tinted surfaces (#f2f4fb, #f4f5f9), thin #eaeaea and #d5dbee hairlines, and dark cards (#272727) rather than elevation. Geometry is mixed and intentional: the consumer coral CTA is nearly sharp (2px radius), MAX’s primary CTA is a gentle 8px, its promo cards 16px, and its secondary buy button a 22px pill — a small radius vocabulary that reads as engineered, not decorative.

Key Characteristics:

• Two-surface brand: warm consumer coral (#ee5457) on MaiCoin, institutional navy (#2e4692) on MAX
• Coral reserved as the single consumer “action” color; navy the single pro “action” color
• True trading-color pair on MAX — up-green (#49a870), down-red (#ec5b5c)
• Iosevka monospace for MAX prices/order-book figures; system sans for all UI chrome
• Near-black ink (#262626) for text instead of pure black — warm, legible for zh-TW
• Shadowless flat depth: cool-blue surfaces (#f2f4fb/#f4f5f9) + #eaeaea/#d5dbee hairlines
• Mixed-but-restrained radius scale — 2px coral CTA, 8px navy CTA, 16px cards, 22px pill
• Decorative oversized Roboto “MaiCoin” watermark at 4% opacity behind the consumer hero

Primary tasks

• Buy your first cryptocurrency by following numbered steps
• Bind a device and verify your identity before buying
• Trade spot markets while watching the order book
• Lock coins on chain or run a trading bot
• Hold crypto long-term on a Taiwan-registered platform

Brand Narrative

MaiCoin was founded in 2014 by Alex Liu — a Taipei native and Stanford Electrical Engineering graduate who left Qualcomm to build Taiwan’s first digital-asset wallet, exchange, and service platform (MaiCoin Group — About). The founding premise was access: at the time there was no compliant, consumer-friendly way for ordinary Taiwanese to buy and hold cryptocurrency. MaiCoin’s numbered, step-by-step consumer flow is the direct expression of that mission — turn an intimidating new asset class into a sequence anyone can complete.

In 2016 the group established AMIS, a blockchain-technology company, and in 2017 the team launched MAX Exchange — positioned as the first Taiwanese exchange to offer third-party fiat custody through a bank trust, a compliance-first differentiator in a market wary of exchange risk. The two-surface brand maps onto two audiences: MaiCoin’s warm coral for the retail first-timer, MAX’s institutional navy for the active trader who needs an order book, depth, and monospaced figures.

What the design refuses, visible across both surfaces: the dark-pattern urgency and neon hype of speculative crypto marketing, and the heavy, shadow-stacked chrome of legacy finance. What it embraces: a flat, fast, screen-native interface; one disciplined action color per surface; market colors that mean exactly one thing; and Iosevka figures that respect a trader’s need for aligned, scannable numbers.

Principles

1. One action color per surface. Coral (#ee5457) is “do this” on MaiCoin; navy (#2e4692) is “do this” on MAX. UI implication: never spread the action color, and never mix the two brands on one screen.
2. Guide the first-timer, respect the trader. The consumer flow is numbered and reassuring; MAX is terse and dense. UI implication: consumer copy explains each step; pro copy states the capability and shows the data.
3. Market colors mean one thing. Up-green (#49a870) and down-red (#ec5b5c) signal price direction only. UI implication: never reuse them for generic success/error chrome.
4. Figures are typography with rules. Prices belong in Iosevka so columns align. UI implication: switch to mono for any numeric/market data; keep prose in the system sans.
5. Flat and fast. Screen-native clarity beats decorative depth. UI implication: no shadows; separate with tint and hairlines; use a dark card for emphasis, not elevation.

Personas

Personas below are fictional archetypes informed by publicly observable MaiCoin / MAX user segments (Taiwanese first-time crypto buyers, active spot traders, compliance-minded holders), not individual people.

林雅婷, 28, 台北. A first-time buyer who wants to own a little Bitcoin without getting scammed. Followed MaiCoin’s numbered steps (register → verify → buy) and trusted the calm, non-hype tone. Would abandon any exchange whose homepage felt like a casino.

陳冠宇, 34, 新竹. An engineer who trades spot on MAX daily. Lives in the order book and cares that prices render in aligned Iosevka columns and that up-green / down-red are unambiguous at a glance. Values that MAX uses a bank-trust fiat custody model.

黃淑芬, 45, 台中. A cautious longer-term holder who chose MaiCoin / MAX specifically because it is a Taiwan-registered, compliance-first platform. Reads the plainly stated service hours and phone support as signals of a real, regulated operation rather than an anonymous offshore exchange.

Colors

Consumer Primary (MaiCoin, coral)

• MaiCoin Coral (#ee5457): Primary consumer brand and CTA color. The warm coral on the “立即註冊” register button and learn-more links — the system’s single consumer “action” color.
• Coral Deep (#dd4c4a): Slightly deeper red-coral used on banner-accent fills.
• Coral Red (#ce4234): The deeper red-orange variant in the warm accent family (learn-more text, emphasis links).
• Up Green (Consumer) (#05bb85): Positive price-change / gain indicator on the consumer surface.

Pro Primary (MAX, navy)

• MAX Navy (#2e4692): Primary pro brand and CTA background — the navy “註冊帳號 / 立即註冊” button on MAX. The single pro “action” color.
• Navy Alt (#2e4592): Near-identical navy used as the secondary buy-button text color.
• Navy Deep (#253158): Deeper navy for strong labels and dark UI text on MAX.
• Accent Blue (#007aff): Vivid blue for MAX promotional accent chips and highlights.

Market Data (MAX)

• Up Green (Pro) (#49a870): Price-up / positive-change color in the order book and tickers.
• Down Red (Pro) (#ec5b5c): Price-down / negative-change color in the order book and tickers.

Text Hierarchy

• Ink (#262626): Primary text, nav, strong labels (near-black, not pure black).
• Ink Pure (#000000): Occasional maximum-contrast headings.
• Body (#424242): Secondary body copy and header text.
• Muted (#4d4d4d): Tertiary text, captions.
• Muted Alt (#4a4a4a): Alternate muted grey (e.g. 404 action-card text).
• Faint (#9d9d9d): Lowest-emphasis labels, placeholders.
• Input Ink (#2f333a): MAX form-input value and placeholder color.

Neutral & Surface

• Pure White (#ffffff): Page background, white cards, text on coral/navy/dark.
• Surface (#f2f4fb): Cool blue-grey tinted surface for MAX stat strips and segmented blocks.
• Surface Alt (#f4f5f9): Secondary cool-grey surface used on both sites.
• Hairline (#eaeaea): Thin borders, dividers, and card outlines — primary separation device.
• Border Navy (#d5dbee): Cool-blue tinted border on MAX containers.
• Dark Card (#272727): Near-black background for MAX dark promo feature cards.
• Pill Grey (#434343): Carousel control-pill background on MAX.

Typography

Font Family

• Sans (UI): platform system stack — -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica. Carries all nav, body, button, and label text on both surfaces, tuned for dense Traditional-Chinese (zh-TW) rendering.
• Mono (numeric): Iosevka (with Iosevka-Bold) — used on MAX for prices, order-book figures, and tabular financial data so digits align in monospaced columns.
• Display (decorative): Roboto — used only for the oversized “MaiCoin” watermark behind the consumer hero.

Hierarchy

Principles

• System sans for legibility, Iosevka for figures: UI chrome rides the platform system stack (best zh-TW hinting); only numeric/price data switches to Iosevka so columns of digits align like a trading terminal.
• Weight separates the two CTAs: the consumer coral CTA sits at weight 600; MAX’s navy CTA pushes to weight 700 — the pro surface reads slightly heavier and more emphatic.
• Near-black ink, not pure black: body and nav text are #262626, reserving pure #000000 for rare maximum-contrast headings.
• Decorative display is the exception: the only non-system display type is the faint Roboto watermark — it is texture, not content.

Layout

Spacing System

• Base unit: ~4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 48px
• Notable: MAX promo cards use a uniform 20px padding; the cool-blue stat strip uses vertical 20px / horizontal 0 padding so figures span edge-to-edge.

Grid & Container

• Consumer: centered single-column hero with a banner/carousel, a step-by-step “how to buy” row (註冊 → 裝置綁定 → 身分驗證 → 買 → 賣 → 發送接收), and full-width feature bands.
• MAX: wide ~1200px container; landing alternates white sections with cool-blue (#f2f4fb) stat strips and dark promo-card rows.
• Cards group related products; the dark #272727 promo cards sit in a horizontal row beneath the MAX hero.

Whitespace Philosophy

• Flat segmentation: sections separate by background tint (#f2f4fb / #f4f5f9 vs #ffffff) and #eaeaea / #d5dbee hairlines, never by shadow.
• One loud action per surface: the coral (consumer) and navy (pro) CTAs are visually isolated so the next step is unambiguous.
• Dense data, calm chrome: where MAX shows market figures it packs them tightly in Iosevka columns, but the surrounding chrome stays airy.

Border Radius Scale

• Sharp (2px): consumer coral register CTA
• Small (8px): MAX primary navy CTA, accent chip
• Card (12px): cool-blue stat strip
• Comfortable (16px): MAX dark promo cards
• Pill (20–22px): MAX secondary buy button, carousel controls
• Hairline radius (6px): 404 action cards

Responsive Behavior

Breakpoints

Touch Targets

• Consumer coral CTA at 52px height — an unmistakable tap target
• MAX primary navy CTA at 60px height; secondary buy pill at 32px
• Nav links spaced for touch within the header

Collapsing Strategy

• Consumer hero carousel: swipeable on mobile; step row wraps
• MAX promo-card row: horizontal on desktop → vertical stack on mobile
• Cool-blue stat strip: multi-column → stacked
• Market data (MAX): tables/order book scroll horizontally on narrow viewports while Iosevka columns stay aligned

Image Behavior

• Consumer banners are image-driven and carry no shadow at any size, consistent with the flat system
• Cards maintain their radius (16px promo, 12px stat) across breakpoints

Elevation & Depth

Shadow Philosophy: Both MaiCoin and MAX are near-shadowless. Live inspection found box-shadow: none across navs, hero CTAs, promo cards, and stat strips on both surfaces. Depth and grouping are communicated through flat cool-blue tinted surfaces (#f2f4fb, #f4f5f9), thin #eaeaea / #d5dbee hairlines, and dark cards (#272727). When emphasis is needed the system reaches for color — coral (#ee5457) on consumer, navy (#2e4692) or the dark card on MAX — never elevation. This keeps the trading UI feeling fast and screen-native, the way a market terminal should.

Values kept in prose

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

• shadow.none: none

Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and restrained, consistent with the flat, fast aesthetic. The consumer hero carousel auto-advances at a slow cadence; promo cards on MAX fade-in from below at motion-standard / ease-enter. Market data updates (ticks, order-book changes) should commit near-instantly with at most a brief color flash in the market pair — a trading surface signals steadiness, not delight, and a slow animation on a price would be misleading. No bounce or spring. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the carousel stops auto-advancing; both surfaces remain fully functional.

<!– OmD v0.1 Sources — Philosophy Layer (sections 10–15)

Tier 1 live inspect (2026-06-17) via playwright getComputedStyle on two brand-owned surfaces:

• (consumer, coral): register CTA #ee5457 / 2px / weight 600 / 52px; learn-more link coral #ee5457; nav text #262626 14px system sans; up-green #05bb85; warm red-orange family #ce4234/#dd4c4a; decorative Roboto “MaiCoin” watermark 123px @ 4% opacity; box-shadow none. document.title verbatim: “MaiCoin 台灣數位資產交易平台 - 比特幣，以太幣，萊特幣”.
• (pro, navy): register CTA #2e4692 / 8px / weight 700 / 60px secondary buy pill white bg + #2e4592 text / 22px; dark promo cards #272727 / 16px / 20px; cool-blue stat strip #f2f4fb / 12px; accent #007aff; up-green #49a870; down-red #ec5b5c; Iosevka / Iosevka-Bold numeric font; signup/signin underline inputs #2f333a with placeholders 電子信箱 / 密碼; box-shadow none.

Voice samples (§10) are verbatim from the live surfaces (register CTA, onboarding step label, homepage title meta).

Brand narrative (§11): MaiCoin founded 2014 by Alex Liu (Stanford EE, ex-Qualcomm); AMIS established 2016; MAX Exchange launched 2017 with third-party bank-trust fiat custody. Sourced from the brand-owned MaiCoin Group About page and corroborating public reporting. Founding-detail specifics beyond the About page are widely documented public facts, not directly quoted.

Personas (§13) are fictional archetypes informed by publicly observable MaiCoin / MAX user segments (Taiwanese first-time buyers, active spot traders, compliance-minded holders). Names are illustrative; they do not refer to real people.

Tier 1’s two brand-owned surfaces carry the proof per spec/regional-sources.yaml.

Interpretive claims (e.g., “one action color per surface”, “flat and fast as a rejection of speculative-crypto hype and legacy-finance chrome”) are editorial readings connecting MaiCoin / MAX’s observed design to its positioning, not directly sourced statements. –>

Components

Buttons

Consumer Register CTA (Primary)

• Background: #ee5457
• Text: #ffffff
• Radius: 2px
• Height: 52px
• Font: 16px weight 600
• Use: The single consumer primary action — “立即註冊” (Register now) on MaiCoin

MAX Register CTA (Pro Primary)

• Background: #2e4692
• Text: #ffffff
• Radius: 8px
• Padding: 10px 16px
• Height: 60px
• Font: 16px weight 700
• Use: MAX primary register/sign-up action (“立即註冊”, “註冊帳號”)

MAX Buy Pill (Secondary)

• Background: #ffffff
• Text: #2e4592
• Radius: 22px
• Padding: 0px 12px
• Height: 32px
• Font: 16px weight 400
• Use: MAX secondary buy CTA pill (“立即購買”)

Promo Accent Chip

• Background: #007aff
• Text: #ffffff
• Radius: 8px
• Height: 40px
• Use: MAX promotional accent action chip

Inputs & Forms

MAX Underline Field

• Text: #2f333a
• Font: 14px weight 400
• Border: borderless underline style (no box border)
• Placeholder: #2f333a family (電子信箱, 密碼)
• Use: MAX sign-up / sign-in email and password fields

Cards & Containers

Dark Promo Card

• Background: #272727
• Text: #ffffff
• Radius: 16px
• Padding: 20px
• Use: MAX dark feature/promo cards (“鏈上鎖倉”, “交易機器人”, “收益懶人躺賺”)

Cool-Blue Stat Card

• Background: #f2f4fb
• Radius: 12px
• Padding: 20px 0px
• Use: MAX stat-strip card on the landing surface

404 Action Card

• Background: #ffffff
• Text: #4a4a4a
• Border: 1px solid #eaeaea
• Radius: 6px
• Height: 88px
• Use: MaiCoin error-page action cards (“查看幣價”, “回首頁”, “常見問題”)

Badges

Price-Up Indicator

• Background: #49a870
• Text: #ffffff
• Radius: 8px
• Use: MAX price-up / positive-change pill

Price-Down Indicator

• Background: #ec5b5c
• Text: #ffffff
• Radius: 8px
• Use: MAX price-down / negative-change pill

Carousel Control Pill

• Background: #434343
• Radius: 20px
• Height: 40px
• Use: MAX promo-carousel control

Navigation

• Background: #ffffff
• Text: #262626
• Font: 14px weight 400 system sans
• Active: coral #ee5457 text on hover/active (consumer)
• Use: Top horizontal nav (“交易”, “收益”, “NFT”, “集團”, “產品服務”)

States

Do’s and Don’ts

Do

• Reserve coral (#ee5457) for the single consumer action (register CTA, learn-more) — keep it the one “action” color on MaiCoin
• Reserve navy (#2e4692) for the single pro action on MAX — its register/sign-up CTA
• Use the up-green (#49a870) / down-red (#ec5b5c) pair only for market direction on MAX
• Use Iosevka for prices and order-book figures so digits align in monospaced columns
• Use near-black ink (#262626) for text instead of pure black
• Separate sections with cool-blue tints (#f2f4fb / #f4f5f9) and #eaeaea / #d5dbee hairlines, not shadows
• Use the dark card (#272727) for emphasis on MAX promos instead of elevation
• Keep the system sans stack for all zh-TW UI text — it hints Traditional Chinese best

Don’t

• Spread coral across many consumer elements — it dilutes the single-action signal
• Mix the consumer coral and the pro navy on the same surface — each brand owns one
• Reuse the up-green / down-red pair for non-market UI — they carry market meaning
• Use drop shadows for elevation — both surfaces are flat and shadow-free
• Use pure black (#000000) for body text — reserve near-black #262626
• Set UI prices in a proportional font — figures belong in Iosevka so columns align
• Add a third saturated accent beyond coral (consumer) / navy + blue (pro)
• Apply heavy rounding to the consumer CTA — it is nearly sharp (2px) by design

Voice & Tone

MaiCoin / MAX speaks in plain, trustworthy, step-guided Traditional Chinese — a regulated financial platform that walks a first-time buyer through crypto without hype, and gives a pro trader terse, precise market language. The consumer surface is instructional and numbered (“步驟一 註冊 MaiCoin”, “步驟四 買虛擬貨幣”), framing crypto as a sequence of safe, completable steps. MAX’s voice is denser and more direct — feature names like “鏈上鎖倉” (on-chain locking) and “交易機器人” (trading bot) state the capability and nothing more. Across both, the register CTA is the plainest possible imperative: “立即註冊” (Register now).

Voice samples (verbatim from live surfaces):

• “立即註冊” — register CTA, both surfaces (plainest imperative). (verified live 2026-06-17)
• “步驟四 買虛擬貨幣” — consumer onboarding step label (guided sequence). (verified live 2026-06-17)
• “MaiCoin 台灣數位資產交易平台 - 比特幣，以太幣，萊特幣” — homepage title (positioning: Taiwan’s digital-asset platform). (verified live 2026-06-17)

Forbidden register: get-rich-quick / moonshot hype, fear-of-missing-out urgency, undefined trading jargon left unexplained on the consumer surface, exclamation-heavy marketing. A regulated TW exchange signals steadiness.

Agent Prompt Guide

Quick Color Reference

• Consumer primary CTA: MaiCoin Coral (#ee5457)
• Consumer accent family: Coral Deep (#dd4c4a), Coral Red (#ce4234)
• Consumer up-green: (#05bb85)
• Pro primary CTA: MAX Navy (#2e4692); deep navy (#253158); accent blue (#007aff)
• Market up / down: (#49a870) / (#ec5b5c)
• Text: Ink (#262626), Body (#424242), Muted (#4d4d4d / #4a4a4a), Faint (#9d9d9d)
• Surfaces: White (#ffffff), Surface (#f2f4fb), Surface Alt (#f4f5f9)
• Dark card: (#272727); Pill grey (#434343); Hairlines: (#eaeaea), (#d5dbee)

Example Component Prompts

• “Create a MaiCoin consumer hero on white. Nav links 14px system sans, #262626. Register CTA: #ee5457 background, white text, 2px radius, 52px height, weight 600 — ‘立即註冊’. Learn-more link in coral #ee5457.”
• “Build a MAX pro landing section. Primary CTA: #2e4692 navy background, white text, 8px radius, 60px height, weight 700. Secondary buy pill: white background, #2e4592 navy text, 22px radius, 32px height. Promo feature cards: #272727 background, white text, 16px radius, 20px padding.”
• “Design a MAX order-book row: prices in Iosevka 14px; up values #49a870, down values #ec5b5c. Surrounding panel on #f2f4fb with 1px solid #d5dbee hairline, no shadow.”
• “Create a MAX sign-up form: borderless underline email/password inputs, #2f333a text, 14px, placeholders 電子信箱 / 密碼. Submit on #2e4692 navy CTA, 8px radius.”

Iteration Guide

1. Pick the surface first: consumer = coral (#ee5457); pro = navy (#2e4692). Don’t mix them.
2. One action color per surface — keep coral/navy isolated for the primary CTA.
3. Market direction is the only place for up-green (#49a870) / down-red (#ec5b5c).
4. Prices in Iosevka; everything else in the system sans stack.
5. No shadows — separate with #f2f4fb / #f4f5f9 tint and #eaeaea / #d5dbee hairlines.
6. Text is #262626 near-black, never pure black for body.
7. Radius vocabulary: 2px coral CTA, 8px navy CTA, 12–16px cards, 20–22px pills.

Governance

Known Gaps

• Contrast, button-consumer-primary. Text #ffffff on #ee5457 measures 3.48:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-accent. Text #ffffff on #007aff measures 4.02:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-up. Text #ffffff on #49a870 measures 2.95:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-down. Text #ffffff on #ec5b5c measures 3.38:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.