Logo

Woz logo variants for different backgrounds.

Black Logo

Usage: Light backgrounds, primary logo

White Logo

Usage: Dark backgrounds, footer, overlays

Mascot

The Woz Wizard - our pixelated companion representing AI-powered app building.

Full Wizard

Usage: Hero sections, large displays

Wizard Avatar

Usage: Profile pictures, small displays, avatars (with blinking and interactive sleep animation)

Wizard Avatar (Cropped)

Usage: Closely cropped avatar variant with more prominent wizard display (with blinking and interactive sleep animation)

Full Wizard (Dark Mode)

Usage: Hero sections, large displays on dark backgrounds

Wizard Avatar (Dark Mode)

Usage: Profile pictures, small displays, avatars on dark backgrounds (with blinking and interactive sleep animation)

Brand Green Wizard

Pixel-art mascot on brand green (#93E849). Use as a square brand asset — app icon, social avatar, profile picture, OG / share image. Always render with pixelated image-rendering so the chunky pixels stay crisp at any size; never resample-smooth it. File: wizard-green.png.

Wizard Avatar (Cropped, Dark Mode)

Usage: Closely cropped avatar on dark backgrounds (with blinking and interactive sleep animation)

Colors

Woz brand colors and system palette.

Brand Colors

Woz Brand Green

Hex: #93E849
RGB: 147, 232, 73
Usage: Primary brand color, accents, CTAs. Not accessible for text on light backgrounds.

Brand Green (Accessible)

Hex: #5A9E1F
RGB: 90, 158, 31
Contrast: 4.51:1 on white (WCAG AA ✓)
Usage: Links, interactive text, accessible CTAs. Recommended for text and links.

System Colors

Black

#000000

True White

#FFFFFF

Off-White

#FDFAF5

Grey 50

#F6F5F2

Grey 100

#EDEAE4

Grey 200

#E0DCD6

Grey 300

#D3CFC8

Grey 400

#B5B1AA

Grey 500

#8B877F

Usage: Disabled button states

Grey 600

#6B6761

Grey 700

#4D4A45

⚠️ Minimal use (component library only)

Grey 800

#2A2825

Usage: Section 5 dark mode cards & backgrounds

Grey 900

#201F1C

Utility Colors

Accent Purple

Hex: #8D8CD1
RGB: 141, 140, 209
Usage: Section labels, metadata, secondary accent

Accent Red

Hex: #FF0000
RGB: 255, 0, 0
Usage: Negative indicators, alerts

Success Green

Hex: #00D11F
RGB: 0, 209, 31
Usage: Positive indicators, success states, growth metrics

Typography

Saira font family is used throughout the site for a consistent, modern monospace aesthetic.

Build apps that earn

typo-title-hero

Responsive sizing:

• Minimum: 3rem (36pt) on small screens
• Scales with viewport: 8% of screen width
• Maximum: 6rem (72pt) on large screens

Weight: 700 (Bold) | LH: 1.1 | LS: -0.03em | Color: Black

Get it done, all in one

typo-title-section

Responsive sizing:

• Minimum: 1.75rem (28pt) on small screens
• Scales with viewport: 4% of screen width
• Maximum: 2.75rem (44pt) on large screens

Weight: 600 (Semi-bold) | LH: 1.2 | LS: -0.02em | Color: Black

Connect live data

typo-heading

Size: 1.5rem (18pt) | Weight: 600 (Semibold) | LH: 1.3 | Color: Black

Multi-currency support

typo-subheading

Size: 1.25rem (15pt) | Weight: 600 (Semibold) | LH: 1.4 | Color: Black

Woz is the AI-enabled mobile app builder for business builders

typo-subtitle

Size: 1.25rem (15pt) | Weight: 300 (Light) | LH: 1.5 | Color: Grey 600

It's never been easier to build a product and launch a secondary income stream.

typo-body-large

Size: 1.1rem (13pt) | Weight: 400 (Regular) | LH: 1.7 | Color: Black

Access external data sources and APIs to power your app with real-time information.

typo-body-base

Size: 1rem (12pt) | Weight: 400 (Regular) | LH: 1.6 | Color: Black

Everything in Pro, plus dedicated account manager and expert development support.

typo-body-strong

Size: 1rem (12pt) | Weight: 600 (Semibold) | LH: 1.6 | Color: Black

"Finally, a tool that doesn't compromise on design. My clients love it."

typo-body-small

Size: 0.95rem (11pt) | Weight: 400 (Regular) | LH: 1.6 | Color: Black

Start for free

typo-label

Size: 0.875rem (11pt) | Weight: 500 (Medium) | LH: 1.5 | Color: Black

SECTION_01 / who its for

typo-label-small

Icons

Icon set used throughout the site for visual communication.

Icon Sizes

Small

Size: 10px × 10px
Usage: Inline text, tight spaces

Medium

Size: 16px × 16px
Usage: UI elements, buttons

Large

Size: 24px × 24px
Usage: Feature sections, headers

Feature Icons

Connect

icons/connect.svg

Bar Chart

icons/bar-chart.svg

Eye

icons/eye.svg

Social Media Icons

X (Twitter)

Inline SVG

Discord

Inline SVG

Buttons

Primary and secondary button styles

Interactive Demo TRY IT

States

Primary Button

Default

Hover

Disabled

Secondary Button

Default

Hover

Disabled

Sizes

Small

Class: btn-small
Font: 0.875rem (14pt) | Padding: 0.5rem 1rem
Usage: Navigation, inline actions

Default

Class: btn
Font: 1rem (16pt) | Padding: 0.875rem 1.75rem
Usage: Standard actions, forms

Large

Class: btn-large
Font: 1.125rem (18pt) | Padding: 1.25rem 2.5rem
Usage: Primary CTAs, plan cards, hero actions

Dark Mode Variations

Primary Dark

Default

Hover

Disabled

Secondary Dark

Default

Hover

Disabled

Section Labels

Red technical callouts for section identification

Interactive Demo TRY IT

Section label

Variations

Standard

Section label

With Animation

Section label

Chat Box

Interactive input component for app idea submission with animated wizard avatar

Interactive Demo TRY IT

Woz

Good morning! What app do you want to build today?

Testimonials

Customer testimonial cards

Interactive Demo TRY IT

EM

Emma Martinez

Solo Entrepreneur

"Launched my fitness coaching app in 3 days. Already at $2k MRR."

Variations

Standard

JC

James Chen

Product Designer

"Finally, a tool that doesn't compromise on design."

Feature Table

Comparison table for features

Interactive Demo TRY IT

Feature

Others

Woz

AI-powered generation

○

●

Real backend

×

●

Check Marks

Full

● Included

Partial

○ Partial

None

× Not included

Icon Cards

Versatile cards with icons for features, integrations, or any content

Interactive Demo TRY IT

Connect live data

Access external data sources and APIs to power your app with real-time information

States

Default

Study usage

Gather analytics and user insights before you launch to validate your market

Hover

Study usage

Gather analytics and user insights before you launch to validate your market

Code Features

Code quality feature rows

Interactive Demo TRY IT

Features display with grey-900 background at 80% opacity, grey-900 border, and fade-in animation

[ SCALABLE ]

Clean, well-organized code that developers can understand and confidently adjust.

[ SECURE ]

Production-grade code with built-in best practices like strict type safety and proper secrets management

[ MAINTAINABLE ]

Code that's easy to extend, review, and improve over time so that you can add features without major rewrites.

Code Tools

Workspace logos without labels or hover states

Case Study Card

Customer success story showcase

Interactive Demo TRY IT

MOONFLOW

10k+

Users in beta

"We launched our meditation app on Woz and built a community of 10,000 beta users."

LT

Luna Torres

Founder, Moonflow

Learn more →

Tweet Cards

Influencer insights and playbooks

Interactive Demo TRY IT

MH

Marc Henderson

@marchbuilds

Just hit $10k MRR with my side project app. Built it in 2 weeks, launched on Product Hunt, now it's my full-time income.

SK

Sarah Kim

@sarahshipscode

My playbook for App Store speed runs: 1) Build MVP in public 2) Get 50 beta testers early 3) Perfect your screenshots first.

States

Default

DL

David Lee

@davidleeco

Focus on solving one problem really well, charge from day one, and ship fast.

Hover

DL

David Lee

@davidleeco

Focus on solving one problem really well, charge from day one, and ship fast.

Plan Cards

Pricing tier cards

Interactive Demo TRY IT

Free

$0 /month

Install in seconds — no account required
$100/mo in free Claude Code savings
Full plugin access

PER SEAT

Pro

$20 /week

Unlimited Claude Code savings
All enhanced coding tools
Priority support

Enterprise

Custom

Everything in Pro
Team management & SSO
Dedicated support

States

Default

Free

$0

Feature 1

Featured

POPULAR

Pro

$49

Feature 1

Stock Ticker

Real-time stock price display

Interactive Demo TRY IT

META $485.20 +3.45%

UBER $68.45 +1.82%

SNAP $11.20 -2.14%

SPOT $312.80 +4.23%

States

Positive

SPOT $312.80 +4.23%

Negative

SNAP $11.20 -2.14%

Avatar

User initials display

Interactive Demo TRY IT

EM

JC

SD

LT

Examples

Two Letters

EM

Different Initials

JC

Images

Visual treatment styles for images in sections

Light Section Treatment

Used in light backgrounds. Example: Global reach section

<div class="global-visual">
    <img src="image.jpg" alt="Description">
</div>

.global-visual {
    border: var(--border-width) solid var(--border-color);
    background: var(--color-grey-100);
    border-radius: 4px;
}

Dark Section Treatment

Used in dark backgrounds with grainy texture. Example: For developers section

<div class="code-export-visual">
    <img src="eleven-labs-grainy.png" alt="Code workspace" style="width: 100%; height: 100%; object-fit: cover;">
</div>

.code-export-visual {
    border: var(--border-width) solid var(--color-grey-700);
    background-color: var(--color-grey-800);
    border-radius: 4px;
    overflow: hidden;
    height: 400px;
}

Integration Logos

Integration partner logos used in the automated integrations section carousel

<div class="integration-logos-carousel">
    <div class="integration-logos-track">
        <img src="integration-logos-batch-1/stripe@3x.png" alt="Stripe" class="integration-logo">
        <img src="integration-logos-batch-1/open ai@3x.png" alt="OpenAI" class="integration-logo">
        <!-- Additional logos... -->
    </div>
</div>

.integration-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
    border: var(--border-width) solid var(--color-grey-100);
    flex-shrink: 0;
}

App Revenue Card

Display app metrics including icon, name, category, publish date, and earnings

Interactive Demo TRY IT

Examples

Dark Background Variant

For use in dark sections like the code/developer sections

Code

For dark backgrounds, wrap the card in a .section-code container

<!-- Component Placeholder -->
<div class="app-revenue-card-placeholder"
     data-icon="app icons/spotify.png"
     data-name="Spotify"
     data-description="Music streaming"
     data-date="Published Oct 2008"
     data-revenue="$45.2k"></div>

<!-- Load component JavaScript -->
<script src="components/app-revenue-card.js"></script>

<!-- Dark Background Variant -->
<div class="section-code">
    <div class="app-revenue-card-placeholder"
         data-icon="app icons/uber.png"
         data-name="Uber"
         data-description="Ride sharing"
         data-date="Published May 2009"
         data-revenue="$127k"></div>
</div>

Install Terminal

Two-line copyable terminal block used as the primary install CTA on the homepage. Brand-green hairline border, slow breathing glow, and a small COPY button in the header. Variant .hero-install-terminal turns the glow on; the base .sc-terminal is the single-line variant used on the savings-check section.

Hero variant (multi-line, breathing glow)

terminal

$claude plugin marketplace add WithWoz/wozcode-plugin
$claude plugin install woz@wozcode-marketplace

<div class="sc-terminal hero-install-terminal" onclick="copyHeroCmd()">
  <div class="sc-term-header">
    <span class="sc-term-dot sc-term-dot-red"></span>
    <span class="sc-term-dot sc-term-dot-yellow"></span>
    <span class="sc-term-dot sc-term-dot-green"></span>
    <span class="sc-term-title">terminal</span>
    <button class="sc-term-copy" id="hero-copy-btn" type="button"
      onclick="event.stopPropagation(); copyHeroCmd()">COPY</button>
  </div>
  <pre class="sc-term-body" id="hero-cmd"><span class="sc-term-line"><span class="sc-term-prompt">$</span><span class="sc-cmd-bin">claude</span> ...</span>
<span class="sc-term-line">...</span></pre>
</div>

Single-line variant (no glow)

terminal

$curl -fsSL https://wozcode.com/savings-check.js | node -

Pills & Badges

Small inline highlight chips. Used to call out specific savings amounts, optional steps, and the most important word in a feature bullet.

Savings pill (`.pricing-card-pill`)

Highlights a discrete benefit on the Free pricing card. Wraps to two lines on narrow widths because the parent card maxes out at ~360px.

★ $200/mo in savings with a corporate email

<div class="pricing-card-pill">
  <span class="pricing-card-pill-star">★</span>
  <span class="pricing-card-pill-text">
    <strong>$200/mo in savings</strong> with a corporate email
  </span>
</div>

Optional badge (`.step-optional`)

Used on docs install steps that are optional. Purple accent (--color-accent-purple) so it doesn't compete with the green CTA hierarchy.

5 Log in to your Woz account Optional

6 Run a one-line check Optional

<div class="step-label">
  Log in to your Woz account
  <span class="step-optional">Optional</span>
</div>

Inline feature highlight (`.pricing-feature-highlight`)

Inline brand-green bold inside a regular feature bullet — used to make the headline benefit pop without adding new chrome.

Install in seconds — no account required

$100/mo in free Claude Code savings (no account needed)

Full plugin access on the free plan

Sign in (optional) for a savings dashboard

<li>
  <strong class="pricing-feature-highlight">
    $100/mo in free Claude Code savings
  </strong>
  (no account needed)
</li>