Design System Inspiration of Datarize

1. 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; #111111 also appears as the outlined CTA ink
• 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

2. Color Palette & Roles

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 outline CTA links.
• 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.

3. Typography Rules

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

4. Component Stylings

Marketing CTA links

Action ink pill

• Background: #111111
• Text: #ffffff
• Border: 0px solid #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
• Border: 0px solid #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"].

Outline pill

• Background: transparent
• Text: #111111
• Border: 1px solid #111111
• 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"].

Header and navigation controls

Locale control

• Background: transparent
• Text: #191919
• Border: 1px solid transparent
• 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: #000000
• Border: 1px solid #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

• Background: #ffffff
• Text: #191919
• Radius: 999px
• Padding: 8px 16px
• Font: 12px / 400 / Pretendard
• Height: 34px
• Use: Selected pricing tab; evidence surface-3::[data-omd-capture="11"], aria-selected="true".
• Selected: The two other captured tabs were transparent before interaction and became #ffffff after the recorded tab interactions; evidence surface-3::[data-omd-capture="12"] / tab-0-0 and surface-3::[data-omd-capture="13"] / tab-1-0.

Tab group

• Background: #f2f5fa
• Border: 1px solid 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. Its visible field is transparent, borderless, #000000, 15px / 400 Pretendard Regular (surface-2::[data-omd-capture="15"]). No error variant is specified.

---

Verified: 2026-07-13 Tier 1 sources: https://www.datarize.ai/ (captured Korean marketing home), https://www.datarize.ai/blog/hidden_product (captured brand blog route), https://www.datarize.ai/pricing (captured pricing surface); https://www.datarize.ai/en/, https://www.datarize.ai/en/about, https://policy.datarize.ai/en/terms, https://datarize.gitbook.io/docs/guide-en (official context only) Tier 2 sources: https://getdesign.md/datarize (attempted; no accessible entry evidence), https://styles.refero.design/?q=datarize (attempted; no accessible result evidence) Conflicts unresolved: none

5. Layout Principles

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.

6. Depth & Elevation

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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. 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.

13. 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.

14. States

Only two public interaction facts were captured: the blog route emitted a form-error event for its email form, and pricing tabs expose default versus selected states. No visible error copy, loading treatment, success confirmation, disabled control, toast, or product-console state was captured. Those unobserved states are intentionally unspecified.

15. 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.