핵클 DESIGN.md

Design System Inspiration of Hackle

Overview

Visual Theme & Atmosphere

Hackle (핵클) is a Seoul company — 핵클 주식회사, 서울시 서초구 강남대로 241 in its own footer — that sells what its home page title calls an "올인원 AI 그로스 플랫폼": experimentation, feature flags, product analytics and CRM messaging on one dashboard. Its careers page tells the origin plainly: a tech startup built around twelve software veterans from Coupang, making the kind of growth-optimisation platform "구글, 아마존, 쿠팡 등 빅테크 회사가 활용하는", now serving more than 200 customers (SKT, CJ올리브영, 현대카드, 신한라이프, 교보생명, 여기어때, 티빙 among them). The same page says Hackle became Korea's best-known A/B testing platform within a year of founding and grows more than 2× a quarter, and it lists a 아기유니콘 selection among its press items. The evolution is visible in the product line: what started as an A/B testing tool now lists CRM 마케팅, 간편발송 (alimtalk, SMS and brand messages without setup), 데이터 분석 and 기능 관리 on its blog's product rail, and the site now carries a /ko/mcp/ page whose title names Claude.

The marketing site looks like the console it sells. An off-white #fafafa canvas carries black headlines and Material UI's black-alpha text ladder (rgba(0, 0, 0, 0.87) for copy, 0.6 for footer links, 0.3 for legal links). The persuading is done by blue, in three shades with separate jobs: the MUI contained-button blue #2962ff on every page's header action and in-page buttons, a brighter #0065ff for the home hero CTA, the pricing table header and feature headings, and a #005ff5 calculator link. Secondary actions are flat 5px chips in black #000000, ink #151618 or white.

Key Characteristics:

• #2962ff is the working action colour: header 데모 둘러보기 on all three pages, the pricing buttons and A/B 테스트 시작하기, all settling on #1c44b2 on hover
• A brighter #0065ff for the home hero pair, the pricing table header row and the A/B test feature headings
• Material UI chrome: black-alpha text ladder, 4px contained buttons with MUI's resting elevation that deepens on hover, press and keyboard focus
• Flat 5px chips in #000000, #151618 and #ffffff; 8px on the large calls-to-action, 10px on cards and the calculator link, 36px on the example switch
• Headlines at weight 700 with -1px tracking; Pretendard for most Korean copy and every button, the system sans stack for the hero and body
• Separation by #fafafa canvas, #ebf1f7 / #b3d4ff table tints and #e0e0e0 / #ededed rules

Primary tasks

• Explore the demo dashboard before talking to sales.
• Request a consultation.
• Register a card and start a paid plan from the pricing page.
• Start an A/B test and size it with the free sample-size calculator.
• Read the integration guide and connect the SDK.

Brand Narrative

Hackle's careers page frames the company's reason to exist as a question — how will companies that decide with data differ from those that go on instinct — and its answer is a platform that lets more companies find "성장의 단서" in data and grow in the fastest, safest way. The team started from twelve Coupang engineers who had built this tooling inside a big-tech company and set out to sell it as SaaS; within a year Hackle says it had become Korea's representative A/B testing platform, and it now reports 200+ customers, 500억+ 건 of cumulative traffic processed and 2× quarterly growth.

The product has widened from experimentation into a growth suite. The blog's product rail lists CRM 마케팅 ("고객 행동에 맞춘 개인화 마케팅"), 간편발송 ("알림톡·문자·브랜드 메시지를 별도 설정 없이 바로"), A/B 테스트, 데이터 분석 and 기능 관리; the home footer adds 원격 구성 and 기능 플래그, and the site now carries a /ko/mcp/ page whose title names Claude. The documentation lives at docs.hackle.io ("핵클 사용 가이드"), and the company runs a private community of about 1,000 IT practitioners and a newsletter.

The design follows that positioning: a Material UI base that feels like the dashboard behind it, a standing blue action on every page, and flat black and white chips for the secondary paths into guides, templates and Simple Send.

Principles

The careers page lists how the team works; the UI implications below are editorial readings.

1. Data over instinct. UI implication: lead with measurable claims and numbers (5분, 200+), not adjectives.
2. One standing action. UI implication: the header 데모 둘러보기 in #2962ff never leaves the page.
3. Speed to value. UI implication: the integration message ("5분") gets its own band and an outlined guide chip.
4. Responsible freedom ("책임있는 규칙없음을 지향해요" on the careers page). UI implication: a familiar MUI base with few custom rules layered on top.

Personas

Fictional archetypes informed by the customer types Hackle names publicly; not real people.

박지훈, 32, 서울. A product engineer adding the SDK to a mobile app; wants the five-minute setup the home page promises and reads the integration guide first.

이서연, 29, 경기. A growth marketer running A/B tests and 간편발송 campaigns; uses the templates and the sample-size calculator.

최민수, 38, 서울. A PM at a large customer comparing plans on the pricing page before asking for a consultation.

Colors

Every token below was read on 2026-09-30 from hackle.io/ko/, /ko/service/ab-test/ and /ko/pricing/ by the deterministic collector, and hover values by the fixed keyboard probe. The tokens describe Hackle's public marketing site; the Hackle dashboard and the docs site were not captured and none of their values is claimed.

Primary

• Hackle Action Blue (#2962ff): The fill of 데모 둘러보기 in the fixed header of all three captured pages (109 × 38, capture 6 on each), of A/B 테스트 시작하기, of both pricing buttons (카드 등록하고 바로 사용하기, 문의하기) and of the selected half of the A/B test page's example switch; also the A/B test page's blue banner heading. It is the primary because it is the one action present on every page and the fill of every in-page contained button — five filled controls (seven instances) across three pages against one for the hero blue.
• Primary Hover (#1c44b2): Hover and pressed fill of every #2962ff button, settled after the 0.25s transition (probe on /ko/pricing/ and /ko/service/ab-test/). Bundle frames caught these mid-transition (rgb(41, 98, 254), rgb(38, 91, 238)) and are not used.
• On Primary (#ffffff): Labels on all blue and black fills.

Accent

• Hero Blue (#0065ff): The home hero CTA 데모 둘러보기 and the border and label of its partner 상담 신청하기, the header row of the pricing comparison table, feature headings on the A/B test page and a 30px / 700 label on the pricing page. Hover on the hero CTA settles on this blue at 90% alpha.
• Calculator Blue (#005ff5): The 무료 A/B 테스트 계산기 사용하기 link on the A/B test page, which dims to opacity 0.9 on hover.
• Soft Blue (#9ebaf4): The 206px illustration panel at the head of each white feature card on home.
• Table Tint (#ebf1f7) and Table Highlight (#b3d4ff): Group rows and highlighted rows of the pricing comparison table.

Neutral & Surface

• Canvas (#fafafa): The body background of every captured page.
• White (#ffffff): Feature cards, the white chips and the outlined hero button.
• Hairline (#e0e0e0): Bottom border of every pricing table cell. Divider (#ededed): Top rule of each FAQ row.
• The four dark team cards on home fill with rgba(0, 0, 0, 0.87), the text-ladder black used as a surface.

Text

• Heading (#000000): Home hero and section headings, navigation labels.
• Ink (#151618): Labels of the white and outlined chips, fill of 대시보드 둘러보기; Dark Hover (#2c2d30) is the settled hover of that button and of the black 간편발송 chip.
• Navy Ink (#1e293b): a 24px / 700 line in the home band beside the 간편발송 chip. Graphite (#2d2d2d): 14px card copy on home. Charcoal (#424242): a 16px / 700 label on home paired with a white one of the same size.
• Muted (#5b6577): the 15px caption beside the calculator link on the A/B test page. Eyebrow (#a3a3a3): grey kickers above home section headings. Grey (#8e8e8e): a 14px note on the pricing page.
• Body copy uses Material's rgba(0, 0, 0, 0.87); footer links rgba(0, 0, 0, 0.6); legal links rgba(0, 0, 0, 0.3). These alpha values are prose, not colour tokens.

Typography

Font Family

• Pretendard — live surface use, loaded from Hackle's own CDN (cdn-homepage.hackle.io/157a1d25/_next/static/media/…woff2, 280 observed uses): every button and chip, most Korean headings on the service and pricing pages, pricing table and FAQ copy. Licensed under the SIL Open Font License 1.1.
• System sans stack (ui-sans-serif, system-ui, sans-serif) — the computed family of the body, navigation, footer, the home hero headline, the first home section heading, the hero CTA labels and the A/B test feature headings (283 uses). It is an operating-system stack, not a brand face, so it is not a family token.
• Montserrat and Poppins are declared as @font-face on the Next.js build but no captured element renders in them; they are not claimed.

Hierarchy

Principles

• Weight 700 carries every headline; tracking tightens to -1px on the Pretendard headings and -1.84px on the hero.
• Buttons and chips are always Pretendard 14px / 500 except the hero pair (18px / 700) and the A/B test start button (20px / 500).
• The page mixes two families line by line: the system stack for the document default and several headings, Pretendard wherever a component sets it.

Layout

Spacing System

• Observed values only: hero pair 12px / 32px; contained buttons 6px / 16px; dark chip 0 / 24px; white chips 10px / 20px; solution cards 24px; FAQ rows 24px / 27px; table cells 15px / 16px, header cells 25px / 16px.

Grid & Container

• Content sits in a 1200px column on home and 1248px on the A/B test and pricing pages at a 1440px viewport; the header is a 72px row.
• Home stacks full-width bands: hero, customer logos, the four dark team cards, method cards, Simple Send, resource tiles, integration, closing band.

Whitespace Philosophy

• Long pages (6,325px home, 9,417px A/B test) with one idea per band; headings carry the rhythm rather than dividers.

Border Radius Scale

• 4px contained buttons and the dashboard button · 5px chips · 8px header, hero and start buttons and dark cards · 10px feature cards and the calculator link · 36px example switch.

Responsive Behavior

Breakpoints

Only a 1440 × 900 desktop viewport was captured; no breakpoint is claimed.

Touch Targets

• Hero pair 53px, start button 59px, chips 44px, calculator link 47px, pricing buttons 39px, header button 38px, dashboard button 33px.

Collapsing Strategy

Not measured.

Image Behavior

Not measured beyond the fixed 206px #9ebaf4 panel at the head of each feature card.

Elevation & Depth

Only the MUI contained buttons carry shadow; every other captured element is flat and separates by the #fafafa canvas, white or dark cards and table tints.

Motion & Easing

Measured by the probe on 2026-09-30:

• MUI buttons and chips: background-color, box-shadow, border-color, color 0.25s cubic-bezier(0.4, 0, 0.2, 1).
• Hero pair: color, background-color, border-color, … 0.15s cubic-bezier(0.4, 0, 0.2, 1).
• Calculator link: opacity 0.15s ease.

No other duration or easing is claimed.

Components

Buttons

Header Demo Button — #2962ff, white label, 8px radius, 6px 16px, 38px tall, 14px / 500 Pretendard. Present in the fixed header of all three pages. Hover and pressed settle on #1c44b2. Keyboard focus adds only MUI ripple layers.

Contained Button (pricing) — #2962ff, white, 4px radius, 6px 16px, 39px, 14px / 500, with MUI's resting shadow rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px. Hover: #1c44b2 and a deeper shadow; pressed: #1c44b2 and the deepest shadow; keyboard focus: a mid shadow, no colour change.

Start Button — A/B 테스트 시작하기: #2962ff, 8px radius, 12px 20px, 59px, 20px / 500. Same hover and shadow behaviour.

Hero CTA — 데모 둘러보기 on home: #0065ff, white, 8px radius, 12px 32px, 53px, 18px / 700. Hover and pressed settle on the same blue at 90% alpha.

Hero Outline Button — 상담 신청하기: white fill, #0065ff label and 1px border, same geometry. The probe found no hover or pressed change.

Dark Chip — 간편발송 바로가기: #000000, white, 5px radius, 0 24px, 44px. Hover and pressed #2c2d30.

White Chip — 가이드북 다운받기, 가이드 보러가기, 템플릿으로 바로 만들기: white, #151618 label, 5px, 10px 20px, 44px. Hover and pressed: fill 90% white, label and icon #000000.

Outline Chip — 연동 가이드 보기: transparent, #151618 label and 1px border, 5px, 5px 15px, 40px, 16px / 700. Hover: a 4% ink wash, label and border #000000.

Dashboard Button — 대시보드 둘러보기: #151618, white, 4px, 6px 16px, 33px. Hover and pressed #2c2d30.

Calculator Link — #005ff5, white, 10px, 12px 24px, 47px, 15px / 700. Hover opacity 0.9.

Tabs & Navigation

Example Switch — a pair of 177 × 48 pills with a 36px radius on the A/B test page; the selected one fills #2962ff, the other is transparent.

Header Navigation — five links in a 72px row, #000000, 16px / 400 on the system stack. No hover was measured.

Tables & Rows

Pricing Table — header row #0065ff with white 18px / 600 Pretendard headers (20px in the first column), 25px 16px padding; group rows #ebf1f7 at 20px / 700; highlighted rows #b3d4ff; cells 18px / 400 with 15px 16px padding and a #e0e0e0 bottom border.

FAQ Row — 1248 × 79, 24px 27px padding, a #ededed top rule, question in 20px / 700 Pretendard.

Cards

Solution Card — four dark cards (285 × 375, 8px radius, 24px padding) on home, filled rgba(0, 0, 0, 0.87).

Feature Card — three white cards (353 × 360, 10px radius) on home, each opening on a #9ebaf4 panel.

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages of hackle.io plus fixed keyboard-probe state reads and first-party context) Tier 1 sources: https://hackle.io/ko/ ; https://hackle.io/ko/service/ab-test/ ; https://hackle.io/ko/pricing/ ; https://careers.hackle.io/ ; https://hackle.io/ko/blog/ ; https://docs.hackle.io/ Tier 2 sources: getdesign.md/hackle (HTTP 200, the name does not appear in the response) and styles.refero.design/?q=hackle (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

States

Empty, loading, error and success states were not observable on logged-out marketing pages and are not claimed.

Do's and Don'ts

Do

• Use #2962ff for the page's standing action and every in-page filled button, with #1c44b2 on hover
• Keep #0065ff for the hero pair, the pricing table header and blue feature headings
• Set buttons in Pretendard 14px / 500; headlines at 700 with -1px tracking
• Use 5px chips in #000000, #151618 or white for secondary entries
• Let only the contained buttons carry the MUI shadow

Don't

• Fold the three blues into one — they mark different kinds of action
• Put shadows on chips, cards or the header button
• Put the hero headline in a display face the site does not render
• Promote the black-alpha text ladder into opaque colour tokens

Voice & Tone

Hackle writes like a growth consultant who also ships code: outcome first, then speed, then proof.

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

• "AI와 데이터로 이끄는 성장 올인원 AI 그로스 플랫폼 핵클" — home H1.
• "A/B 테스트를 통해 실패를 줄이고 안정적으로 성장할 수 있습니다" — A/B test page H2.
• "데이터를 기반으로 의사결정하는 기업과 감에만 의존하는 기업의 미래는 어떻게 다를까요?" — careers page.

Forbidden register: unmeasured superlatives, fear-based urgency, and talking down to developers.

Agent Prompt Guide

Quick Color Reference

• Action: #2962ff (hover #1c44b2) · Hero accent: #0065ff · Calculator: #005ff5
• Canvas #fafafa · White #ffffff · Heading #000000 · Ink #151618
• Table tints #ebf1f7, #b3d4ff · Rules #e0e0e0, #ededed · Soft blue #9ebaf4

Example Component Prompts

• "A fixed 72px header on #fafafa with black 16px nav links and a #2962ff 데모 둘러보기 button: 8px radius, 6px 16px, 14px / 500 Pretendard, white label, hover #1c44b2."
• "A hero with a 46px / 700 black headline at -1.84px tracking, then a #0065ff 53px CTA (8px radius, 12px 32px, 18px / 700) beside a white outline twin with a 1px #0065ff border."
• "A pricing table: #0065ff header row with white 18px / 600 headers, #ebf1f7 group rows, #e0e0e0 cell rules, and 4px #2962ff plan buttons with MUI's resting shadow."

Iteration Guide

1. #2962ff is the standing action; #0065ff is the hero accent
2. Hover darkens #2962ff to #1c44b2; black fills go to #2c2d30
3. Chips are 5px, contained buttons 4px, large CTAs 8px, cards 8–10px
4. Pretendard for buttons; weight 700 and tight tracking for headlines
5. Shadow only on MUI contained buttons

---

Governance

Known Gaps

• Contrast, outline-chip. Text #151618 on #00000000 measures 1.16:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.