POLARIS Design System

OSINT Due Diligence Knowledge Graph Platform
v1.0 — April 2026

Contents

1. Design Principles 2. Color Palette 3. Graph Node Colors 4. Risk & Status 5. Typography 6. Spacing & Layout 7. Shadows & Elevation 8. Buttons 9. Form Controls 10. Badges & Tags 11. Data Tables 12. Tab Manager 13. Navigation 14. Cards 15. Risk Indicators 16. App Shell Layout

1. Design Principles

Derived from competitor analysis (Sayari Graph, Kharon) and enterprise user needs.

PrincipleRationaleImplementation
Light & CleanEnterprise users work 8+ hour sessions; reduces eye fatigueWhite cards on #F8F9FA background; minimal color; no dark mode initially
Data DenseAnalysts need maximum information per screen13px base font; compact 8px row padding; dense table defaults
Tab-Centric NavigationAnalysts investigate multiple entities simultaneously (like Sayari)Browser-style tab bar at top; entity-type icons; close/pin per tab
Conservative InteractionGovernment/enterprise users expect familiar, predictable UIStandard form controls; no animations beyond 150ms transitions; explicit actions
Progressive DisclosureComplex data but not all needed at onceExpandable sections; "Show more" patterns; sidebar panels on demand
Bilingual-ReadyEN/FR required; CN display for entity namesFlexible layouts; no hardcoded widths on labels; RTL-safe spacing

2. Color Palette

Based on the Figma palette. Neutral-heavy with rose brand accent. Minimal color usage — let the data speak.

General

White
#FFFFFF
Black
#000000

Neutral Scale

50
#F8F9FA
100
#F3F4F6
200
#E5E7EB
300
#D1D5DB
400
#9CA3AF
500
#6B7280
600
#4B5563
700
#374151
800
#1F2937
900
#111827

Rose / Brand Primary

50
#FDF2F4
100
#F9D0D9
200
#C4466E
300 ★ Primary
#900C3E
400 Dark
#79153B

Gradients (accent — sparingly)

Gradient 1
Forest
Gradient 2
Copper
Gradient 3
Maroon
Gradient 4
Navy
Gradient 5
Slate

3. Knowledge Graph — Node Domain Colors

15 entity types, each with a unique muted color. Professional, distinguishable at small sizes. Used for node fills, tab icons, and entity type badges.

Person
#4A90D9
Organization
#5B7F95
Company
#2E6B8A
Government
#7C5CBF
University
#E8913A
Publication
#3AAF85
Patent
#8B6F4E
Grant
#D4794A
Legal Case
#C25B56
News
#6C8EBF
Trade
#4EAFA5
Lobbying
#9B7FB8
Investment
#2D8E6F
Event
#D4A84B
Sanction
#B03A2E

Icon Sizes

Three sizes for different contexts: graph node (48px), tab bar (18px), inline badge (14px).

48px
Graph Node
24px
Tab Bar
18px
Inline Badge
Shennan Circuits Co., Ltd
In-text usage
Graph rendering rules: Nodes are circles (48px default, scalable 32–72px). Each type uses its domain icon + color. Sanctioned entities get a red dashed border overlay + shield-X micro-badge. Risk-flagged entities get a small triangle badge (top-right). Node size can scale by connection count. Labels appear below at zoom > 80%. Icons are rendered as white SVG on the domain-colored circle.

4. Risk & Status Colors

Traffic-light risk model: Red (Critical) / Amber (Warning) / Blue (Info) / Green (Clear). Consistent across the entire UI.

Critical
#DC2626
Warning
#F59E0B
Info
#3B82F6
Clear
#10B981
Success
#059669
Warning
#D97706
Error
#DC2626
Info
#2563EB

5. Typography

Inter — the standard for data-dense enterprise UIs. Optimized for small sizes with excellent legibility.

Page Title — 24px Bold
--text-3xl / --weight-bold / Page headings, modal titles
Section Heading — 20px Semibold
--text-2xl / --weight-semibold / Card headers, section titles
Subsection — 16px Semibold
--text-lg / --weight-semibold / Sub-headers, sidebar titles
Label / Entity Name — 14px Medium
--text-md / --weight-medium / Entity names, important labels
Body Text — 13px Regular (default)
--text-base / --weight-regular / Default body, table cells, descriptions
Secondary — 12px Regular
--text-sm / --weight-regular / Metadata, timestamps, captions
TABLE HEADER — 11px Medium Uppercase
--text-xs / --weight-medium / Table headers, column labels
Identifier: 03780135 — 12px Mono
--text-sm / --font-mono / IDs, codes, hex values, hashes

6. Spacing & Layout

4px base unit. Compact by default — enterprise density.

4
8
12
16
20
24
32
40
48
64
Layout grid: Top bar: 44px. Tab manager bar: 36px. Left sidebar: 180px (collapsible). Right panel: 280px (graph context). Content area: fluid. Min viewport: 1280px.

7. Shadows & Elevation

Subtle, flat. Enterprise UI avoids heavy depth.

xs
sm
md
lg
xl
Usage: xs = cards at rest. sm = cards hovered. md = dropdowns, popovers. lg = modals. xl = graph context panel on hover.

8. Buttons

Primary
Secondary
Ghost & Danger

9. Form Controls

Text Input
Select
Search Bar (global)

10. Badges & Tags

Sanctions Export Controls Forced Labor Political Exposure Regulatory Action Cleared Company Canada EO1 Phase 2

11. Data Tables

Dense, sortable, with inline risk badges. Modeled after Sayari's relationship table pattern.

Relationship Status Entity Name Country Entity Risk PSA
Has Officer ● Active HIGUANG LEE 🇺🇸
Ships To ● Active SAMMNA-SCI INDIA PRIVATE LIMITED 🇮🇳 Export controls
Ships To ● Active ANT TECHNICAL TRADING SERVICE... 🇹🇷
Has Director ● Former Yanjia Lu 🇺🇸

12. Tab Manager

Browser-style tab bar for multi-entity investigation. Each tab shows entity type icon + truncated name. Tabs can be pinned, closed, or reordered via drag.

Tab behaviour: Max visible tabs before scroll: ~8. Overflow → horizontal scroll with arrows. Active tab has white bg + rose bottom border. Risk-flagged entities show a small red dot on the tab icon. Graph tabs use a different icon (network symbol). The "+" opens a new search tab.

14. Cards

Entity Summary High Risk
Name: Shennan Circuits Co., Ltd
Type: Company
Country: China 🇨🇳
Risk Factors: 18
Project
RAI Investigation
Last modified: Today at 3:52 PM
4 entities · 2 graphs · 3 searches

15. Risk Indicator Patterns

Consistent risk communication across entity profiles, graph overlays, and reports.

▲ Export Controls (8) Critical
▲ Sanctions (5) Critical
▲ Forced Labor (11) Elevated
▲ Political Exposure (3) Elevated
▲ Regulatory Action (2) Relevant

16. App Shell Layout

Complete application structure. Top bar → Tab manager → Three-column layout (sidebar + content + context panel).

Entities Trade
Advanced Search Translate MH
Profile
Relationships
Trade
Risk Factors
Negative News
Records
Explore
All Related Entities Showing 17 of 17
RelationshipEntity NameCountryRisk
Has OfficerHIGUANG LEE🇺🇸
Ships ToSAMMNA-SCI INDIA PVT LTD🇮🇳Export ctrl
Has DirectorYuanYuan Wang🇨🇳
Entity Context
COMPANY
Shennan Circuits Co., Ltd
Export ctrl Forced labor Regulatory
RELATIONSHIPS
All Related: 816
Has Branch: 3
Has Officer: 7
Has Manager: 7
Shareholder Of: 12

Design Token Export (CSS Custom Properties)

Copy the :root block from this file's <style> tag to use all tokens in your application.

Implementation: These tokens map directly to Tailwind CSS config or any CSS-in-JS solution. The graph node colors are also available as a JSON export for the D3/Canvas rendering layer.