라이너 DESIGN.md

Design System Inspiration of Liner

Overview

Visual Theme & Atmosphere

Liner (라이너) is the AI search and research service of 주식회사 라이너, a Seoul company whose site footer lists 김진우 as chief executive. According to a 2024 interview in 이코노미조선, 김진우 and 우찬민 founded it in 2015 while studying computer science at Yonsei University. Its first product, 웹 하이라이트, let people highlight text on web pages and PDFs and leave notes on it; the company set up a US entity in February 2017 and built users in 150 countries. The highlights it collected became the idea behind the current product: the interview describes using that data to rank what people consider important. Today the about page calls Liner "the most accurate AI research agent", used by over 10 million academics and professionals, and states the team's aim as "zero hallucinations as the gold standard of credibility". The Korean home sells three agents — Liner for search, Liner Scholar for research and Liner Write for writing — under the line "필요할 때 믿고 쓰는 정확한 AI".

The captured Korean pages (liner.com/ko, its pricing page and its about page) read as a calm white product site. One green, #2c783c, fills every primary action, and turns #256a33 on hover. A second, brighter green, #349749, draws the outlined buttons, the green labels and the hero-card pills. Selection is a soft mint, #edf3ed, behind the chosen product tab. Each agent has its own colour in its home-page section: green for search, olive #747a4d for Scholar and slate #536c7a for Write. Text is near-black #1e1e1f with muted grey #818184, and a single orange, #f58800, marks the annual saving on pricing.

Everything on these pages is set in Pretendard: Pretendard Variable for headings, paragraphs and button labels, Pretendard JP Variable as the page default and on the 24px hero subtitle. Headings get their weight from 500–700 and tight tracking at display sizes (-1.04px at 52px, -2.16px at 72px). Liner's engineering blog describes building a design system with a dedicated TF, and the live pages carry its type-scale class names (lp-sys-typo-display2 to caption2).

Key Characteristics:

• One action green, #2c783c, on every primary button and product CTA; hover #256a33
• A brighter line green, #349749, for outlined buttons, green labels and pill borders
• Mint #edf3ed for the selected product tab; olive #747a4d and slate #536c7a for the Scholar and Write sections
• Pretendard Variable and Pretendard JP Variable throughout; no display serif renders on these pages
• Radii by size: 8px header items and small buttons, 10px standard buttons, 12px large buttons, 200px pills, 9999px tabs
• Flat surfaces; the only shadow is a soft rgba(0, 0, 0, 0.05) 0px 4px 12px 0px under menus and the selected billing option
• Near-black #1e1e1f text with #818184 for subtitles and captions

Primary tasks

• Search the web and get an answer with its sources cited
• Run a literature review with Liner Scholar before writing a paper
• Draft a piece of writing with Liner Write
• Compare the Free, Pro and Max plans and the team plan
• Contact sales about a team or enterprise plan

Brand Narrative

Liner started as a highlighter for the web. 이코노미조선's 2024 interview with co-founder 김진우 describes the first product, 웹 하이라이트, as a way to mark text on web pages and PDFs and keep notes, released without marketing and downloaded by 500 people on its first day. The founders — 김진우 and 우찬민, then computer-science students at Yonsei — had started the company in 2015, set up a US entity in February 2017 and spent four years refining the highlighter for users in 150 countries. The highlights became a database of what people found important, and that idea turned Liner toward search.

The current Liner is an AI research agent. Its about page puts accuracy first: the team aims for "zero hallucinations", cites sources for every sentence ("Line-by-line accuracy"), and names safety and "Mission First" as the other two values. The product is now three agents — Liner, Liner Scholar and Liner Write — with an API and MCP servers for developers. On the engineering blog the company writes about its data platform for 13 million users, its own rankers and embedding models, and building a design system with limited resources.

The captured pages carry that story in their colours: a green for search and action, a mint for selection, and a separate colour for each agent.

Principles

1. Accuracy first. The about page sets zero hallucinations as the aim. UI implication: show sources beside answers and keep the interface quiet around them.
2. Line by line. Liner cites a source for every sentence. UI implication: design for citation density — clear links, readable 15–16px text.
3. One green for action. UI implication: #2c783c means "do this"; outlines use #349749.
4. Each agent has its colour. UI implication: keep search green, Scholar olive and Write slate apart. (An editorial reading of the home page, not a Liner statement.)
5. Safety by default. UI implication: no dark patterns in plan choice; the free plan sits first with its own action.

Personas

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

박지민, 27, 서울. A graduate student who runs literature reviews in Liner Scholar before writing a paper, and checks every cited source.

최서연, 34, 성남. A product manager who uses Liner search for fact-checks and moved to the Pro plan for more agent credits.

이준호, 38, 서울. An engineering lead who read Liner's design-system blog post and is evaluating the Liner API for internal research tools.

Colors

Every token below was read by the deterministic collector on 2026-09-30 from liner.com/ko, liner.com/ko/pricing and liner.com/ko/about (liner.com redirects to /ko for a Korean browser).

Primary

• Action Green (#2c783c): The fill of every primary action — 시작하기 in the header, Pro 선택하기 and Max 선택하기 on the plan cards and in the comparison table, 팀 플랜 시작하기, Start Your Search on the about page and the 바로 검색하기 pill on home. It is the primary because the captured pages render it in that role: nine captured buttons compute backgroundColor: rgb(44, 120, 60), across all three pages. It is the only colour that fills a primary action; the olive and slate pills below belong to the Scholar and Write sections.
• Action Green Hover (#256a33): The same nine buttons read rgb(37, 106, 51) in their hover frames.
• On Primary (#ffffff): Labels on the green buttons and pills.
• Line Green (#349749): Border and label of the outlined 문의하기 buttons, border of the hero-card and 자세히 보기 pills, and green text such as the hero-card 시작하기 labels.

Product accents

• Selected Tab (#edf3ed): Background of the selected option in the 검색 / 연구 / 글쓰기 selector.
• Scholar Olive (#747a4d): The 연구 (Liner Scholar) section's CTA pill and its outline sibling; hover #686e45.
• Write Slate (#536c7a): The 글쓰기 (Liner Write) section's CTA pill and its outline sibling; hover #4b616e.

Neutral & Surface

• Surface (#ffffff): Menu panels, the footer language select, the selected billing option and the outlined neutral buttons.
• Outline (#e8e8e9): The 1px border of the language menu.
• Hover fill (#fafafb): The hover fill of the outlined neutral and white buttons.
• Translucent values stay in component fields: the neutral button border rgba(148, 148, 151, 0.24), the header-item hover rgba(12, 137, 59, 0.08), the outline-button hover rgba(44, 120, 60, 0.12), and the 30% forest-green divider rgba(20, 55, 27, 0.3) on the hero cards.

Text

• Ink (#1e1e1f): Headings, paragraphs, plan names and button labels on white.
• Muted (#818184): The hero subtitle, hero-card labels, price captions and FAQ answers.
• Discount (#f58800): The "20% 할인" note on the annual billing option.

Brand assets, not tokens

• The Liner logo and favicon were not measured, and no logo colour is a token here.

Typography

Font Family

• Live surface use: Pretendard Variable (524 observed uses) and Pretendard JP Variable (301), both loaded from jsDelivr (cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/.../woff2-dynamic-subset/). The body stack is "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", sans-serif; headings, paragraphs and button labels set Pretendard Variable.
• Official product use: no Liner-owned typeface renders on these pages; the product text is set in the public Pretendard distribution.
• Licence: Pretendard is published by its author under the SIL Open Font License, Version 1.1 (the project's LICENSE file, opened 2026-09-30).
• Declared only (no visible use): a face named flare, declared from assets.liner.com/fonts/arizona-flare/ (files named ABCArizonaFlare-*.woff2), and Inter from liner.com/_next/static/media/. Neither renders any text on the three captured pages, so neither is a token and no specimen is shown. No licence page for either was opened.
• Unresolved: none.

Hierarchy

Principles

• One family, two builds: Pretendard Variable carries the reading and action text; Pretendard JP Variable is the page default and the hero subtitle.
• Tight only at display sizes: -1.04px at 52px and -2.16px at 72px; everything from 42px down keeps normal tracking.
• A 1.3 line-height rhythm: almost every styled size computes a 1.3 line height; long paragraphs open to 1.5.
• Named scale: the live classes follow Liner's design-system scale — display2/display3, title1–title5, paragraph1–paragraph4, caption1/caption2.

Layout

Spacing System

• Product tabs: 20px horizontal padding at 48px height
• Hero cards: 40px 24px padding, 48px between the label and the pill
• Menus: 8px padding; items 8px 6px 8px 8px
• Header items: 36px tall with 4px horizontal padding around the label

Grid & Container

• Home: a centred hero (52px heading, 24px subtitle), three hero cards side by side, then one section per agent — lead line, CTA pill pair, feature headings — followed by testimonials and the FAQ.
• Pricing: a centred 32px title, the monthly/annual toggle, plan cards with 260px-wide buttons, a team-plan band, the comparison table and the FAQ.
• About: a dark full-bleed hero with a 72px line, then 42px statements beside long 16px paragraphs and three value columns.

Whitespace Philosophy

• Colour marks the agent: each product section is keyed by its own pill colour instead of by background changes.
• Actions in pairs: a filled pill beside an outlined 자세히 보기 pill, a green plan button beside an outlined one.

Border Radius Scale

• 6px: menu items
• 8px: header items, the language select, table buttons
• 10px: standard buttons, menus, FAQ rows
• 12px: large about-page buttons
• 200px: product pills and the billing toggle
• 9999px: product selector tabs

Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured. The product tabs carry a max-s:h-[40px] class and the hero cards a @max-[763px]:gap-[24px] class, signs that both tighten on small screens; no breakpoint was measured.

Touch Targets

• Primary and outlined buttons: 40px (48px on the about page)
• Product pills and tabs: 48px
• Billing toggle: 44px
• Header items: 36px
• FAQ rows: 56px

Collapsing Strategy

• Not measured.

Image Behavior

• Not measured.

Elevation & Depth

Shadow Philosophy: Liner's pages are flat. Buttons, tabs and cards compute box-shadow: none; depth comes from colour — green fills, a mint selected tab, a white option on the billing toggle. The one soft shadow belongs to things that sit above the page: the language menu and the chosen billing option.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.menu: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px

Motion & Easing

The collector reads computed style, not animation, so no duration or easing is measured. Class names on the tabs and hero cards mention transitions, which shows motion exists without timing it. Treat motion as unspecified rather than borrowing values, and honour prefers-reduced-motion in any build.

Components

Buttons

Primary button

• Background: #2c783c
• Text: #ffffff
• Radius: 10px
• Height: 40px
• Font: 15px / 500 / 19.5px Pretendard Variable
• Hover: background #256a33
• Use: 시작하기 in the header, Pro 선택하기 and Max 선택하기 on the plan cards, 팀 플랜 시작하기

Large primary button

• Background: #2c783c
• Text: #ffffff
• Radius: 12px
• Height: 48px
• Font: 16px / 500 / 20.8px Pretendard Variable
• Hover: background #256a33
• Use: Start Your Search on the about page; its white partner, Try for free, is #ffffff with #1e1e1f text and a #fafafb hover

Outlined brand button

• Background: transparent
• Text: #349749
• Border: 1px solid #349749
• Radius: 10px
• Height: 40px
• Font: 15px / 500 / 19.5px Pretendard Variable
• Hover: background rgba(44, 120, 60, 0.12)
• Use: 문의하기 and 영업팀 문의하기 on pricing

Outlined neutral button

• Background: #ffffff
• Text: #1e1e1f
• Border: 1px solid rgba(148, 148, 151, 0.24)
• Radius: 10px
• Height: 40px
• Font: 15px / 500 / 19.5px Pretendard Variable
• Hover: background #fafafb
• Use: 바로 사용하기 on the Free plan, 자세히 보기 beside the team plan

Plan-table buttons

• The comparison table repeats the three buttons at 32px tall with an 8px radius and 13px / 400 / 16.9px labels (168 × 32): green #2c783c for Pro and Max, outlined #349749 for 문의하기, outlined neutral for 바로 사용하기, with the same hovers.

Product CTA pill

• Background: #2c783c
• Text: #ffffff
• Radius: 200px
• Height: 48px
• Font: 16px / 400 / 20.8px Pretendard Variable
• Hover: background #256a33
• Use: 바로 검색하기 in the 검색 section of home; the 연구 section uses #747a4d (hover #686e45) and the 글쓰기 section #536c7a (hover #4b616e)

Product outline pill

• Background: transparent
• Text: #349749
• Border: 1px solid #349749
• Radius: 200px
• Height: 48px
• Font: 16px / 400 / 20.8px Pretendard Variable
• Hover: background rgba(148, 148, 151, 0.08)
• Use: 자세히 보기 beside each product CTA, in each section's colour; the three hero cards carry the same green-outlined 시작하기 pill at 111 × 48

Navigation & Tabs

Header menu item

• Background: transparent
• Text: #1e1e1f
• Radius: 8px
• Padding: 0px 4px
• Height: 36px
• Font: 14px / 400 / 18.2px Pretendard Variable
• Hover: background rgba(12, 137, 59, 0.08)
• Use: 제품, API/MCP, 요금제, 더 알아보기, 회사 소개; over the dark about-page hero the labels turn #ffffff and 시작하기 becomes a white button with a #fafafb hover

Product selector tab

• Background: transparent
• Text: #1e1e1f
• Radius: 9999px
• Padding: 0px 20px
• Height: 48px
• Font: 20px / 500 / 26px Pretendard Variable
• Selected: background #edf3ed
• Use: 검색 / 연구 / 글쓰기 on home

Billing toggle

• Background: transparent
• Text: #1e1e1f
• Radius: 200px
• Height: 44px
• Font: 15px / 500 / 19.5px Pretendard Variable
• Selected: background #ffffff with rgba(0, 0, 0, 0.05) 0px 4px 12px 0px
• Use: 월간 / 연간 20% 할인 on pricing; the annual option carries the orange #f58800 "20% 할인" note

Inputs & Menus

Language select

• Background: #ffffff
• Text: #1e1e1f
• Border: 1px solid rgba(148, 148, 151, 0.24)
• Radius: 8px
• Height: 32px
• Font: 13px / 400 / 16.9px Pretendard Variable
• Use: Select language, KO in the footer of every page

Select menu

• Background: #ffffff
• Border: 1px solid #e8e8e9
• Radius: 10px
• Padding: 8px
• Shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px
• Selected: item background rgba(148, 148, 151, 0.08), radius 6px
• Use: the language menu, 320 × 150

Cards & Containers

Hero card

• Background: transparent
• Border: 1px rgba(20, 55, 27, 0.3) on the right edge only
• Padding: 40px 24px
• Size: 389 × 244
• Use: 정확한 정보를 찾을 때, 학술 연구를 준비할 때, 논리적인 글이 필요할 때 — a 16px uppercase #818184 label above a green-outlined 시작하기 pill, 48px apart

FAQ row

• Background: transparent
• Text: #1e1e1f
• Radius: 10px
• Padding: 0px 8px 0px 4px
• Height: 56px
• Font: 16px / 500 / 20.8px Pretendard Variable
• Use: questions under 자주 묻는 질문 on home and pricing; answers are 15px #818184

---

Verified: 2026-09-30 (deterministic collector capture of three public pages of liner.com/ko, logged out, plus first-party company pages and one Korean press interview) Tier 1 sources: https://liner.com/ko ; https://liner.com/ko/pricing ; https://liner.com/ko/about ; https://liner.com/ko/blog ; https://liner.com/ko/blog/liner-design-system-fronted-1 Tier 2 sources: getdesign.md/liner (HTTP 200, the name does not appear on the page) and styles.refero.design/?q=liner (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Only these states were observed on the three captured pages; nothing else is specified here.

The hero-card 시작하기 pills show no computed change in their hover frames. Focus was not measured, and error, empty, loading and success states were not captured, so none is described.

Live state probe, 2026-10-16 (https://liner.com/ko), primary-button: pressed — bg #256a33; focus — shadow #00a0f0 0px 0px 0px 1px inset.

Do's and Don'ts

Do

• Fill primary actions with #2c783c and use the measured #256a33 for their hover
• Use #349749 for outlined buttons, green labels and pill borders
• Mark the selected product tab with #edf3ed
• Key product sections to their colours: green for search, #747a4d for Scholar, #536c7a for Write
• Set text in Pretendard Variable (Pretendard JP Variable for the page default), 15px / 500 on buttons
• Pick the radius by size: 10px at 40px, 12px at 48px, 8px at 32px, 200px for pills

Don't

• Don't render a serif display face; the declared flare face renders nothing on these pages
• Don't put the primary green on decoration; it marks actions
• Don't add shadows to cards or buttons; only menus and the selected toggle option carry one
• Don't fill the Scholar or Write CTAs with the search green
• Don't invent focus rings or pressed colours; none were measured

Voice & Tone

Liner speaks plainly about accuracy and getting work done. Korean pages address the reader politely and directly, lead with the outcome, and keep actions short.

Voice samples (verbatim, opened 2026-09-30):

• "필요할 때 믿고 쓰는 정확한 AI" — liner.com/ko hero heading.
• "목적에 맞는 AI로 결과의 완성도를 높이세요" — liner.com/ko hero subtitle.
• "출처가 분명한 답변을 쉽게 이해해 보세요" — search section heading on home.
• "리서치할 때 Pro를 사용해야 하는 이유" — pricing page heading.
• "Meet Liner, the most accurate AI research agent" — liner.com/ko/about.

Forbidden register: unverifiable superlatives about AI, urgency tactics, casual slang that undercuts the research context, claims without sources.

Agent Prompt Guide

Quick Color Reference

• Primary action: #2c783c, hover #256a33, labels #ffffff
• Line green (outlines, green text): #349749
• Selected tab: #edf3ed
• Scholar #747a4d (hover #686e45); Write #536c7a (hover #4b616e)
• Text #1e1e1f; muted #818184; discount #f58800
• White surfaces #ffffff; menu border #e8e8e9; neutral hover #fafafb

Example Component Prompts

• "Create a Liner primary button: #2c783c background, #ffffff 15px Pretendard Variable label at weight 500, 40px tall, 10px radius, no shadow; hover #256a33."
• "Pair it with an outlined contact button: transparent background, 1px solid #349749 border, #349749 label, same geometry; hover fill rgba(44, 120, 60, 0.12)."
• "Build the product selector: three 48px pills with 9999px radius and 20px horizontal padding, 20px / 500 #1e1e1f labels; the selected one fills #edf3ed."
• "Make a product CTA pair: a 48px, 200px-radius #2c783c pill with a white 16px label, beside a transparent pill with a 1px #349749 border and a #349749 label."

Iteration Guide

1. #2c783c fills actions; #349749 draws outlines
2. Each agent keeps its colour: green, olive #747a4d, slate #536c7a
3. Pretendard everywhere; tight tracking only at 52px and above
4. Radius follows height: 8 / 10 / 12, pills 200, tabs 9999
5. Flat, with one soft shadow for menus

---

Governance

Known Gaps

• Contrast, product-tab. Text #1e1e1f on #00000000 measures 1.26:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, billing-toggle. Text #1e1e1f on #00000000 measures 1.26:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, header-nav-item. Text #1e1e1f on #00000000 measures 1.26:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, faq-accordion. Text #1e1e1f on #00000000 measures 1.26:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.