Design System Inspiration of Datarize

1. Visual Theme & Atmosphere

Datarize (데이터라이즈) is a Korean e-commerce AI marketing-automation platform, and its site reads like a confident, product-led B2B SaaS that refuses to look like enterprise software. The canvas is pure white (#ffffff), broken up by cool-grey tinted panels (#f2f5fa) and a quieter alternate grey (#fafafa) on the pricing surface, so content sits in calm, airy bands. Text is set in near-black inks — a hero-weight #191919, a dark-section #181818, and an action-grade #111111 — never pure black for running copy, which keeps the page feeling engineered rather than harsh. The defining move is the brand's signature neon lime (#f9ff91): big soft chartreuse blobs float behind the hero like highlighter ink, and the same lime (#f7ff91) returns as small rounded status pills. A more saturated yellow (#ffef42) appears in the gradient blobs, and two blues — a punchy royal #466cf3 and an iOS-style #007aff — handle decorative icon fills and inline "learn more →" links respectively.

The typographic personality is unmistakably Korean-product: everything is Pretendard, the de-facto hangul UI font, run across three weights. Headlines hit hard — a 64px Pretendard Bold (700) hero, 44px SemiBold (600) section titles, and 22px (600) feature heads — while body and links drop to a quiet 15px / weight 400 in #46484d. Secondary copy steps down through #555555 to a faint #aeb2ba that Datarize uses deliberately for the inactive item in its feature carousels, so the active head reads in ink and the rest recede. This single-family, multi-weight discipline is the system's backbone: weight does the hierarchy work, not extra typefaces.

What distinguishes Datarize from its fintech-adjacent peers is restraint with depth paired with boldness in shape. Live inspection found box-shadow: none across the hero, nav, CTAs, and cards — separation comes entirely from flat tinted surfaces (#f2f5fa) and thin #e5e7eb hairlines, never elevation. Geometry, by contrast, leans all the way into the pill: the primary CTA is a near-black #111111 capsule at 50px radius, the outline CTA rounds to 100px, lime badges go to 999px, and only structural cards hold a calmer 14–16px corner. The result is a flat, fast, neon-accented marketing site that signals "data product, not legacy dashboard."

Key Characteristics:

• Neon lime (#f9ff91 / #f7ff91) as the signature accent — decorative blobs + rounded status pills
• Near-black action ink (#111111) for the primary CTA, distinct from heading inks #181818 / #191919
• Pretendard everywhere, three weights — 700 hero, 600 section, 400 body
• Pure-white canvas (#ffffff) segmented by cool-grey tints (#f2f5fa, #fafafa)
• Flat depth: box-shadow: none; #e5e7eb hairlines do the dividing
• Pill-forward geometry — 50px primary, 100px outline, 999px badges, 14–16px cards
• Faint grey (#aeb2ba) reserved for inactive carousel heads; body ink steps #46484d → #555555
• Secondary accents: royal blue #466cf3 (icon fills), iOS blue #007aff (inline text links), saturated yellow #ffef42 (gradient blobs); pure black #000000 only as label text on lime

2. Color Palette & Roles

Signature & Accent

• Datarize Lime (#f9ff91): The brand signature — soft neon chartreuse used for the large decorative hero blobs and as the highlight identity color.
• Lime Alt (#f7ff91): A near-identical lime used on rounded status pills ("매월 업데이트") and secondary blobs.
• Saturated Yellow (#ffef42): A punchier yellow that appears inside the gradient decorative circles for warmth and depth.
• Royal Blue (#466cf3): Secondary accent for small icon fills and decorative blocks.
• Link Blue (#007aff): iOS-style blue reserved for inline "→ 알아보기" text links.

Ink & Neutral

• Heading Ink (#191919): The hero H1 and several H2 titles — a near-black with a hair of warmth.
• Dark Ink (#181818): Dark section backgrounds, the inline info chip, and blog headings.
• Action Ink (#111111): The primary CTA fill and active feature-head text — the darkest functional ink.
• Pure Black (#000000): Used narrowly as label text on the lime status pills for maximum contrast.

Text Hierarchy

• Body Slate (#46484d): Standard body copy and descriptions.
• Muted Slate (#555555): Secondary text and captions.
• Faint Blue-Grey (#aeb2ba): Inactive feature-carousel heads, placeholders, lowest-emphasis labels.

Surface & Border

• Pure White (#ffffff): Page background, white cards, and text on dark/lime fills.
• Surface Grey (#f2f5fa): The workhorse tinted card and stat-panel surface.
• Surface Alt (#fafafa): A lighter grey surface used on the pricing page.
• Hairline (#e5e7eb): Thin borders for nav buttons, dividers, and card outlines — the primary separation device in this shadowless system.

3. Typography Rules

Font Family

• Primary: Pretendard (Pretendard Variable / Bold / SemiBold / Regular) — the single family across the entire site, optimized for dense hangul legibility.

Hierarchy

Principles

• One family, weight-driven hierarchy: Pretendard carries everything; the jump from 700 hero to 600 section to 400 body is the primary signal — no second typeface.
• Bold display, quiet body: Headlines are large and heavy (64px / 700); paragraphs and links stay calm at 15px / 400.
• Faint as a state, not a color: #aeb2ba is used intentionally to dim inactive carousel heads so the active one reads in ink.
• Hangul-first sizing: Body sits at 15px — generous for hangul, dense enough for information-rich B2B copy.

4. Component Stylings

Buttons

Primary CTA (무료로 시작하기)

• Background: #111111
• Text: #ffffff
• Radius: 50px
• Padding: 14px 24px
• Font: 16px / 600 / Pretendard
• Height: 47px
• Use: Primary call-to-action — near-black pill, the single "do this" action

Outline CTA (도입 문의하기)

• Background: transparent
• Text: #111111
• Border: 1px solid #111111
• Radius: 100px
• Padding: 14px 24px
• Font: 16px / 600 / Pretendard
• Height: 49px
• Use: Secondary action paired beside the primary CTA

Dark Info Chip (데이터라이즈 AI 자세히 보기)

• Background: #181818
• Text: #ffffff
• Radius: 100px
• Padding: 12px 24px
• Height: 46px
• Use: Inline dark pill linking into deeper product/AI content

Language Switcher (한국어)

• Background: transparent
• Text: #111111
• Border: 1px solid transparent
• Radius: 8px
• Padding: 10px 12px
• Font: 15px / 500 / Pretendard
• Height: 40px
• Use: Header ghost button for locale switching

Testimonial Nav

• Background: transparent
• Border: 1px solid #e5e7eb
• Radius: 8px
• Use: Prev/next arrows on the testimonial carousel

Cards & Containers

Tinted Stat Card

• Background: #f2f5fa
• Text: #111111
• Radius: 14px
• Padding: 32px 56px
• Use: Stat panels ("3,845% 평균 ROAS") and feature blocks on white — no shadow

Pricing Card

• Background: #fafafa
• Radius: 16px
• Use: Plan cards on the pricing surface

Badges

Lime Status Pill (매월 업데이트)

• Background: #f7ff91
• Text: #000000
• Radius: 999px
• Padding: 6px 16px
• Font: 12px / 400 / Pretendard
• Height: 36px
• Use: Small neon status / freshness tag — the signature accent in pill form

Tabs

Feature Carousel Head

• Active: #111111 text
• Inactive: #aeb2ba text
• Font: 22px / 600 / Pretendard
• Use: Segmented feature heads ("질문 하나로 시작하는 CRM" active, others faint)

Inputs

Minimal Field (검색 / Email)

• Background: transparent
• Text: #000000
• Font: 15px / 400 / Pretendard Regular
• Use: Borderless search and newsletter email inputs on the blog — underline-free, relies on surrounding container

Navigation

• Background: #ffffff
• Text: #111111
• Font: 15px / Pretendard
• Use: Top horizontal nav (Why Datarize / AI / 제품 / 고객 사례 / 리소스 / 가격 정책 / 도입 문의)

---

Verified: 2026-06-26 (omd:add-reference CREATE — Tier 1 live inspect, 3 surfaces) Tier 1 sources: https://www.datarize.ai, https://www.datarize.ai/blog, https://www.datarize.ai/pricing Tier 2 sources: getdesign.md/datarize — no entry ("No design"); styles.refero.design/?q=datarize — no datarize result Conflicts unresolved: none (KR brand — Tier 2 catalogs do not cover Datarize; Tier 1 live DOM carries all values)

5. Layout Principles

Spacing System

• Base unit: ~from 6px → section 56px
• Scale: 6px, 10px, 12px, 14px, 16px, 24px, 32px, 56px
• Notable: CTA padding lands at 14px 24px; stat cards use a generous 32px 56px internal padding

Grid & Container

• Centered single-column hero with the 64px Pretendard Bold headline as the anchor, floated over soft lime blobs
• Feature sections use a segmented head pattern: one active head in ink, the rest faint, with a synced visual panel
• Stat/feature cards sit on #f2f5fa tinted surfaces with 14px radius
• Pricing page switches to a lighter #fafafa ground with 16px plan cards

Whitespace Philosophy

• Airy bands over density: full-width white and tinted-grey sections alternate to give the data-heavy product room to breathe.
• Flat segmentation: sections separate by background tint (#f2f5fa vs #ffffff) and #e5e7eb hairlines, not by shadow.
• Highlighter accents: the lime blobs act like marker strokes — emphasis through a signature color rather than boxes or rules.

Border Radius Scale

• Small (8px): ghost buttons, nav controls
• Medium (14px): stat / feature cards — the workhorse
• Large (16px): pricing cards, larger containers
• Pill (50px / 100px): primary and outline CTAs
• Full (999px): lime badges, fully-round pills

6. Depth & Elevation

Shadow Philosophy: Datarize is a near-shadowless system. Live inspection returned box-shadow: none across the hero, nav, CTAs, stat cards, and badges. Depth and grouping are communicated entirely through flat tinted surfaces (#f2f5fa) and thin #e5e7eb hairlines. Emphasis is delivered by color — the neon lime (#f9ff91) blobs and the near-black #111111 pill — never by elevation. This keeps the marketing UI feeling fast, modern, and product-native rather than like a legacy dashboard with stacked cards.

7. Do's and Don'ts

Do

• Use Pretendard for everything, leaning on weight (700 / 600 / 400) for hierarchy
• Reserve the neon lime (#f9ff91 / #f7ff91) for decorative blobs and small status pills — keep it the signature
• Use the near-black #111111 pill as the single primary action color
• Use near-black inks (#191919 / #181818 / #111111) for text instead of pure black for running copy
• Separate sections with flat tints (#f2f5fa, #fafafa) and #e5e7eb hairlines, not shadows
• Lean into pill geometry — 50px primary, 100px outline, 999px badges
• Dim inactive carousel heads to #aeb2ba so the active head reads in ink
• Keep #007aff for inline "→ 알아보기" text links, distinct from the royal #466cf3 icon blue

Don't

• Use drop shadows for elevation — Datarize is a flat, shadow-free system
• Spread the lime across large fills or many elements — it works as an accent/blob, not a body color
• Use pure black (#000000) for paragraphs — reserve it for label text on lime
• Set the primary CTA in any color but the near-black #111111 pill
• Introduce a second display typeface — Pretendard carries all weights
• Use sharp/square corners on CTAs or badges — interactive chrome is pill-shaped
• Mix the two blues randomly — #466cf3 is for icon fills, #007aff is for inline links
• Add positive emphasis with weight under 600 on headlines — display is always bold

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA at ~47px height, full pill — an unmistakable target
• Outline CTA at ~49px height with 14px 24px padding
• Language switcher at 40px height; testimonial nav arrows at comfortable hit area

Collapsing Strategy

• Hero: 64px Pretendard Bold headline scales down on mobile, weight 700 maintained
• Feature carousel: segmented heads stack; active/inactive ink contrast preserved
• Stat/feature cards: multi-column → stacked single column
• Tinted/white alternating bands maintain full-width treatment

Image Behavior

• Product screenshots and the lime decorative blobs carry no shadow at any size, consistent with the flat system
• Cards hold 14–16px radius across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Signature accent: Datarize Lime (#f9ff91), pill lime (#f7ff91)
• Saturated yellow blob: (#ffef42)
• Primary CTA: Action Ink (#111111)
• Heading text: Heading Ink (#191919) / Dark Ink (#181818)
• Body text: Body Slate (#46484d); secondary (#555555); faint (#aeb2ba)
• Background: Pure White (#ffffff); tinted (#f2f5fa), alt (#fafafa)
• Hairline: (#e5e7eb)
• Accents: royal blue (#466cf3), link blue (#007aff); pure black label-on-lime (#000000)

Example Component Prompts

• "Create a hero on white background with two or three soft #f9ff91 lime circles floating behind. Headline at 64px Pretendard Bold weight 700, color #191919. A near-black pill CTA: #111111 background, white text, 50px radius, 14px 24px padding, 16px / 600 — '무료로 시작하기'. Beside it an outline pill: transparent, #111111 text, 1px solid #111111 border, 100px radius."
• "Design a stat card: #f2f5fa background, 14px radius, 32px 56px padding, no shadow. Big number in #111111, label in #46484d 15px Pretendard."
• "Build a lime status pill: #f7ff91 background, #000000 text, 999px radius, 6px 16px padding, 12px Pretendard — '매월 업데이트'."
• "Create a feature carousel: active head 22px / 600 in #111111, inactive heads in #aeb2ba; inline link '오디언스 알아보기 →' in #007aff 15px."

Iteration Guide

1. Pretendard only; hierarchy via weight (700 / 600 / 400)
2. Lime (#f9ff91) is a signature accent/blob — never a body fill
3. The #111111 pill is the single primary action
4. No shadows — separate with #f2f5fa tint and #e5e7eb hairlines
5. Pill geometry throughout — 50px CTA, 100px outline, 999px badges, 14–16px cards
6. Inactive carousel heads go faint #aeb2ba; body ink is #46484d
7. Keep the two blues in their lanes: #466cf3 icon fills, #007aff inline links

---

10. Voice & Tone

Datarize's voice is clear, outcome-focused, and quietly expert — a data partner that turns the messy work of e-commerce marketing into something a busy shop owner can act on. The hero line "모든 행동이 매출로 이어지는 AI 마케팅 플랫폼" ("An AI marketing platform where every action leads to revenue") sets the register: benefit-first, revenue-anchored, never hype. Copy speaks to operators who care about ROAS and conversion, decoding CRM and targeting jargon into plain Korean rather than hiding behind it.

Voice samples (verbatim from live surfaces):

• "모든 행동이 매출로 이어지는 AI 마케팅 플랫폼" — hero headline (outcome-framed). (verified live 2026-06-26)
• "900+ 고객사가 선택한 데이터라이즈" — social-proof section head. (verified live 2026-06-26)
• "데이터라이즈 | 데이터 기반 이커머스 AI 마케팅 자동화" — homepage title meta (category positioning). (verified live 2026-06-26)

Forbidden register: vague hype without a number, fear-based urgency, undefined marketing jargon left unexplained, exclamation-heavy sales pitches.

11. Brand Narrative

Datarize (데이터라이즈) is a Korean B2B SaaS built around a single conviction: that an online store's every customer action — a search, a click, a hovered product — should compound into revenue rather than evaporate into an analytics dashboard nobody reads. The product positions itself as "데이터 기반 이커머스 AI 마케팅 자동화" (data-driven e-commerce AI marketing automation), folding CRM, audience targeting, campaign execution, on-site search/recommendation widgets, and analysis into one place so a lean marketing team — or an AI agent acting for them — can run the whole loop.

The company's stated proof points are operator-grade and specific: a homepage social-proof line of "900+ 고객사" (900+ customer companies) and campaign results quoted in hard ROAS multiples ("3,845% 평균 ROAS"). That numeric posture is the narrative — Datarize sells outcomes a merchant can measure, not a rebrand of "growth."

What Datarize refuses, visible in its design: the heavy, intimidating chrome of legacy enterprise analytics (no shadow-stacked card walls, no dense corporate blue) and the dark-pattern urgency of performance-marketing hype. What it embraces: a flat, fast, white-and-lime interface; one near-black action pill; bold Pretendard headlines that state the benefit plainly; and a highlighter-lime accent that makes a data product feel approachable.

12. Principles

1. Every action should lead to revenue. The product's thesis is that customer behavior is an asset. UI implication: surface the path from a behavior to a campaign to a measurable result; keep stat cards (ROAS, conversion) prominent and legible.
2. Decode, don't intimidate. CRM, targeting, and DSR-grade jargon are turned into plain, tappable features. UI implication: label features by outcome ("실행으로 이어지는 분석"), not by internal system name.
3. One action, one color. The near-black #111111 pill means "do this." UI implication: reserve the primary pill for the single next step so the CTA is never ambiguous.
4. Flat and fast. Product-native clarity beats decorative depth. UI implication: no shadows; separate with #f2f5fa tint and #e5e7eb hairlines; keep the page quick to scan.
5. Accent, don't flood. The lime is a highlighter, not a wall. UI implication: use #f9ff91 for blobs and small pills only; let white and ink carry the structure.

13. Personas

Personas below are fictional archetypes informed by publicly observable Datarize user segments (Korean e-commerce operators, growth marketers, agency teams), not individual people.

김도현, 33, 서울. Growth marketer at a mid-size D2C fashion brand. Lives in ROAS and conversion numbers; chose Datarize because the stat cards let him show his founder a measurable result in one screen. Distrusts tools that promise "growth" without a number.

이서연, 29, 경기. Solo operator running a Cafe24 shop. Has no data team, so she relies on Datarize's AI to run targeting and campaigns for her. Values that the features are labeled by outcome and that the UI doesn't feel like enterprise analytics.

박준영, 41, 서울. Performance lead at a small agency managing several e-commerce clients. Uses Datarize to unify CRM, audiences, and on-site widgets across accounts. Appreciates the calm, flat interface that doesn't pressure or overwhelm his junior marketers.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and quiet — consistent with the flat, fast aesthetic. The lime hero blobs drift slowly as ambient atmosphere; feature carousel heads cross-fade between active ink and faint #aeb2ba at motion-standard / ease-standard; pills respond to press with a subtle scale/opacity shift. No bounce or spring — a data product signals steadiness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the blobs freeze; the product stays fully functional.