Security UX Pattern Library

April 14, 2026 · View on GitHub

Live site: uxsec.dev — 36 interactive patterns for designing secure user experiences.

Interactive patterns for designing secure user experiences.

$ ls ./patterns

🔒 auth/ (8)
   login_flow ............ OWASP A07, CWE-307
   multi_factor_auth ..... OWASP A07, CWE-308
   password_strength ..... OWASP A07, CWE-521
   session_timeout ....... OWASP A07, CWE-613
   account_recovery ...... OWASP A07, CWE-640
   passkeys .............. WebAuthn, FIDO2
   oauth_consent ......... OAuth 2.0, CWE-250
   accessible_auth ....... WCAG 2.2, SC 3.3.8

🔒 threat/ (3)
   breach_notification ... GDPR Art. 33/34, CWE-200
   phishing_warning ...... OWASP A07, CWE-601
   suspicious_activity ... OWASP A07, CWE-778

⚠ dark_patterns/ (6)
   confirmshaming ........ EU DSA, Deceptive Design
   cookie_consent ........ GDPR Art. 7, ePrivacy
   hidden_unsubscribe .... GDPR Art. 17, Right to Erasure
   privacy_zuckering ..... GDPR Art. 5, Data Minimization
   bait_and_switch ....... FTC Act Section 5
   forced_continuity ..... FTC Negative Option Rule

🔐 data/ (4)
   encryption_indicators . OWASP A02, CWE-311
   secure_file_upload .... OWASP A03, CWE-434
   data_deletion ......... GDPR Art. 17, CWE-212
   activity_log .......... GDPR Art. 15, CWE-778

🛡 owasp/ (3)
   A01_access_control .... CWE-284, CWE-639
   A05_misconfiguration .. CWE-16, CWE-209
   A09_logging ........... CWE-778, CWE-223

🤖 ai/ (5)
   ai_disclosure ......... EU AI Act Art. 50
   content_labeling ...... EU AI Act Art. 50, C2PA
   decision_explanation .. GDPR Art. 22
   input_safety .......... OWASP LLM01, CWE-77
   human_override ........ EU AI Act Art. 14

🏭 industrial/ (4)
   operator_auth ......... IEC 62443
   safety_critical ....... IEC 61511
   alarm_fatigue ......... ISA-18.2, EEMUA 191
   navigation_levels ..... ISA-101

📋 governance/ (3)
   security_design_review  IEC 62443, ISO 27001
   change_management ..... IEC 62443, ITIL
   compliance_audit ...... NIS2, DORA, GDPR

$ get --score
🛡 Security UX Score: rate your app → A+ through F
$ get --compliance
📋 Compliance Mapper: 19 regulations including NIS2 + DORA + WCAG 2.2 + EU AI Act + ISO 42001 + EAA + IEC 62443
$ get --maturity
📊 Maturity Model: assess your security UX → Level 1-4
$ get --report
📄 Report Generator: 6 questions → exportable .md report
$ get --convince
🎯 Convince Your Team: enforcement data + ROI arguments for stakeholders
$ live --ripple
🌊 Ripple: paste a headline → structured analysis prompt through 3 lenses
$█

Gathered from 20 years of experience in safety-critical industries — energy, maritime, drilling operations — and a double M.Sc. in Cyber Security and Information Systems. The patterns comply to any domain.

36 Interactive Patterns + 5 Strategic Tools + 2 Operational CLI Tools

The most comprehensive interactive security UX pattern library. Each pattern has a live demo, do/don't guidelines, security rationale with OWASP/CWE/GDPR references, and accessibility notes.

Strategic Tools

Tool	What it does
Ripple	Paste any headline → structured analysis prompt through 3 lenses: UX & Design Systems, Security & Compliance, AI & Emerging Risk. Powered by all 36 patterns.
Security UX Score	Checklist across 8 categories → A+ through F grade. Industrial & Governance can be marked N/A for fair scoring.
Compliance Mapper	Select from 19 regulations (GDPR, NIS2, DORA, CRA, EU AI Act, ISO 42001, EAA, IEC 62443...) → see which patterns you need
Maturity Model	10-question assessment → current level, priority areas, roadmap to next level
Report Generator	Answer 6 questions → downloadable .md report with prioritized patterns
Convince Your Team	Enforcement data, ROI arguments, regulatory deadlines, and next steps — designed to share with stakeholders

Authentication (8)

Pattern	What it covers
Login Flow	Rate limiting, social login, MFA challenge, remember me, success flow
Multi-Factor Auth	TOTP/SMS/backup codes, paste support, progressive cooldown
Password Strength	Real-time meter, breach detection, confirm field, show/hide
Session Timeout	Countdown warning, auto-save, graceful expiry
Account Recovery	Secure reset flow, one-time tokens, anti-enumeration
Passkeys / WebAuthn	Create passkey, sign in (0.8s, phishing-proof), manage across devices
OAuth Consent	Over-permissioned vs least privilege, granular control, explained permissions
Accessible Authentication	CAPTCHA alternatives (passkey, magic link), screen reader MFA, timed actions with announcements (WCAG 2.2 SC 3.3.8)

Threat Response (3)

Pattern	What it covers
Breach Notification	In-app banner, full-page with timeline, email with GDPR refs (3 variants)
Phishing Warning	Blocked page, email annotations, link safety preview (3 variants)
Suspicious Activity	Sign-in alerts, session management, new device approval (3 variants)

Dark Patterns — Anti-Patterns (6)

Each shows the manipulative version side-by-side with the ethical alternative.

Pattern	What's wrong	Ethical alternative
Confirmshaming	Guilt-trip dismiss buttons	Neutral language with 3 options
Cookie Consent	"Accept All" manipulation	Equally prominent Accept/Reject
Hidden Unsubscribe	4-step deletion maze	2-step with data export
Privacy Zuckering	Pre-enabled permissions	Opt-in with per-permission explanations
Bait & Switch	X button enables features	X means close, always
Forced Continuity	Free trial auto-charge trap	No-card trial, pre-expiry reminder

Data Protection (4)

Pattern	What it covers
Encryption Indicators	E2E messaging, connection security, at-rest dashboard (3 variants)
Secure File Upload	File type blocking, malware scanning, encryption status
Data Deletion	GDPR-compliant deletion with export, confirmation, grace period
Activity & Audit Log	Account activity, active devices with session revoke, data access log (GDPR Art. 15)

OWASP Top 10 (3)

Pattern	What it covers
A01 Broken Access Control	Role-based UI, IDOR prevention, privilege escalation blocking
A05 Security Misconfiguration	Security headers dashboard, debug mode, default credentials
A09 Logging & Monitoring	Live event log, anomaly detection, per-user audit trails

AI Transparency (3) — EU AI Act (August 2026)

Pattern	What it covers
AI Interaction Disclosure	Chatbot as human (non-compliant) vs labeled AI assistant
AI Content Labeling	Social feed labels, article transparency, image authenticity (C2PA)
AI Decision Explanation	Loan decisions, content moderation, hiring AI with human appeal

Industrial Security UX (4)

Pattern	What it covers
Operator Authentication	Badge + PIN for gloves, adaptive biometrics, emergency override
Safety-Critical Confirmation	Hold-to-confirm shutdown, graduated overrides, parameter ranges
Alarm Fatigue Management	Alarm flood vs smart grouping, root cause, shelving (ISA-18.2)
Navigation & Levels of Detail	ISA-101 4-level HMI hierarchy — plant overview to diagnostic detail

Governance (3)

Pattern	What it covers
Security Design Review	Checklist with critical/non-critical items, approval workflow
Change Management	Propose → Review → Approve → Rollout → Rollback with impact assessment
Compliance Audit Workflow	Scope regulations → Assess requirements → Collect evidence → Gap analysis report

Recent Enforcement

Company	Fine	Reason
Amazon	$30M	Manipulative subscription design
Epic Games	$245M	Deceptive in-game purchases
TikTok	€345M	Public-by-default dark pattern
Meta	€1.2B	GDPR data transfer violations

Run locally

git clone https://github.com/alavesa/security-UX-pattern-library.git
cd security-UX-pattern-library
npm install
npm run dev

Adding a new pattern

Each pattern is a single React component. Follow these steps:

1. Create the component

src/patterns/<category>/MyPattern.tsx

Use the standard structure:

import { PatternHeader } from "../../components/PatternHeader";
import { DemoContainer } from "../../components/DemoContainer";
import { GuidelineSection } from "../../components/GuidelineSection";

function MyPatternDemo() {
  // Interactive demo with inline styles using CSS variables
  // Use category color for tabs/accents (see color system below)
  return <div>...</div>;
}

export function MyPattern() {
  return (
    <div>
      <PatternHeader
        title="My Pattern"
        description="What this pattern demonstrates"
        severity="high"          // critical | high | medium
        tags={["Category", "OWASP A01", "CWE-XXX"]}
      />
      <DemoContainer label="my pattern (N variants)">
        <MyPatternDemo />
      </DemoContainer>
      <GuidelineSection
        dos={["Do this", "And this"]}
        donts={["Don't do this"]}
        securityRationale="Why this matters..."
        accessibilityNotes={["a11y consideration"]}
      />
    </div>
  );
}

2. Wire it up — add to these files:

src/App.tsx — add a <Route>
src/layouts/Layout.tsx — add to sidebar navigation
src/pages/HomePage.tsx — add to terminal listing + pattern cards
src/data/patterns.ts — add metadata
src/pages/CompliancePage.tsx — map to relevant regulations
src/pages/ScorePage.tsx — add a scoring item if applicable

3. Styling rules — critical for the hacker terminal aesthetic:

All colors via inline style={{ }} with CSS variables — no Tailwind color classes
Use font-mono on all text
Cards: background: "var(--bg-card)", border: "1px solid var(--border)"
Inputs: background: "var(--bg)", color: "var(--text-bright)"
Primary buttons: background: "var(--green)" (or your category color)
Text: var(--text-bright) headings, var(--text) body, var(--text-dim) metadata
Icons: always set explicit color — don't rely on inheritance
Test on mobile — add flex-wrap, break-words, min-w-0 where needed

Tech stack

React + TypeScript + Vite
Tailwind CSS (layout only) + CSS custom properties (colors) + Lucide Icons + React Router
Built with Claude Code by Anthropic

Design

Hacker terminal aesthetic — black background, green glow, JetBrains Mono, scanlines, Matrix rain with katakana. Every interactive demo uses CSS custom properties for consistent dark theming — no Tailwind color classes in demo components.

Category color system:

Category	Color	CSS Variable	Hex
Auth & Threat	Green	`--green`	`#00ff41`
Dark Patterns	Red	`--red`	`#ff3333`
Data Protection	Cyan	`--cyan`	`#00e5ff`
OWASP Top 10	Amber	`--amber`	`#ffaa00`
AI Transparency	Purple	`--ai-color`	`#c084fc`
Industrial	Orange	`--industrial-color`	`#f97316`
Governance	Gray	`--governance-color`	`#cccccc`

Each color has --*-glow (15% opacity background) and --*-border (25% opacity border) variants for consistent tinted containers. Semantic colors (red for errors, green for success, amber for warnings) are used across all categories regardless of accent color.

Sources (46)

EU Regulation: GDPR, NIS2, DORA, CRA, EU AI Act, EU DSA, ePrivacy, EU Consumer Rights Directive, European Accessibility Act (EAA)

Standards & Compliance: OWASP, CWE, NIST SP 800-63B, NIST CSF, NIST SP 800-30, WCAG 2.2 (SC 3.3.8 Accessible Auth), ISO 27001, ISO 27005, ISO/IEC 42001, SOC 2, PCI DSS 4.0, WebAuthn/FIDO2, OAuth 2.0, CCPA, FTC, C2PA, AI Transparency Code, IAB Framework, US State AI Laws, Illinois AI Act, CMMI, OWASP SAMM, OWASP Risk Rating

Industrial: IEC 62443, IEC 61511, ISA-18.2, ISA-101, EEMUA 191

Research: Verizon DBIR, IBM Breach Report, Microsoft MFA Study, USEC 2026, Deceptive Design, Dark Patterns Enforcement, RFC 6238

Author

Piia Alavesa — Senior UX Design Leader

M.Sc. Cyber Security (University of Jyväskylä)
M.Sc. Information Systems (University of Oulu)
20 years building design organisations for complex industrial systems
neversay.no | LinkedIn

Roadmap

Ripple — live intelligence tool

Phase 1: Prompt generator — paste a headline, get a structured prompt with all 36 patterns as context, copy into Claude or ChatGPT (shipped)
Phase 2: Claude API integration — inline analysis via a thin proxy (Cloudflare Worker), no user API keys needed. Three-lens results rendered directly on the page with pattern links.
Phase 3: Adaptive lenses — LLM picks the most relevant third lens per headline instead of fixed three. Could surface supply chain risk, industrial safety, dark patterns, or AI governance depending on context.
Related patterns from LLM output — parse the API response for pattern URLs and replace keyword matching with LLM-referenced patterns
Weekly digest — subscribe to a topic (e.g., "NIS2 updates") and receive a weekly Ripple analysis email

Accessibility & reach

Add <noscript> fallback content — terminal-styled static HTML fallback for NoScript users. Shows site description, pattern count, tool list, and GitHub link. "No tracking. No cookies. No analytics." (shipped)

Patterns to add

More OWASP Top 10 coverage (currently A01, A05, A09)
API security UX patterns

Site improvements

Offline/PWA support for use without network

License

MIT