Design System Inspiration of Hackle

1. Visual Theme & Atmosphere

Hackle (핵클) is a Korean developer-and-growth platform — an "올인원 AI 그로스 플랫폼" (all-in-one AI growth platform) bundling A/B testing, feature flags, CRM marketing, and product analytics into one dashboard. Its marketing surface reads like a confident, clean SaaS console rather than a flashy consumer site: an off-white canvas (#fafafa) carrying near-black text, generous whitespace, and a single saturated blue that does almost all the persuading. The personality is engineered-but-friendly — the page wants developers and growth teams to feel that "웹, 앱, 서버 상관없이 5분이면 사용 가능" (it works on web, app, and server in five minutes).

The system is unmistakably built on Material UI. Body text uses Material's emphasis ladder — rgba(0,0,0,0.87) for primary, rgba(0,0,0,0.6) for secondary, rgba(0,0,0,0.3) for disabled — and the default action buttons inherit MUI geometry (4px radius, 6px 16px padding) in the brand blue #2962ff. On top of that base, Hackle layers two custom button families: large 8px-radius hero CTAs in a brighter #0065ff, and flat 5px-radius "tool chips" (a black #000000 chip for 간편발송, white chips for downloads/templates). Headlines render in Montserrat on the English site and Pretendard on the Korean site, both at weight 700 — 46px on the hero, 36px on section titles — while body and nav text sit at a quiet 16px / weight 400 with a 24px line-height.

Depth is almost entirely flat. Live inspection found box-shadow: none across the nav, hero, headings, buttons, and chips; separation comes from background tints — the #fafafa canvas against pure #f7f7f7 and #f6f7f9 surfaces — rather than elevation. Color is the only loud instrument: the brand blues #0065ff and #2962ff for action, a soft #9ebaf4 and a pale #ebf4fd tint for supporting accents, and an occasional deep navy band (#0e0437) for a dark immersive section. Pure-black headings (#000000) and a near-black ink (#151618) anchor the type. The companion docs site (docs.hackle.io) is a deliberately separate, calmer system: Inter typeface, slate body text #1c1d1e, muted #6a6e75 sidebar labels, hairline borders #d6d9df, and its own darker documentation blue #0c408d for active nav and primary doc actions.

Key Characteristics:

• Material UI foundation — rgba(0,0,0,0.87) text ladder + 4px-radius default buttons in #2962ff
• Custom hero CTA layer — bright #0065ff, 8px radius, 18px / weight 700 labels
• Flat 5px "tool chips" — black #000000 and white chips for secondary actions
• Single-blue persuasion: #0065ff / #2962ff carry nearly all the action color
• Montserrat (EN) / Pretendard (KO) bold headlines at weight 700; quiet 16px body
• Shadowless system — separation via #fafafa / #f7f7f7 / #f6f7f9 tints, not elevation
• Separate Inter-based docs system keyed on documentation blue #0c408d with #d6d9df hairlines
• Supporting accents: soft #9ebaf4, pale #ebf4fd tint, deep navy #0e0437 band; #ffffff cards

2. Color Palette & Roles

Primary

• Hackle Blue (#0065ff): The primary brand and action color — the large hero CTA ("데모 둘러보기" / "Explore Demo") and the outline-CTA accent. Bright, saturated, confident.
• Brand Blue Alt (#2962ff): The Material-UI default action-button blue — header CTA, pricing buttons ("문의하기", "카드 등록하고 바로 사용하기"), and inline emphasis links. A slightly deeper indigo-blue companion to the primary.
• Docs Blue (#0c408d): The documentation system's darker blue — active sidebar nav, the "수락" consent accept button, and doc-link text on docs.hackle.io.

Accent & Tint

• Soft Blue (#9ebaf4): A light periwinkle accent used in illustration/decoration and supporting surfaces.
• Pale Blue Tint (#ebf4fd): A very light blue wash for highlighted/info blocks and tinted callouts.
• Deep Navy (#0e0437): An occasional dark immersive section background — near-black indigo for contrast bands.

Text & Ink

• Heading Black (#000000): Pure black for marketing headlines (hero H1, section H2/H3).
• Ink (#151618): Near-black ink for tool-chip labels and high-contrast UI text — a touch warmer than pure black.
• Body Slate (#1c1d1e): The docs-system body text color (Inter); a soft near-black for dense reading.
• Muted Slate (#6a6e75): Secondary/muted text — docs sidebar inactive items, captions, metadata. (Marketing body additionally uses Material's rgba(0,0,0,0.87) / rgba(0,0,0,0.6) emphasis levels.)

Surface & Border

• Canvas (#fafafa): The default page background — a soft off-white.
• Surface (#f7f7f7): A pure neutral surface for alternating bands and cards on the marketing site.
• Docs Surface (#f6f7f9): The docs system's cool-grey surface block (e.g. the "거부" reject button background).
• Hairline (#d6d9df): Thin borders and dividers on the docs system (search field, copy/consent buttons).
• Pure White (#ffffff): Card surfaces, white tool chips, and text on blue/dark.

3. Typography Rules

Font Family

• Display (EN): Montserrat (with Montserrat Fallback) — marketing headlines on the English site at weight 700.
• Body / Display (KO): Pretendard (with Pretendard Fallback) — the Korean site's headline and UI font; body defaults fall back through ui-sans-serif, system-ui.
• Docs: Inter (with Inter Fallback) — the entire docs.hackle.io system, body and nav.

Hierarchy

Principles

• Bold display, quiet body: Headlines run at weight 700; body and nav stay at weight 400. The weight jump is the primary hierarchy signal — there is little use of mid-weights on the marketing surface.
• Two display fonts, locale-split: Montserrat owns the English marketing voice; Pretendard owns the Korean voice. They never appear together on one page — locale decides.
• Inter for documentation: The docs system deliberately switches to Inter at 14px / 400 with a 1.5 line-height — calmer and denser than the marketing type, signalling "reference material, not pitch."
• Material body metrics: The marketing body inherits MUI defaults (16px, 24px line-height, rgba(0,0,0,0.87)), giving the site a familiar console-grade legibility.

4. Component Stylings

Buttons

Hero Primary CTA

• Background: #0065ff
• Text: #ffffff
• Radius: 8px
• Padding: 12px 32px
• Height: 53px
• Font: 18px / 700
• Hover: same blue dimmed to ~90% opacity
• Use: The dominant page action ("데모 둘러보기" / "Explore Demo")

MUI Filled Action

• Background: #2962ff
• Text: #ffffff
• Radius: 4px
• Padding: 6px 16px
• Height: 39px
• Font: 14px / 500
• Use: Material-default action buttons ("문의하기", "카드 등록하고 바로 사용하기", header "데모 둘러보기")

Outline CTA

• Background: #ffffff
• Text: #0065ff
• Border: 1px solid #0065ff
• Radius: 8px
• Padding: 12px 32px
• Height: 53px
• Font: 18px / 700
• Use: Secondary hero action ("상담 신청하기" / "Request a Demo")

Dark Tool Chip

• Background: #000000
• Text: #ffffff
• Radius: 5px
• Padding: 0px 24px
• Height: 44px
• Font: 14px / 500
• Use: Black entry chip ("간편발송 바로가기" / "Go to Simple Send")

White Tool Chip

• Background: #ffffff
• Text: #151618
• Radius: 5px
• Padding: 10px 20px
• Height: 44px
• Font: 14px / 500
• Use: Flat secondary chips ("가이드북 다운받기", "템플릿으로 바로 만들기", "View Guides")

Docs Consent Accept

• Background: #0c408d
• Text: #ffffff
• Border: 1px solid #0c408d
• Radius: 12px
• Padding: 6px 12px
• Height: 35px
• Font: 14px / 400
• Use: Docs cookie/consent accept ("수락"); the reject ("거부") variant uses #f6f7f9 background with #6a6e75 text and a #d6d9df border

Inputs

Docs Search Field

• Background: #ffffff
• Text: #1c1d1e
• Border: 1px solid #d6d9df
• Radius: 8px
• Padding: 8px
• Height: 40px
• Font: 16px
• Use: Docs search ("찾으시는 기능이나 키워드를 검색해보세요", placeholder "검색…")

Cards & Containers

Docs Surface Block

• Background: #f6f7f9
• Text: #1c1d1e
• Radius: 8px
• Use: Cool-grey surface block on the docs system (e.g. inactive/reject surfaces)

Blue Info Callout

• Background: #ebf4fd
• Text: #0c408d
• Radius: 8px
• Use: Highlighted/info block — pale-blue tinted callout

Marketing Feature Card

• Background: #ffffff
• Radius: 8px
• Use: White feature card on the #fafafa canvas — flat, shadowless, separated by surface tint

Badges

Blue Emphasis Pill

• Background: #0065ff
• Text: #ffffff
• Radius: 4px
• Padding: 6px 16px
• Font: 14px / 500
• Use: Inline emphasis / status pill in the brand blue

Navigation

• Background: #ffffff
• Text: #000000
• Font: 16px / 400
• Active: blue #0065ff text on the active item
• Use: Top marketing nav ("서비스 소개", "가이드", "가격 안내", "블로그", "로그인"); docs sidebar nav uses Inter 14px with #6a6e75 inactive labels and #0c408d weight-600 active items

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 3 brand-owned surfaces) Tier 1 sources: https://hackle.io/ko/, https://docs.hackle.io/, https://github.com/hackle-io Tier 2 sources: getdesign.md/hackle — directory shell only, no Hackle token data; styles.refero.design — not listed (KR brand) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: ~4-8px
• Scale: 6px, 10px, 12px, 16px, 20px, 24px, 32px, 64px
• Notable: MUI action buttons use the Material 6px/16px rhythm; hero CTAs jump to a generous 12px/32px; section bands separate at ~64px

Grid & Container

• Centered single-column hero with the 46px headline as the anchor, primary + outline CTA pair beneath
• Logo wall ("앞서가는 기업들은 이미 핵클의 고객사입니다.") and feature bands alternate across full-width sections
• Team/dashboard feature section ("팀 별로 필요한 모든 것을 하나의 대시보드에서") groups product modules
• Cards use 8px radius and sit on the #fafafa canvas separated by #f7f7f7 surface tints

Whitespace Philosophy

• Console-grade calm: generous vertical rhythm between sections; the page never feels crowded despite being feature-dense.
• Tint, don't elevate: bands separate by background color (#fafafa vs #f7f7f7 vs #f6f7f9), not by shadow stacks.
• One loud color: blue is rationed to actions so the next step is always obvious.

Border Radius Scale

• XS (4px): MUI default action buttons, emphasis pills
• Small (5px): flat tool chips
• Medium (8px): hero CTAs, cards, search field — the workhorse
• Large (12px): docs consent buttons, docs language selector
• Full (9999px): rare full-round elements

6. Depth & Elevation

Shadow Philosophy: Hackle is effectively a shadowless system on its public surfaces. Live inspection returned box-shadow: none across the nav, hero, headings, buttons, and tool chips. Grouping and hierarchy come from flat background tints (#fafafa canvas, #f7f7f7 / #f6f7f9 surfaces) and thin #d6d9df hairlines on the docs system. When the page needs to elevate attention it reaches for color — the bright blue #0065ff, the dark #000000 chip, or a deep navy #0e0437 band — never a drop shadow. This keeps the SaaS console feel clean and fast.

7. Do's and Don'ts

Do

• Reserve the brand blue (#0065ff) for the primary action so the next step is unambiguous
• Use the Material-default #2962ff filled button (4px radius, 6px 16px) for standard in-page actions
• Set marketing headlines in Montserrat (EN) / Pretendard (KO) at weight 700
• Keep body and nav at 16px / weight 400 with a 24px line-height
• Separate sections with flat tints (#fafafa, #f7f7f7, #f6f7f9), not shadows
• Use the dark #000000 chip and white #151618-text chips for secondary tool entries
• Switch to Inter + docs-blue #0c408d + #d6d9df hairlines inside the documentation system
• Use pure black (#000000) for marketing headlines and near-black #151618 for chip ink

Don't

• Spread blue across many elements — it dilutes the single-action signal
• Add drop shadows for elevation — Hackle separates with tint and hairline
• Mix Montserrat and Pretendard on the same page — locale decides the display font
• Use the marketing brand blues inside the docs system — docs uses its own #0c408d
• Set headlines in a light weight — display is always weight 700
• Use large pill radii on the hero CTA — it stays at a controlled 8px
• Introduce a second saturated accent hue — blue is the only loud color

8. Responsive Behavior

Breakpoints

Touch Targets

• Hero CTAs at 53px height with 12px/32px padding — large, unmistakable targets
• MUI action buttons at ~39px height; tool chips at 44px height
• Nav items spaced within a tall (~72px) header row

Collapsing Strategy

• Hero: 46px headline scales down on mobile, weight 700 maintained
• CTA pair (primary + outline) stacks vertically on narrow viewports
• Feature bands: multi-column → stacked single column
• Tinted/white alternating sections keep full-width treatment
• Docs: sidebar nav collapses to a drawer; content column stays Inter 14px

Image Behavior

• Product/dashboard screenshots and illustrations carry no shadow at any size, consistent with the flat system
• Cards maintain 8px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary action: Hackle Blue (#0065ff)
• Standard MUI action: Brand Blue Alt (#2962ff)
• Docs accent / link: Docs Blue (#0c408d)
• Canvas: Off-white (#fafafa)
• Surfaces: #f7f7f7 (marketing) / #f6f7f9 (docs)
• Headings: Black (#000000); chip ink: #151618; docs body: #1c1d1e
• Muted text: #6a6e75
• Hairline: #d6d9df
• Accent / tint: Soft Blue (#9ebaf4), Pale Blue (#ebf4fd)
• Dark band: Deep Navy (#0e0437); white surfaces: #ffffff

Example Component Prompts

• "Create a hero on an off-white #fafafa canvas. Headline at 46px Pretendard weight 700, color #000000. Below it a primary CTA: #0065ff background, white text, 8px radius, 12px 32px padding, 18px weight 700; plus an outline CTA: white background, #0065ff text and 1px #0065ff border, 8px radius."
• "Design an in-page action button the Material way: #2962ff background, white text, 4px radius, 6px 16px padding, 14px weight 500."
• "Build a tool-chip row: a black #000000 chip with white text and a white chip with #151618 text, both 5px radius, ~44px tall, 14px weight 500."
• "Style a docs page in Inter: body #1c1d1e at 14px / 1.5, muted sidebar items #6a6e75 with the active item in #0c408d weight 600, a search field with 1px #d6d9df border and 8px radius, and a pale-blue #ebf4fd info callout with #0c408d text."

Iteration Guide

1. Blue (#0065ff) is the single action color — don't spread it
2. Standard buttons follow MUI: #2962ff, 4px radius, 6px 16px padding
3. Headlines are weight 700 (Montserrat EN / Pretendard KO); body is 16px / 400
4. No shadows — separate with #fafafa / #f7f7f7 / #f6f7f9 tints and #d6d9df hairlines
5. The docs system is its own world: Inter + #0c408d + hairlines
6. Radius ladder: 4px MUI buttons, 5px chips, 8px hero/cards, 12px docs buttons
7. Reach for color (blue, black chip, navy band) — not elevation — to draw attention

---

10. Voice & Tone

Hackle's voice is practical, data-confident, and developer-respecting — it speaks to growth teams and engineers who want measurable outcomes, not hype. The Korean positioning "올인원 AI 그로스 플랫폼" and the English "All-in-One Business Optimization Solution" set the register: comprehensive, outcome-framed, plainspoken. Copy leads with capability and speed ("웹, 앱, 서버 상관없이 5분이면 사용 가능") and with proof ("앞서가는 기업들은 이미 핵클의 고객사입니다." / "Leading brands are already using Hackle.").

Voice samples (verbatim from live surfaces):

• "AI와 데이터로 이끄는 성장 올인원 AI 그로스 플랫폼 핵클" — KO hero headline. (verified live 2026-06-26)
• "앞서가는 기업들은 이미 핵클의 고객사입니다." — KO social-proof section. (verified live 2026-06-26)
• "웹, 앱, 서버 상관없이 5분이면 사용 가능" — KO speed claim. (verified live 2026-06-26)
• "Hackle | All-in-One Business Optimization Solution" — EN page title. (verified live 2026-06-26)

Forbidden register: fear-based urgency, undefined buzzwords with no measurable claim, exclamation-heavy hype, and treating developers as non-technical buyers (the docs voice is peer-to-peer, never condescending).

11. Brand Narrative

Hackle (핵클) is a Korean (Seoul-based) developer-and-growth platform positioning itself as an "올인원 AI 그로스 플랫폼" — an all-in-one growth toolkit that unifies A/B testing, feature flags, CRM marketing (간편발송 / "Simple Send"), and product/data analysis on a single dashboard. The founding premise visible across its surfaces is consolidation: teams historically stitched experimentation, feature management, messaging, and analytics together from separate vendors; Hackle's pitch is that a growth team should get "팀 별로 필요한 모든 것을 하나의 대시보드에서" (everything each team needs in one dashboard).

The product is explicitly developer-first. It ships official SDKs through a public GitHub organization (github.com/hackle-io) and maintains a dedicated documentation site (docs.hackle.io) with step-numbered guides and a "개발자 문서" (developer docs) track. The headline promise — "웹, 앱, 서버 상관없이 5분이면 사용 가능" (usable in five minutes regardless of web, app, or server) — frames integration speed as the entry point, the same developer-onboarding logic that defines modern experimentation tooling.

What the design refuses, visible in its restraint: the heavy, shadow-stacked chrome of legacy enterprise software, and the multi-color dashboards that overload growth tools. What it embraces: a flat, fast, single-blue console aesthetic; Material-grade familiarity for the marketing chrome; and a separate, calmer Inter-based documentation system that reads like reference material a builder can trust.

12. Principles

1. One platform, one dashboard. Hackle's whole pitch is consolidation. UI implication: unify modules visually; avoid per-feature visual dialects on the marketing surface — the blue and the type system stay consistent across A/B, flags, CRM, and analytics.
2. One action, one color. Blue (#0065ff / #2962ff) means "do this." UI implication: reserve saturated blue for actions so the next step is never ambiguous.
3. Developer-first, five-minute onboarding. UI implication: lead with integration speed; keep docs peer-level, step-numbered, and code-forward.
4. Flat and fast. Console clarity over decorative depth. UI implication: no shadows; separate with tint and hairline; keep the page quick to scan.
5. Familiar base, custom highlights. Material UI gives a trusted foundation; custom hero CTAs and chips add brand character. UI implication: respect MUI defaults for standard controls, and layer brand geometry only where it earns attention.
6. Calm docs, bold marketing. UI implication: the documentation system gets its own quiet Inter + #0c408d identity, distinct from the louder marketing blue.

13. Personas

Personas below are fictional archetypes informed by publicly observable Hackle user segments (Korean growth teams, product managers, and engineers adopting experimentation tooling), not individual people.

박지훈, 32, 서울. A product engineer integrating Hackle's SDK into a mobile app. Reads docs.hackle.io like reference material — values the step-numbered guides and the five-minute setup promise. Chose Hackle because the developer docs treated him as a peer and the SDK was on a public GitHub org.

이서연, 29, 경기. A growth marketer running A/B tests and CRM 간편발송 campaigns. Lives in the dashboard and values that experimentation, messaging, and analytics share one surface instead of three tools. Trusts the brand partly because "앞서가는 기업들" already use it.

최민수, 38, 서울. A data-minded PM evaluating an all-in-one growth platform to replace a patchwork stack. Cares that the analysis, feature flags, and experiments reconcile to the same numbers. Reassured by the calm, console-grade UI rather than a hype-heavy sales site.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and restrained, matching the flat, fast console aesthetic. The primary CTA responds to hover with a subtle opacity dim (the live hero CTA shifts to ~90% opacity on hover) rather than a shadow or scale leap. Buttons and chips press with a quiet opacity/scale shift; content reveals fade in from below at motion-standard / ease-enter. No bounce or spring — a growth/analytics platform signals steadiness. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the product remains fully functional.