<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ADU Permits in San Francisco — sfpermits.ai</title>
<meta name="description" content="Get ADU permit guidance for San Francisco. See permit counts, timeline estimates, and fee breakdowns for accessory dwelling units. Free instant analysis.">
<meta property="og:title" content="ADU Permits in San Francisco — sfpermits.ai">
<meta property="og:description" content="ADU permit guidance for SF homeowners. Instant permit checklist, timeline estimate, and fee breakdown. Free — no signup required.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://sfpermits.ai/adu">
<meta property="og:image" content="https://sfpermits.ai/static/og-card.png">
<meta property="og:site_name" content="sfpermits.ai">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ADU Permits in San Francisco">
<meta name="twitter:description" content="Free ADU permit guidance for SF homeowners. Instant analysis, no signup.">
<meta name="twitter:image" content="https://sfpermits.ai/static/og-card.png">
<style nonce="{{ csp_nonce }}">
:root {
--bg: #0f1117;
--surface: #1a1d27;
--surface-2: #252834;
--border: #333749;
--text: #e4e6eb;
--text-muted: #8b8fa3;
--accent: #4f8ff7;
--accent-hover: #3a7ae0;
--success: #34d399;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
}
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
/* Header */
header { border-bottom: 1px solid var(--border); padding: 18px 0; }
header .container { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 1.3rem; font-weight: 700; color: var(--accent); text-decoration: none; }
/* Hero */
.hero { padding: 60px 0 40px; text-align: center; }
.hero h1 {
font-size: 2.4rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 16px;
color: var(--text);
}
.hero h1 span { color: var(--accent); }
.hero p {
font-size: 1.1rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto 32px;
}
.cta-btn {
display: inline-block;
background: var(--accent);
color: #fff;
padding: 14px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: background 0.2s;
}
.cta-btn:hover { background: var(--accent-hover); }
/* Stats */
.stats { padding: 40px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 24px; }
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
text-align: center;
}
.stat-number { font-size: 2.5rem; font-weight: 800; color: var(--accent); }
.stat-label { font-size: 0.9rem; color: var(--text-muted); margin-top: 6px; }
/* ADU types */
.adu-types { padding: 40px 0; }
.section-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; }
.adu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.adu-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px;
}
.adu-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.adu-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.adu-tag {
display: inline-block;
background: rgba(79, 143, 247, 0.15);
color: var(--accent);
border-radius: 4px;
padding: 2px 8px;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 10px;
}
/* What you need */
.what-you-need { padding: 40px 0; }
.steps { list-style: none; counter-reset: step; }
.steps li {
counter-increment: step;
padding: 16px 0 16px 52px;
position: relative;
border-bottom: 1px solid var(--border);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 18px;
width: 32px;
height: 32px;
background: var(--accent);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
}
.steps li strong { display: block; margin-bottom: 4px; }
.steps li p { color: var(--text-muted); font-size: 0.9rem; }
/* CTA section */
.cta-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 40px;
margin: 40px 0 60px;
text-align: center;
}
.cta-section h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 12px; }
.cta-section p { color: var(--text-muted); margin-bottom: 24px; max-width: 500px; margin-left: auto; margin-right: auto; }
/* Footer */
footer { border-top: 1px solid var(--border); padding: 24px 0; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
</style>
</head>
<body>
<header>
<div class="container">
<a href="/" class="logo">sfpermits.ai</a>
</div>
</header>
<main>
<div class="container">
<!-- Hero -->
<section class="hero">
<h1>ADU Permits in <span>San Francisco</span></h1>
<p>Building an accessory dwelling unit? Get an instant permit checklist, timeline estimate, and fee breakdown — free, no signup required.</p>
<a href="/analyze-preview?desc=Accessory+Dwelling+Unit+ADU+garage+conversion+San+Francisco" class="cta-btn">
Start your ADU analysis →
</a>
</section>
<!-- Stats -->
<section class="stats">
<h2 class="section-title">ADU Permit Activity in SF</h2>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number">
{% if stats.issued_2025 and stats.issued_2025 > 0 %}
{{ stats.issued_2025 }}+
{% else %}
1,200+
{% endif %}
</div>
<div class="stat-label">ADU permits issued in 2025</div>
</div>
<div class="stat-card">
<div class="stat-number">
{% if stats.median_days %}
{{ stats.median_days }}
{% else %}
180
{% endif %}
</div>
<div class="stat-label">Median days to permit</div>
</div>
<div class="stat-card">
<div class="stat-number">$15K+</div>
<div class="stat-label">Typical permit fees</div>
</div>
<div class="stat-card">
<div class="stat-number">4</div>
<div class="stat-label">Common ADU types in SF</div>
</div>
</div>
</section>
<!-- ADU Types -->
<section class="adu-types">
<h2 class="section-title">Common ADU Types in San Francisco</h2>
<div class="adu-grid">
<div class="adu-card">
<span class="adu-tag">Most Popular</span>
<h3>Garage Conversion</h3>
<p>Convert an attached or detached garage to living space. Lower construction costs since structure exists.</p>
</div>
<div class="adu-card">
<span class="adu-tag">In-Law Unit</span>
<h3>Basement ADU</h3>
<p>Finish or convert an existing basement. May require egress windows and waterproofing.</p>
</div>
<div class="adu-card">
<span class="adu-tag">Standalone</span>
<h3>New Detached ADU</h3>
<p>New structure on your lot, separate from the main home. Requires full foundation and utilities.</p>
</div>
<div class="adu-card">
<span class="adu-tag">Junior ADU</span>
<h3>JADU (up to 500 sqft)</h3>
<p>Junior ADU within the existing home footprint — typically a converted bedroom with its own entrance.</p>
</div>
</div>
</section>
<!-- What you need -->
<section class="what-you-need">
<h2 class="section-title">What the Permit Process Looks Like</h2>
<ol class="steps">
<li>
<strong>Pre-application meeting (optional but recommended)</strong>
<p>Schedule a 30-minute planning meeting at SF Planning to catch issues early. Free for ADUs.</p>
</li>
<li>
<strong>Hire a licensed architect or designer</strong>
<p>SF requires stamped architectural drawings for most ADU permits. Your designer prepares site plans, floor plans, and elevations.</p>
</li>
<li>
<strong>Submit to SF Planning Department</strong>
<p>Planning reviews for zoning compliance (setbacks, height, FAR). Most ADUs are over-the-counter (OTC) if they meet state ADU law.</p>
</li>
<li>
<strong>DBI building permit</strong>
<p>After Planning, submit structural, electrical, and mechanical plans to the Department of Building Inspection. Timeline: 2–6 months for in-house review.</p>
</li>
<li>
<strong>Construction + inspections</strong>
<p>DBI inspects at foundation, framing, rough-in, and final stages. Certificate of Occupancy issued after final inspection passes.</p>
</li>
</ol>
</section>
<!-- CTA -->
<section class="cta-section">
<h2>Get your ADU permit checklist instantly</h2>
<p>Describe your project and get a full list of required permits, estimated fees, and expected timeline — free, no account needed.</p>
<a href="/analyze-preview?desc=Accessory+Dwelling+Unit+ADU+garage+conversion+San+Francisco" class="cta-btn">
Start free ADU analysis →
</a>
</section>
</div>
</main>
<footer>
<div class="container">
<p>© 2025 sfpermits.ai — San Francisco Building Permit Intelligence</p>
</div>
</footer>
</body>
</html>
