모인 DESIGN.md

Design System Inspiration of Moin

Overview

Visual Theme & Atmosphere

Moin (모인) is a Korean cross-border money-transfer fintech, and its site carries itself like a trustworthy utility rather than a flashy consumer app — clean, functional, and quietly confident. The canvas is pure white (#ffffff) broken up by soft near-white surfaces (#f7f7f8 and the cooler #f3f5f8) that segment the page into calm, breathable bands. Text sits in a deep near-black navy (#1a1b22) for headings and a soft charcoal (#333333) for body copy — never a harsh pure black for the running text. The system's single signal color is a bright, optimistic azure (#0082ff), which the eye is trained to read as "the money moves here": it lights the currency-exchange CTA, the section eyebrow labels, and the active amount you type.

The typographic personality is unmistakably Korean-product: everything is set in Spoqa Han Sans (with Spoqa Han Sans JP as the CJK fallback), the open-source hangul workhorse, running Bold (weight 700) for hero and section headings and a comfortable weight 400 for body. The scale is deliberately compact and pragmatic — a 40px hero H1 (#1a1b22), 32px large section titles, 24px feature headings, and a 16px body — reflecting a product that has real numbers, fees, and exchange rates to show rather than oversized marketing poetry. The one place the type gets loud is the currency input: the amount you send renders at a big 32px / 700, and flips from a dark #242424 to the brand azure #0082ff the moment it becomes the active value.

What distinguishes Moin from heavier fintech peers is its restraint with depth. The system is almost entirely flat: separation comes from tinted surfaces and thin #efefef hairlines rather than elevation, and the only recurring drop shadow is a single, very soft rgba(0, 0, 0, 0.05) 0px 4px 15px on cards. Geometry stays gentle and consistent — a 6px corner radius is the workhorse across buttons and inputs (by far the most common radius on the page), with 8px on carousel controls and 16px on content cards. The result is a fast, mobile-native, engineered-feeling interface: a remittance tool that looks precise and safe with your money, not decorative.

Key Characteristics:

• Single azure signal color (#0082ff) reserved for the money action — CTA, eyebrows, active amount
• A slightly deeper blue (#007bff) on the top-nav send button — a second, near-identical blue
• Spoqa Han Sans throughout — Bold (700) for headings, 400 for body; open-source hangul-first
• Compact, pragmatic type scale: 40px hero, 32px / 24px sections, 16px body
• Near-black navy (#1a1b22) headings + charcoal (#333333) body instead of pure black
• Near-flat depth: one soft rgba(0, 0, 0, 0.05) card shadow; tint + #efefef hairlines do the separating
• 6px workhorse radius (buttons/inputs), 8px controls, 16px cards
• Cool neutral ladder (#6b6c74 → #818daa → #a9abb4) for text hierarchy

Primary tasks

• Send money across a border in about five minutes
• See the exchange rate up front, before committing to a transfer
• Compare the amount that lands against what a bank would deliver
• Read other senders' reviews before trusting the service with money

Brand Narrative

Moin (모인) is a Korean fintech built around a single, concrete frustration: sending money across borders from Korea was slow, opaque, and expensive, buried in bank fees and hidden exchange-rate margins. Moin, operated by Moin Inc., positioned itself as a licensed small-sum overseas-remittance provider under Korea's amended Foreign Exchange Transactions Act — one of the early independent players allowed to move money internationally outside the incumbent banks. Its founding premise, echoed by the homepage line "Complex international remittances, now made simple", was to strip a historically bank-controlled process down to something a person could finish in about five minutes on their phone.

The product matured into a direct, lower-fee remittance service that competes on the two things that actually matter to someone wiring money home — how fast it arrives and how much it costs — surfacing both plainly rather than hiding them behind an application funnel. The brand positions itself as the sender's advocate inside a system historically tilted toward banks and their margins.

What Moin refuses, visible in its design: the heavy, intimidating chrome of legacy banking (no shadow-stacked cards, no institutional navy-and-gold ornamentation) and the dark-pattern urgency of aggressive financial marketing. What it embraces: a flat, fast, mobile-native interface; a single trustworthy azure; a compact, honest type scale; and a currency widget that puts the real number — the amount and the fee — front and center.

Principles

1. The number is the product. A remittance user is deciding based on amount received and fee paid. UI implication: give the currency amount the largest, boldest type on the page and light it azure when active — never bury the figure.
2. Simple beats feature-rich. Sending money should feel like five minutes, not a bank application. UI implication: keep the primary flow to one obvious azure CTA; resist adding competing calls to action.
3. One action, one color. Azure (#0082ff) means "move the money." UI implication: reserve the saturated azure exclusively for the send action and its accents so the next step is never ambiguous.
4. Flat and fast. Mobile-native clarity beats decorative depth. UI implication: separate with tint and #efefef hairlines; keep to the single soft card shadow.
5. Trust through concreteness. Fees, speed, and rates are stated plainly, not spun. UI implication: show real numbers and quantified savings; avoid vague superlatives in copy and UI labels.

Personas

Personas below are fictional archetypes informed by publicly observable Moin user segments (migrant workers, international students, and Koreans sending money abroad), not individual people.

응웬 반 (Nguyen Van), 32, 안산. A worker sending part of his monthly pay home to Vietnam. Cares about two numbers only — the fee and how fast it lands. Chose Moin after comparing the received amount against his bank and seeing it was both cheaper and faster.

김서연, 24, 서울. A student wiring tuition and living costs to a sibling studying overseas. Values that the whole transfer finishes in a few minutes in the app and that the exchange rate is shown up front, not after she commits.

David Park, 41, 판교. A Korean professional making occasional overseas payments to family. Distrusts remittance services that feel like a hard sell; trusts Moin's calm, plain interface and the fact that it states its fees as concrete figures rather than "great rates".

Colors

Primary

• Moin Azure (#0082ff): The primary brand and action color. Backs the currency-exchange "Send money" CTA, colors the eyebrow labels (Speed / Easy to start / Lower fees), and becomes the active amount value in the input. The system's single saturated hue.
• Send Blue (#007bff): A slightly deeper companion blue used on the top-navigation "Send money" button and its border — near-identical to the azure but rendered as a distinct token in the header chrome.

Ink & Text

• Ink Navy (#1a1b22): Primary heading color for the hero H1 and feature section H2s — a very dark blue-black that reads as warm and trustworthy rather than stark.
• Body Charcoal (#333333): The document default text color and the fill of the dark "More reviews" button.
• Dark (#242424): The resting color of the large currency amount value before it becomes active.
• Muted (#6b6c74): Secondary text, supporting copy.
• Muted Slate (#818daa): A cool blue-grey for tertiary labels and metadata.
• Grey (#555555): Icon color for the review carousel prev/next arrows.
• Faint (#a9abb4): Lowest-emphasis text, placeholders, disabled labels.

Surface & Neutral

• Pure White (#ffffff): Page background, card surfaces, text on azure/dark.
• Surface (#f7f7f8): Warm near-white tinted surface for content and review cards.
• Surface Cool (#f3f5f8): A cooler near-white for alternating feature blocks.
• Hairline (#efefef): The dominant border color — thin dividers and card outlines in the near-shadowless system.
• Border (#e0e0e0): Slightly stronger border for interactive controls (carousel arrows).
• Border Cool (#e9ecef): A cool-toned hairline used on cool surfaces.
• On Primary (#ffffff): Text/icon color on azure and dark fills.

Typography

Font Family

• Sans: Spoqa Han Sans — used for every text element: hero, headings, body, buttons, nav.
• Fallback: Spoqa Han Sans JP, then Helvetica, Arial, sans-serif.

Hierarchy

Principles

• One family, weight-driven hierarchy: Spoqa Han Sans does every job; contrast comes from weight (700 vs 400) and size, not from swapping typefaces.
• Compact, pragmatic scale: the hero tops out at 40px, sections at 32/24px — restrained sizing for a product that shows real fees, rates, and numbers.
• Bold headings, plain body: 700 carries every headline; 400 carries every paragraph.
• The number is the loudest element: the currency amount runs at 32px / 700 and switches to azure #0082ff when active — the typographic climax of the exchange widget.

Layout

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 48px, 64px
• Notable: buttons pad at 8px 16px (exchange CTA) up to 14px 48px (dark "More reviews" pill), giving secondary actions a generous, tappable footprint

Grid & Container

• Centered single-column marketing flow anchored by the 40px hero H1
• The currency-exchange widget (amount input + azure CTA) sits high on the page as the primary interactive object
• Feature sections alternate white (#ffffff) and tinted (#f7f7f8 / #f3f5f8) full-width bands
• Review content lives in a horizontal carousel with #e0e0e0-bordered arrow controls

Whitespace Philosophy

• Calm, functional breathing room: generous vertical rhythm between sections keeps a numbers-heavy product feeling unhurried
• Flat segmentation: bands separate by background tint and #efefef hairlines rather than heavy borders or shadow
• Numbers get room: the exchange widget is given space and scale so the amount is the clear focal point

Border Radius Scale

• Small (6px): buttons, inputs — the workhorse radius
• Medium (8px): carousel controls, small containers
• Large (16px): content and feature cards
• Extra (20px): larger rounded containers
• Full (9999px / 50%): circular avatars and icon chips

Responsive Behavior

Breakpoints

Touch Targets

• Exchange CTA at 50px height, full-width on mobile — an unmistakable primary target
• Dark secondary buttons at 52px with 14px 48px padding — comfortably tappable
• Carousel arrow controls at 48px square with #e0e0e0 border

Collapsing Strategy

• Hero: 40px headline scales down on mobile, weight 700 maintained
• Exchange widget: amount input + azure CTA stack vertically on narrow viewports
• Feature bands: multi-column → stacked single column
• Tinted/white alternating sections keep full-width treatment
• Review carousel: reduces visible cards, arrows remain

Image Behavior

• App screenshots and illustrations sit on flat tinted surfaces, carrying at most the soft rgba(0, 0, 0, 0.05) card shadow
• Cards maintain 16px radius across breakpoints

Elevation & Depth

Shadow Philosophy: Moin is a near-flat system. Live inspection found box-shadow: none across the hero, nav, and most sections, with a single soft rgba(0, 0, 0, 0.05) 0px 4px 15px recurring on cards and one deeper rgba(36, 36, 36, 0.3) reserved for emphasis. Depth is communicated primarily through flat tinted surfaces (#f7f7f8, #f3f5f8) and thin #efefef hairlines. This restraint keeps the remittance UI feeling fast, clean, and mobile-native rather than heavy — when the system needs to draw attention, it reaches for the azure #0082ff, not elevation.

Values kept in prose

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

• shadow.card: rgba(0, 0, 0, 0.05) 0px 4px 15px 0px
• shadow.elevated: rgba(36, 36, 36, 0.3) 0px 10px 20px 0px

Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet, consistent with the flat, fast aesthetic. The currency amount transitions its color to azure #0082ff on becoming active at motion-fast; review cards slide within the carousel at motion-standard / ease-enter; buttons respond with a subtle opacity/scale shift on press. No bounce or spring — a money-transfer product signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product remains fully functional.

Components

Buttons

Exchange CTA (Primary)

• Background: #0082ff
• Text: #ffffff
• Radius: 6px
• Padding: 8px 16px
• Height: 50px
• Border: 1px solid rgba(0,50,100,0.1)
• Font: 16px Spoqa Han Sans weight 400
• Use: The currency-exchange "Send money" CTA — the core product action

Nav Send (Header)

• Background: #007bff
• Text: #ffffff
• Radius: 6px
• Padding: 8px 16px
• Height: 40px
• Border: 1px solid #007bff
• Font: 16px Spoqa Han Sans weight 700
• Use: Top-navigation "Send money" button

Dark Secondary

• Background: #333333
• Text: #ffffff
• Radius: 6px
• Padding: 14px 48px
• Height: 52px
• Font: 16px Spoqa Han Sans weight 700
• Use: Lower-emphasis actions such as "More reviews"

Carousel Control

• Background: #ffffff
• Text: #555555
• Border: 1px solid #e0e0e0
• Radius: 8px
• Height: 48px
• Use: Review carousel previous / next arrows

Inputs & Forms

Currency Amount

• Background: #ffffff
• Text: #242424
• Radius: 6px
• Font: 32px Spoqa Han Sans weight 700
• Active: value color shifts to #0082ff
• Use: The send/receive amount field on the exchange widget

Cards & Containers

Tinted Surface Card

• Background: #f7f7f8
• Text: #1a1b22
• Radius: 16px
• Shadow: rgba(0, 0, 0, 0.05) 0px 4px 15px 0px
• Use: Content and review cards

Cool Feature Block

• Background: #f3f5f8
• Text: #1a1b22
• Border: 1px solid #efefef
• Radius: 16px
• Use: Cool-tinted feature section block

Badges

Azure Eyebrow

• Text: #0082ff
• Font: 16px Spoqa Han Sans weight 700
• Use: Accent eyebrow label above feature headings ("Speed", "Easy to start", "Lower fees")

Navigation

• Background: #ffffff
• Text: #333333
• Font: 16px Spoqa Han Sans
• Right-aligned azure/#007bff "Send money" CTA at 6px radius
• Use: Top horizontal navigation

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.themoin.com/ko , https://themoin.github.io/ Tier 2 sources: getdesign.md/moin (no result — "No designs found for 'moin'") ; styles.refero.design/?q=moin (not listed — 96 fuzzy substring hits, none the Moin fintech) Conflicts unresolved: none

States

Do's and Don'ts

Do

• Set every text element in Spoqa Han Sans — Bold (700) for headings, 400 for body
• Reserve azure (#0082ff) for the money action — CTA, eyebrows, active amount
• Use near-black navy (#1a1b22) for headings and charcoal (#333333) for body text
• Keep the type scale compact — 40px hero, 32/24px sections, 16px body
• Separate sections with flat tint (#f7f7f8 / #f3f5f8) and #efefef hairlines, not heavy shadow
• Use a 6px radius on buttons and inputs, 16px on cards
• Let the currency amount be the loudest element (32px / 700) and flip it to azure when active
• Keep depth to the single soft rgba(0, 0, 0, 0.05) card shadow

Don't

• Introduce a second saturated accent color — azure is the only signal hue
• Use pure black (#000000) for body text — reserve navy #1a1b22 and charcoal #333333
• Stack heavy drop shadows for elevation — Moin is near-flat
• Oversize marketing headlines beyond the 40px hero — the scale is deliberately pragmatic
• Spread azure across decorative elements — it dilutes the "this is the action" signal
• Swap in a display typeface for headings — Spoqa Han Sans owns every role
• Use sharp 0px corners on interactive controls — 6px is the baseline
• Use faint grey (#a9abb4) for primary content — it is for disabled/placeholder only

Voice & Tone

Moin's voice is plain, reassuring, and efficient — a cross-border money service that treats sending money abroad as something that should be fast, cheap, and unintimidating. The English hero line "Complex international remittances, now made simple with MOIN!" sets the register: it names a real pain (remittance is complicated and expensive) and answers it directly, without jargon or hype. Copy speaks to migrant workers, students, and anyone sending money home as a competent adult who wants speed, low fees, and certainty — not a target for financial upsell.

Voice samples (verbatim from live homepage):

• "Complex international remittances, now made simple with MOIN!" — hero headline (problem → simple answer). (verified live 2026-07-02)
• "Fast, direct remittances you can trust" — feature heading (speed + trust). (verified live 2026-07-02)
• "Done in five minutes, right in the app" — feature heading (concrete time promise). (verified live 2026-07-02)

Forbidden register: fear-based or urgency-driven sales pressure, undefined financial/FX jargon left unexplained, hype superlatives on routine actions, exclamation-stacked marketing beyond the single friendly hero line.

Agent Prompt Guide

Quick Color Reference

• Primary action / azure: Moin Azure (#0082ff)
• Nav send button: Send Blue (#007bff)
• Heading text: Ink Navy (#1a1b22)
• Body text: Charcoal (#333333)
• Amount (resting): Dark (#242424)
• Secondary text: Muted (#6b6c74)
• Tertiary label: Muted Slate (#818daa)
• Carousel icon: Grey (#555555)
• Faint / disabled: Faint (#a9abb4)
• Background: Pure White (#ffffff)
• Tinted surface: Surface (#f7f7f8), Surface Cool (#f3f5f8)
• Hairline: #efefef (cool: #e9ecef), stronger border #e0e0e0

Example Component Prompts

• "Create a remittance hero on white. Headline at 40px Spoqa Han Sans weight 700, color #1a1b22. Below it a currency-exchange widget: amount input at 32px weight 700 (#242424, turning #0082ff when active) and an azure CTA — #0082ff background, white text, 6px radius, 8px 16px padding, 50px tall."
• "Design a feature block: #f3f5f8 background, 1px solid #efefef border, 16px radius, no heavy shadow. Azure eyebrow label at 16px Spoqa Han Sans weight 700 (#0082ff), then a 24px weight-700 heading in #1a1b22, body 16px weight 400 #333333."
• "Build a review card: #f7f7f8 background, 16px radius, soft shadow rgba(0,0,0,0.05) 0px 4px 15px. Carousel arrows as 48px white squares with 1px solid #e0e0e0 border, #555555 icon, 8px radius."
• "Create a top nav: white header, #333333 links in Spoqa Han Sans, right-aligned #007bff 'Send money' button at 6px radius."

Iteration Guide

1. Spoqa Han Sans everywhere; 700 for headings, 400 for body
2. Azure (#0082ff) is the single action color — don't spread it
3. Near-flat: use #f7f7f8 / #f3f5f8 tint and #efefef hairlines; one soft card shadow only
4. 6px radius on buttons/inputs, 16px on cards
5. Headings #1a1b22, body #333333 — never pure black
6. Compact type scale: 40 / 32 / 24 / 16
7. Make the currency amount the focal point and flip it to azure when active

---

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #0082ff measures 3.73:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-nav. Text #ffffff on #007bff measures 3.98:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.