Wireframe 1 — Homepage redesign

Source: hero.svelte (exact gradient) · cardPreview.svelte (exact suit colors) · +page.svelte (webapp suits on homepage) · your proposal (hamburger right, Play Now CTA, 2-col suit grid)

Desktop — full scrollable page
cornucopia.owasp.org
Home How to play View Cards Taxonomy News About Get Cornucopia
KEEP
Threat modeling for
everyone everywhere
Uncover the security flaws in your software before the bad guys do it for you by playing the game! Use OWASP Cornucopia Web & Mobile card decks to guide your threat modelling.
NEW
▶ Play now on Copi View Cards
WILD CARD
J
Joker
CRYPTOGRAPHY
6
Weak crypto exploited
SESSION MGMT
5
Session hijack
DATA VALIDATION
4
Unvalidated input
AUTHENTICATION
3
Auth bypass attack
NEW SECTION

Browse by suit

Authentication
13 cards · #8FC4E8
Authorization
13 cards · #ECCE3E
Data Validation
13 cards · #B5B1AF
Session Mgmt
13 cards · #B1D579
Cryptography
13 cards · #C3B2E3
Wild Card
2 jokers · #FBB67C
KEEP

Introduction

The idea behind Cornucopia is to help development teams identify application security requirements and develop security-based user stories. OWASP Cornucopia is an easy way to introduce threat modelling.

→ Read more
[OWASP logo card image]
[cornucopia card image]
KEEP

How to start

1. Obtain or buy a printed deck · 2. Play online at copi.owasp.org · 3. Identify an application to assess · 4. Play the game to discuss security requirements.

→ How to play
KEEP

Open source

Design files for the cards in various languages are maintained in our Github repository. Licensed under Creative Commons Attribution-ShareAlike 4.0.

→ Github repository
[CC license icons]
KEEP
OWASP Cornucopia
OWASP Cornucopia is a mechanism in the form of a card game to assist software development teams identify security requirements in Agile, conventional and formal development processes. Licensed under Creative Commons Attribution-ShareAlike 4.0. © 2012-2025 OWASP Foundation.
Licensing information | Acknowledgements | Q & A | Roadmap | © OWASP Foundation 2026 | Sitemap
Source: +page.svelte line 18 — webapp-en suits on homepage KEEP: exact hero.svelte gradient · card fan structure · all textimage sections · footer ADD: Play Now + View Cards CTA (your proposal) ADD: suit grid with exact #8FC4E8 #ECCE3E #B5B1AF #B1D579 #C3B2E3 #FBB67C NOTE: Suit grid shows WebApp suits — homepage uses webapp-en, not EoP. Your proposal text said "Spoofing, Tampering" — those are EoP suits. Corrected here.
Mobile — CSS-only hamburger (input:checked ~ .drawer)
cornucopia.owasp.org
Home How to play View Cards Taxonomy News About Get Cornucopia ▾
Threat modeling for everyone everywhere
Uncover the security flaws before the bad guys do. Use OWASP Cornucopia card decks to guide your threat modelling.
▶ Play now on Copi View Cards

Browse by suit

Authentication
Authorization
Data Validation
Session Mgmt
[OWASP logo]

Introduction

Cornucopia helps development teams identify security requirements and develop security-based user stories.

→ Read more
OWASP Cornucopia
Card game to assist software development teams. © 2012-2025 OWASP Foundation.
Licensing | Q&A | Roadmap | Sitemap
FIX: CSS-only hamburger → drawer replaces broken mobile nav (your proposal) FIX: textimage sections stack vertically on mobile KEEP: footer exact content and structure

Wireframe 2 — /cards browser redesign

Source: cards/+page.svelte (tree + toggle layout) · cardPreview.svelte (exact card face + colors) · your proposal (sticky sidebar, FAB mobile, STRIDE colors kept, hover zoom)

Desktop — sticky sidebar + real card face design + hover zoom
cornucopia.owasp.org/cards
HomeView CardsHow to playGet Cornucopia
Filters
Suit
Authentication13
Authorization13
Data Validation13
Session Mgmt13
Cryptography13
Wild Card2
Language
ENESFRNLRUIT
Position: sticky — doesn't scroll away at 90+ cards
Authentication · 13 cards
AUTHENTICATION
2
James can undertake authentication functions without real user awareness
ASVS 2.1.1
CAPEC 60, 196
AUTHENTICATION
3
Weak password policies allow credential guessing attacks
ASVS 2.1.2
AUTHENTICATION
4
Credentials transmitted without encryption intercepted
ASVS 2.2.1
AUTHENTICATION
5
Brute force succeeds with no account lockout mechanism
ASVS 2.2.2
AUTHENTICATION
6
Default credentials never changed after installation
+8
AT7 – ATA
Hover card → scale(1.04) zoom — Svelte 5 $state CSS transition (your proposal)
Source: cardPreview.svelte — exact 15% left strip / 85% right layout KEEP: exact suit colors #8FC4E8 #ECCE3E #B5B1AF #B1D579 #C3B2E3 #FBB67C (your proposal: STRIDE colors must be kept) ADD: sticky sidebar with suit filter + language pills (your proposal) ADD: hover zoom on card (your proposal: "Flip or Zoom interaction") ADD: EoP edition tab (this GSoC project) CHANGE: tree/collapse layout → card grid — sidebar replaces tree, cards visible immediately
Mobile — FAB → bottom sheet · full width card grid (your proposal)
.../cards
Authentication · 13 cards
≡ Filter
AUTH
2
James can undertake auth functions undetected
AUTH
3
Weak passwords allow credential guessing
AUTH
4
Credentials sent without encryption
AUTH
5
Brute force with no lockout
Filter cards
Edition
Web AppMobileEoP
Suit
Auth Authz DataVal
Language
ENESFR
FIX: your proposal — "Move filters into FAB or Filter button that opens bottom sheet" KEEP: real card face design on mobile — same 15%/85% split Full screen width freed for cards (your proposal)

Wireframe 3 — /cards/VE2 deep link redesign

Source: breadcrumbs.svelte (exists, restyled) · languagePicker.svelte (dropdowns → inline toggle) · cardFound.svelte (concept + taxonomy + cardBrowser) · your proposal (breadcrumbs, i18n next to title, content focus)

Desktop — breadcrumb restyled · i18n toggle replaces dropdown · content focus
cornucopia.owasp.org/cards/VE2
HomeView CardsHow to playGet Cornucopia
RESTYLE Home› cards› Web App› Data Validation› VE2 (breadcrumbs.svelte already exists — needs suit name added + font-size reduced from 1.5rem)
VE2
REPLACE <select>
EN ES FR NL RU
v2.2 v3.0
DATA VALIDATION & ENCODING
VE2
An attacker can input data that is not validated server-side, and the application processes it without checking
Need more info? ↗ (existing feature)
ADD ← VEA
VE3 → ADD
cardBrowser.svelte already handles left/right arrow keys — add visible buttons
KEEP Concept (concept.svelte)
An attacker can input data that is not validated server-side. This can lead to SQL injection, XSS, path traversal, and other attacks when the application processes untrusted input...
KEEP Explanation (explanation.svelte)
Always validate and sanitize input on the server regardless of client-side validation. Use allowlists not denylists. Implement parameterized queries...
KEEP Mappings (webAppCardTaxonomy.svelte)
OWASP ASVS5.1.1, 5.1.2, 5.2.1
AppSensorRE7, RE8, AE4
CAPEC28, 48, 126, 165
SAFECode3, 16, 24, 35
Source: breadcrumbs.svelte (exists) · languagePicker.svelte (dropdowns) · cardBrowser.svelte (arrow keys) · concept.svelte · explanation.svelte · webAppCardTaxonomy.svelte FIX: breadcrumbs.svelte exists but font-size:1.5rem — restyle to compact (your proposal: hard to go back) FIX: languagePicker.svelte <select> dropdowns → inline toggle buttons next to card ID (your proposal: click ES = same card in Spanish) ADD: visible prev/next buttons — cardBrowser.svelte already has keyboard support, add buttons KEEP: concept, explanation, all taxonomy mappings (ASVS, CAPEC, AppSensor, SAFECode)
Mobile — compact breadcrumb · i18n inline · content-first layout
.../cards/VE2
Cards› Web App› Data Val› VE2
VE2
Data Validation
EN ES FR
DATA VALIDATION
VE2
An attacker can input data not validated server-side
Need more info? ↗
← VEA
VE3 →
Concept
An attacker can input data not validated server-side, leading to SQL injection, XSS, or path traversal attacks...
Mappings
ASVS5.1.1, 5.1.2
CAPEC28, 48, 126
SAFECode3, 16, 24
FIX: breadcrumb compact on mobile — breadcrumbs.svelte media query already exists, reduce font-size FIX: i18n toggle inline — click language = navigate to same card in that language instantly (your proposal) KEEP: all content — concept, explanation, mappings