Design System Inspiration of Lemonbase

1. Visual Theme & Atmosphere

Lemonbase (레몬베이스) is a Korean HR SaaS for performance management — evaluation, goals/OKR, 1:1s, and engagement surveys — and its marketing site reads like a calm, confident enterprise product rather than a noisy growth-hack landing page. The canvas is pure white (#ffffff), segmented by a cool slate surface (#f1f5f9) and a warmer off-white (#f9f9f9) into airy, generously-spaced bands. Text sits in a deep near-black navy (#1a2128) for headings, never pure black, dropping through a measured cool-grey ladder — body slate (#4c5967), muted slate (#677583), faint grey (#cfd3d8) — that keeps dense HR copy readable without harshness. The separation device is the hairline (#e2e5e9) and flat tint, not heavy chrome.

The single saturated brand action color is a clear, friendly blue (#328af6), reserved almost exclusively for the primary "도입 문의" (Contact sales) CTA and active nav state, so the eye is trained to read that one blue as "the next step." On the pricing surface a confident consult-green (#469f68) appears as the secondary "상담 문의" action, and the system keeps a small festive accent set — feature-icon purple (#5d3dd5), the lemon-yellow signature (#ffd750), and a magenta-pink (#c7317b) — strictly for decorative tinted icon backgrounds and illustration, never for interactive chrome. Tinted action surfaces like the pale blue card wash (#edf5ff) carry labels and report chips. A dark slate (#2c2c38) anchors the occasional inverted block; CTA labels are white (#ffffff — on-primary).

Typographically the system is unmistakably Korean-premium: every headline runs in Pretendard Bold (loaded as a named bold family, rendering heavy at large sizes) — 48px on the hero, 44px on the pricing title, 36px on feature heads — with tight negative tracking (around -0.56px at 28px) projecting a steady, declarative confidence. Body and UI text drop to Pretendard Regular at a quiet 16px / weight 400, the de-facto Korean product font tuned for dense hangul legibility, with Manrope as a Latin/numeral companion. Depth is restrained: there are essentially no hard borders, only soft ambient shadows (rgba(0,0,0,0.08) 0px 8px 36px) under feature cards. Geometry is rounded but disciplined — 8px buttons, 12px cards, 24px feature containers, 36px carousel pills.

Key Characteristics:

• Single friendly blue (#328af6) reserved for the primary "도입 문의" CTA and active nav — the one "action" color
• Consult-green (#469f68) as the dedicated secondary action on pricing ("상담 문의")
• Pretendard Bold for all display headlines (heavy, declarative Korean-premium voice); Pretendard Regular 16px for body
• Near-black navy (#1a2128) for headings instead of pure black — warm, trustworthy
• Flat depth: hairlines (#e2e5e9) + tinted surfaces (#f1f5f9) + soft ambient rgba(0,0,0,0.08) shadows, never hard borders
• Festive but disciplined accent set — purple (#5d3dd5), lemon-yellow (#ffd750), magenta-pink (#c7317b) — for decorative icon tints only
• Pale blue wash (#edf5ff) for label / report chips on white
• Disciplined rounded geometry — 8px buttons, 12px cards, 24px containers, 36px pills

2. Color Palette & Roles

Primary

• Lemonbase Blue (#328af6): Primary brand and action color. The clear blue on the "도입 문의" CTA and active nav state — the system's single primary action.
• Blue Tint (#edf5ff): Pale blue wash for label chips, report tags, and tinted cards sitting on white.
• Ink Navy (#1a2128): Primary text and heading color. A very dark blue-black carrying warmth and enterprise trust — used instead of pure black.

Secondary & Accent

• Consult Green (#469f68): Secondary action color for the "상담 문의" CTA on the pricing page; also a tinted feature-icon accent.
• Accent Purple (#5d3dd5): Decorative feature-icon accent (tinted backgrounds), never interactive chrome.
• Lemon Yellow (#ffd750): The brand's namesake signature accent — illustration and highlight pops.
• Accent Pink (#c7317b): Magenta accent for decorative icons and illustration variety.

Neutral & Surface

• Pure White (#ffffff): Page background, white card surfaces, and CTA label text (on-primary).
• Surface Slate (#f1f5f9): Cool-grey tinted surface for content cards, neutral buttons, and segmented bands.
• Surface Alt (#f9f9f9): Warmer off-white for alternating section blocks.
• Hairline (#e2e5e9): Thin dividers and card outlines — the primary separation device in the near-shadowless system.
• Dark Slate (#2c2c38): Near-black surface for occasional inverted blocks and footers.

Text Hierarchy

• Ink Navy (#1a2128): Primary text, headings, nav, strong labels.
• Body Slate (#4c5967): Secondary body copy and descriptions.
• Muted Slate (#677583): Tertiary text, captions, "더 알아보기" link labels, metadata.
• Faint Grey (#cfd3d8): Disabled text, placeholder, lowest-emphasis labels.

3. Typography Rules

Font Family

• Display: Pretendard Bold (with Pretendard Bold Fallback) — used for all headlines, CTA labels, and emphasis. Loaded as a named bold cut, it renders heavy even at nominal weight, giving headlines their declarative weight.
• Body: Pretendard Regular (with Pretendard Regular Fallback) — the document default, used for body copy and dense UI text at weight 400.
• Accent: Manrope — Latin/numeral companion for English words and figures.

Hierarchy

Principles

• Bold display, light body: Pretendard Bold carries every headline; Pretendard Regular 400 carries every paragraph. The weight contrast is the system's primary hierarchy signal.
• Tight tracking on headlines: display sizes compress (around -0.56px at 28px); body text stays at normal tracking.
• Hangul-first sizing: Body sits at a comfortable 16px — generous for hangul legibility, calm for information-rich HR layouts.
• Two fonts, two jobs: Pretendard is the persuasive/branding and reading voice; Manrope handles Latin and numerals. They never swap roles.

4. Component Stylings

Buttons

Primary CTA (도입 문의)

• Background: #328af6
• Text: #ffffff
• Radius: 8px
• Padding: 0px 16px
• Height: 40px
• Font: 14px Pretendard Bold weight 700
• Hover: blue darkens
• Use: Primary call-to-action across header, hero, and product sections — the system's single primary action

Consult CTA (상담 문의)

• Background: #469f68
• Text: #ffffff
• Radius: 8px
• Padding: 16px
• Font: 14px Pretendard Bold weight 700
• Use: Secondary consult action on the pricing page

Neutral Button (로그인)

• Background: #f1f5f9
• Text: #1a2128
• Radius: 8px
• Padding: 0px 16px
• Height: 40px
• Font: 14px Pretendard Bold weight 700
• Use: Low-emphasis header action (login)

Outline CTA (소개서 신청)

• Background: #ffffff
• Text: #1a2128
• Radius: 8px
• Padding: 16px
• Use: Tertiary white request action sitting alongside the primary CTA

Cards & Containers

Elevated Feature Card

• Background: #ffffff
• Radius: 12px
• Shadow: rgba(0,0,0,0.08) 0px 8px 36px 0px
• Use: Feature and customer-logo cards — soft ambient shadow, no border

Tinted Container

• Background: #f1f5f9
• Radius: 24px
• Use: Tinted feature container on grey bands

Tight-Shadow Panel

• Background: #ffffff
• Radius: 16px
• Shadow: rgba(0,0,0,0.08) 0px 1px 24px 0px
• Use: Pricing panel / inline elevated block

Badges

Accent Label Chip

• Background: #edf5ff
• Text: #328af6
• Radius: 8px
• Padding: 4px 8px
• Font: 12px Pretendard Bold weight 700
• Use: Label / category chip (e.g. "AI TRENDS", report tags)

Navigation

• Background: #ffffff
• Text: #1a2128
• Font: 12px Pretendard weight 400
• Active: blue #328af6 text on the active item
• Use: Top horizontal nav ("성과관리", "몰입관리", "가격", "리더십 진단")

Carousel Controls

• Background: rgba(0,0,0,0.2)
• Radius: 36px (full circle)
• Height: 36px
• Use: Previous/Next controls on the customer-logo and testimonial carousels

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.lemonbase.com, https://www.lemonbase.com/pricing, https://lemonbase.com/blog/ Tier 2 sources: getdesign.md/lemonbase — "No designs found" (0 files, checked live 2026-06-26); styles.refero.design — Lemonbase not indexed Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Notable: CTA buttons use a comfortable 16px padding; sections breathe with 48–64px vertical rhythm

Grid & Container

• Centered single-column hero with the 48px Pretendard Bold headline as the anchor
• Customer logos and testimonials arranged in horizontal carousels with circular prev/next controls
• Feature sections alternate between white (#ffffff), slate (#f1f5f9), and off-white (#f9f9f9) full-width bands
• Cards use 12px radius (elevated) and 24px radius (tinted containers) to group related features

Whitespace Philosophy

• Breathing room over density: despite being an information-rich HR product, the marketing surface is airy with generous vertical rhythm.
• Flat segmentation: sections separate by background tint (#f1f5f9 / #f9f9f9 vs #ffffff) and hairlines, not by shadow weight.
• One action color: the blue (#328af6) is rationed so each band has a single obvious next step.

Border Radius Scale

• Extra-small (6px): nav hover pills, small inner elements
• Small (8px): buttons, badges — the interactive workhorse
• Medium (12px): elevated feature cards
• Large (16px): pricing panels
• Extra-large (24px): tinted feature containers
• Pill (36px): carousel controls, fully-round circles

6. Depth & Elevation

Shadow Philosophy: Lemonbase is a near-flat system. Live inspection found most surfaces carry box-shadow: none, with elevation appearing only on feature cards as a soft, wide, low-opacity ambient shadow (rgba(0,0,0,0.08) 0px 8px 36px) and a tighter rgba(0,0,0,0.08) 0px 1px 24px variant on pricing panels. Depth and grouping are communicated primarily through flat tinted surfaces (#f1f5f9, #f9f9f9) and thin #e2e5e9 hairlines. This is a deliberate modern-flat choice that keeps an enterprise HR UI feeling clean and calm rather than heavy. When emphasis is needed, the system reaches for the blue (#328af6) or a tinted accent, rarely for elevation.

7. Do's and Don'ts

Do

• Use Pretendard Bold for all display headlines — it's the brand's voice
• Use Pretendard Regular weight 400 at 16px for body and reading text
• Reserve blue (#328af6) for the primary "도입 문의" CTA and active nav — keep it the single "action" color
• Use consult-green (#469f68) only for the secondary consult action on pricing
• Use near-black navy (#1a2128) for headings instead of pure black
• Separate sections with flat tinted surfaces (#f1f5f9 / #f9f9f9) and #e2e5e9 hairlines, not heavy borders
• Use soft wide ambient shadows (rgba(0,0,0,0.08) 0px 8px 36px) for elevated feature cards
• Keep the lemon-yellow (#ffd750), purple (#5d3dd5), and pink (#c7317b) accents for decorative icon tints only

Don't

• Spread blue (#328af6) across many elements — it dilutes the single-action signal
• Use the accent purple/yellow/pink for buttons or links — they are decorative only
• Use pure black (#000000) for body text — reserve near-black navy #1a2128
• Use hard 1px borders on cards — separate with hairlines and soft shadow instead
• Set headlines in a light weight — display is always Pretendard Bold
• Use Manrope for hangul headlines — Pretendard owns display; Manrope is Latin/numerals only
• Use heavy dark drop shadows — elevation stays soft, wide, and low-opacity

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary and consult CTAs at 40–44px height for comfortable tapping
• Carousel controls at 36px circular targets
• Nav items spaced within a comfortable header band

Collapsing Strategy

• Hero: 48px Pretendard Bold headline scales down on mobile, weight maintained
• Customer/testimonial carousels: swipe on narrow viewports
• Feature bands: multi-column → stacked single column
• Tinted/white/off-white alternating sections maintain full-width treatment

Image Behavior

• Feature illustrations and screenshots carry soft ambient shadow, consistent across sizes
• Cards maintain 12px (elevated) / 24px (tinted) radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Lemonbase Blue (#328af6)
• Secondary/consult: Consult Green (#469f68)
• Background: Pure White (#ffffff)
• Tinted surface: Surface Slate (#f1f5f9) / Surface Alt (#f9f9f9)
• Heading text: Ink Navy (#1a2128)
• Body text: Body Slate (#4c5967)
• Muted text: Muted Slate (#677583)
• Faint / disabled: Faint Grey (#cfd3d8)
• Hairline: #e2e5e9
• Label chip: Blue Tint (#edf5ff)
• Decorative accents: Purple (#5d3dd5), Lemon Yellow (#ffd750), Pink (#c7317b)
• Dark surface: Dark Slate (#2c2c38)

Example Component Prompts

• "Create a hero on white background. Headline at 48px Pretendard Bold, line-height 1.30, color #1a2128. Below it a blue primary CTA: #328af6 background, white #ffffff text, 8px radius, 0 16px padding, 40px height, 14px Pretendard Bold — '도입 문의'. Next to it a white outline request CTA with #1a2128 text."
• "Design a feature card: white #ffffff background, 12px radius, no border, shadow rgba(0,0,0,0.08) 0px 8px 36px. Title 28px Pretendard Bold, letter-spacing -0.56px, #1a2128. Body 16px Pretendard Regular weight 400, #4c5967."
• "Build a tinted band: #f1f5f9 background, full-width. Section title 36px Pretendard Bold, #1a2128. Tinted feature containers inside use #f1f5f9 with 24px radius. A label chip: #edf5ff background, #328af6 text, 8px radius, 4px 8px padding, 12px Pretendard Bold."
• "Create top nav: white header. Pretendard 12px links, #1a2128 text, blue #328af6 on active. Blue '도입 문의' CTA right-aligned, 8px radius."

Iteration Guide

1. Pretendard Bold for every headline; Pretendard Regular 16px for every paragraph
2. Blue (#328af6) is the single action color — don't spread it; consult-green (#469f68) is pricing-only
3. Near-flat — separate with #f1f5f9 / #f9f9f9 tint and #e2e5e9 hairlines; soft wide shadows only on cards
4. Rounded geometry — 8px buttons, 12px cards, 24px containers, 36px pills
5. Text color is #1a2128 navy, never pure black for body
6. Tight tracking on headlines, normal on body
7. Reserve lemon-yellow #ffd750, purple #5d3dd5, pink #c7317b for decorative icon tints

---

10. Voice & Tone

Lemonbase's voice is clear, encouraging, and expert — an HR partner that turns a heavy, politically-charged domain (evaluation, goals, feedback) into confident plain Korean. The hero line "고성과를 위한 변화, 필요한 솔루션을 한번에" ("Change for high performance — every solution you need, in one place") sets the register: outcome-framed, declarative, never gimmicky. Copy treats the reader as a capable HR leader who wants better outcomes, not a target to be pressured.

Voice samples (verbatim from live surfaces):

• "고성과를 위한 변화, 필요한 솔루션을 한번에" — hero headline / page title (outcome-framed). (verified live 2026-06-26)
• "구성원이 신뢰할 수 있는 평가" — feature heading (trust-first). (verified live 2026-06-26)
• "어렵기만 한 성과관리, 이제는 쉽게" — feature heading (simplify promise). (verified live 2026-06-26)
• "신뢰할 수 있는 전문가와 함께 더 나은 성과를 만드세요" — consulting section heading. (verified live 2026-06-26)

Forbidden register: aggressive sales urgency, fear-based performance-management framing, undefined HR jargon left unexplained, exclamation-heavy hype.

11. Brand Narrative

Lemonbase (레몬베이스) is a Korean HR-tech SaaS built around one premise: that performance management — historically an opaque, anxiety-inducing annual ritual — can become a continuous, trusted, and even motivating practice. The product spans evaluation (평가), goal/OKR management (목표관리), 1:1s, and engagement/HR surveys (몰입관리), with consulting services layered on top (leadership assessment 리더십 역량 진단, organization diagnosis 조직 진단, leadership education). The positioning stated across the site — "고성과를 위한 변화, 필요한 솔루션을 한번에" — frames the company as the single place an organization assembles the tools and expertise it needs to raise performance.

The brand's stated promise is trust and ease: "구성원이 신뢰할 수 있는 평가" (evaluation employees can trust) and "어렵기만 한 성과관리, 이제는 쉽게" (performance management that was only ever hard — now made easy). Lemonbase positions itself as the customer's advocate inside a domain historically tilted toward top-down, compliance-driven HR, pairing software with "신뢰할 수 있는 전문가" (trusted experts) to help teams actually act on the data.

What Lemonbase refuses, visible in its design: the heavy, intimidating chrome of legacy enterprise HR (no shadow-stacked cards, no institutional grey-on-grey density), and the fear-based framing of evaluation as judgment. What it embraces: a flat, calm, mobile-friendly interface; a single trustworthy blue; bold Pretendard headlines that speak plainly; and a small, friendly accent set — led by the lemon-yellow namesake — that keeps an HR product feeling approachable rather than punitive.

12. Principles

1. Trust over judgment. Evaluation should feel fair and transparent, not punitive. UI implication: calm navy text, generous spacing, and plain-language headings ("구성원이 신뢰할 수 있는 평가"); never alarmist red or dense compliance chrome.
2. One place, one next step. The product consolidates scattered HR tools; the UI mirrors that with a single action color. UI implication: reserve the saturated blue (#328af6) for the primary CTA so the next step is never ambiguous.
3. Make the hard thing easy. Performance management is intimidating; the interface decodes it. UI implication: simplify, label plainly, and keep surfaces airy and uncluttered.
4. Flat and calm. Enterprise clarity beats decorative depth. UI implication: no hard borders; separate with tint and hairlines; reach for soft wide shadows only when a card must lift.
5. Bold where it persuades, calm where it informs. UI implication: Pretendard Bold for headlines that motivate; Pretendard Regular 16px for content that explains.
6. Friendly, not frivolous. The lemon-yellow and accent set add warmth, disciplined to decorative icon tints. UI implication: never let accent color leak into interactive chrome.

13. Personas

Personas below are fictional archetypes informed by publicly observable Lemonbase user segments (Korean HR leaders, people-team managers, team leads running evaluations), not individual people.

한지영, 38, 서울. People-team lead at a 300-person scale-up rolling out its first structured evaluation cycle. Distrusts spreadsheet-based reviews; values that employees can see the process as fair. Chose Lemonbase because the evaluation felt trustworthy ("신뢰할 수 있는 평가"), not like a top-down verdict.

이도현, 34, 경기. A team lead who runs quarterly 1:1s and goal check-ins. Appreciates that goal management and feedback live in one place instead of scattered across docs and chat. Likes that the interface is calm and quick rather than a dense HR console.

최수민, 45, 부산. Head of HR at a manufacturing company exploring engagement surveys (몰입관리) and leadership assessment. Wants expert guidance alongside the software and a non-intimidating tool her managers will actually adopt. Trusts the brand's plain, partnership-framed tone.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the calm, flat aesthetic. Customer-logo and testimonial carousels advance with a smooth motion-standard / ease-standard slide; cards fade-in from below at motion-standard / ease-enter. No bounce or spring — an enterprise HR product signals steadiness and trust, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and carousels pause; the product remains fully functional.