Design System Inspiration of POSTYPE

1. Visual Theme & Atmosphere

POSTYPE (포스타입) is Korea's creator-publishing and paid-serialization community, and its interface reads like a calm reading room built for taste rather than a noisy content feed. The canvas is pure white (#ffffff) layered with a soft cool-grey surface (#f2f2f3) and a second near-white tint (#f9f9fa) that quietly segment the page into airy reading zones. Text sits in a deep near-black charcoal (#141415 for prose, #2c2c2f for UI labels) — never harsh pure black for the chrome — which gives the platform an editorial, content-first weight. The brand mark introduces a single saturated POSTYPE red (#f33d4d) used sparingly as the identity accent, while interactive links lean on a clear blue (#3478ff), so the eye learns to treat red as "the brand" and blue as "the link."

The typographic personality is unmistakably Korean-product: the system runs on the custom Postype Sans-serif KR face (falling back to Apple SD Gothic Neo), with headlines at weight 700 and a quiet 16px / weight 400 for nav and reading text. There is no flashy display weight or oversized hero type fighting for attention — POSTYPE puts the creator's content first and keeps its own chrome deliberately reserved. The result is a system that feels like infrastructure for reading and earning, not a marketing landing page.

What distinguishes POSTYPE from feed-driven peers is its restraint with depth and its commitment to soft, rounded chrome. Live inspection found box-shadow: none across the nav, buttons, and cards — separation comes from flat tinted surfaces (#f2f2f3 / #f9f9fa) and thin #eaeaeb hairlines rather than elevation. Interactive chrome is consistently rounded: 8px on buttons and nav pills, a softer 24px on tag chips, full circles on avatars. The filled action button is charcoal (#2c2c2f), not the brand red — a quiet, premium choice that keeps red for identity and reserves a neutral, decisive ink for the primary tap target. An occasional deep indigo (#1e1b3a) and a minor purple (#8956f8) appear on immersive banners and decorative accents.

Key Characteristics:

• Custom Postype Sans-serif KR typeface for the entire UI — headlines at weight 700, body/nav at 400
• Near-black charcoal text (#141415 prose, #2c2c2f UI) instead of pure black — editorial, content-first
• Single saturated brand red (#f33d4d) reserved for identity accents, not buttons
• Charcoal (#2c2c2f) as the primary filled-action color — quiet, decisive, premium
• Interactive blue (#3478ff) for links and counts — clearly separated from the brand red
• Flat depth: no shadows; tinted #f2f2f3 / #f9f9fa surfaces + #eaeaeb hairlines do the separating
• Soft rounded geometry — 8px buttons/nav, 24px tag chips, full-round avatars
• Cool-grey text ladder (#62626a → #76767f) for secondary and muted hierarchy

2. Color Palette & Roles

Brand & Accent

• POSTYPE Red (#f33d4d): The brand identity accent — logo, brand highlights, occasional emphasis. The single saturated hue, used sparingly so it stays distinctive (×21 background occurrences in the live scan, mostly small marks).
• Accent Purple (#8956f8): A minor decorative accent for badges and select promotional surfaces.
• Immersive Indigo (#1e1b3a): Deep indigo background for immersive banner blocks and dark promotional cards.

Action & Interactive

• Action Charcoal (#2c2c2f): Primary filled-button background (sign-up CTA) and the default UI label color. The decisive, neutral "do this" color.
• Link Blue (#3478ff): Interactive links, counts, and inline actions. Reserved for navigation-style interactivity, distinct from the brand red.

Text Hierarchy

• Ink (#141415): Primary reading text and headlines. A near-black with the faintest warmth.
• UI Ink (#2c2c2f): Nav labels, button text, footer links — the chrome's default text.
• Body Slate (#62626a): Secondary body copy, supporting labels.
• Muted Slate (#76767f): Tertiary text, captions, metadata, disabled-leaning labels.

Neutral & Surface

• Pure White (#ffffff): Page background, white cards, text on dark/charcoal.
• Surface Grey (#f2f2f3): Cool-grey tinted surface for active nav pills, tag chips, and segmented blocks.
• Surface Alt (#f9f9fa): A softer near-white tint for alternating content cards and sections.
• Hairline (#eaeaeb): Thin borders, dividers, and outlined-button borders — the primary separation device in this shadow-free system.

3. Typography Rules

Font Family

• Primary: Postype Sans-serif KR (with fallbacks Apple SD Gothic Neo, Malgun Gothic, sans-serif) — the custom POSTYPE face used across the entire UI, headlines through captions.

Hierarchy

Principles

• One typeface, full hierarchy: The custom Postype Sans-serif KR carries everything — there is no display/body font split. Hierarchy comes from weight (700 → 600 → 400) and size, not from swapping families.
• Weight as emphasis: Headlines at 700, interactive labels at 600, reading and nav text at 400. The CTA gains presence from weight 600, not from color or size.
• Hangul-first sizing: Body and nav sit at a comfortable 16px / 1.5 line-height — generous for hangul legibility in long-form creator content.
• Reserved chrome: The UI never out-sizes the creator's content; 32px is the largest chrome size, keeping POSTYPE's own type quiet.

4. Component Stylings

Buttons

Sign-up CTA (Primary)

• Background: #2c2c2f
• Text: #ffffff
• Radius: 8px
• Padding: 6px 16px
• Height: 40px
• Font: 15px / 600 / Postype Sans-serif KR
• Use: Primary filled call-to-action — "회원 가입" (sign up)

Login (Outlined)

• Background: #ffffff
• Text: #2c2c2f
• Border: 1px solid #eaeaeb
• Radius: 8px
• Padding: 6px 16px
• Height: 40px
• Font: 15px / 600 / Postype Sans-serif KR
• Use: Secondary outlined action — "로그인" (log in)

Subscribe (Tinted Compact)

• Background: #f2f2f3
• Text: #2c2c2f
• Radius: 8px
• Padding: 4px 12px
• Height: 32px
• Font: 13px / 600 / Postype Sans-serif KR
• Use: Tinted-grey compact action — "구독" (subscribe)

Tabs (Nav Pills)

Top Nav Item

• Text: #2c2c2f
• Radius: 8px
• Padding: 4px 12px
• Font: 16px / 400 / Postype Sans-serif KR
• Active: #f2f2f3 tinted-grey fill
• Use: Top navigation items ("홈", "오픈 채널", "리퀘스트", "캐릭터톡", "보관함")

Badges (Tag Chips)

Tag Chip

• Background: #f2f2f3
• Text: #2c2c2f
• Radius: 24px
• Font: 11px / 400 / Postype Sans-serif KR
• Height: 20px
• Use: Content tag / category chip

Cards & Containers

Tinted Surface Card

• Background: #f9f9fa
• Text: #141415
• Radius: 8px
• Use: Tinted content card on light-grey surface, flat (no shadow)

Avatars

Channel Avatar

• Background: #ffffff
• Radius: 9999px (full circle)
• Height: 48px
• Use: Circular creator / channel avatar

List Items (Footer Links)

Footer Link

• Text: #2c2c2f
• Font: 14px / 400 / Postype Sans-serif KR
• Padding: 3px 8px
• Use: Footer and legal navigation ("이용 약관", "개인정보 처리방침", "청소년 보호 정책")

---

Verified: 2026-06-11 Tier 1 sources: https://www.postype.com, https://www.postype.com/@team, https://about.postype.com Tier 2 sources: getdesign.md/postype (no designs found) | styles.refero.design/?q=postype (not listed) — none available Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 6px, 8px, 12px, 16px, 24px, 40px
• Notable: Nav pills and tinted actions land on a tight 4px 12px padding; primary buttons relax to 6px 16px — a compact, reading-room rhythm rather than oversized marketing chrome

Grid & Container

• Persistent left sidebar / top nav with pill-style navigation items, content-feed body to the right
• Creator channels present a single-column reading column with metadata, subscribe, and tag chips
• Feature/intro sections alternate white (#ffffff) and tinted (#f9f9fa / #f2f2f3) full-width bands
• Cards group posts/series at 8px radius without elevation

Whitespace Philosophy

• Reading-room calm: generous vertical rhythm around content blocks; the chrome recedes so creator work is the focus.
• Flat segmentation: sections separate by background tint (#f2f2f3 / #f9f9fa vs #ffffff) and #eaeaeb hairlines, not by shadow.
• Pill cadence: repeated 8px nav pills and 24px tag chips create a soft, consistent horizontal rhythm.

Border Radius Scale

• Small (6px): inner inline elements, count links
• Medium (8px): buttons, nav pills, cards — the workhorse
• Chip (24px): tag chips
• Full (9999px / 50%): avatars, round action buttons

6. Depth & Elevation

Shadow Philosophy: POSTYPE is a near-shadowless system. Live inspection found box-shadow: none across the nav, buttons, tag chips, and cards. Depth and grouping are communicated entirely through flat tinted surfaces (#f2f2f3 / #f9f9fa) and thin #eaeaeb hairlines. This is a deliberate content-first, editorial choice — it keeps the platform feeling like a calm reading and publishing surface rather than a card-stacked app. When emphasis is needed the system reaches for color (charcoal #2c2c2f fill, brand red #f33d4d, or the immersive indigo #1e1b3a), never elevation.

7. Do's and Don'ts

Do

• Use the custom Postype Sans-serif KR typeface for the entire UI — one face, weight-driven hierarchy
• Use charcoal (#2c2c2f) for the primary filled action button — quiet and decisive
• Reserve the brand red (#f33d4d) for identity accents, keeping it rare and distinctive
• Use link blue (#3478ff) for links and counts, separate from the brand red
• Use near-black charcoal (#141415 / #2c2c2f) for text instead of pure black
• Separate sections with flat tinted surfaces (#f2f2f3 / #f9f9fa) and #eaeaeb hairlines, not shadows
• Use soft rounded geometry — 8px buttons and nav pills, 24px tag chips, full-round avatars
• Keep chrome reserved so the creator's content stays the focus

Don't

• Use drop shadows for elevation — POSTYPE is a flat, shadow-free system
• Make the primary button red — red is the identity accent, charcoal is the action color
• Spread the brand red across many elements — it dilutes the identity signal
• Use pure black (#000000) for body text — reserve near-black charcoal #141415
• Use sharp/square corners on interactive chrome — buttons and pills are rounded
• Mix a second display font — Postype Sans-serif KR owns the whole hierarchy
• Oversize the chrome — the UI should never compete with the creator's content
• Use link blue for non-interactive emphasis — blue means "this is a link"

8. Responsive Behavior

Breakpoints

Touch Targets

• Nav pills and primary buttons at 40px height — comfortably tappable
• Subscribe action at 32px height for compact inline placement
• Tag chips small (20px) but spaced; round avatars at 48px

Collapsing Strategy

• Persistent nav: pill row collapses into a drawer/hamburger on narrow viewports
• Content feed: multi-column → stacked single column
• Tinted/white alternating sections maintain full-width treatment
• Tag chip rows wrap on narrow widths

Image Behavior

• Post thumbnails and channel banners carry no shadow at any size, consistent with the flat system
• Cards maintain 8px radius across breakpoints; avatars stay fully circular

9. Agent Prompt Guide

Quick Color Reference

• Primary action (filled button): Action Charcoal (#2c2c2f)
• Brand accent: POSTYPE Red (#f33d4d)
• Link / count: Link Blue (#3478ff)
• Decorative accent: Purple (#8956f8)
• Immersive banner: Indigo (#1e1b3a)
• Background: Pure White (#ffffff)
• Tinted surface: Surface Grey (#f2f2f3), Surface Alt (#f9f9fa)
• Heading / body text: Ink (#141415), UI Ink (#2c2c2f)
• Secondary text: Body Slate (#62626a)
• Muted text: Muted Slate (#76767f)
• Hairline: #eaeaeb

Example Component Prompts

• "Create a top nav: white background, pill-style nav items (8px radius, 4px 12px padding, 16px Postype Sans-serif KR weight 400, #2c2c2f text). Active item gets a #f2f2f3 tinted fill. Right side: outlined login (#ffffff, 1px solid #eaeaeb, #2c2c2f, 8px radius) and a filled charcoal sign-up CTA (#2c2c2f bg, white text, 8px radius, 6px 16px, weight 600). No shadow."
• "Design a creator post card: #f9f9fa background, 8px radius, no shadow. Title 16px Postype Sans-serif KR, #141415. A subscribe button: #f2f2f3 bg, #2c2c2f text, 8px radius, 13px weight 600, 32px height. Tag chips: #f2f2f3 bg, #2c2c2f text, 24px radius, 11px."
• "Build a tinted section: #f2f2f3 background, full-width. Separate cards with #eaeaeb hairlines, not shadows. Round creator avatars (48px, full circle, white bg). Use the brand red #f33d4d only on the logo mark."
• "Create an immersive promo banner: #1e1b3a indigo background, white text, 8px radius. Keep it rare — most surfaces stay white/grey."

Iteration Guide

1. One typeface — Postype Sans-serif KR — with weight-driven hierarchy (700/600/400)
2. Charcoal (#2c2c2f) is the filled-action color; red (#f33d4d) is identity-only
3. Blue (#3478ff) means "link/count"; never use it for non-interactive emphasis
4. No shadows — separate with #f2f2f3 / #f9f9fa tint and #eaeaeb hairlines
5. Soft rounded geometry — 8px buttons/pills, 24px chips, full-round avatars
6. Text is near-black charcoal (#141415 / #2c2c2f), never pure black
7. Keep the chrome reserved; the creator's content leads

---

10. Voice & Tone

POSTYPE's voice is warm, encouraging, and taste-affirming — a platform that treats every personal taste (취향) as legitimate and worth monetizing, speaking to creators as makers who deserve a sustainable living from their work. The mission line "취향의 가치를 만드는 창작 커뮤니티" ("a creative community that creates value from taste") sets the register: inclusive, dignifying, never gatekeeping. Copy is plain and low-friction, foregrounding ease ("30초면 끝" / "done in 30 seconds") and creator agency over hype.

Voice samples:

• "취향의 가치를 만드는 창작 커뮤니티" — homepage title / mission line (taste-first framing). (verified live 2026-06-11, document.title)
• "포스트, 창작의 가치를 수익으로" — service slogan (creation → income). (verified via about.postype.com 2026-06-11)
• "모든 취향이 가치 있는 세상" — stated vision (every taste has value). (verified via about.postype.com 2026-06-11)

Forbidden register: gatekeeping or taste-shaming language, aggressive sales urgency, undefined jargon, exclamation-heavy hype, anything that frames niche creators as less legitimate.

11. Brand Narrative

POSTYPE (포스타입) launched its public service in 2015 (beta 2015-06-22, official launch 2015-07-17) under 주식회사 포스타입 (Postype, Inc.), a Seoul-based startup, with the founding vision of a "content-distribution blog platform." It addressed a gap unique to Korea's creator economy: writers, illustrators, webtoon artists, and niche-hobby creators had no flexible, taste-respecting place to publish long-form work and earn directly from the fans who valued it. POSTYPE's founding premise — "모든 취향이 가치 있는 세상" ("a world where every taste has value") — reframed publishing from ad-driven scale-chasing into a marketplace where personal taste itself is the product.

The platform matured into a self-described "creator super-app" (크리에이터를 위한 슈퍼 앱), letting creators monetize through individual paid posts, membership subscriptions, commission requests (리퀘스트), character chatbots (캐릭터톡), and community features. POSTYPE frames this as a virtuous cycle: revenue from creation funds more creation, so creators can sustain their practice. As publicly reported, the platform has grown to hundreds of thousands of creators and cumulative transactions in the hundreds of billions of won.

What POSTYPE refuses, visible in its design: the loud, ad-saturated, algorithm-feed aesthetic of mass content platforms, and any chrome that out-shouts the creator's work. What it embraces: a flat, calm, reading-room interface; one reserved brand red; a single custom typeface that keeps hierarchy quiet; and copy that affirms taste rather than ranking it.

12. Principles

1. Every taste has value. POSTYPE exists so niche creators can earn, not just the mainstream. UI implication: never visually rank or gate content by popularity in the core reading flow; present creator work neutrally and let tags surface taste.
2. Content leads, chrome recedes. The platform is a stage, not the show. UI implication: keep the UI quiet — one typeface, reserved sizes, charcoal actions, no decorative shadow — so the creator's work is the focus.
3. Red is identity, charcoal is action. UI implication: reserve the brand red (#f33d4d) for the mark and rare emphasis; use charcoal (#2c2c2f) for the decisive filled action so the next step reads as neutral, not salesy.
4. Flat and calm. Editorial clarity beats decorative depth. UI implication: no shadows; separate with tint and hairlines; keep the page light and easy to read for long stretches.
5. Earnings sustain creation. The product is a virtuous cycle, not a one-time transaction. UI implication: make subscribe and support paths low-friction and always visible on creator surfaces, framed as ongoing support rather than a hard sell.

13. Personas

Personas below are fictional archetypes informed by publicly observable POSTYPE user segments (Korean creators publishing paid serialized content, and fans subscribing to niche channels), not individual people.

서연, 27, 서울. A web-novel author serializing original fiction. Uses paid posts and memberships to earn directly from readers rather than relying on ad revenue. Chose POSTYPE because it respects niche genres and lets her set her own pricing without feeling judged.

민준, 33, 경기. An illustrator selling digital asset packs and taking commission requests (리퀘스트). Values that the platform turns fan demand into a structured, low-friction earning channel and that the reading-room UI keeps his portfolio front-and-center.

하은, 24, 부산. A fan and subscriber who follows several niche creators. Likes that the flat, calm interface makes long reading sessions comfortable and that subscribing to support a creator feels like patronage, not a transaction.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the flat, reading-room aesthetic. Nav pills and buttons respond to press with a subtle opacity/scale shift; feed cards fade-in from below at motion-standard / ease-enter. The nav drawer slides at motion-slow / ease-enter on mobile. No bounce or spring — a publishing platform signals steadiness and focus, not playful delight. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.