KYC Perpetual Customer Behavior Monitoring at ING Bank
Read case →
Internal · Pending approval
DataWalk Design System v1.0
Brand foundations & components, pending Łukasz approval. Synced to the Tubik Figma design system (color roles + typography scale).
00 Brand essence
DataWalk's identity: sovereign infrastructure for contextual intelligence. Authority without aggression. Confidence without showboating.
Logo
Voice anchors
From Siloed Data to Contextual Intelligence. At speed.
Composite AI for Investigative Analytics.
Design principles
01
Clarity over decoration
If a visual element does not encode information or guide action, remove it. Whitespace is not empty; it is structural.
02
Hierarchy by reduction
One primary action per view. Secondary actions are visibly secondary. No competing CTAs in the same section.
03
Sovereign tone
Confident, not aggressive. Technical, not jargon-laden. Authority earned through specificity, not volume.
04
Performance is design
Lottie over MP4, SVG over PNG, system fonts when sensible. PageSpeed Insights > 90 is a design constraint, not an afterthought.
01 Color
Seven brand roles, each with a single purpose. Accent and supportive colors come with a paired highlight variant for hover, soft emphasis, and supporting tones, with no full 50→900 ramp needed.
Brand roles
Seven roles drive everything. Stick to these for brand-aligned surfaces. Semantic states (info / success / warning / danger) live below for functional UI signaling.
Semantic tokens
Functional states across UI. Used in alerts, badges, form validation, status indicators. Independent of the brand role system.
Info
#62A5F9
Neutral status updates, links, helper hints. Same hue as Sky Blue.
Success
#15803D
Published, confirmed, validated. Never decorative, only state.
Warning
#C2410C
Pending review, approaching deadline, draft state.
Danger
#B91C1C
Errors, destructive actions, validation failures.
Do · Don't
Do
Book a demo
Solar Orange reserved for one primary CTA per view. Reads as a clear, singular action.
Don't
Subscribe
Learn more
Sign up
Three Solar Orange CTAs in one section. Hierarchy collapses: the user sees no priority.
02 Typography
Tubik typography scale: display → heading → subheading → body → metric → caption. Two weights only: Regular (400) and Medium (500). Bold (700) is intentionally absent; hierarchy comes from size and color, not weight.
Font family
Tubik recommends Saans (Displaay Type Foundry, paid license). License decision pending; Inter is the working fallback (near-geometric, system-available, similar metrics).
Inter (active)
--dw-font-body: 'Saans', system-ui, sans-serif
Saans (TBD)
/* license decision pending */
Type scale
Display + 5-step heading scale (H1→H5) + 2 subheadings + 3 body sizes + 2 metric sizes + caption. Sizes shown as Figma exports (px / line-height-px / weight).
From chaos to context.
Sovereign infrastructure.
Contextual intelligence.
Composite AI architecture.
Knowledge graph traversal.
Entity resolution at speed.
Why DataWalk
Why DataWalk
DataWalk transforms siloed enterprise data into contextual intelligence, enabling investigators, analysts and operators to act with clarity and speed.
Default body copy size. Used for the bulk of long-form content across the site.
Small body, secondary content: captions, meta, fine print under primary copy.
10×
$23M
Caption · footnote · metadata
Weights
Two weights only. Bold is intentionally absent; it competes with Solar Orange for visual urgency.
Regular 400
font-weight: 400
Medium 500
font-weight: 500
UI · Buttons · TBD
Button typography spec not yet exported from Tubik's Figma extras file. Will land when the components library is shared. Until then, see section 06 Buttons for current implementation specs.
03 Spacing & Layout
A 4px base scale, named in rem. Containers maxed at 1280px for reading comfort. Five breakpoints mirror Tailwind defaults, so every screen size has a known answer.
Spacing scale
Use Tailwind's spacing utilities. Never invent custom margins/paddings; every value should map to a scale step.
1
0.25rem
4px
2
0.5rem
8px
3
0.75rem
12px
4
1rem
16px
6
1.5rem
24px
8
2rem
32px
12
3rem
48px
16
4rem
64px
24
6rem
96px
Container widths
Use max-w-*
utilities. Default content max is max-w-6xl
(1152px) for reading comfort. Marketing pages use max-w-7xl
(1280px).
| Token | Width | Use for |
|---|---|---|
| max-w-2xl | 42rem / 672px | Prose, reading content, blog body |
| max-w-4xl | 56rem / 896px | Forms, narrow article layouts |
| max-w-6xl | 72rem / 1152px | Default content (sections, archive grids) |
| max-w-7xl | 80rem / 1280px | Marketing pages (hero, full-width sections) |
Breakpoints
Mirror Tailwind defaults. Mobile-first: base styles apply <640px, then layer breakpoints up.
| Token | Min-width | Device class |
|---|---|---|
| sm | 640px | Large phones, small tablets |
| md | 768px | Tablets portrait |
| lg | 1024px | Tablets landscape, small laptops |
| xl | 1280px | Standard desktops |
| 2xl | 1536px | Wide desktops, monitors |
05 Inputs
Form controls. Soft gray fill on rest, white background with orange ring on focus. Every input has an explicit label above. Modern minimal, and accessibility is not optional.
Text inputs
Default text inputs with label above, helper text below. Resting state: soft gray fill (#F5F4F2). Focus: white background with orange ring. Click any field to see the transition.
As it appears on official documents.
Include country code for international.
Required for verification.
Organization name is already registered.
System-assigned, cannot be changed.
Textarea · Select
Markdown supported. 2000 characters max.
Helps us tailor follow-up.
Checkbox · Radio
Input states
Five states. Focus uses orange ring (4px soft shadow), the same accent as Primary CTA, consistent across the system.
| State | Visual cue | Use |
|---|---|---|
| Default | Soft gray fill #F5F4F2, no border | Resting |
| Focus | White bg + 1px orange border + 4px orange shadow ring | Active editing |
| Filled | Midnight Indigo text on soft gray | User has entered value |
| Error | 1px Danger border + error helper text | Validation failed |
| Disabled | 50% opacity, cursor not-allowed | System-locked field |
06 Cards & Surfaces
Three card variants for three jobs: presenting content, navigating to content, and surfacing metrics. Resist inventing new ones; three is enough.
Default · Content card
For presenting self-contained content. Static, no interactive affordance.
Whitepaper
Composite AI: grounding LLMs in organizational ontology
How DataWalk reduces hallucination in enterprise LLM deployments by augmenting models with knowledge graph context. Architecture deep-dive.
Case study
European Federal Police: $23M annual savings in investigative ops
Reducing time-to-resolution by 10× across cross-border cases. Knowledge graph traversal at billions of edges. Production deployment lessons.
Interactive · Navigation card
For navigating to detail content. Hover state reveals affordance. Use as link, button, or anchor, never both static and clickable on same card.
Metric · KPI card
For surfacing numerical proof. Large value, supportive label. Optional delta indicator with semantic color.
Investigations resolved
10×
faster vs legacy tools
Annual savings
$23M
European Federal Police
Data sources unified
200+
Per typical deployment
Do · Don't
Do
Whitepaper
Single focused content block
One job per card. Clear hierarchy.
One purpose per card. Hierarchy reads top-to-bottom.
Don't
Whitepaper
Featured
New
Stuffed card with multiple actions
Read · Download · Share · Bookmark
Multiple badges + multiple actions = unclear what user should do first.
News / Case cards · color overlay
For news index pages, case-study galleries, resource thumbnails. Solid color overlay creates strong visual grouping when the underlying image is absent. Three variants ship: Sky Blue, Solar Orange, Midnight Indigo.
DataWalk recognized in Gartner Hype Cycle for Graph + AI
Read news →
Sovereign deployment patterns for regulated environments
Download PDF →
08 Patterns
Composite layouts. How Foundations + Building blocks + Components combine into real page sections. Use these as starting points for new layouts rather than inventing fresh ones.
Pattern · Hero (light)
Default homepage / solutions hero. Cream background, eyebrow + headline + sub + dual CTA. Visual zone on right for Lottie or SVG illustration.
Contextual Intelligence Platform
From siloed data to contextual intelligence. At speed.
DataWalk transforms heterogeneous enterprise data into a unified knowledge graph, enabling investigators, analysts and operators to act with clarity.
Lottie or SVG zone
Uses: 02 Typography (H1 + body), 06 Buttons (Primary lg + Ghost lg), 05 Iconography (xl size).
Pattern · Hero (dark · sovereign)
For /investors, technical pillar pages, and sections requiring "sovereign" tone. Midnight Indigo background, white typography, Powder Blue eyebrow.
Investor Relations
Composite AI for Investigative Analytics.
Sovereign infrastructure for institutions that turn data complexity into operational clarity. Built for regulated environments. Engineered for scale.
Uses: 01 Color (Midnight Indigo bg + Powder Blue eyebrow), 02 Typography (H1 white), 06 Buttons (Primary on-dark variant + custom light Ghost). WCAG: 14.8:1 body + 16.6:1 Primary CTA.
Pattern · Stats block
Customer results / KPI showcase. Section header + 3 metric cards. Real customer numbers, never placeholder.
Proof of impact
Outcomes from real deployments.
Investigations resolved
10×
faster vs legacy tools
Annual savings
$23M
European Federal Police
Data sources unified
200+
Per typical deployment
Uses: 02 Typography (H2 + eyebrow), 08 Cards (3× metric), 05 Iconography (sm trending-up).
Pattern · Feature grid
Capability showcase. Section header + 3 interactive cards. Each card = single capability with icon + name + body + CTA.
Platform capabilities
Engineered for sovereign analytics.
Three architectural pillars combine into a complete platform for institutional-grade investigative work.
Knowledge Graph & Traversal
Billions of edges, sub-second queries. Hybrid graph-relational engine.
Learn moreSingle State Architecture
One source of truth across heterogeneous data. Ontology-driven entity resolution.
Learn moreSovereign Deployment
On-premise, air-gapped, full data control. Built for regulated environments.
Learn moreUses: 02 Typography (H2 + body), 08 Cards (3× interactive), 05 Iconography (lg brand color).
Pattern · CTA banner
Pre-footer call-to-action. Dark surface, white typography, dual CTA. Use once per page maximum, before footer.
Uses: 01 Color (Midnight Indigo bg), 02 Typography (H2 white), 06 Buttons (Primary on-dark variant + light Ghost).
Pattern · Footer · four-column sitemap
Standard marketing footer: four columns, eyebrow-style column headers (Solar Orange uppercase), light text lists. Top edge marked with a dashed rule; the showroom's "schematic" motif carries here.
09 Frames & Wrappers
Corner brackets and dashed lines are signature DataWalk visual
elements. They evoke an "engineering blueprint" aesthetic that
matches our technical character. Three variants and three sizes
via a single .dw-frame primitive.
Variants
Three visual treatments. Pick by weight: solid corners for primary emphasis, dashed for secondary/quiet, bordered (corners + inner outline) when wrapping an image or schematic.
Simple corner brackets
Default · solid
For section markers, hero CTAs, "look here" emphasis.
Dashed corner brackets
Dashed · quiet
Softer treatment for secondary callouts. 40% opacity.
Corners + inner border
Bordered · schematic
For wrapping images, illustrations, schematics. Supportive-blue inner outline.
Sizes
Three sizes scale the corner bracket length and the wrapper padding proportionally.
sm
sm
8px corners, 1rem padding. Compact UI, table cells, chips.
md (default)
md (default)
12px corners, 1.5rem padding. Standard cards, CTAs, sections.
lg
lg
16px corners, 2.5rem padding. Hero modules, page-level wrappers.
Usage
Use frames to mark sections of interest, highlight hero CTAs, or denote design-schematic moments (e.g. illustrations, architecture diagrams, feature spotlights). Don't stack frames inside frames; the bracket motif becomes noise.
Do
Investor Day · Q4
One framed accent per section. Reads as "look here, specific moment".
Don't
News
Press
Events
Three frames in a row → bracket noise. Use chips or tags instead.
Markup
Top corners are pseudo-elements (no DOM). Bottom
corners need two empty <span>
children, which get absolutely-positioned inside the frame.
<div class="dw-frame">
<span class="dw-frame-corner-bl"></span>
<span class="dw-frame-corner-br"></span>
Your content here
</div>10 Page Header
Main top-of-page header. Logo + primary nav + "Ask AI" search + framed primary CTA. Present on every site page. Underline-only search keeps the visual surface quiet, so the framed CTA is the only loud element.
Preview
Static preview: links don't navigate and the search input is non-functional. Wiring to the real header partial is Phase 2.
Spec
- Background: Paper White (
#FCFAF9), flush with body. - Border-bottom: 1px solid Mist Gray (
#F4F2F1). - Padding: 1rem 2rem desktop, 0.75rem 1rem mobile.
- Logo: 20px mark + name (Medium weight).
- Primary nav: 4 entries, gap 1.5rem, ghost buttons with
▾chevron for dropdown-bearing items. - Search: single 1px underline (no border, no fill), 240px min-width, "Ask AI…" placeholder.
- CTA: Framed filled button (Midnight Indigo bg, Paper White text, corner brackets, arrow icon).
- Mobile: nav collapses to hamburger (Phase 2 wiring).
vs Section 09 Navigation
Section 09 covers in-page navigation (tabs, breadcrumbs, pagination). This section is the page-level header. Distinct concerns, distinct components.
11 Chatbot Widget
Floating chat trigger, sitting in the bottom-right corner of every page.
Reuses the .dw-frame primitive
(corner brackets) around a chat-bubble icon. On click, expands into a
sales-chat panel (Phase 2 wiring; see existing
.datawalk-sales in partials/sales-chat-bubble).
Preview
Shown in a bounded container so it doesn't
collide with the style-guide sidebar. In production: position: fixed; bottom: 24px; right: 24px.
Spec
- Trigger size: 64×64px (md) with 16px padding inside the brackets.
- Brackets: reuses
.dw-frame(solid variant, default size). - Icon: 28×28 chat-bubble outline + 3 dots (current Tabler-equivalent geometry).
- Color: Midnight Indigo on Paper White surfaces; inverts on dark hero (Phase 2: detect parent bg).
- Hover: 4% bg fill on the bracketed area, no transform.
- Position (production):
fixed; bottom: 24px; right: 24px; z-index: 60. - Wiring: existing
datawalk-salesJS (sales-chat-bubble.js) replaces orange bubble with this bracket-framed variant in Phase 2.
Reuses
Section 09 Frames: corner bracket pseudo-element pattern (.dw-frame-corner-bl + ::before/::after).
No duplicated CSS: same primitive, different content.
12 Showcase patterns
Composed Tubik patterns ready to lift into pages. Each pattern is built from primitives in earlier sections: no new tokens, just compositions.
Pattern A · Bracketed hero
Hero with corner brackets and a framed primary CTA. Used for marketing landing pages where one action dominates.
From Siloed Data to Contextual Intelligence
Sovereign infrastructure for institutions that turn data complexity into operational clarity.
Pattern B · KPI row · client outcomes
Three KPI cards with client attribution. The large metric (Tubik scale 70px) is the visual anchor; logo sits at the bottom like a signature.
$20M
in savings
Ally Financial Inc., a financial services company with the nation's largest all-digital bank, deployed DataWalk to unify investigative data.
ally
$5.7M
recovered
EUROPOL coordinated cross-border financial crime investigations on DataWalk's knowledge-graph engine.
EUROPOL
$23M
annual cost savings
ING Bank uses DataWalk for KYC perpetual customer behavior monitoring at scale.
ING
Pattern C · Dark stat callout
Recognition strip on Midnight Indigo. Three large stats anchor credibility. Apricot Glow eyebrow for contrast on dark.
Awards & Recognition
Recognized as a disruptor in the technology sector
Award-winning Graph + AI platform enabling faster, smarter investigations.
$40M
annual fraud losses prevented
10×
accelerated results
11
patents
13 FAQ
Bracketed accordion pattern. Native <details>/<summary>:
zero JS, full keyboard support, custom + /
− marker swap.
Why use DataWalk?
DataWalk transforms siloed enterprise data into contextual intelligence, enabling investigators, analysts and operators to act with clarity and speed. Sovereign-grade deployment, hybrid graph-relational engine, Composite AI grounded in your organizational ontology.
How does DataWalk compare to a traditional graph database?
A graph database stores edges; DataWalk reasons over them. Hybrid graph-relational architecture means you keep relational performance for structured workloads AND get knowledge-graph traversal for entity resolution, without re-platforming.
Is DataWalk deployable on-premise or air-gapped?
Yes. Sovereign deployment is a first-class concern: financial services, defense, intelligence, and law-enforcement customers run DataWalk in fully on-premise, air-gapped environments with no upstream calls.
What kind of data sources does DataWalk integrate with?
Structured (relational DBs, data warehouses, REST APIs) and unstructured (documents, logs, multimedia). Connectors land data into the unified ontology where entity resolution stitches identities across sources.
How does Composite AI fit in?
LLMs are grounded in the organizational ontology, so answers cite the graph, not the model. Reduces hallucination in regulated environments where every claim must trace to source.
Spec
- Markup:
<details>+<summary>: native disclosure, no JS. - Frame: reuses
.dw-frameprimitive (section 09), with corner brackets on every row. - Marker: custom
+/−via CSS pseudo-element, swaps on[open]state. - A11y: default
<summary>aria: the screen reader announces "expanded / collapsed" automatically. - First row open: demo convenience; production decides per page.
