Brand & UI/UX

Locked design direction. Visual reference: the dashboard mockup — a working single-file mockup of the main dashboard with mock data. Brand assets live in C:/Users/PC/Downloads/ (logo.png, set_icons_transparent.png, S.E.T Platform Pitch Deck.pdf).

Aesthetic

Cyber-soft enterprise. Soft 3D and aurora gradients carry the cyber DNA; layout stays exec-friendly — generous whitespace, large readable numbers, status pills not data walls, gentle motion. No SOC-analyst density. If a power-user / operator audience emerges later, ship a separate "Operator" view rather than degrading the exec experience.

Default Theme

• Light by default — warm white (#FAFAFC) + violet-tinted shadows. First impression = premium trust.
• Dark mode toggleable — deep indigo-black (#0B0F1E) + soft violet glow. Command-center feel without aggression.
• Both modes ship first-class. Theme preference persists per user.

3D Treatment Discipline

Live 3D (WebGL / Spline / R3F) appears in the in-app workspace ONLY in these four placements — all single-instance, one-time, or rare paths:

1. Login / signup screen — single page, loaded once. Rotating S.E.T 3D logo or guardian orb scene.
2. Onboarding / first-run flow — "activating your shield…" moments. Loaded only during onboarding.
3. Empty states — "no findings yet", "no integrations connected" — rare render paths.
4. AI Assistant avatar — small low-poly orb (~50KB), gently pulses while thinking. Off-screen-paused.

Everywhere else in the app: pre-rendered 3D imagery + CSS gradient depth + soft layered shadows. No WebGL on dashboards, lists, modals, or repeated cards. Marketing site: free use of Spline (separate codebase, separate perf budget).

Discipline rules for every live 3D scene:

• Lazy-load via dynamic import — never block initial render
• Pause when off-screen (IntersectionObserver)
• Respect prefers-reduced-motion → fall back to static
• Mobile fallback: pre-rendered static image
• Max ~300KB total 3D weight per route

Component Library

• Base UI: shadcn/ui (Radix primitives + Tailwind) — copy-paste, all components owned in-repo
• Dashboard primitives: Tremor — KPI cards, charts, sparklines, gauges
• Styling: Tailwind v4 with CSS variables for theme switching
• Icons: Lucide for utility icons; one custom 3D gradient SVG mark per signature element (e.g., Posture nav uses a bespoke 3D shield)

Typography

• UI / body: Switzer (Indian Type Foundry, free via Fontshare, commercial OK)
• Code / IDs: IBM Plex Mono (IBM, free via Google Fonts, OFL)

Mono usage rule (validated against Stripe, Linear, Vercel, Vanta, Mercury, Ramp):

Use mono ONLY when character-by-character identity matters — i.e., the user might copy, diff, type, or read it aloud as a code.

Mono allowed: asset IDs (i-0abc12d7f), control codes (CC6.1), CVEs, hashes, IPs/CIDRs, file paths, JSON/YAML blocks, API keys, command snippets, log lines, usernames. Mono forbidden: trend indicators, KPI deltas, timestamp captions, date subtitles, KPI footnotes, any prose-like metadata. These use Switzer with font-variant-numeric: tabular-nums and a muted color (55–65% of body contrast).

Navigation Pattern

Slim icon rail with hover-expand + floating sub-menus.

• Default state: ~68px wide, icon-only rail
• Mouse enters sidebar → after 150ms delay, expand to ~240px showing icon + label
• Mouse hovers an icon with sub-pages → floating popover (flyout) appears to the right with sub-items
• Mouse leaves sidebar → collapses back to icon-only
• Built on shadcn Sidebar + Radix Popover primitives

Accessibility / touch fallbacks:

• Touch: tap opens a full drawer (no hover-expand on touch)
• Keyboard: focus expands sidebar + opens flyout for the focused item
• Floating menus stay open while mouse is in icon OR menu (no ghost-line race)

Dashboard Density Philosophy

Summary-first, narrative-led. The landing dashboard shows:

1. Hero posture score (big editorial number + 3D orb companion)
2. Asymmetric KPI strip (e.g. 7+5 split) — not symmetric 4-up grids
3. "What needs your attention" — a calm narrative list of action items, not a table

No data tables on the dashboard landing. Click into any card for the dense detail view — those may be operator-grade dense.

Color Discipline

Brand-restrained, vibrant on hero moments. Most UI = neutral grays/whites + hairline borders. Violet/cyan appear ONLY on:

• Primary CTAs (1–2 per screen)
• Active sidebar item
• Hero score, hero gradient backdrop
• AI Assistant avatar
• Brand splash (login, onboarding)
• Status pill borders (subtle, only when needed)

Semantic colors are standard: green/amber/red/blue for success/warning/danger/info — critical status reads instantly for non-technical users.

Color Tokens

Brand

Violet (primary)              Cyan (accent)         Indigo (depth)
  50  #F5F3FF    500 #8B5CF6   50  #ECFEFF          500 #6366F1
  100 #EDE9FE    600 #7C3AED   400 #22D3EE          900 #312E81
  200 #DDD6FE    700 #6D28D9   500 #06B6D4
  300 #C4B5FD    900 #4C1D95   600 #0891B2
  400 #A78BFA    950 #2E1065

Light mode neutrals

bg          #FAFAFC      text-1   #0F172A
surface     #FFFFFF      text-2   #475569
surface-2   #F4F4F5      text-3   #94A3B8
border      #E7E7EB      shadow   rgba(124, 58, 237, 0.08)  ← violet-tinted

Dark mode neutrals

bg          #0B0F1E      text-1   #F1F5F9
surface     #141A2E      text-2   #94A3B8
surface-2   #1B2240      text-3   #64748B
border      #2A3155      glow     rgba(139, 92, 246, 0.15)  ← violet

Semantic (same both modes)

success #10B981   light bg #ECFDF5   dark bg rgba(16,185,129,0.12)
warning #F59E0B   light bg #FFFBEB   dark bg rgba(245,158,11,0.12)
danger  #EF4444   light bg #FEF2F2   dark bg rgba(239,68,68,0.12)
info    #3B82F6   light bg #EFF6FF   dark bg rgba(59,130,246,0.12)

Motion Language

"Calm/effortless" — motion communicates state, never decorates. No bouncy springs. No parallax > 8px.

Element	Duration	Easing
Hover / focus feedback	150ms	ease-out
Sidebar expand on hover	200ms	cubic-bezier(0.4, 0, 0.2, 1)
Card / modal enter	250ms	ease-out
Page transitions (optional)	300ms	fade only, no slide
Layout shifts	400ms	ease-in-out
3D / hero entrance	600ms	spring (stiffness 120, damping 25 — no bounce)
Loading states	1.5s pulse loop	skeleton — never spinners
prefers-reduced-motion	80ms or instant	accessibility honored

Anti-AI-Look Discipline

Patterns to apply on every screen so the design reads as human-crafted, not generated:

• Distinct card radii by role — hero 24px, hero-KPI 14px, small KPI 10px, attention card 12px. Same radius everywhere = AI tell.
• Shadow / glow restricted to signature elements (hero card, posture orb). Other cards get hairline borders only — no soft violet glow on everything.
• Lived-in mock data — 87.3% not 87%, 1,247 of 3,124 not 100, Tue May 12 · 03:17 UTC not "2h ago", Aldera Health not Acme Corp, real-sounding people (tomer.h).
• Asymmetric layouts — 7+5 KPI grids, hero orb bleeding past the card edge. Avoid symmetric 4-up strips and 6+6 chart rows.
• One custom mark among utility icons — bespoke 3D gradient SVG (e.g. shield) alongside Lucide stroke icons. Varying visual weights signals curation.
• Editorial typography moments — one giant gradient display number per screen (the 104px posture score), tiny muted caption beneath. Variable rhythm reads as designed.
• Designed lived-in states — sparkline with annotation marker ("Drift detected May 11 · 14 controls re-validated"), partial-data charts with context, errors with correlation IDs in mono.
• Signature primitive: the 3D posture orb is S.E.T's identity. Repeat this primitive across login, onboarding, AI avatar, hero. Everything else stays quiet so the orb carries the brand.

Reference Implementation

The decisions above are wired together in the dashboard mockup — a single working HTML file with mock data showing the main dashboard. Open it in a browser to:

• See the slim sidebar with hover-expand and floating sub-menus
• Toggle light ↔ dark theme via the moon/sun button in the top bar
• Inspect typography, color, motion, density, and anti-AI patterns in action

Share this file with developers as the canonical visual reference alongside this spec.