Design System Inspiration of Beusable

1. Visual Theme & Atmosphere

Beusable (뷰저블), built by the Korean analytics company 4Grit (포그리트), is a CX-data and UX-heatmap SaaS whose marketing site pairs a cinematic dark hero with crisp, high-contrast white product sections. The homepage opens on a near-black band (#181818) where a saturated rose CTA (#ec0047) and an electric cyan highlight (#00b7ff) do all the signalling, then drops into bright white (#ffffff) content zones where text sits in pure black (#000000) and a graphite heading grey (#2f2f2f). The effect is confident and data-forward: the dark stage frames the product's visualizations, and the light body keeps dense analytics copy legible.

The typographic personality is a deliberate two-voice split. English display headlines run in the custom NewRubrik face at large sizes — 65px / weight 700 with tight -1.5px tracking on the feature hero H1 ("UX Heatmap") — while Korean headlines and all UI text run in Pretendard Variable (with Noto Sans KR and AppleSDGothicNeo fallbacks), including 55px / 700 Korean section headlines at -1px tracking. Body and navigation drop to a quiet 14–16px / 400–500. This gives the brand a globalized, product-marketing cadence: bold Latin display for impact, Pretendard for dense hangul readability.

Geometry leans hard into the pill. Primary CTAs and hero buttons carry effectively-full radii (700px–999px on the dark hero, a tamer 21px on inner feature pages), while dropdown menu rows and filter tags stay tight at 4–5px. Depth is mostly flat — most surfaces show box-shadow: none, separated instead by the dark/light band contrast, #ebebeb hairlines, and soft cyan-tinted cards (#e0f6fa). The one recurring elevation is a floating "back" control that uses a soft rgba(0,0,0,0.05) 0px 9px 11px -5px shadow. Color-coded data hues — teal (#13a5bf, #16b5d2) and a heatmap-warm yellow (#f6e136) — surface where the product shows its heatmap and journey-map visualizations.

Key Characteristics:

• Dark cinematic hero (#181818) over bright white (#ffffff) product sections
• Single saturated rose (#ec0047) as the primary action color, brightening to #ff1553 on hover/emphasis
• Electric cyan (#00b7ff) as the highlight/link accent, distinct from the action rose
• Two-voice type: NewRubrik for English display, Pretendard Variable for Korean + all UI
• Pill-everything CTAs (700px–999px on hero, 21px inner) with tight 4–5px menu/tag radii
• Flat depth — mostly shadowless, separated by band contrast and #ebebeb hairlines
• Data-viz palette — teal (#13a5bf/#16b5d2) and heatmap yellow (#f6e136) for visualizations
• Pure-black (#000000) body text with a graphite heading ladder (#2f2f2f → #222222)

2. Color Palette & Roles

Primary & Action

• Beusable Rose (#ec0047): Primary brand and action color — the Get Started CTA background, inline action buttons, active nav state, and filter-tag outline. The system's single "do this" color.
• Rose Bright (#ff1553): A brighter rose used for hover and emphasis states on the primary action.

Accent & Data

• Cyan Accent (#00b7ff): The highlight/link color — hero highlight text, inline links, and the floating back control. Deliberately separate from the action rose so "highlight" never reads as "action."
• Teal (#13a5bf): Secondary data-visualization hue for charts and journey-map surfaces.
• Teal Alt (#16b5d2): A lighter teal companion for gradient and data accents.
• Heatmap Yellow (#f6e136): Warm heatmap-zone marker — the hot end of the product's data visualization scale.

Text & Ink

• Ink Black (#000000): Pure black — the dominant body-text color across white sections.
• Heading Graphite (#2f2f2f): Display H1 heading color on light surfaces.
• Heading Strong (#222222): Strong Korean section-headline and secondary-button text color.
• Body Grey (#444444): Nav links and standard body copy on white.
• Border Strong (#666666): 1px outline color for the Sign In / secondary button on white.
• Muted (#777777): Tertiary text, captions, metadata.
• Muted Alt (#999999): Lower-emphasis labels and helper text.
• Faint (#b1b1b1): Faint labels, disabled-adjacent text.
• Faint Alt (#cccccc): Lowest-emphasis text, placeholder-level greys.

Surface & Hairline

• Pure White (#ffffff): Page background, cards, nav, and text on rose/dark.
• Surface Dark (#181818): The cinematic dark hero band and dark feature strips.
• Cyan Tint (#e0f6fa): Soft cyan-tinted card/section surface for grouped feature blocks.
• Hairline (#ebebeb): Primary thin border/divider given the near-shadowless system.
• Hairline Alt (#d9d9d9): Slightly stronger divider for secondary separation.

3. Typography Rules

Font Family

• Display (English): NewRubrik — the custom Latin display face used for English hero headlines (e.g. "UX Heatmap") at weight 700 with tight negative tracking.
• Body & Korean: Pretendard Variable (with Noto Sans KR, AppleSDGothicNeo fallbacks) — Korean headlines and all UI/body text.

Hierarchy

Principles

• Two voices, two scripts: NewRubrik owns English display impact; Pretendard Variable owns Korean headlines and every functional UI string. They never swap roles.
• Tight display tracking: -1.5px on the 65px English H1, -1px on the 55px Korean section heading. Headlines compress; body stays at normal tracking.
• Heavy display, light body: weight 700 for headlines and CTAs, 400–500 for reading and navigation — the weight jump is the primary hierarchy signal.
• Hangul-first body sizing: body sits at 14–16px with 1.5 line-height for dense, legible Korean analytics copy.

4. Component Stylings

Buttons

Get Started (Primary)

• Background: #ec0047
• Text: #ffffff
• Radius: 9999px (full pill on hero; 21px on inner feature pages)
• Padding: 8px 16px
• Height: 38px
• Font: 14px Pretendard Variable weight 700
• Hover: #ff1553
• Use: Primary conversion CTA in header and hero — the single primary action

Sign In (Outline, Light)

• Background: transparent
• Text: #222222
• Border: 1px solid #666666
• Radius: 21px
• Padding: 10px 18px
• Height: 38px
• Font: 14px Pretendard Variable weight 700
• Use: Secondary action on white surfaces

Hero Glass Pill

• Text: #00b7ff
• Border: 1px solid rgba(255,255,255,0.24)
• Radius: 9999px
• Padding: 0px 28px
• Height: 60px
• Font: 16px Pretendard Variable weight 400
• Use: Translucent hero CTA on the dark band ("9,000개 기업이 발견한 것")

Floating Back

• Background: #ffffff
• Text: #00b7ff
• Radius: 20px
• Padding: 9px 15px
• Shadow: rgba(0,0,0,0.05) 0px 9px 11px -5px
• Font: 16px Pretendard Variable weight 400
• Use: Floating "뒤로" back control on feature pages

Cards & Containers

Cyan-Tinted Card

• Background: #e0f6fa
• Text: #222222
• Radius: 20px
• Use: Soft cyan-tinted feature/grouping card

White Feature Card

• Background: #ffffff
• Border: 1px solid #ebebeb
• Radius: 20px
• Use: White feature card separated by hairline, no shadow

Badges

Filter Tag

• Background: transparent
• Text: #ec0047
• Border: 1px solid #ec0047
• Radius: 5px
• Padding: 4px 10px
• Font: 14px Pretendard Variable weight 500
• Use: Feature filter / section tag

Heatmap Data Marker

• Background: #f6e136
• Text: #000000
• Radius: 9999px
• Use: Warm-zone marker in heatmap visualizations

List Items

Feature Dropdown Row

• Background: #ffffff
• Text: #444444
• Radius: 4px
• Padding: 6px 10px
• Font: 14px Pretendard Variable weight 400
• Active: #ec0047
• Use: Feature dropdown menu row (Features / Pricing / UX Heatmaps…)

Navigation

• Background: #181818 (dark home) / #ffffff (inner pages)
• Text: #ffffff (dark) / #444444 (light)
• Font: 14px Pretendard Variable weight 500
• Active: rose #ec0047 text
• Use: Top horizontal nav ("UX 히트맵", "CX 저니맵", "대화형 BI", "생성형 GEO", "맞춤형 AI")

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.beusable.net/ ; https://www.beusable.net/features/heatmaps ; https://www.beusable.net/blog ; https://www.4grit.com/company-english/ Tier 2 sources: getdesign.md/beusable (SPA shell, no beusable record) ; styles.refero.design/?q=beusable (not listed — only generic trending styles returned) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 28px, 32px
• Notable: hero pill CTAs carry generous 28–32px horizontal padding for a large, tappable target; inner nav/menu rows stay tight at 6–10px

Grid & Container

• Centered single-column dark hero anchored by the CTA and highlight text
• White product sections alternate as full-width bands beneath the hero
• Feature pages use a left sub-nav of feature rows plus a large display H1
• Cards group related visualizations at a 20px radius

Whitespace Philosophy

• Band contrast over borders: the dark hero (#181818) versus white (#ffffff) sections is the primary structural divide, not heavy rules
• Flat separation: within white zones, #ebebeb and #d9d9d9 hairlines and cyan-tinted (#e0f6fa) cards separate content without elevation
• Pill rhythm: repeated full-radius CTAs create a consistent, friendly cadence across conversion points

Border Radius Scale

• Small (4px): dropdown menu rows
• Tag (5px): filter/section tags
• Inner CTA (20–21px): buttons and floating controls on feature pages
• Full (700–999px / 9999px): hero CTAs, glass pills, data markers

6. Depth & Elevation

Shadow Philosophy: Beusable is a near-flat system. Live inspection found box-shadow: none across the hero, nav, headings, and most cards; depth comes from the dark/light band contrast and thin #ebebeb hairlines rather than elevation. The single recurring shadow is a soft, wide, negative-spread lift (rgba(0,0,0,0.05) 0px 9px 11px -5px) reserved for the floating back control. When the product needs emphasis it reaches for color — the rose #ec0047 action or the cyan #00b7ff highlight — not a heavier shadow.

7. Do's and Don'ts

Do

• Use the rose (#ec0047) as the single primary action color; brighten to #ff1553 on hover
• Keep cyan (#00b7ff) for highlights and links, distinct from the action rose
• Set English display headlines in NewRubrik at weight 700 with tight negative tracking
• Set Korean headlines and all UI text in Pretendard Variable
• Frame product visualizations against the dark #181818 hero band
• Use full-pill radii on hero CTAs and tight 4–5px radii on menu rows and tags
• Separate white sections with #ebebeb hairlines and cyan-tinted (#e0f6fa) cards, not shadows
• Reserve teal (#13a5bf/#16b5d2) and heatmap yellow (#f6e136) for data visualization

Don't

• Spread the rose across many elements — it dilutes the single-action signal
• Use cyan (#00b7ff) as an action color — it means "highlight," not "do this"
• Set Korean headlines in NewRubrik — it owns English display only
• Add heavy drop shadows for elevation — the system separates with band contrast and hairlines
• Use pure black (#000000) backgrounds for content sections — reserve #181818 for the hero band
• Mix additional saturated accent hues beyond rose, cyan, and the data teals/yellow
• Set display headlines in a light weight — display is always 700
• Use sharp square corners on CTAs — hero actions are full pills

8. Responsive Behavior

Breakpoints

Touch Targets

• Hero glass pills at 56–60px height with 28–32px horizontal padding — large, unmistakable targets
• Get Started CTA at 36–38px height, full pill
• Nav links and dropdown rows spaced for touch within the header

Collapsing Strategy

• Hero: 65px English / 55px Korean display compresses on mobile; weight 700 maintained
• Feature sub-nav: left rail of feature rows wraps/scrolls on narrow viewports
• Product bands: multi-column → stacked single column
• Dark hero and white sections keep full-width treatment, reduce internal padding

Image Behavior

• Heatmap and journey-map visualizations sit on the dark hero band or white cards at 20px radius
• Data markers keep the heatmap yellow (#f6e136) at all sizes
• Cards maintain 20px radius across breakpoints, no shadow

9. Agent Prompt Guide

Quick Color Reference

• Primary action: Beusable Rose (#ec0047)
• Action hover: Rose Bright (#ff1553)
• Highlight / link: Cyan Accent (#00b7ff)
• Data viz: Teal (#13a5bf), Teal Alt (#16b5d2), Heatmap Yellow (#f6e136)
• Background (light): Pure White (#ffffff)
• Background (hero): Surface Dark (#181818)
• Tinted card: Cyan Tint (#e0f6fa)
• Body text: Ink Black (#000000)
• Heading: Graphite (#2f2f2f), Strong (#222222)
• Body / nav: Body Grey (#444444)
• Muted: #777777, #999999
• Hairline: #ebebeb, #d9d9d9

Example Component Prompts

• "Create a dark hero on #181818. English H1 in NewRubrik 65px weight 700, line-height 1.0, letter-spacing -1.5px, color #ffffff. A glass CTA pill: translucent dark background, #00b7ff text, 1px solid rgba(255,255,255,0.24) border, full radius, 0px 28px padding, 60px height. A solid rose CTA: #ec0047 background, white text, full pill, 8px 16px, 14px Pretendard weight 700 — hover #ff1553."
• "Design a white feature card: #ffffff background, 1px solid #ebebeb border, 20px radius, no shadow. Title in Pretendard Variable weight 700, color #222222. Body 16px weight 400, #000000."
• "Build a cyan-tinted section card: #e0f6fa background, 20px radius. Heading #222222, body #444444. Include a filter tag: transparent background, #ec0047 text, 1px solid #ec0047 border, 5px radius, 4px 10px padding, 14px weight 500."
• "Create a light-page nav: white header, Pretendard 14px weight 500 links in #444444, active item rose #ec0047. Get Started CTA right-aligned as a #ec0047 pill, white text, 21px radius."

Iteration Guide

1. Rose (#ec0047) is the single action color — don't spread it; hover goes to #ff1553
2. Cyan (#00b7ff) is highlight/link only, never an action
3. NewRubrik for English display; Pretendard Variable for Korean + all UI
4. Frame product visuals on the dark #181818 band; keep body sections white
5. Full-pill hero CTAs, tight 4–5px menu/tag radii
6. Separate with #ebebeb hairlines and #e0f6fa tinted cards, not shadows
7. Reserve teal (#13a5bf/#16b5d2) and yellow (#f6e136) for data visualization

---

10. Voice & Tone

Beusable's voice is plain, curiosity-driven, and outcome-focused — it turns web/app analytics from an intimidating numbers game into a "see why" invitation. The homepage frames the product as "가장 쉬운 CX데이터 분석" ("the easiest CX-data analysis"), and social proof is stated as a discovery, not a boast: "9,000개 기업이 발견한 것" ("what 9,000 companies discovered"). CTAs are conversational and question-led ("왜인지 알아보기" / "find out why", "직접 물어보기" / "ask directly"), positioning the product as a way to interrogate user behavior rather than a dashboard to admire.

Voice samples (verbatim from live surfaces):

• "가장 쉬운 CX데이터 분석" — homepage title/positioning (easiest CX-data analysis). (verified live 2026-07-02)
• "9,000개 기업이 발견한 것" — hero glass CTA (social proof as discovery). (verified live 2026-07-02)
• "사용자의 의도와 요구, 과정 그리고 실패를 한눈에 확인할 수 있습니다." — UX Heatmap feature H2 (see intent, needs, journey, failure at a glance). (verified live 2026-07-02)

Forbidden register: intimidating statistics-speak with no plain-language framing, hype superlatives, fear-based conversion pressure, jargon left undecoded.

11. Brand Narrative

Beusable (뷰저블) is the CX-data analytics product of 4Grit (포그리트), a Korean analytics company, and its core promise is to make understanding user behavior "the easiest" it can be. Where legacy web analytics reduces behavior to tables of numbers, Beusable's founding idea is visual: heatmaps, journey maps, funnels, and session analysis that let a team see where users hesitate, scroll, click, and drop off. The product's own framing — "숫자 대신 히트맵" (heatmaps instead of numbers) — is the whole thesis in four words.

The company states broad reach on its homepage — "9,000개 기업이 발견한 것" (what 9,000 companies discovered) — positioning Beusable as a widely-adopted Korean CX-analytics platform rather than a niche tool. Its product surface spans UX Heatmaps, RealTime Heatmap, Path Plot, Reporting & User Analytics, A/B Testing, Funnels, and Session Report, and the current site shows a clear move into AI: "대화형 BI" (conversational BI), "생성형 GEO" (generative GEO), and "맞춤형 AI" (custom AI) now sit alongside the classic heatmap features.

What Beusable rejects, visible in its design: the cold, table-heavy chrome of traditional analytics suites and the intimidation that keeps non-analysts away. What it embraces: a cinematic dark stage that puts visualizations center-frame, a single decisive rose action color, curiosity-led copy that asks "왜인지 알아보기" (find out why), and heatmap-warm data hues that make the data itself feel legible and human.

(Company/parent facts — Beusable is a product of 4Grit / 포그리트 — are drawn from the brand's own site and company page; specific figures such as "9,000 companies" are the brand's own homepage claim, quoted as stated, not independently audited.)

12. Principles

1. See it, don't tabulate it. Behavior is shown as heatmaps and journeys, not rows of numbers. UI implication: lead with visualization surfaces; keep raw tables secondary and on demand.
2. One decisive action. The rose (#ec0047) means "do this" and nothing else does. UI implication: reserve the saturated rose exclusively for the primary CTA; use cyan for highlights so the next step is never ambiguous.
3. Curiosity over intimidation. Copy asks "왜인지 알아보기" rather than presenting a wall of metrics. UI implication: frame entry points as questions and discoveries, decode analytics jargon into plain benefit.
4. Stage the product. The dark hero band exists to frame the visualizations. UI implication: use #181818 as a cinematic stage for product imagery; keep reading content on white.
5. Flat and fast. Clarity beats decorative depth. UI implication: separate with band contrast and #ebebeb hairlines; reserve shadow for the one floating control.

13. Personas

Personas below are fictional archetypes informed by publicly observable Beusable user segments (Korean growth marketers, UX researchers, e-commerce product owners), not individual people.

정민지, 30, 서울. A growth marketer at a mid-size e-commerce brand. Uses heatmaps and funnels to find where checkout drop-off happens before an A/B test. Chose Beusable because "왜인지 알아보기" matched exactly how she thinks — she wants the why, not just the conversion number.

한도윤, 34, 판교. A UX researcher who reads Path Plot and Session Report to validate design changes. Values that the product shows intent and failure "한눈에" (at a glance) instead of making him assemble it from raw event tables.

오세라, 41, 부산. A product owner at a services company evaluating the new conversational BI and custom-AI features. Wants analytics her non-analyst teammates can actually read; trusts the plain, curiosity-led tone over enterprise dashboard jargon.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and data-forward. Heatmap and journey visualizations paint in progressively at motion-slow / ease-enter so the reveal reads as data arriving, not decoration. Pill CTAs respond to press with a subtle scale/opacity shift and hover shifts rose #ec0047 → #ff1553. The floating back control eases in with its soft shadow. No bounce or spring — an analytics product signals steadiness and precision. Under prefers-reduced-motion: reduce, all transitions collapse to instant and visualizations render in their final state immediately; the product stays fully functional.