Design System Inspiration of Datarize

Overview

Visual Theme & Atmosphere

Datarize is an e-commerce growth and CRM platform: its official site presents AI that turns customer behavior into analysis, campaign action, and revenue growth. The current public story is broader than a single campaign tool—Audience, on-site banners, email, analytics, and metrics sit in its product navigation—while its guide describes the operational sequence from store data collection to campaign execution. The company frames that as “Autonomous Marketing Intelligence,” a current international-facing expression alongside its Korean marketing surfaces.

On the supplied July desktop capture, the Korean marketing home, blog route, and pricing page are restrained rather than dashboard-like: white is the canvas (#ffffff), with near-black #191919 carrying most visible text and a smaller #111111 action treatment. The most repeatable contrast is structural, not decorative—white and near-black CTA pills, an outlined alternate action, and a pale #f2f5fa pricing tab group. A medium blue #007aff appears as a home-page text-link accent, while #5d6875 is the most frequently observed supporting copy color. This document intentionally does not carry forward prior lime, yellow, royal-blue, or large-card claims: they were not observed in the July evidence bundle.

The recognizable typography is a Korean marketing stack built from loaded Pretendard faces: Bold sets a 64px hero, SemiBold sets 44px section headings, and Regular/Medium handle body and navigation. The evidence supports this for the captured marketing surfaces only. The authenticated console, linked GitBook documentation chrome, and any separate product UI system were not captured, so this is not a statement that one visual system governs every Datarize surface.

Key Characteristics:

• White canvas (#ffffff) with near-black #191919 marketing text
• #111111 and #191919 pill CTAs; the home outline CTA uses #111111 ink and the pricing copy #191919
• Loaded Pretendard variants on the captured marketing surfaces
• #007aff home-page text-link accent and #5d6875 supporting copy
• 8px / 10px small corners and 50px / 100px / 999px pill geometry
• Flat observed controls (box-shadow: none); no general elevation scale is claimed

Primary tasks

• Register a store and complete installation to start collecting data.
• Create audiences from customer behavior data.
• Run an on-site banner or email campaign.
• Monitor analytics and metrics after campaigns run.
• Compare pricing by switching between the pricing tabs.

Brand Narrative

Datarize describes itself as an e-commerce growth platform built around behavior data. Its About page says the company began from the question of how many e-commerce brands make full use of their data, and explains its approach as following signals such as clicks, scrolls, and pauses across a customer journey. The official guide grounds that story operationally: stores collect data, profile behavior, run on-site or message campaigns, and monitor analytics.

The current public evolution is visible in Datarize’s English-facing language, “Autonomous Marketing Intelligence,” and in its product navigation for Audience, on-site banners, emails, metrics, and analytics. This reference records the Korean public marketing styling separately from that narrative and does not infer the styling of the authenticated console from either the English marketing pages or the GitBook guide.

Principles

1. Turn behavior into action. The official home and guide connect customer signals to campaigns and analytics. UI implication: make the transition from an observed signal to the next action legible.
2. Keep the growth loop operational. Audience, on-site campaign, message campaign, and analytics are explicitly documented product areas. UI implication: distinguish these jobs rather than collapsing them into a generic “AI dashboard.”
3. Make the marketing surface decisive. Captured marketing CTAs use a small set of dark-pill and outline treatments. UI implication: avoid competing action colors on a page modeled from this evidence.

Personas

The official sources identify stakeholder groups but do not publish named user personas. The following non-fictional roles are scope labels, not invented people or research findings:

• E-commerce store operator: registers a store, completes installation, and receives data/campaign capabilities through Datarize’s documented onboarding.
• CRM or growth marketer: creates audiences and operates on-site or message campaigns using customer-behavior data.
• Platform administrator: manages store, user, payment, and integration settings documented in the guide.

Colors

Observed Marketing Colors

• Canvas (#ffffff): Captured page and selected-tab background.
• Marketing Ink (#191919): Dominant text/border value across the three captured surfaces; also the fill of a shared 50px CTA link.
• Action Ink (#111111): Captured 50px home CTA fill and the text/border of the home outline CTA link. The pricing outline CTA uses #191919 instead (corrected 2026-09-29).
• Supporting Slate (#5d6875): Frequently captured supporting text, including pricing content.
• Text-link Blue (#007aff): Home-only text-link accent in the supplied bundle.
• Pale Surface (#f2f5fa): Observed as the pricing tab-group background; it is not promoted to a general card token.
• Hairline (#e5e7eb): Observed on home testimonial-navigation buttons.

Boundary

#f9ff91, #f7ff91, #ffef42, and #466cf3 appeared in the previous reference but were not present in the July raw color observations. They are therefore absent from the canonical palette and tokens rather than treated as a current brand fact.

Two link colours stay at component level. #00a3eb is a Framer text-preset link colour captured on all three surfaces (five links, §4); it is not promoted to a palette role. #0000ee, the second most frequent text colour in the census (103 occurrences), is the browser’s default link colour computed on Framer wrapper anchors whose visible text sits in child elements with their own colours; it is not a Datarize colour.

Typography

Evidence classes

• Live marketing-surface use: the July bundle records loaded Pretendard Regular (177 visible uses), Pretendard Medium (85), Pretendard SemiBold (58), Pretendard Variable (13, with 92 jsDelivr source URLs), and Pretendard Bold (3). These faces support the named typography entries below.
• Live but not promoted: the literal computed family Pretendard occurs without a matching loaded face (21 uses), and Inter has one loaded visible use without a source URL. Neither becomes a general Datarize family token.
• Declared-only: Fragment Mono, Inter Placeholder, and several Pretendard placeholder/weight declarations have zero visible use. They are not design tokens.
• Official distributed font asset and license: Pretendard’s own repository documents web distribution and SIL Open Font License 1.1. This corroborates the captured webfont source and licensing boundary; it is not an official Datarize typography guideline.
• Product/console boundary: Datarize’s terms identify console.datarize.ai as the service page, but it was not captured. No font claim here is generalized to that product surface.

Captured hierarchy

Layout

The current evidence is desktop-only (1440×900) and does not justify a responsive grid specification. The repeatable layout signals are a shared 40px header control, 50px/100px CTA pills, and a compact pricing tablist (46px outer height, 5px padding) that houses 34px tabs. The extracted spacing clusters include 6, 8, 10, 14, 16, 20, 24, and 32px; they are recorded as observed values, not a published spacing scale.

Responsive Behavior

No responsive behavior is specified from this evidence. The capture viewport is 1440×900 only; mobile breakpoints, stacking rules, and touch-target adaptations require a separate observed source.

Elevation & Depth

Captured component styles use box-shadow: none. Controls separate through ink/white contrast, an outline border, or a pale tablist surface. The bundle does not establish a site-wide card or elevation system.

Values kept in prose

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

• shadow.none: none

Motion & Easing

No motion durations, easing curves, or reduced-motion behavior were measured in the supplied evidence or found in an official public design-system source. Motion is intentionally unspecified.

Components

Marketing CTA links

Action ink pill

• Background: #111111
• Text: #ffffff
• Radius: 50px
• Padding: 14px 24px
• Font: 16px / 600 / Pretendard Variable
• Height: 47px
• Use: Homepage anchor; evidence home::[data-omd-capture="11"] on the marketing home.

Shared ink pill

• Background: #191919
• Text: #ffffff
• Radius: 50px
• Padding: 14px 24px
• Font: 15px / 600 / Pretendard Variable
• Height: 46px
• Use: Shared marketing anchor; evidence home::[data-omd-capture="10"], surface-2::[data-omd-capture="10"], and surface-3::[data-omd-capture="10"]. The pricing body repeats the fill at 16px / 47px (surface-3::[data-omd-capture="18"]).

Outline pill

• Background: transparent
• Text: #111111 on home; #191919 on pricing
• Border: 1px #111111 on home; 1px #191919 on pricing
• Radius: 100px
• Padding: 14px 24px
• Font: 16px / 600 / Pretendard Variable
• Height: 49px
• Use: Marketing anchor; evidence home::[data-omd-capture="12"] and surface-3::[data-omd-capture="16"]. Corrected 2026-09-29: the July text gave both copies #111111; the pricing copy computes rgb(25, 25, 25).

Header and navigation controls

Locale control

• Background: transparent
• Text: #191919
• Border: 1px, computed rgba(0, 0, 0, 0), so no visible frame
• Radius: 8px
• Padding: 10px 12px
• Font: 15px / 500 / Pretendard Variable
• Height: 40px
• Use: Shared header button; evidence home::[data-omd-capture="8"], also captured on blog and pricing.

Testimonial navigation button

• Background: transparent
• Text: none visible; the button has no text node (it computes #000000)
• Border: 1px #e5e7eb
• Radius: 8px
• Padding: 1px 6px
• Height: 48px
• Use: Unlabeled home navigation button; evidence home::[data-omd-capture="18"] and home::[data-omd-capture="19"].

Pricing selection

Pricing tab — rest / selected

• Background: transparent at rest; #ffffff when selected
• Text: #191919
• Radius: 999px
• Padding: 8px 16px
• Font: 12px / 400 / Pretendard
• Height: 34px
• Use: Pricing tab; rest evidence surface-3::[data-omd-capture="12"] (aria-selected="false"), selected evidence surface-3::[data-omd-capture="11"] (aria-selected="true").
• Selected: after the collector clicked surface-3::[data-omd-capture="12"] and "13", each was re-captured as tab-0-0 / tab-1-0 with background #ffffff and aria-selected="true". Corrected 2026-09-29: the July frontmatter recorded the selected tab’s #ffffff as the component’s rest background; it now records transparent at rest and #ffffff as selected.

Tab group

• Background: #f2f5fa
• Border: 1px rgba(25, 25, 25, 0.1)
• Radius: 999px
• Padding: 5px
• Height: 46px
• Use: Pricing tablist; evidence surface-3::div[role="tablist"].

Form boundary

The supplied blog capture records an email input and a form-error interaction, but captures no distinct error style or message. No error variant is specified.

Blog newsletter form

Email input — observed default

• Background: transparent
• Text: #000000
• Border: none (0px)
• Size: 295px × 20px
• Font: 15px / 400 / 18px Pretendard Regular
• Use: surface-2::[data-omd-capture="15"]. The collector’s form-error interaction re-captured the same input as form-error-0-0 with identical computed values, so no error style or message is specified.

Submit button — observed default

• Background: #191919
• Text: #ffffff, 15px / 600 / 18px Pretendard SemiBold, on the child p that carries the label; the button element itself computes #000000
• Radius: 10px
• Size: 141px × 44px
• Use: surface-2::[data-omd-capture="16"].

Links and footer

Text link — observed default

• Text: #007aff
• Font: 15px / 400 / 24px Pretendard
• Height: 24px
• Use: six home links, home::[data-omd-capture="14"] to "17", "21" and "22".

Preset text link — observed default

• Text: #00a3eb
• Font: 16px / 400 / 24px Pretendard Regular
• Height: 19px
• Use: Framer text preset (framer-styles-preset-1pfuu6) at home::[data-omd-capture="23"]; five links across home, blog and pricing. The blog copy (surface-2::[data-omd-capture="11"]) computes Inter at 16px / 28.8px, the one visible Inter use in the font census.

Footer social button — observed default

• Background: rgba(255, 255, 255, 0.1)
• Radius: 1000px
• Padding: 6px
• Size: 36px × 36px
• Use: four icon links per surface on all three surfaces, home::[data-omd-capture="53"] to "56"; icon only, so no label colour is claimed.

All components here are specified at rest; the pricing tab adds its measured selected state. The bundle holds no hover, pressed or focus frame on any of its three surfaces, so no pointer state is specified, and this collector’s focus frames would not be keyboard focus-visible measurements in any case.

States

Only two public interaction facts were captured: the blog route emitted a form-error event for its email form (the re-captured input computes the same values as at rest), and pricing tabs expose transparent rest versus #ffffff selected states. The bundle holds no hover, pressed or focus frame on any surface. No visible error copy, loading treatment, success confirmation, disabled control, toast, or product-console state was captured. Those unobserved states are intentionally unspecified.

Live state probe, 2026-10-16 (), action-ink-pill: pressed — no visible change (measured 2026-10-16).

Do’s and Don’ts

Do

• Use the captured Pretendard hierarchy when recreating the observed marketing surface.
• Keep a single dark pill or outline pill as the dominant CTA treatment.
• Use white, #191919, and #111111 as the primary structural contrast.
• Treat #007aff as a home-page text-link accent, not a universal action color.
• Preserve the selected/unselected pricing-tab contrast only where that tab interaction is present.

Don’t

• Reintroduce the previous lime/yellow/royal-blue palette as a current Datarize token without new live evidence.
• Present the captured marketing components as the authenticated console or GitBook documentation system.
• Add a pricing tab state beyond the transparent default and white selected state that were observed.
• Invent an email-error visual treatment from the captured form-error event.

Voice & Tone

The official English home leads with “Behavior Captured. Growth Automated.” and describes a flow from data to insight to action. The About page states a mission of empowering e-commerce growth with autonomous marketing intelligence. The resulting public voice is direct, operational, and outcome-oriented: behavior and data are the inputs; campaign action and growth are the intended outcomes.

Do

• Lead with a concrete behavior, campaign, or growth outcome.
• Explain the connection from data to action in plain operator language.

Don’t

• Attribute unverified product promises, metrics, or customer stories to Datarize.
• Treat external marketing copy as console UI microcopy.

Agent Prompt Guide

For the captured marketing surface, start with a white canvas and #191919 type. Use loaded Pretendard hierarchy—64px / 700 marketing hero, 44px / 600 section heading, 16px / 400 body—and choose one 50px dark CTA pill or one 100px outline CTA. A pricing selector may use a #f2f5fa 999px tablist with a white selected 34px tab. Do not add lime blobs, generic dashboard cards, product-console components, or undocumented interaction states.

Governance

Known Gaps

• Contrast, pricing-tab. Text #191919 on #00000000 measures 1.19:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, outline-pill. Text #111111 on #00000000 measures 1.11:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, locale-control. Text #191919 on #00000000 measures 1.19:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, newsletter-email-input. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.