WardenDesign 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.

The Palette

Our color system is built on a Navy + Orange foundation with Slate neutrals for supporting UI.

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

Typography

Inter is our primary typeface, chosen for its excellent readability and modern geometric design.

Font Family

• Sans (Primary): Inter
• Monospace: SF Mono

Type Scale

• Display text-5xl lg:text-6xl font-bold tracking-tight
• The Trust Protocol H1 text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight
• Start with AI H2 text-2xl sm:text-3xl font-semibold tracking-tight
• Choose how you build H3 text-xl sm:text-2xl font-semibold
• Agent as a Service H4 text-lg font-semibold
• Section Title Body Large text-base sm:text-lg
• Body text-sm sm:text-base
• Small text-xs sm:text-sm
• Label text-xs font-semibold uppercase tracking-[0.18em]
• WARDEN EXPRESS Mono font-mono text-sm

npm install @warden/cli

Component Library

Reusable UI components that embody the Warden design language.

Buttons

Button variants for different contexts and emphasis levels.

• Primary (Navy)
  • Join Warden Default Small
• Accent (Orange)
  • Get Started Default Small
• Secondary (Outline)
  • Learn More Default Small
• Destructive
  • Delete Project Cancel
• Toggle Group
  • For Founders For Builders

Form Elements

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

• Email address
  • We'll never share your email.
• Password
  • Password must be at least 8 characters.
• I am a...
  • Founder Agency Developer
• Project Type
  • New MVP Rescue AI Tool

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
  • Email address
  • Join Warden

Spacing & Effects

Border radius, shadows, and spacing patterns used across the design system.

Border Radius

Shadows

• Card Small: Used for pricing cards
• Card Large: Used for form cards
• Button: Primary button shadow
• Input Focus: Focus state for inputs

App Components

Dashboard and application-specific components for the Warden platform.

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.

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.