Warden Logo

Warden Design System

Living Style Guide • v1.0

Brand Guidelines

Warden Design DNA

A comprehensive reference for colors, typography, and components that define the Warden visual identity. This guide auto-reflects the current styling from our codebase.

Navy PrimaryOrange AccentSlate NeutralInter Font

Navy (Primary)

Used for primary actions, headings, and dark UI elements

bg-navy-*

Orange (Accent)

Used for CTAs, highlights, and brand accents

bg-orange-*

Slate (Neutral)

Used for borders, backgrounds, and secondary text

bg-slate-*

Base Colors

Foundation colors for backgrounds and text

Font Family

Sans (Primary)

Inter

Monospace

SF Mono

Type Scale

Displaytext-5xl lg:text-6xl font-bold tracking-tight

The Trust Protocol

H1text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight

Start with AI

H2text-2xl sm:text-3xl font-semibold tracking-tight

Choose how you build

H3text-xl sm:text-2xl font-semibold

Agent as a Service

H4text-lg font-semibold

Section Title

Body Largetext-base sm:text-lg

The only development platform that lets you switch between instant AI builds and enterprise agency teams.

Bodytext-sm sm:text-base

Governed by a single financial trust layer for complete transparency.

Smalltext-xs sm:text-sm

Optional human review available on request.

Labeltext-xs font-semibold uppercase tracking-[0.18em]

WARDEN EXPRESS

Monofont-mono text-sm

npm install @warden/cli

Buttons

Button variants for different contexts and emphasis levels.

Primary (Navy)

Accent (Orange)

Secondary (Outline)

Destructive

Toggle Group

Form Elements

Input fields, labels, and form groups following Warden patterns.

We'll never share your email.

Password must be at least 8 characters.

Cards

Card styles used throughout the Warden interface.

Warden Express

Agent as a Service

$49/month

Best for MVPs, internal tools, and fast experiments.

Warden Prime

Human Lane

3–5%platform fee

Enterprise apps, complex fintech, high-scale products.

Warden Rescue

Eject & Rescue

15–25%rescue premium

For repos stuck at 80% or needing senior intervention.

Form Card

The waitlist form card pattern with gradient background.

Join the Warden early access cohort

153 founders, 41 agencies, 28+ builders

Border Radius

none

0px

sm

2px

md

6px

lg

8px

xl

12px

2xl

16px

3xl

24px

full

9999px

Shadows

Card Small

Used for pricing cards

Card Large

Used for form cards

Button

Primary button shadow

Input Focus

Focus state for inputs

Status Badges

Status indicators used throughout the Warden dashboard to communicate milestone and payment states.

Verified

Success state

Locked

Escrow locked

Pending

Awaiting action

Disputed

Requires attention

Default

Neutral state

Usage

<Badge variant="verified">Verified</Badge>

Terminal Window

A Mac-style terminal component for displaying logs, build output, and AI agent activity.

warden-architect
$warden init --project=my-saas
Creating new Warden project...
✓ Project initialized successfully
$warden deploy --env=staging
Initializing Architect AI...
Analyzing codebase structure...
✓ Scope locked.
⚠ Funds pending verification
$warden milestone:complete auth
✗ Error: Payment required.
Please fund escrow before continuing.

Line Types

commandoutputsuccesswarningerror

Alerts & Callouts

Contextual alerts for important notifications, warnings, and system messages.

Information
Your project has been assigned to the Architect AI agent.
Milestone Complete
Authentication module has been verified and funds released.
Escrow Notice
Funds are locked in escrow. They will be released upon milestone verification.
Rescue Mode Activated
This project has entered rescue mode. A senior developer will review the codebase.

Milestone Table

A data table component for displaying project milestones, payments, and status tracking.

MilestoneAmountStatusDate
Project Setup & Architecture$2,500
Verified
Jan 15, 2026
Authentication System$3,000
Locked
Jan 22, 2026
Dashboard UI$4,500
Pending
—
Payment Integration$5,000
Disputed
Jan 28, 2026