Design System Inspiration of 3o3 (삼쩜삼)

1. Visual Theme & Atmosphere

삼쩜삼 (3o3) is Korea's mass-market tax-refund platform — the app that turned the dreaded 종합소득세 filing into a two-tap "find my hidden money" ritual for over seven million filers — and its visual system is engineered for exactly that job: maximum trust, minimum friction, zero intimidation. The official brand identity, published on the company's own brand resource center, anchors everything to SZS Blue (#0c64e6), a saturated institutional blue that signals fiscal credibility, paired with a deep navy (#023266) and a warm amber (#fea800) that injects the "money coming back to you" optimism. The product chrome itself is a calm white canvas (#ffffff) with cool light-grey surfaces (#f5f6f8) and a near-black ink (#141618) carried on Pretendard, the de-facto Korean product typeface.

The system visibly splits into three coordinated registers. The acquisition funnel (www.3o3.co.kr) is a conversion machine: tall 61px CTAs in a punchy yellow (#fbbd41) and a friendly bright blue (#3e79ff) at a tight 7px radius, set on alternating white and dark slate (#283240) bands. The app surface (app.3o3.co.kr) is quieter and rounder — an 18px-radius Kakao login button in Kakao yellow (#fae100), 10px info chips, and dense 12px compliance footnotes in muted blue-grey (#a4acb4). The corporate/brand layer (jobisnvillains.com, brand.3o3.co.kr) speaks in Poppins for English headings and Pretendard for Korean, with generous 36px/700 headlines. The registers differ in temperature but share one DNA: flat, shadowless surfaces, honest typography, and blue as the spine.

What makes 삼쩜삼 distinctive among Korean fintechs is its unapologetic direct-response energy. Where Toss whispers premium minimalism, 삼쩜삼 shouts a clear promise — "숨은 환급금 간편하게 찾아보세요" — and backs it with compliance fine print rendered honestly on the page rather than hidden. The design is persuasion-forward but legally scrupulous: every bold claim sits above a 12px disclosure list. It is the visual language of a service that must feel simultaneously like a friendly money-finding game and a licensed tax intermediary.

Key Characteristics:

• SZS Blue (#0c64e6) as the official brand anchor, with deep navy (#023266) and amber (#fea800) as the supporting official palette
• Three coordinated registers: yellow/blue conversion funnel, calm Pretendard app chrome, Poppins+Pretendard corporate layer
• Tall 61px funnel CTAs at a tight 7px radius — direct-response geometry
• Rounder app geometry: 18px-radius login button, 10px chips
• Flat and shadowless throughout — separation by surface tint (#f5f6f8, #fafbfc) not elevation
• Near-black ink (#141618) on Pretendard for all product text
• Honest compliance typography: 12px muted (#a4acb4) disclosure lists as a first-class design element
• Kakao yellow (#fae100) social login as the app's single entry action

2. Color Palette & Roles

Official Brand Palette (brand.3o3.co.kr)

• SZS Blue (#0c64e6): The official primary brand color — "SZS Blue는 삼쩜삼을 대표하는 색상입니다" per the brand resource center. Logo, brand moments, key graphics.
• Deep Navy (#023266): Official secondary dark — used in brand graphics and dark logo lockups.
• Amber (#fea800): Official warm accent — the "refund money" optimism color in brand graphics.
• Sky Tint (#f3f9ff): Official light blue-tinted background from the brand palette.
• Link Blue (#006efa): Hyperlink/action blue used on the brand resource center chrome.

Funnel CTAs (www.3o3.co.kr landing)

• CTA Yellow (#fbbd41): The landing page's highest-frequency conversion button — "내 환급금 조회하기", "지금 환급 신청하기".
• CTA Blue (#3e79ff): Trust-framed CTA variant — "안전하게 환급 신청하기"; a deeper sibling #355aff appears on one band.
• CTA Dark (#2f3943): Dark slate eligibility CTA — "대상자 여부 확인하기".
• Dark Section (#283240): Full-width dark slate band backgrounds on the funnel.
• Tint Blue (#f3f6ff): Light blue-tinted info band on the funnel.

Product & Corporate Neutrals

• Ink (#141618): Primary text color on app, corporate site, and brand center — near-black with a cool undertone.
• Pure Black (#000000): Label color on the yellow funnel CTAs and default landing body text.
• Body Sub (#606a76): Secondary descriptive text on corporate/brand surfaces; a slate lead variant #3a4047 appears on the mission statement.
• Muted (#a4acb4): Compliance footnotes, disclosure lists, sidebar inactive labels (#b9c0c6 nav idle is adjacent).
• Muted Alt (#788391): Info-chip label text on the app login screen.
• Canvas (#ffffff): Page background everywhere.
• Surface (#f5f6f8): App background grey.
• Surface Soft (#fafbfc): Soft grey section background on brand center and landing root.
• Chip Grey (#f0f1f2): Info chip background on the app.

Third-Party Action

• Kakao Yellow (#fae100): The Kakao-mandated social login button — the app's single sign-in path, kept verbatim per Kakao brand rules.

3. Typography Rules

Font Family

• Korean (product & corporate): Pretendard (Pretendard JP Variable on the corporate site) — the official Korean typeface per the brand center: "영문 사용 시 Poppins, 국문 사용 시 Pretendard를 사용합니다."
• English (brand/display): Poppins — official English typeface, used for brand-center headings and English lockups.
• Funnel exception: Noto Sans KR — the Unbounce-built acquisition landing runs Noto Sans KR; a funnel-only legacy, not the brand typeface.

Hierarchy

Principles

• Two official typefaces, strict split: Poppins owns English, Pretendard owns Korean — stated verbatim in the brand guide. They never swap.
• Bold at 700, never heavier: Display and headings sit at weight 700; emphasis inside body uses 700 spans, not size jumps.
• Normal letter-spacing: Unlike Toss/Finda-style tight tracking, measured letter-spacing is normal across all surfaces — the system relies on weight, not compression.
• Compliance type is a real tier: The 12px/500 muted footnote is a deliberate, consistent system role, not an afterthought — it appears identically structured on funnel and app.

4. Component Stylings

Buttons

Funnel CTA — Yellow (Primary)

• Background: #fbbd41
• Text: #000000
• Radius: 7px
• Height: 61px
• Font: 18px / 500 / Noto Sans KR
• Use: Landing primary conversion — "내 환급금 조회하기", "지금 환급 신청하기", "지금 찾으러 가기"

Funnel CTA — Blue

• Background: #3e79ff
• Text: #ffffff
• Radius: 7px
• Height: 61px
• Font: 18px / 500 / Noto Sans KR
• Use: Trust-framed conversion — "안전하게 환급 신청하기", repeated as the page's alternating CTA color

Funnel CTA — Dark

• Background: #2f3943
• Text: #ffffff
• Radius: 7px
• Height: 61px
• Font: 18px / 500 / Noto Sans KR
• Use: Eligibility check — "대상자 여부 확인하기"

Kakao Login (App, Compliance-Mandated)

• Background: #fae100
• Text: #141618
• Radius: 18px
• Height: 56px
• Padding: 0 16px
• Font: 16px / 700 / Pretendard
• Use: The app's single sign-in action — "카카오 계정으로 계속하기"

Corporate Ghost (On-Image)

• Background: rgba(255, 255, 255, 0.25)
• Text: #ffffff
• Radius: 16px
• Padding: 16px 48px
• Font: 16px / 700 / Pretendard
• Use: Recruiting CTA over hero photography on jobisnvillains.com — "채용 중인 직무 보러 가기"

Badges

Info Chip

• Background: #f0f1f2
• Text: #788391
• Radius: 10px
• Height: 33px
• Padding: 0 12px
• Font: 12px / 700 / Pretendard
• Use: Expandable basis-of-calculation chip on the app login — "예상 환급액을 계산하는 기준"

Cards & Containers

Tinted Info Band

• Background: #f3f6ff
• Text: #141618
• Use: Light blue info band segmenting the funnel landing

Soft Section

• Background: #fafbfc
• Text: #141618
• Use: Soft grey full-width section on brand center and landing root

Dark Band

• Background: #283240
• Text: #ffffff
• Use: Full-width dark slate band on the funnel (white 20px/400 copy — "숨은 환급금 간편하게 찾아보세요")

List Items

Compliance Footnote

• Text: #a4acb4
• Font: 12px / 500 / Pretendard
• Use: Statutory disclosure list — average-refund basis, 세무대리 scope, 사업자 정보 ("(주) 자비스앤빌런즈 | 대표자 : 김범섭")

Notes: the login surface offers no traditional text input — sign-in is Kakao-only — so input specs are intentionally absent. All measured surfaces returned box-shadow: none; the system is flat.

---

Verified: 2026-06-10 Tier 1 sources: https://www.3o3.co.kr (funnel landing, live computed style); https://app.3o3.co.kr (app login surface, live computed style); https://brand.3o3.co.kr/brand-logo + https://brand.3o3.co.kr/color-typeface (official brand resource center — SZS Blue, Poppins/Pretendard); https://jobisnvillains.com (operator corporate site, live computed style); https://blog.3o3.co.kr (official blog) Tier 2 sources: none available — getdesign.md/3o3 and getdesign.md/samjjeomsam both 404; styles.refero.design searched "3o3" / "삼쩜삼" / "samjjeomsam", no listing Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 80px section rhythm
• Funnel CTAs use full-width-of-column blocks with tall 61px hit areas; corporate buttons pad generously at 16px 48px

Grid & Container

• Funnel: single-column, centered, long-scroll direct-response page assembled from full-width image/text bands; CTA repeated after every persuasion block
• Corporate: max-width ~1440px centered container with sticky 71px header
• Brand center: sticky left sidebar (section nav) + single content column with full-bleed swatch/graphic images
• App: mobile-frame single column centered on desktop, content capped at app width

Whitespace Philosophy

• Conversion rhythm over gallery calm: the funnel alternates dense persuasion bands and CTAs — whitespace is a pacing device between pitch beats, not an aesthetic statement.
• Flat segmentation: sections separate by background shifts (#ffffff → #fafbfc → #f3f6ff → #283240), never by shadow.
• Disclosure gets room: compliance footnotes are given their own uncramped block at the page bottom rather than being squeezed.

Border Radius Scale

• Tight (7px): funnel CTAs — direct-response sharpness
• Medium (10px): app chips
• Relaxed (16px): corporate buttons
• Round (18px): app login button
• The radius grows as the surface moves from "sell" (funnel) to "use" (app) — geometry tracks register

6. Depth & Elevation

Shadow Philosophy: 삼쩜삼 is a shadowless system. Live inspection across the funnel landing, the app login, and the corporate site returned box-shadow: none on every button, chip, band, and card measured. Depth is communicated by flat tint shifts and by the dark slate band (#283240) acting as a hard segment divider. This keeps the conversion page fast-reading and the app chrome honest and lightweight — appropriate for a product whose core promise is "no hidden anything."

7. Do's and Don'ts

Do

• Anchor brand moments to SZS Blue (#0c64e6) — it is the officially mandated representative color
• Use Poppins for English and Pretendard for Korean, exactly as the brand guide splits them
• Keep funnel CTAs tall (61px), tight-cornered (7px), and repeated — direct-response geometry is intentional
• Render the Kakao login button in Kakao yellow (#fae100) verbatim per Kakao brand rules
• Keep every surface flat — separate sections with tint shifts (#fafbfc, #f3f6ff) and the dark band (#283240)
• Give compliance footnotes their own honest 12px/500 muted (#a4acb4) block
• Pair each bold money claim with its calculation-basis chip or footnote
• Use amber (#fea800) for refund-optimism accents within official brand graphics

Don't

• Recolor or restyle the logo — the brand center's Logo Do Nots forbid size, shape, color, and effect changes
• Add drop shadows or elevation stacks — every measured surface is shadowless
• Use tight negative letter-spacing — the system tracks normal everywhere
• Swap the typeface split (Poppins for Korean or Pretendard-only English lockups)
• Hide or shrink statutory disclosures to make the pitch cleaner — fine print is a first-class tier
• Use the funnel's Noto Sans KR on product or brand surfaces — it is a funnel-only legacy
• Spread Kakao yellow (#fae100) beyond the Kakao login action
• Make refund claims without the basis line ("누적 신고 고객 평균" framing)

8. Responsive Behavior

Breakpoints

Touch Targets

• Funnel CTAs at 61px height — oversized, thumb-proof conversion targets
• App Kakao login at 56px height, full width
• Info chip at 33px with 12px side padding — compact but tappable

Collapsing Strategy

• Funnel bands are pre-built per breakpoint (desktop/mobile image pairs) rather than reflowed
• Corporate hero: 36px/700 headlines hold weight on mobile, scale size down
• Brand center: sidebar nav collapses into top sticky bar with disclosure arrow

Image Behavior

• The funnel is image-led: persuasion blocks ship as optimized webp bands swapped per breakpoint
• Brand swatches and graphics are full-bleed webp images; no shadow at any size
• App icon/symbol downloads provided as official zips from cdn.3o3.co.kr

9. Agent Prompt Guide

Quick Color Reference

• Official brand: SZS Blue (#0c64e6), Deep Navy (#023266), Amber (#fea800), Sky Tint (#f3f9ff)
• Funnel primary CTA: Yellow (#fbbd41) with black text
• Funnel secondary CTA: Blue (#3e79ff) with white text
• Funnel dark CTA / band: #2f3943 / #283240
• App ink: #141618; app surface: #f5f6f8; chip: #f0f1f2
• Muted text: #a4acb4 (footnotes), #788391 (chip labels), #606a76 (descriptions)
• Kakao login: #fae100
• Link: #006efa

Example Component Prompts

• "Create a direct-response hero band: white background, persuasion headline in Pretendard 36px/700 #141618, then a full-width CTA: #fbbd41 background, #000000 text, 7px radius, 61px tall, 18px/500 — label '내 환급금 조회하기'."
• "Design an app login screen: #ffffff canvas, centered content, one Kakao button: #fae100 background, #141618 text, 18px radius, 56px tall, 16px/700 Pretendard — '카카오 계정으로 계속하기'. Below it an info chip: #f0f1f2 background, #788391 text, 10px radius, 33px tall, 12px/700."
• "Build a dark segment band: #283240 background, white 20px/400 line '숨은 환급금 간편하게 찾아보세요', followed by a #3e79ff CTA with white text, 7px radius, 61px tall."
• "Add a compliance footer: list items at 12px/500 Pretendard, color #a4acb4, line-height 18px, each row a statutory disclosure; no shadow, white background."
• "Create a brand-center section: #fafbfc background, Poppins 32px/700 #141618 English heading, Pretendard 16px/500 #606a76 Korean description, full-bleed SZS Blue #0c64e6 swatch block."

Iteration Guide

1. Decide the register first: funnel (yellow/blue, 7px, Noto-legacy energy), app (Pretendard, 18px radius, calm), or brand/corporate (Poppins+Pretendard, editorial)
2. SZS Blue #0c64e6 for brand identity moments; #3e79ff only as the funnel conversion blue — don't conflate them
3. Everything flat: zero box-shadows, tint-shift separation only
4. CTAs are tall: 61px funnel / 56px app — never compress below 48px
5. Every money claim gets a basis: chip ("예상 환급액을 계산하는 기준") or 12px footnote
6. Korean text on Pretendard 500/700; English display on Poppins 700
7. Kakao yellow is untouchable third-party chrome — keep it verbatim

---

10. Voice & Tone

삼쩜삼's voice is friendly, money-smart, and reassuring — a service that talks about the most bureaucratic subject in Korean life (세금) in the register of a helpful friend who found money in your coat pocket. The core verbal move is reframing: tax filing becomes "숨은 환급금 찾기" (finding hidden refund money), a treasure hunt rather than a chore. Claims are bold but always anchored — every average-refund figure carries its statistical basis in fine print, and risk-sensitive steps are framed with safety words ("안전하게").

Voice samples (verbatim from live surfaces, 2026-06-10):

• "삼쩜삼 - 생활 밀착 환급·혜택 플랫폼" — homepage title (positioning line)
• "세금 환급은 물론, 모든 숨은돈 삼쩜삼에서 찾기" — homepage meta description (scope-expansion promise)
• "내 숨은 환급액을 찾아보세요" — app title (possessive treasure-hunt frame)
• "쩜 쉬운 세금 관리의 시작" — jobisnvillains.com headline (brand pun on 쩜/참)
• "SZS Blue는 삼쩜삼을 대표하는 색상입니다. 일관된 표현을 위해 브랜드 색상은 반드시 준수하여 사용합니다." — brand resource center (governance voice)

Forbidden register: fear-based tax-penalty scaremongering; unanchored refund-amount hype (every figure needs its basis line); bureaucratic 국세청-style officialese in user-facing flows; minimizing or hiding statutory disclosures.

11. Brand Narrative

삼쩜삼 is operated by 자비스앤빌런즈 (Jobis & Villains), founded in August 2015 with CEO 김범섭 (named on the service's own statutory footer). The company's first act was 자비스 (Jarvis), an AI bookkeeping service for small businesses; its second act — launched May 2020 — was 삼쩜삼, named after the 3.3% withholding tax rate that every Korean freelancer recognizes from their pay stubs. The insight was painfully simple: millions of gig workers, freelancers, and platform laborers had overpaid taxes sitting unclaimed at the National Tax Service because the refund process assumed you had an accountant. 삼쩜삼 turned that recovery into a consumer app.

The numbers became the brand story. The service's own disclosure line counts 7,208,747 cumulative filing customers between 2020.05.01 and 2026.04.01, and the corporate site reports the platform passing 24 million cumulative users with over 2조원 (two trillion won) in refunds processed as of mid-2025 — figures the company publishes with their statistical basis attached, in keeping with its compliance-forward voice. The company earned Korean 예비유니콘 (pre-unicorn) designation in 2023, and its corporate mission frames the product line as giving people "더 많은 부" (more wealth), "더 많은 시간" (more time), and "더 많은 권리" (more rights).

What 삼쩜삼 refuses, visible in the design: the intimidating institutional chrome of tax authorities and legacy 세무 software, and the dark-pattern vagueness of "free check" services that hide their fee. What it embraces: a treasure-hunt verbal frame on a rigorously disclosed legal base, one mandated brand blue governed by a public brand resource center ("브랜드센터"), and an expansion arc from tax refunds toward a broader "생활 밀착 환급·혜택 플랫폼" — the everyday hidden-money platform its homepage title now claims.

12. Principles

1. Reframe the chore as a find. Tax filing is repositioned as discovering money that is already yours. UI implication: lead with the outcome ("내 숨은 환급액") and put process steps behind a single tall CTA; never open with forms.
2. Every claim carries its basis. Average-refund figures cite exact cohorts (7,208,747 filers, dated range). UI implication: bold number + adjacent basis chip or 12px footnote is an inseparable pair — never render one without the other.
3. Safety is copywriting, not just engineering. "안전하게" lives inside the button label. UI implication: trust-sensitive actions get the blue CTA and reassurance microcopy at the point of click, not on a separate security page.
4. One governed blue. SZS Blue is mandated by the brand center with explicit Do-Nots. UI implication: brand surfaces use #0c64e6 untouched; funnel experiments may vary CTA colors but never the logo or identity blue.
5. Flat means honest. No shadows, no layered chrome, no hidden depth. UI implication: separate with tint and dark bands; if a section needs emphasis, change its background, not its elevation.

13. Personas

Personas below are fictional archetypes informed by publicly observable 삼쩜삼 user segments (freelancers and gig workers reclaiming withheld tax, small-business owners filing 종합소득세), not individual people.

박지훈, 27, 서울. A delivery-platform rider and part-time content editor with three income sources, all withheld at 3.3%. Has never met an accountant and never will. Found 삼쩜삼 through a friend's refund screenshot; the Kakao-only login meant he was filing within a minute. Trusts the service because the expected-refund chip explained exactly how the number was computed.

이서연, 34, 성남. A freelance designer who files 종합소득세 every May. Used to dread the 홈택스 maze; now treats the 삼쩜삼 push notification as the start of "refund season." Reads the fine print — and stays because the platform prints its limitations (세무 상담 미포함) plainly instead of pretending to be her accountant.

최민수, 45, 대구. A small private-academy owner who joined when 삼쩜삼 expanded into 개인사업자 services. Skeptical of fintech hype, he was converted by the statutory footer: registered business number, named CEO, exact cohort statistics. For him the flat, no-frills interface reads as "this company spends money on tax engines, not gradients."

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet. The one signature moment is the refund-amount reveal — the number appears with a short motion-slow / ease-enter count-up, because the amount is the product's payoff; everything else (step transitions, chip expansion, sheet presentation) stays at motion-standard or faster. No spring, no bounce — a tax intermediary signals steadiness. Funnel pages are effectively static (image bands + anchor scrolling). Under prefers-reduced-motion: reduce, the count-up renders instantly and all transitions collapse; filing remains fully functional.