Harden.run Design System

Live theme editor — tweak tokens on the left, search and browse every component on the right.

Typography — Headings

Typography

Display

36px · 1.1 · 700 · -0.02em

Heading 1

26px · 1.2 · 600 · -0.015em

Heading 2

18px · 1.3 · 600 · -0.01em

Heading 3

14px · 1.4 · 600 · -0.005em

Typography — Body

Typography

Body — default paragraph and table cell text.

13px · 1.55 · 400

Small — meta text and captions.

12px · 1.5 · 400

Label — column & group headers

11px · 1.4 · 600 · 0.1em · uppercase

aws deploy · az deploy

Mono · 13px · 1.5 · 500

Sidebar Navigation

Navigation

Harden.run

Breadcrumb

Navigation

Page Tabs

Navigation
App summary, connected repositories, and recent scan activity.

Search & Filter Toolbar

Filters

Severity Filter Chips

Filters

Engine / Data-Class Filter Chips

Filters

Cards

Surfaces
Work progress
Scans completed today

5 / 20

Runtime
BYOC agent status
Enforcing · 0 incidents
App — api
github.com/harden-run/api
2 critical·1 high

Empty State

Surfaces
No apps connected yet
Connect a repository to start scanning for vulnerabilities.

Terminal

Surfaces
harden — zsh

$harden scan --repo api --engine sast,sca

→ cloning github.com/harden-run/api…

→ 3 findings (1 critical, 2 medium)

aws deploy — policy generated

az deploy — blocked: PII egress

Button Variants

Actions

Buttons with Icons

Actions

Button Sizes

Actions

Disabled Buttons

Actions

Toggle

Actions

Severity Badges

Status
CriticalHighMediumLow

Finding State Badges

Status
OpenAuto-HardenBlocked

Engine / Data-Class Tags

Status
SASTSCAAIPIIFinanceSecret

Runtime Status Badges

Status
ConnectedDegradedEnforcing

Forms

Forms

Table

Data
IDFindingSeverityEngineRepo
F-1042Hardcoded AWS secret keyCriticalSCAapi
F-1041SQL injection via unescaped inputHighSASTweb
F-1038Verbose error messages leak stack traceMediumSASTapi
F-1030Outdated TLS cipher suite allowedLowSCAinfra

Pagination

Data

Avatars

Data
HRANSK

Accordion

Data

Bring-your-own-cloud: the runtime enforcement layer deploys into the customer's own cloud account, so policy decisions and workload data never leave their environment.

Dialog, Sheet, Popover, Tooltip & Dropdown

Overlays

Dialog

Sheet

Popover

Tooltip

Dropdown Menu

Alert Dialog

Overlays

Command Palette

Overlays

Command Palette

Search for a command to run...

Collapsible

Overlays

Hover Card

Overlays

Alerts

Feedback

Progress

Feedback

Scan progress — 5 / 20 completed today

x

Skeleton

Feedback

Toasts

Feedback

Spinner

Feedback

Kbd

Misc
K Search/