Design System Inspiration of Jobplanet

1. Visual Theme & Atmosphere

Jobplanet (잡플래닛) is Korea's leading company-review and recruitment platform — the domestic answer to Glassdoor — and its interface reads like a bright, data-dense information utility rather than a glossy marketing site. The canvas alternates pure white (#ffffff) cards over a soft cool-grey page background (#f3f3f4), so content organizes itself into flat, scannable blocks. Text sits in a near-black #333333 (never pure black for body), and a single confident spring-green (#00c362) is reserved almost entirely for action: the primary CTA, links, pagination, and inline arrows. The result is trustworthy and functional — a product built to help people compare employers, salaries, and interviews at a glance.

The typographic personality is unmistakably Korean-product-modern. The whole product surface runs on Pretendard Variable — the de-facto hangul UI font — with headlines at a restrained 24px / weight 700 and body dropping to a dense 13px / 400 at 1.5 line-height. There is no dramatic display-size hero on the product; hierarchy is carried by weight (700 vs 400) and by the green accent, not by giant type. This is information architecture over spectacle: sizes stay tight so that ratings, review counts, and salary figures can pack in without feeling cramped. Jobplanet's separate tech blog (techspace) does adopt a larger editorial voice — a 48px / 600 hero set in IBM Plex Sans — a distinct surface that signals "engineering culture," kept deliberately apart from the product chrome.

What distinguishes Jobplanet from flashier fintech or consumer peers is its restraint with depth. Live inspection found box-shadow: none across the hero, nav, story cards, and stat chips: separation comes from the flat #f3f3f4 surface tint and thin #e5e6e9 hairlines, not from elevation. Geometry is gently rounded — a 5px CTA, 8px stat chips, 12px content cards, and fully-round (9999px) circular icon buttons — never sharp, never heavily pill-shaped. The green comes in a small family: the workhorse #00c362, a vivid neon #00ff91 used as a highlight marker, a slightly teal #00c274 line/border variant, and a deep forest #003a1c for dark-on-light labels. The overall impression is clean, fast, and unintimidating — a serious data tool that still feels friendly.

Key Characteristics:

• Pretendard Variable across the entire product; 700 for headlines, 400 for body — weight is the hierarchy signal
• Single spring-green (#00c362) reserved for action — CTA, links, pagination, arrows
• Near-black #333333 text (and #323438 on some headings) instead of pure black — warmer, more legible
• Neon accent green (#00ff91) as a highlight marker, plus a #00c274 line variant and deep #003a1c label green
• Flat depth: box-shadow: none; separation via #f3f3f4 surface tint and #e5e6e9 hairlines
• Gentle radius ladder — 5px CTA, 8px chips, 12px cards, full-round (9999px) icon buttons
• Dense, tight type sizing (13px body, 24px section head) tuned for information-heavy company data
• A separate tech-blog surface in IBM Plex Sans (48px / 600 hero) — editorial voice kept apart from product

2. Color Palette & Roles

Primary

• Jobplanet Green (#00c362): The primary brand and action color. Background of the primary CTA ("바로가기"), and the text color of links, pagination numbers, footer links, and inline arrows — the system's single "action" hue.
• Neon Highlight (#00ff91): A vivid spring-green used as a small highlight marker / emphasis background. Brighter and more electric than the primary.
• Green Line (#00c274): A slightly teal-shifted green used for thin border/underline accents next to green elements.
• Deep Forest (#003a1c): A very dark green used for dark-on-light label text — a low-key branded alternative to grey for small green-family labels.
• On-Primary White (#ffffff): Text and icons on top of the green CTA.

Neutral & Surface

• Pure White (#ffffff): Card and content surfaces, search field background, text on green/dark.
• Surface Grey (#f3f3f4): The cool-grey page background and stat-chip fill — the primary flat separation device.
• Hairline (#e5e6e9): Thin 1px borders on circular buttons, dividers, and card outlines given the shadow-free system.

Text Hierarchy

• Ink (#333333): Primary body text, most headings, strong labels — a near-black used instead of pure black.
• Ink Strong (#323438): A slightly cooler dark used on some section headings.
• Nav Slate (#4b4c50): Top-navigation link text.
• Muted Slate (#686a6d): Login/sign-up links and tertiary UI text.
• Faint Slate (#a4a6ad): Secondary/meta text, captions — the highest-frequency muted tone.
• Disabled Grey (#c5c7cc): Disabled text, placeholders, lowest-emphasis labels.

3. Typography Rules

Font Family

• Product: Pretendard Variable (with Roboto, Noto Sans KR fallbacks) — the document default across the entire product surface, for headings, nav, buttons, and body.
• Tech blog: IBM Plex Sans (with Pretendard Variable fallback) — used only on the techspace engineering blog for its editorial hero and headings.

Hierarchy

Principles

• Weight over size: The product barely scales type — 24px is the largest common head. Hierarchy comes from 700 vs 400 weight and from the green accent, not from display sizes.
• Dense body sizing: Body sits at a tight 13px / 1.5, tuned for information-rich company data (ratings, salaries, review counts) rather than airy marketing copy.
• One product font: Pretendard Variable owns every product surface; IBM Plex Sans is quarantined to the tech blog so the editorial voice never bleeds into the product.
• Normal tracking: Letter-spacing stays normal throughout — there is no tight display tracking because there is no display type in the product.

4. Component Stylings

Buttons

Primary CTA (Green)

• Background: #00c362
• Text: #ffffff
• Radius: 5px
• Padding: 0px 16px
• Height: 40px
• Font: 14px / 700 / Pretendard Variable
• Use: Primary action ("바로가기") — the system's single green CTA

Stat Chip

• Background: #f3f3f4
• Text: #333333
• Radius: 8px
• Padding: 0px 16px
• Height: 48px
• Font: 16px / 700 / Pretendard Variable
• Use: Company stat entry-point ("782개의 전∙현직자 리뷰", "15개의 채용정보")

Circular Icon Button

• Background: #ffffff
• Text: #333333
• Border: 1px solid #e5e6e9
• Radius: 9999px (full round)
• Padding: 6px
• Height: 32px
• Use: Carousel prev/next and small utility icon buttons

Inputs

Global Search

• Background: #ffffff
• Text: #333333
• Font: 16px / 400 / Pretendard Variable
• Height: 48px
• Placeholder: #c5c7cc
• Use: Site-wide search field ("기업, 공고, 콘텐츠 검색") — borderless, sits on white

Cards

Content / Story Card

• Background: #ffffff
• Text: #333333
• Radius: 12px
• Shadow: none
• Use: Story, interview, and recommendation cards on the grey canvas

Badges

Neon Highlight

• Background: #00ff91
• Text: #333333
• Radius: 4px
• Font: 13px / 400 / Pretendard Variable
• Use: Small highlight marker / emphasis tag

Navigation

• Background: #ffffff
• Text: #4b4c50
• Font: 15px / 400 / Pretendard Variable
• Height: 50px items
• Active: green #00c362 text on the active item
• Secondary links ("로그인", "회원가입"): #686a6d
• Use: Top horizontal nav ("기업 랭킹", "커뮤니티", "채용", "콘텐츠", "연봉")

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 product surfaces + tech blog) Tier 1 sources: https://www.jobplanet.co.kr/welcome/index, https://www.jobplanet.co.kr/companies, https://techspace.jobplanet.co.kr/ Tier 2 sources: getdesign.md/jobplanet (0 DESIGN.md files — not listed); styles.refero.design/?q=jobplanet (no Jobplanet-specific match) Conflicts unresolved: none (both Tier-2 catalogs returned no Jobplanet data; all values from Tier 1 live inspect)

5. Layout Principles

Spacing System

• Base unit: 8px, with a dense small end (4px, 6px) for chip and icon padding
• Scale: 4px, 6px, 8px, 12px, 16px, 24px
• Notable: Interactive padding lands at 0px 16px horizontally on both the 40px CTA and 48px stat chips, giving a consistent, tappable horizontal rhythm

Grid & Container

• White content cards float over a full-width #f3f3f4 grey canvas
• Section headings (24px / 700) anchor each block; recommendation and story cards arrange in horizontal carousels and responsive grids
• The global search input is a prominent, borderless 48px field at the top of company-search surfaces
• Stat chips ("N개의 전∙현직자 리뷰") group review + recruitment counts as flat grey entry points

Whitespace Philosophy

• Flat segmentation: sections separate by background (white cards vs #f3f3f4 canvas) and #e5e6e9 hairlines, not by shadow.
• Dense but breathable: body type is tight (13px) so data packs in, but generous card radius (12px) and 16px interior padding keep it from feeling cramped.
• Action lives in one color: the green #00c362 is spatially rare — one CTA per block — so the eye always knows where to click.

Border Radius Scale

• Small (4px): highlight badges, inner elements
• CTA (5px): the primary green button
• Medium (8px): stat chips, mid-size containers
• Large (12px): content and story cards — the workhorse card radius
• Full (9999px): circular icon/carousel buttons

6. Depth & Elevation

Shadow Philosophy: Jobplanet is a near-shadowless system. Live inspection returned box-shadow: none across the hero, nav, story cards, and stat chips. Depth and grouping are communicated entirely through flat tinted surfaces (#f3f3f4) and thin #e5e6e9 hairlines. This is a deliberate modern-flat choice that keeps a data-heavy company-review product feeling fast, light, and mobile-native — avoiding the heavy card-stack look. When emphasis is needed the system reaches for the green (#00c362) or the neon highlight (#00ff91), never elevation.

7. Do's and Don'ts

Do

• Use Pretendard Variable across the entire product; reserve IBM Plex Sans for the tech blog only
• Carry hierarchy with weight (700 vs 400) rather than large display sizes
• Reserve green (#00c362) for action — CTA, links, pagination — keep it the single "action" color
• Use near-black #333333 for body text instead of pure black
• Separate sections with the #f3f3f4 surface tint and #e5e6e9 hairlines, not shadows
• Keep body dense (13px / 1.5) so ratings, salaries, and review counts pack in cleanly
• Use the gentle radius ladder — 5px CTA, 8px chips, 12px cards, full-round icon buttons
• Use the neon #00ff91 sparingly as a highlight marker, not as a fill color

Don't

• Add drop shadows for elevation — Jobplanet is a flat, shadow-free system
• Spread green across many elements — it dilutes the single-action signal
• Use pure black (#000000) for body text — reserve near-black #333333
• Set giant display headlines on the product — the largest common head is 24px
• Use IBM Plex Sans on product surfaces — that voice belongs to the tech blog
• Use sharp square corners on cards or chips — everything is gently rounded
• Introduce a second saturated accent color — the green family is the only saturated hue
• Rely on size alone for hierarchy — weight and the green accent do that work

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA at 40px height with 0px 16px padding — comfortably tappable
• Stat chips at 48px height for easy tapping into company detail
• Nav items at 50px height with 16px horizontal padding
• Search field at 48px height, full-width on narrow viewports

Collapsing Strategy

• Section heads (24px / 700) hold their size; card grids reflow multi-column → stacked
• Recommendation/story carousels switch to horizontal scroll on mobile
• White cards maintain 12px radius across breakpoints; grey canvas stays full-width
• Global search remains a prominent field near the top on all sizes

Image Behavior

• Card thumbnails and company logos carry no shadow at any size, consistent with the flat system
• Story cards keep their 12px radius; imagery is contained within the white card

9. Agent Prompt Guide

Quick Color Reference

• Primary action / CTA / links: Jobplanet Green (#00c362)
• Neon highlight marker: (#00ff91)
• Green line / border accent: (#00c274)
• Deep green label: (#003a1c)
• Body / heading text: Ink (#333333), Ink Strong (#323438)
• Nav link: Nav Slate (#4b4c50)
• Secondary link: Muted Slate (#686a6d)
• Meta / caption: Faint Slate (#a4a6ad)
• Disabled / placeholder: (#c5c7cc)
• Canvas: Pure White (#ffffff); Surface: Grey (#f3f3f4); Hairline: (#e5e6e9)

Example Component Prompts

• "Create a company-review card block on a #f3f3f4 grey canvas. White card (#ffffff, 12px radius, no shadow). Section title 24px Pretendard Variable weight 700, #333333. Inside, a grey stat chip: #f3f3f4 background, #333333 text, 8px radius, 0px 16px padding, 48px height, 16px/700 — '782개의 전∙현직자 리뷰'. One green CTA: #00c362 background, white text, 5px radius, 40px height, 14px/700."
• "Build a top nav: white 50px header. Pretendard Variable 15px weight 400 links, #4b4c50 text, green #00c362 on the active item. Login/sign-up links in #686a6d."
• "Design a global search field: white #ffffff background, borderless, 48px height, 16px Pretendard Variable, #333333 text, #c5c7cc placeholder — '기업, 공고, 콘텐츠 검색'."
• "Add a neon highlight badge: #00ff91 background, #333333 text, 4px radius, 13px Pretendard Variable."

Iteration Guide

1. Pretendard Variable everywhere on product; IBM Plex Sans only on the tech blog
2. Green (#00c362) is the single action color — don't spread it
3. No shadows — separate with #f3f3f4 tint and #e5e6e9 hairlines
4. Weight, not size, drives hierarchy — 700 heads, 400 body
5. Text color is #333333 near-black, never pure black for body
6. Radius ladder: 5px CTA, 8px chips, 12px cards, full-round icon buttons
7. Keep body dense (13px / 1.5) for data-rich company layouts

---

10. Voice & Tone

Jobplanet's voice is candid, insider, and pragmatic — the tone of a trusted colleague who tells you what a company is really like to work at. Copy is plain Korean, information-first, and comfortable with real employee slang ("네카라쿠배", "이직러") because the product's whole premise is unvarnished, from-the-inside truth about employers. It never oversells: headlines state what you'll find ("전∙현직자가 직접 평가한 '사내문화가 좋은 기업'") rather than hyping an outcome. The register treats the user as a job-seeker or career-mover who deserves transparent data — reviews, salaries, interview reports — not a marketing funnel.

Voice samples (verbatim from live surfaces):

• "NO.1 기업 정보 플랫폼 | 잡플래닛" — page title (category-leadership claim). (verified live 2026-07-02)
• "전∙현직자가 직접 평가한 '사내문화가 좋은 기업'" — section head (transparency framing). (verified live 2026-07-02)
• "782개의 전∙현직자 리뷰" — stat chip (data-density, sourced count). (verified live 2026-07-02)

Forbidden register: hype superlatives detached from data, fear-based career pressure, undefined jargon, exclamation-heavy marketing. Jobplanet's authority comes from being specific and sourced, not loud.

11. Brand Narrative

Jobplanet (잡플래닛) launched in 2014, built by the team that would become BrainCommerce (later operating under the Jobplanet/기업 정보 group), to solve a distinctly Korean information asymmetry: job-seekers had almost no transparent, employee-sourced view of what companies were actually like — culture, salary, management, interview process — before they signed on. Jobplanet's founding premise was to open that black box by aggregating reviews and ratings from 전·현직자 (current and former employees), positioning itself as the country's answer to Glassdoor.

Over the following decade the product matured into Korea's leading 기업 정보 (company-information) and recruitment platform, layering salary data, interview reports, company rankings, a jobs marketplace, and community discussion on top of the original review core. It also grew a B2B side — employer-branding and recruitment services for companies (기업 회원 서비스) — turning transparency into a two-sided marketplace where candidates get truth and employers get reach. The homepage's "NO.1 기업 정보 플랫폼" claim states that category leadership plainly.

What Jobplanet's design refuses is the glossy, aspirational chrome of consumer marketing sites: there is no oversized hero, no heavy shadow-stacked cards, no single hero image doing the persuading. What it embraces is a flat, dense, data-first interface — a single trustworthy green for action, near-black text for legibility, and tight typography that lets ratings and review counts speak for themselves. The design is, in effect, an argument that the data is the product.

12. Principles

1. Transparency is the product. Jobplanet exists to surface employee-sourced truth about companies. UI implication: foreground counts and sources ("782개의 전∙현직자 리뷰"); make data visible and scannable before any CTA.
2. Data density over spectacle. A career decision needs many data points at once. UI implication: keep type tight (13px body), use weight for hierarchy, and pack ratings/salaries/reviews without resorting to giant display type.
3. One action, one color. Green (#00c362) means "do this." UI implication: reserve the saturated green exclusively for the primary CTA, links, and pagination so the next step is never ambiguous.
4. Flat and fast. Mobile-native clarity beats decorative depth. UI implication: no shadows; separate with the #f3f3f4 tint and #e5e6e9 hairlines; keep the page quick to scan.
5. Plain, insider voice. Speak like a candid colleague, not a marketer. UI implication: descriptive headings and factual chips; embrace real job-market language rather than sanitized copy.

13. Personas

Personas below are fictional archetypes informed by publicly observable Jobplanet user segments (Korean job-seekers researching employers, career-movers comparing salaries, HR/employer-branding teams), not individual people.

김도현, 28, 서울. A developer preparing to switch jobs. Reads interview reports and 전·현직자 reviews on Jobplanet before applying, and cross-checks salary ranges. Trusts the platform because the reviews feel sourced and specific, not like a recruiter's pitch.

이서연, 33, 판교. A product manager comparing two offers. Uses company rankings and 사내문화 ratings to sanity-check culture claims she heard in interviews. Values that the interface is dense enough to scan many companies in one sitting.

박준혁, 41, 기업 인사팀. An HR lead at a mid-size company managing the employer-branding profile (기업 회원 서비스). Wants the company page to look credible and current; cares that reviews and job posts render cleanly. Sees Jobplanet as where candidates form first impressions.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the flat, fast, data-first aesthetic. Cards and results fade in from below at motion-standard / ease-enter; carousels slide horizontally with ease-standard; buttons and chips respond to press with a subtle opacity/scale shift. No bounce or spring — a company-information product signals steadiness and credibility, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and carousels advance without animation; the product remains fully functional.