Design System Inspiration of Liner

1. Visual Theme & Atmosphere

Liner (라이너) is a Korean AI startup that began as a web highlighter and has evolved into an AI-powered search and research copilot serving 11M+ professionals. Its homepage embodies a quiet authority: a near-white canvas (#ffffff) punctuated by a signature Liner Green (#197b2e) that appears almost exclusively on CTAs, reserving the single brand color for decisive action. Headings speak in Flare — a custom humanist serif with elegant weight contrast — in a deep forest green (#14371b) rather than black, anchoring the page in an organic, nature-informed palette rooted in Liner's highlighting origin.

The typographic system splits into two clear registers: editorial display in Flare for emotional impact, and functional UI in Pretendard Variable / Pretendard JP Variable for menus, body, and labels. This duality — editorial serif for "what Liner is," humanist sans for "how to use it" — gives the product a professional, research-grade credibility without feeling cold. Hero text arrives at 54px / weight 400 in Flare, section titles at 42px, and pricing page H1 at 34px, all in the dark forest #14371b. Body and UI text sits in near-black #1e1e1f at 16px, with muted copy in a grey-80 (#6d6d70 at opacity 0.8).

Interactive geometry is restrained: standard buttons at 8px radius for nav and pricing CTAs; hero pill buttons at a generous 200px for the product-feature "Get started" moments; and a full-pill selector for product tabs. The system avoids shadows almost entirely — depth appears through surface tints (#f9f9fa, #f6f6f7) and 1px borders rather than elevation. The result reads as an AI product that respects your cognitive space: focused, calm, and oriented toward professionals who have no patience for noise.

Key Characteristics:

• Flare serif (custom) for all display headlines — elegant and research-grade
• Pretendard Variable / Pretendard JP Variable for all UI and body — global-ready, KR-native
• Single brand green (#197b2e) reserved for primary CTAs — one-action-one-color discipline
• Deep forest green (#14371b) for headings — organic, nature-referenced
• Near-black #1e1e1f for body — warm and legible, not harsh pure-black
• Flat depth: shadow-free on most surfaces; tinted #f9f9fa and hairlines for separation
• Geometric mix: 8px radius for buttons, 200px for pills, 9999px for tab selectors
• Light neutral palette (#f9f9fa, #f6f6f7) with deliberate forest-green accents

2. Color Palette & Roles

Primary Brand

• Liner Green (#197b2e): The single saturated action color. Appears on nav "Get started" CTA, "Get Pro" and "Get Max" plan buttons. Its 80% derivation (rgb(25,123,46)) covers link text and ghost button borders. Comes from Liner's highlighter-green origin — the color you reach for to mark what matters.
• Forest Dark (#14371b): Heading and display color for H1–H3. A deep, near-black forest green that gives editorial weight to Flare serif headlines without reaching for neutral black.
• Primary Tint (#edf3ed): Active state background for product-selector tabs. A very soft mint that signals selection without visual aggression.

Neutral & Surface

• White Canvas (#ffffff): Page background, pricing cards, feature cards.
• Surface Light (#f9f9fa): Alternate card and section background — barely-there tint.
• Surface Alt (#f6f6f7): Secondary tinted block surfaces.
• Near-Black Ink (#1e1e1f): Primary body text, plan names, specs. Warm near-black, not pure black.
• Muted Grey (#6d6d70): Muted text at 80% opacity for subtitles, toggle labels, secondary copy. Rendered as rgba(109, 109, 112, 0.8) in live DOM.
• Pure Black (#000000): Highest-contrast element labels and select heading contexts.

Semantic

• Warning Orange (#fe8f16): "Save 20%" promo badge on Annual billing toggle. Only semantic color on the pricing surface.
• On-Primary White (#ffffff): Text on all green backgrounds.

3. Typography Rules

Font Family

• Display: Flare — a custom humanist serif used exclusively for H1, H2, H3 at headline sizes. Weight 400 across all display sizes (the letterforms carry authority via shape, not weight).
• UI/Body: Pretendard Variable — the Korean-standard humanist sans, weight 400 for body / 500 for buttons. Loaded as "Pretendard Variable" for button/body contexts.
• Multilingual UI: "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable" — extended version for nav items and interactive controls supporting CJK glyph coverage.

Hierarchy

Principles

• Serif for persuasion, sans for function: Flare carries all aspirational communication; Pretendard handles all operational UI. They never swap roles.
• Weight-light at display: Flare displays at weight 400 — authority through letterform, not boldness.
• CJK readiness built in: Pretendard JP Variable covers Korean, Japanese, and Latin seamlessly — essential for a product with large Korean and Japanese user bases.
• Consistent 15px/500 buttons: All button labels (primary, outline, ghost, toggle) share the same 15px Pretendard Variable 500 spec for visual cohesion across pricing tier differences.

4. Component Stylings

Buttons

Primary (Get started / Get Pro / Get Max)

• Background: #197b2e
• Text: #ffffff
• Radius: 8px
• Height: 40px
• Font: 15px / 500 / Pretendard Variable
• Use: Primary upgrade CTAs in nav and pricing cards

Outline (Start for free)

• Background: #ffffff
• Text: #1e1e1f
• Border: 1px solid rgba(109, 109, 112, 0.24)
• Radius: 8px
• Height: 40px
• Font: 15px / 500 / Pretendard Variable
• Use: Free-tier CTA on pricing page — low-emphasis alternative

Ghost Green (Contact us / Contact Liner)

• Background: transparent
• Text: #197b2e
• Border: 1px solid #197b2e
• Radius: 8px
• Height: 40px
• Font: 15px / 500 / Pretendard Variable
• Use: Enterprise inquiry CTA — same green family, lower visual weight

Hero Get-Started Pill

• Background: transparent
• Text: #000000
• Border: 1px solid #197b2e
• Radius: 200px
• Height: 48px
• Font: 16px / 400 / Pretendard JP Variable
• Use: Hero section product-feature "Get started" — larger pill form for product emphasis

Inputs

Default Search / Form

• Background: #f9f9fa
• Border: 1px solid rgba(109, 109, 112, 0.12)
• Radius: 8px
• Text: #1e1e1f
• Placeholder: #6d6d70 at 80% opacity
• Font: 16px / 400 / Pretendard JP Variable
• Use: Search and form inputs on live product surface

Cards & Containers

Pricing Plan Card

• Background: #ffffff
• Text: #1e1e1f
• Radius: 12px
• Shadow: 0 1px 4px rgba(0,0,0,0.08)
• Use: Plan tier cards (Free / Pro / Max / Enterprise) on pricing page

Feature Card (Surface)

• Background: #f9f9fa
• Text: #1e1e1f
• Radius: 12px
• Use: Feature highlight cards on light tinted sections

Badges

Promo Badge (Save %)

• Background: #fe8f16
• Text: #ffffff
• Radius: 9999px
• Font: 12px / 500 / Pretendard Variable
• Use: "Save 20%" badge on Annual billing selector

Tabs

Product Selector (Active)

• Background: #edf3ed
• Text: #000000
• Radius: 9999px
• Padding: 0px 20px
• Height: 48px
• Font: 16px / 400 / Pretendard JP Variable
• Use: Active state of Search / Research / Write product tabs

Product Selector (Inactive)

• Background: transparent
• Text: #000000
• Radius: 9999px
• Padding: 0px 20px
• Height: 48px
• Use: Inactive product tab states

Toggles

Billing Toggle (Monthly / Annual)

• Background: #ffffff
• Text active: #1e1e1f
• Text inactive: rgba(109, 109, 112, 0.8)
• Radius: 200px
• Height: 44px
• Use: Monthly / Annual billing period selector on pricing page

---

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://liner.com, https://liner.com/pricing, https://liner.com/blog Tier 2 sources: getdesign.md/liner — 404 (not listed); styles.refero.design/?q=liner — no Liner entry found after full search Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 40px
• Nav height: 36px interactive elements in a floating nav bar
• Button height: 40px (standard), 48px (hero pill)
• Section padding: generous whitespace between content bands — minimalist information hierarchy

Grid & Container

• Centered single-column hero with 54px Flare headline as the anchor
• Product tab selector sits beneath the hero, full-pill row of three options
• Pricing page uses a 4-column card layout (Free / Pro / Max / Enterprise) at desktop
• Feature sections in alternating white/light-surface bands following a top-to-bottom scroll narrative

Whitespace Philosophy

• Breathe first, fill second: Generous vertical spacing between all sections — AI product that respects professional attention.
• Flat separation: White vs #f9f9fa alternating backgrounds replace shadow stacks.
• Green as punctuation: #197b2e appears only on action nodes; the rest of the page is intentionally monochromatic.

Border Radius Scale

• 8px: Standard buttons, inputs, nav dropdown items
• 12px: Content cards, pricing plan cards
• 200px: Hero pill CTA, billing toggle container
• 9999px: Product selector pills, promo badges

6. Depth & Elevation

Shadow Philosophy: Liner is near-shadowless. Live inspection confirmed box-shadow: none across nav, hero, product tabs, and most cards. Only pricing plan cards carry a light 1px-blur shadow. Depth is achieved through background tint shifts (#f9f9fa, #f6f6f7) and thin rgba-borders. The system signals "AI research tool" through clarity and restraint — visual noise is treated as a barrier to focus.

7. Do's and Don'ts

Do

• Use Flare serif for all display headlines at weight 400 — let letterform do the work
• Use Pretendard Variable for all button labels and captions at 15px/500
• Reserve Liner Green (#197b2e) exclusively for primary action buttons
• Use Forest Dark (#14371b) for heading text — not pure black
• Apply 200px radius for hero pills and billing toggles; 8px for action buttons
• Separate page sections with #f9f9fa tint shifts and rgba borders — no shadow
• Use muted grey at 80% opacity for secondary and placeholder text
• Write button labels in sentence case at 15px/500 Pretendard

Don't

• Apply Flare to body copy or small UI text — it belongs exclusively to headlines
• Spread green (#197b2e) to decorative elements — it signals "action" only
• Use pure black (#000000) for heading text — the brand palette uses Forest Dark #14371b
• Stack heavy shadows or gradient overlays — Liner is a flat, clean AI system
• Use weight 700+ on display text — Flare at 400 is canonical; boldness is a design mistake here
• Mix border radius scales arbitrarily — 8px for buttons, 12px for cards, 200px for pills
• Create new saturated accent colors — the palette is intentionally near-monochromatic with single green

8. Responsive Behavior

Breakpoints

Touch Targets

• Standard buttons: 40px height — appropriate for professional keyboard-and-mouse desktop users
• Hero pill CTA: 48px height — generously tappable on tablet
• Product tabs: 48px height, full-pill — large touch target for mobile product switching
• Nav items: 36px — standard desktop nav hit area

Collapsing Strategy

• Hero 54px Flare headline scales down proportionally on mobile
• Product selector tabs compress to horizontal scroll row
• Pricing cards stack to single column below tablet
• Billing toggle remains full-width pill on all breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary action: Liner Green (#197b2e)
• Display headings: Forest Dark (#14371b)
• Active tab / tint: Primary Tint (#edf3ed)
• Background: White Canvas (#ffffff)
• Light surface: Surface Light (#f9f9fa)
• Body text: Near-Black Ink (#1e1e1f)
• Muted / placeholder: Muted Grey (#6d6d70 at 80% opacity)
• Promo accent: Warning Orange (#fe8f16)

Example Component Prompts

• "Create a hero section on white background. Display headline at 54px Flare weight 400, color #14371b. Subtitle at 24px Pretendard JP Variable weight 400, color rgba(109,109,112,0.8). Green pill CTA: transparent background, 1px solid #197b2e border, 200px radius, 48px height, 16px Pretendard JP Variable, color #000000."
• "Design a pricing card: white background #ffffff, 12px radius, 0 1px 4px rgba(0,0,0,0.08) shadow. Plan name 17px Pretendard JP Variable 400 #1e1e1f. Primary CTA: #197b2e bg, white text, 8px radius, 40px height, 15px Pretendard Variable 500."
• "Build a product tab selector: full-pill container. Active tab: #edf3ed bg, #000000 text, 9999px radius, 0px 20px padding, 48px height, 16px Pretendard JP Variable. Inactive: transparent, same dimensions."
• "Create nav: white background, 36px item height. 16px Pretendard JP Variable weight 400 #000000 nav links. Right-aligned primary CTA: #197b2e bg, white text, 8px radius, 40px height, 15px Pretendard Variable 500."

Iteration Guide

1. Flare at weight 400 for every headline; Pretendard Variable 400/500 for every UI element
2. Liner Green (#197b2e) is the single action color — guard it fiercely
3. No shadows except the lightest card shadow on pricing tiers
4. Forest Dark #14371b for all display text — not black
5. Radius is context-specific: 8px buttons, 12px cards, 200px pills
6. Muted text = rgba(109, 109, 112, 0.8) — never a flat opaque grey
7. Background separation = #f9f9fa tint, not depth/shadow

---

10. Voice & Tone

Liner's voice is precise, professional, and quietly confident — an AI research partner that speaks to knowledge workers, academics, and professionals who demand accuracy over hype. The homepage opener "Meet AI agents purpose-built for professionals to search smarter, research deeper, and write better" is declarative and benefit-led without exclamation or urgency. Liner's copy style strips away AI buzzwords and grounds every claim in a user outcome.

Voice samples (verbatim from live surface):

• "Accurate AI agents built for smarter work" — homepage H2 (mission-framed, Flare serif). (verified live 2026-06-22)
• "Meet AI agents purpose-built for professionals to search smarter, research deeper, and write better" — homepage H1 subtitle. (verified live 2026-06-22)
• "Why pro is built for serious research" — pricing page H2 (audience-respecting, no hype). (verified live 2026-06-22)

Forbidden register: AI superlatives without grounding, urgency patterns ("Act now!"), casualness that undermines the professional research context, undefined technical jargon.

11. Brand Narrative

Liner began around 2016 as a web-highlighting extension — a digital analog to drawing a yellow line on a physical page. The brand name itself comes from "liner" as in highlighter, and the signature green palette echoes that origin: the color you reach for when something matters. As the highlighting use case deepened, Liner evolved from passive curation (saving highlighted text) into active cognition assistance — surfacing what you saved, connecting research threads, and ultimately generating answers grounded in real sources.

By 2026, Liner positions itself as "AI agents for professionals" with over 11 million users, having made the transition from productivity extension to research copilot. The product now encompasses Search (AI-powered web search with cited answers), Research (deep-dive academic and multi-source reports), and Write (grounded writing with reference integration). The tagline "Inside the AI Search Engine 11M+ People Trust" signals the pivot from tool to trusted collaborator. The blog post "스타트업에서 제한된 리소스로 디자인 시스템 개발하기" (Building a design system with limited startup resources) reveals an engineering team that builds thoughtfully under constraint — a philosophy visible in the product itself: no unnecessary visual weight, no wasted motion.

Liner's positioning is squarely anti-hallucination: the word "accurate" appears in both the homepage headline and the brand's core product promise. For a Korean AI startup competing globally against entrenched players, "accuracy" is the chosen moat — not features, not UX bells, but epistemic trustworthiness.

12. Principles

1. Accuracy before impression. Liner's core promise is truthful, cited AI output. UI implication: source attribution is a first-class UI citizen; never hide provenance of AI-generated content.
2. Professional context, not consumer entertainment. Liner serves researchers, academics, and knowledge workers. UI implication: dense information layouts are acceptable; playful micro-interactions are not the register.
3. One color, one action. Liner Green (#197b2e) is the single call-to-action color. UI implication: every green element should be actionable; decorative green is a design error.
4. Serif for aspiration, sans for function. Flare carries the brand promise; Pretendard carries the work. UI implication: never render operational UI in Flare; never render the brand headline in Pretendard.
5. Restraint as credibility. A tool trusted with professional research earns that trust through visual discipline. UI implication: remove shadows, reduce palette, add whitespace before adding decoration.

13. Personas

Personas below are fictional archetypes informed by publicly observable Liner user segments (professionals, academics, knowledge workers), not individual people.

박지민, 27, 서울. Graduate student using Liner's Research agent for literature reviews before writing papers. Values cited sources over generated summaries. Relies on the deep-research report feature because it feels more like a research assistant than a chatbot.

Sarah K., 34, San Francisco. Product strategist who uses Liner's Search to cut through content farms for industry signals. Appreciates that Liner doesn't hallucinate citations. Uses the Write feature to draft market analysis from her research highlights.

田中 健, 41, Tokyo. Senior analyst at a consulting firm who switched from manual search workflows to Liner after a colleague recommended it. Finds the Pretendard JP Variable rendering of Japanese text surprisingly clean. Uses it daily for competitive intelligence.

이준호, 38, 판교. Engineering lead at a Korean startup who read Liner's design-system blog post. Curious about the product for internal research tasks. Represents Liner's KR base where the brand began.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is minimal and purposeful — this is a professional research tool, not an entertainment experience. Product tabs switch at motion-fast / ease-standard; research results stream into view at motion-slow / ease-enter to signal that valuable content is arriving. No bounce, no spring, no celebration animations. Under prefers-reduced-motion: reduce, all transitions are instant. The product remains fully functional without animation — motion is an enhancement, not a dependency.