AI security · product design

ARKO

A security tool developers actually open. Brand and product UI, built from zero inside a 300-pixel sidebar.

Three-person team: the founder (an active CISO), one developer, and me as the first and only designer.

92
Secure
Year
2025 — 2026
Team
3 people
Role
Lead Designer
Company
DevSecAI, UK
VS Code ExtensionProduct UIUX WritingBrand
ARKO running in Cursor IDE
ARKO live in Cursor — the sidebar is the entire product surface.
Security tooling that developers ignore is not security tooling.
The product thesis. Everything else followed from it.
01
The brief

DevSecAI shifted from a heavyweight enterprise dashboard to a developer-first product that meets engineers inside their editor. Everything visual and strategic had to be built from zero.

I joined as the first and only designer, working directly with the founder and one developer. Equity-free: direct CISO mentorship in exchange for full design execution.

02
The problem

Traditional SAST tools dump long lists of generic severities. Developers skim and move on. AI-assisted coding raises velocity, so security debt compounds faster.

The hypothesis: if the tool reasons about architecture and returns one obvious next action, developers fix issues before merge. My challenge was earning trust inside a 300-pixel panel while also producing enterprise material that convinced CISOs to procure at scale.

The product

ARKO scans a codebase with an AI pipeline, builds an architectural threat model, and returns prioritized findings with plain-language fixes.

ARKO welcome and sign in
Hackable Score gauge
Threat model
Scanning in progress
Managed subscription
UI decisions

Two constraints shaped everything: 300 pixels of width, and developers who close panels they do not trust.

01
Score, not count
47 issues tells you nothing. A 0–100 Hackable Score with dynamic colour, a circular gauge, and a copyable README badge tells you everything at a glance.
02
One action, not a list
The Next Action card surfaces the single highest-severity open issue. Fix copies a structured AI prompt; Open jumps to the vulnerable line.
03
Named phases, not fake progress
Scans take minutes. Showing real pipeline phases builds trust and teaches the user. No fake percentage bar stalling at 99%.
04
Posture first, depth on demand
Score at the top, Next Action below, then collapsible threat model and vulnerabilities. Progressive disclosure, not overload.
Design system

One mental model, reinforced everywhere. The Hackable Score colour scale drives the gauge stroke, status pill, pulse speed, bar fills, and README badge.

Shipped as a single HTML/CSS/JS string injected as a VS Code webview. All styles inline in TypeScript. No bundler — pure CSS variables and DOM.

Hackable Score — colour scale
0–30
31–50
51–70
71–85
86–100
critical
elevated
caution
low risk
secure
--arko-accent
CTA, Next Action, low severity
--arko-purple
File paths, Builder tier
--arko-amber
Warnings, high severity
--arko-red
Critical severity, risk gauge
Outcome
£750k

Investment offer in the first eight months. Declined — the investor wanted too large a stake.

PluginShipped to VS Code + Cursor
BrandZero to full identity system
WebsiteDevSecAI.io, built solo
CollateralData sheets, HLDs, carousels