Design System Inspiration of PortOne

1. Visual Theme & Atmosphere

PortOne (포트원) is Korea's integrated payments-and-settlement fintech — the rebrand of the developer-beloved 아임포트 (Iamport) — and its homepage reads like calm, confident financial infrastructure rather than a hard-sell SaaS pitch. The canvas is pure white (#ffffff), layered with a cool near-white surface (#f9fafb) and a second flatter gray (#f3f4f6) that segment content into airy, breathable zones. Text sits in a deep Tailwind ink (#111827) — never pure black for headings — giving the page a premium, trustworthy weight. The one saturated brand accent is a warm signal orange (#fc6b2d), reserved almost exclusively for the primary call-to-action and the small eyebrow labels above each section, so the eye is trained to treat that single color as "the action."

The typographic personality is unmistakably Korean-modern: everything runs in Pretendard Variable, the de-facto Korean product font, but PortOne stretches the weight axis to its extremes. The hero H1 ("AI로 결제와 재무 운영을 자유롭게") sits at a light 56px / weight 400, while the section H2 ("결제 연동부터 글로벌 재무 운영까지 하나의 AI 재무 인프라로") jumps to a dramatic 48px / weight 1000 (ExtraBlack). This light-versus-ultra-heavy contrast is the core tension of the system: whisper-light where it sets the scene, ultra-bold where it persuades. Body and UI text drop to a quiet 16px / weight 400, with nav and docs labels at 14px / weight 500.

What distinguishes PortOne from its fintech peers is restraint with depth and a deliberate two-surface split. The marketing site is near-shadowless — separation comes from flat tinted surfaces (#f9fafb), thin #d1d5db hairlines, and generous pill geometry (64px nav pills, 999px CTA pills, 30px cards) rather than elevation; the rare card uses only a soft purple-tinted glow. Cross the boundary to the developer docs (developers.portone.io) and the palette shifts from gray to slate: headings move to slate ink (#0f172a), body to slate (#334155), and muted labels to slate-400 (#94a3b8), with tighter 6px radii — but the orange (#fc6b2d) accent stays constant, anchoring both surfaces to one brand. Status colors round out the system: a blue tint (#e6f1ff) for informational chips, an error red (#df4c4c) on a red tint (#fef2f2), and a green tint (#dcfce7) for success — with the gray ladder #374151 → #6b7280 providing text hierarchy and white (#ffffff) doing duty as on-primary text. The charcoal (#363a44) gradient on the secondary CTA is the only non-orange "action" color.

Key Characteristics:

• Pretendard Variable across both surfaces — weight 400 hero vs weight 1000 (ExtraBlack) section heads
• Single saturated orange (#fc6b2d) reserved for the primary CTA and eyebrow labels
• Tailwind ink (#111827) for marketing text; slate ink (#0f172a / #334155) on developer docs
• Flat depth: mostly shadowless; tinted #f9fafb surfaces + #d1d5db hairlines do the separating
• Pill-everything geometry — 64px nav pills, 999px CTA pills, 30px feature cards
• Charcoal gradient (#363a44) as the secondary "action" color
• Cool gray neutral ladder (#374151 → #6b7280 → #94a3b8) for text hierarchy
• Status tints: blue #e6f1ff, success #dcfce7, error #df4c4c on #fef2f2

2. Color Palette & Roles

Primary

• Signal Orange (#fc6b2d): Primary brand color and CTA fill (rendered as a top-down gradient). The single "action" color — also used on the small eyebrow labels above each section ("원 페이먼트 인프라", "국내 결제").
• Charcoal (#363a44): The secondary CTA gradient fill ("시작하기"). A deep neutral that pairs with the orange without competing for the "primary action" read.
• Ink (#111827): Primary heading and text color on marketing surfaces. A very dark blue-gray (Tailwind gray-900) used instead of pure black for warmth and financial-grade trust.

Neutral & Surface

• Pure White (#ffffff): Page background, white card surfaces, and text on orange/charcoal CTAs (on-primary).
• Surface Gray (#f9fafb): Cool near-white tinted surface for feature cards and segmented sections.
• Surface Alt (#f3f4f6): A flatter secondary gray for alternating blocks and chips.
• Hairline (#d1d5db): Thin borders, dividers, and input outlines — the primary separation device in a largely shadowless system.

Text Hierarchy (marketing)

• Ink (#111827): Primary text, headings, strong labels.
• Gray Strong (#374151): Secondary body copy and emphasis text (Tailwind gray-700).
• Body Gray (#6b7280): Tertiary text, descriptions, captions (Tailwind gray-500).

Developer Docs Surface

• Slate Ink (#0f172a): Heading color on developers.portone.io (Tailwind slate-900).
• Slate Body (#334155): Body and sidebar text on the docs (Tailwind slate-700).
• Muted Slate (#94a3b8): Placeholder, search hint, and lowest-emphasis labels (Tailwind slate-400).

Status & Accent

• Accent Blue (#e6f1ff): Informational tinted surface / highlight chip background.
• Error Red (#df4c4c): Error and alert text/icon color.
• Error Tint (#fef2f2): Soft red surface behind error states and alert pills.
• Success Tint (#dcfce7): Soft green surface for success states and confirmation pills.

3. Typography Rules

Font Family

• Sans: Pretendard Variable (with Pretendard and system fallbacks) — used for every text element on both the marketing site and the developer docs.

Hierarchy

Principles

• One font, two weight extremes: Pretendard Variable carries everything; the hierarchy signal is the weight jump from light (400) hero copy to ExtraBlack (1000) section heads.
• Orange owns the eyebrow: the small section-eyebrow labels are set in heavy weight and signal orange (#fc6b2d) — a recurring rhythmic accent.
• Hangul-first sizing: body sits at a comfortable 16px; docs and nav drop to 14px / weight 500 for dense scanning.
• Heading warmth: headings use ink (#111827) on marketing and slate (#0f172a) on docs — never pure black.

4. Component Stylings

Buttons

Primary CTA (도입문의)

• Background: #fc6b2d
• Text: #ffffff
• Radius: 999px
• Padding: 12px 20px
• Font: 15px Pretendard Variable weight 700
• Use: Primary call-to-action — orange gradient pill ("도입문의" / "Contact sales")

Secondary CTA (시작하기)

• Background: #363a44
• Text: #ffffff
• Radius: 999px
• Padding: 12px 20px
• Font: 12px Pretendard Variable weight 400
• Use: Secondary call-to-action — charcoal gradient pill ("시작하기" / "Get started")

Header Nav CTA

• Background: #363a44
• Text: #ffffff
• Radius: 64px
• Padding: 16px
• Use: Compact contact CTA in the sticky header

Navigation

• Background: #ffffff
• Text: #111827
• Radius: 64px (nav-item pill)
• Padding: 16px
• Font: 14px Pretendard Variable weight 500
• Active: orange #fc6b2d text on active item
• Use: Top horizontal nav ("서비스", "가격안내", "헬프센터", "개발가이드", "블로그")

Cards & Containers

Tinted Surface Card

• Background: #f9fafb
• Text: #111827
• Radius: 30px
• Padding: 20px
• Use: Feature card sitting on the cool gray surface

White Feature Card

• Background: #ffffff
• Text: #111827
• Radius: 20px
• Padding: 24px
• Use: White feature card, hairline-separated (no shadow)

Inputs & Forms

Docs Search Field

• Background: #ffffff
• Text: #334155
• Border: 1px solid #d1d5db
• Radius: 6px
• Padding: 6px 12px
• Use: Search input on the developer docs (developers.portone.io), placeholder in muted slate #94a3b8

Badges

Success Pill

• Background: #dcfce7
• Text: #374151
• Radius: 8px
• Font: 12px Pretendard Variable weight 500
• Use: Success / confirmation status pill

Error Pill

• Background: #fef2f2
• Text: #df4c4c
• Radius: 8px
• Font: 12px Pretendard Variable weight 500
• Use: Error / alert status pill

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 2 brand-owned surfaces) Tier 1 sources: https://www.portone.io (homepage, live computed style); https://developers.portone.io (developer docs, live computed style); https://blog.portone.io; https://github.com/portone-io Tier 2 sources: getdesign.md/portone — NOT FOUND (no entry); styles.refero.design/?q=portone — not listed (search returns only generic gallery categories) Conflicts unresolved: none (marketing gray-ink vs docs slate-ink is an intentional two-surface split, documented in §2; orange #fc6b2d accent is constant across both)

5. Layout Principles

Spacing System

• Base unit: ~4px
• Scale: 4px, 8px, 16px, 20px, 24px, 48px, 64px
• Notable: CTA pills use 12px 20px padding; nav pills a square 16px; cards 20–24px interior padding

Grid & Container

• Centered single-column hero with the 56px Pretendard H1 as the anchor
• Section eyebrow (orange, weight 1000) → ExtraBlack H2 → supporting body is the repeating vertical rhythm
• Feature sections alternate between white (#ffffff) and tinted gray (#f9fafb) full-width bands
• Cards group related products at 20–30px radius

Whitespace Philosophy

• Breathing room over density: despite being a data-heavy fintech, the marketing surface is airy with generous vertical rhythm.
• Flat segmentation: sections separate by background tint (#f9fafb vs #ffffff) and #d1d5db hairlines, not by shadow.
• Pill rhythm: the repeated pill (64px nav, 999px CTA) creates a consistent rounded cadence.

Border Radius Scale

• Extra small (6px): docs inputs, code chips, dense UI
• Small (8px): badges, inner elements
• Medium (16px): standard cards
• Large (30px): hero feature cards
• Full (999px): CTA pills, nav pills

6. Depth & Elevation

Shadow Philosophy: PortOne is a near-shadowless system. Live inspection found box-shadow: none across the hero, nav, headings, and most cards; the only elevation observed was a single soft purple-tinted glow on a featured card. Depth and grouping come from flat tinted surfaces (#f9fafb) and thin #d1d5db hairlines. This keeps the financial UI feeling clean, fast, and mobile-native. When emphasis is needed, the system reaches for color (orange #fc6b2d or the charcoal #363a44 CTA), never heavy elevation.

7. Do's and Don'ts

Do

• Use Pretendard Variable for all text — both marketing and docs surfaces
• Reserve signal orange (#fc6b2d) for the primary CTA and section eyebrows — keep it the single "action" color
• Contrast light (400) hero copy against ExtraBlack (1000) section heads — the weight jump is the hierarchy
• Use ink (#111827) for marketing headings and slate (#0f172a / #334155) for docs — never pure black
• Separate sections with flat tinted surfaces (#f9fafb) and #d1d5db hairlines, not shadows
• Use pill geometry — 64px nav pills, 999px CTA pills, 20–30px cards
• Use the charcoal gradient (#363a44) for the secondary CTA
• Keep status colors tinted and quiet: blue #e6f1ff, success #dcfce7, error #df4c4c on #fef2f2

Don't

• Spread orange across many elements — it dilutes the single-action signal
• Use pure black (#000000) for headings — use ink #111827 or slate #0f172a
• Lean on heavy drop shadows for elevation — PortOne is a flat, hairline-separated system
• Use sharp/square corners on CTAs or nav — interactive chrome is pill-shaped
• Mix in a second saturated accent hue — orange is the only one; charcoal is neutral
• Set every headline at one weight — the light/ExtraBlack contrast is the voice
• Use a different font on the docs vs marketing — Pretendard Variable spans both

8. Responsive Behavior

Breakpoints

Touch Targets

• CTA pills at ~50px height, full pill for an unmistakable target
• Nav pills at 40px height with 16px padding
• Docs search field at comfortable 6px 12px padding

Collapsing Strategy

• Hero: 56px Pretendard headline scales down on mobile, weight maintained
• Nav: horizontal pills → hamburger toggle
• Feature bands: multi-column → stacked single column
• Tinted / white alternating sections maintain full-width treatment

Image Behavior

• Product screenshots and illustrations carry little to no shadow at any size, consistent with the flat system
• Cards maintain 16–30px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Signal Orange (#fc6b2d)
• Secondary CTA: Charcoal (#363a44)
• Background: Pure White (#ffffff)
• Tinted surface: Surface Gray (#f9fafb) / Surface Alt (#f3f4f6)
• Heading text (marketing): Ink (#111827)
• Heading / body text (docs): Slate (#0f172a / #334155)
• Body text: Gray Strong (#374151), Body Gray (#6b7280)
• Muted / placeholder: Muted Slate (#94a3b8)
• Hairline: #d1d5db
• Status: Accent Blue (#e6f1ff), Success (#dcfce7), Error (#df4c4c) on Error Tint (#fef2f2)

Example Component Prompts

• "Create a hero on white background. Eyebrow label 24px Pretendard Variable weight 1000 in orange #fc6b2d. H1 at 56px weight 400, color #111827. Below it an orange CTA pill: #fc6b2d background, white text, 999px radius, 12px 20px padding, 15px weight 700 — '도입문의'. And a charcoal secondary pill: #363a44 background, white text, 999px radius."
• "Design a feature card: white #ffffff background, 1px solid #d1d5db hairline, 20px radius, no shadow. Title 36px Pretendard Variable weight 400, #111827. Body 16px weight 400, #6b7280."
• "Build a tinted section: #f9fafb background, full-width. Section eyebrow 24px weight 1000 orange #fc6b2d. H2 48px weight 1000 #111827. Cards inside use white #ffffff with #d1d5db hairline and 30px radius."
• "Create a docs layout: slate ink #0f172a headings, #334155 body, #94a3b8 muted placeholders. Search field: white bg, 1px solid #d1d5db, 6px radius, 6px 12px padding. Sidebar links 14px weight 500."

Iteration Guide

1. Pretendard Variable everywhere; weight 400 hero vs 1000 section heads is the hierarchy
2. Orange (#fc6b2d) is the single action color — don't spread it
3. No heavy shadows — separate with #f9fafb tint and #d1d5db hairlines
4. Pill geometry — 999px CTAs, 64px nav, 20–30px cards
5. Heading color is #111827 (marketing) or #0f172a (docs), never pure black
6. Charcoal #363a44 for the secondary CTA
7. Status tints stay quiet: blue #e6f1ff, success #dcfce7, error #df4c4c on #fef2f2

---

10. Voice & Tone

PortOne's voice is clear, infrastructural, and quietly ambitious — a payments partner that turns a notoriously complex domain (multi-PG integration, cross-border settlement, reconciliation) into plain, confident Korean. The hero line "AI로 결제와 재무 운영을 자유롭게" ("Free your payments and financial operations with AI") and the positioning "원 페이먼트 인프라" ("One Payment Infrastructure") set the register: declarative, capability-first, never gimmicky. Copy treats the reader — often a developer or finance operator — as a peer who wants the integration done, not a lead to be pressured.

Voice samples (verbatim, verified live 2026-06-26):

• "AI로 결제와 재무 운영을 자유롭게" — hero H1 (capability-framed mission). (verified live homepage)
• "결제 연동부터 글로벌 재무 운영까지 하나의 AI 재무 인프라로" — section H2 (end-to-end promise). (verified live homepage)
• "통합 결제·정산 AI 재무 인프라 | 포트원" — page title meta (integrated positioning). (verified live homepage)

Forbidden register: aggressive sales urgency, undefined jargon left unexplained, exclamation-heavy hype, fear-based FOMO. PortOne sells reliability, not anxiety.

11. Brand Narrative

PortOne (포트원) began in 2015 as 아임포트 (Iamport), a developer-first payment-integration service operated by 코리아포트원 (Korea PortOne Co., Ltd.) under CEO 정영주 (Jung Young-joo). Iamport solved a uniquely painful Korean problem: integrating even one domestic PG (payment gateway) was a multi-week ordeal of bespoke SDKs, and supporting many of them was effectively a full-time job. Iamport's premise — a single API in front of every PG — let developers ship payments in minutes instead of months.

On February 6, 2023 the company rebranded from Iamport to PortOne, signaling a move beyond a developer utility toward a full "원 페이먼트 인프라" (One Payment Infrastructure) platform. The rebrand carried three stated brand narratives — "One to Beyond, First Chapter, Asia No.1" — and a service philosophy of "세상 모든 방식의 결제를 가능하게 하는 통합 솔루션" ("an integrated solution that makes every method of payment in the world possible"). By 2022 the company was processing roughly 10조원 (~10 trillion KRW) in annual transaction volume across ~2,300 merchants; today PortOne reaches 8 countries and ~3,000 customers, fronting 100+ payment options and ~25 domestic and international PGs through one integrated API, and extending into partner-settlement automation and AI-assisted financial operations.

What PortOne refuses, visible in its design: the heavy, intimidating chrome of legacy enterprise finance software, and the dark-pattern urgency of conversion-obsessed marketing. What it embraces: a flat, fast, developer-respecting interface; a single trustworthy orange; Pretendard Variable headlines that range from whisper-light to ExtraBlack; and copy that names the capability plainly. The two-surface design — gray-ink marketing, slate-ink docs, one orange accent — mirrors the company's dual audience of business buyers and the developers who actually wire up the API.

12. Principles

1. One API, one infrastructure. PortOne's entire reason for existing is consolidation — many PGs behind a single integration. UI implication: one primary action color (orange #fc6b2d), one font, one consistent pill geometry; never fragment the system.
2. Respect the developer. The product was born as a developer tool (Iamport). UI implication: the docs surface is first-class — precise slate typography, fast search, integration-path-first navigation, not an afterthought.
3. Capability over hype. State what it does, not how revolutionary it is. UI implication: declarative headlines, terse CTAs ("도입문의"), no exclamation-driven urgency.
4. Flat and fast. Mobile-native clarity beats decorative depth. UI implication: near-shadowless; separate with #f9fafb tint and #d1d5db hairlines; keep the page light.
5. Quiet where it informs, bold where it persuades. UI implication: light (400) hero and body for reading; ExtraBlack (1000) heads and orange eyebrows for the moments that need to land.

13. Personas

Personas below are fictional archetypes informed by publicly observable PortOne user segments (Korean e-commerce developers, finance/operations teams, cross-border merchants), not individual people.

이준호, 30, 서울. Backend developer at a fast-growing D2C commerce startup. Chose PortOne because wiring up multiple Korean PGs by hand was eating his sprint; one API got checkout live in an afternoon. Judges a payments vendor by how fast its docs let him integrate without a sales call.

박지은, 38, 경기. Finance operations lead at a mid-market retailer selling in several countries. Lives in settlement and reconciliation; values PortOne's partner-settlement automation and the single dashboard that closes the books across PGs. Distrusts tools that look flashy but hide the numbers.

Sanjay Mehta, 34, Singapore. Product manager at a cross-border marketplace expanding into Korea. Picked PortOne for its 100+ payment options behind one integration and its 8-country reach. Reads the English docs and trusts the calm, capability-first tone over hype.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the flat, fast aesthetic. Pill CTAs respond to press with a subtle scale/opacity shift; section content fades in from below at motion-standard / ease-enter. No bounce or spring — payments infrastructure signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.