diff --git a/README.md b/README.md
index 103ce16..633df30 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,14 @@ open file:/tmp/SlothCreatorSite/documentation/slothcreator.html
 
 ## Status
 
+### 2021-07-06
+
+Well, it's getting closer and the source code starts to be quite
+reasonable as well. Though you can still tell it started as a
+quick hack.
+
+### 2021-07-03
+
 **It's not ready for production yet, needs some more work.**
 
 This is a very quick hack/PoC full of quirks,
@@ -53,10 +61,10 @@ It's not much yet, but a pretty good starting point.
 
 ## TODO
 
-- [ ] better templates
-- [ ] support tutorials (task sections etc)
+- [ ] better API doc templates
+- [ ] improve tutorial templates
 - [ ] better CSS
-- [ ] refactor code into a proper type and module for easier reuse
+- [x] refactor code into a proper type and module for easier reuse
 - [x] drop dependency on Macro
 - [ ] support Mustache templates in the filesystem! (for customization & faster testing)
 
diff --git a/Sources/DocCHTMLExporter/DZRenderingContext.swift b/Sources/DocCHTMLExporter/DZRenderingContext.swift
index 9f2534d..9d7f5d0 100644
--- a/Sources/DocCHTMLExporter/DZRenderingContext.swift
+++ b/Sources/DocCHTMLExporter/DZRenderingContext.swift
@@ -32,7 +32,8 @@ open class DZRenderingContext {
   }
   
   public struct Templates {
-    // refer to them using this struct, to make them configurable later on.
+
+    public init() {}
     
     /// Arguments:
     /// relativePathToRoot, highlightCDN, contentHTML, footerHTML, title,
diff --git a/Sources/DocCHTMLExporter/Templates/README.md b/Sources/DocCHTMLExporter/Templates/README.md
new file mode 100644
index 0000000..5eb9474
--- /dev/null
+++ b/Sources/DocCHTMLExporter/Templates/README.md
@@ -0,0 +1,25 @@
+<h2>docc2html Templates (Code)
+  <img src="http://zeezide.com/img/docz/docc2html100.png"
+           align="right" width="100" height="100" />
+</h2>
+
+This folder contains the default Mustache templates used,
+plus the `Site.css` containing the default CSS.
+
+It is used as a fallback if the `Templates` (resource) directory in the package root cannot 
+be reached, or not `-t/--templates` option was specified.
+When PR'ing changes, please do so in the resource directory.
+
+
+### Who
+
+**docc2html** is brought to you by
+the
+[Always Right Institute](http://www.alwaysrightinstitute.com)
+and
+[ZeeZide](http://zeezide.de).
+We like 
+[feedback](https://twitter.com/ar_institute), 
+GitHub stars, 
+cool [contract work](http://zeezide.com/en/services/services.html),
+presumably any form of praise you can think of.
diff --git a/Sources/DocCStaticExporter/DocCStaticExporter.swift b/Sources/DocCStaticExporter/DocCStaticExporter.swift
index 326d93e..f6ba4dc 100644
--- a/Sources/DocCStaticExporter/DocCStaticExporter.swift
+++ b/Sources/DocCStaticExporter/DocCStaticExporter.swift
@@ -29,16 +29,22 @@ open class DocCStaticExporter {
   public let options     : Options
   public let target      : DocCStaticExportTarget
   public let archiveURLs : [ URL ]
-  public let stylesheet  = DZRenderingContext.defaultStyleSheet
-  
+  public let stylesheet  : String
+  public let templates   : DZRenderingContext.Templates?
+
   public var dataFolderPathes = Set<String>()
 
-  public init(target: DocCStaticExportTarget, archivePathes: [ String ],
-              options: Options, logger: Logger = Logger(label: "docc2html"))
+  public init(target     : DocCStaticExportTarget, archivePathes: [ String ],
+              options    : Options,
+              templates  : DZRenderingContext.Templates? = nil,
+              stylesheet : String? = nil,
+              logger     : Logger  = Logger(label: "docc2html"))
   {
     self.target      = target
     self.archiveURLs = archivePathes.map(URL.init(fileURLWithPath:))
     self.options     = options
+    self.templates   = templates
+    self.stylesheet  = stylesheet ?? DZRenderingContext.defaultStyleSheet
     self.logger      = logger
   }
   
@@ -170,7 +176,8 @@ open class DocCStaticExporter {
             references       : document.references,
             isIndex          : true,
             dataFolderPathes : dataFolderPathes,
-            indexLinks       : true
+            indexLinks       : true,
+            templates        : templates
           )
           
           let html = try ctx.buildDocument(document, in: folder)
@@ -191,7 +198,8 @@ open class DocCStaticExporter {
             references       : document.references,
             isIndex          : false,
             dataFolderPathes : dataFolderPathes,
-            indexLinks       : buildIndex
+            indexLinks       : buildIndex,
+            templates        : templates
           )
           
           let html = try ctx.buildDocument(document, in: folder)
diff --git a/Sources/docc2html/ExitCode.swift b/Sources/docc2html/ExitCode.swift
index 3bf68c7..efce622 100644
--- a/Sources/docc2html/ExitCode.swift
+++ b/Sources/docc2html/ExitCode.swift
@@ -17,6 +17,7 @@ enum ExitCode: Int32, Swift.Error {
   case targetDirectoryExists         = 4
   case couldNotLoadStaticResource    = 5
   case couldNotCopyStaticResource    = 6
+  case couldNotFindTemplatesDir      = 7
 }
 
 extension ExitCode {
diff --git a/Sources/docc2html/LoadTemplates.swift b/Sources/docc2html/LoadTemplates.swift
new file mode 100644
index 0000000..9d66f5d
--- /dev/null
+++ b/Sources/docc2html/LoadTemplates.swift
@@ -0,0 +1,60 @@
+//
+//  LoadTemplates.swift
+//  docc2html
+//
+//  Created by Helge Heß.
+//  Copyright © 2021 ZeeZide GmbH. All rights reserved.
+//
+
+import mustache
+import Foundation
+import DocCHTMLExporter // @docczz/docc2html
+
+func loadTemplatesAndStylesheet(from path: String)
+     -> ( templates: DZRenderingContext.Templates, stylesheet: String )
+{
+  let baseURL = URL(fileURLWithPath: path)
+  let cssURL  = baseURL.appendingPathComponent("site.css")
+  
+  let stylesheet = (try? String(contentsOf: cssURL))
+                ?? DZRenderingContext.defaultStyleSheet
+  
+  var templates  = DZRenderingContext.Templates()
+  
+  func load(_ name: String) -> Mustache? {
+    let url = baseURL.appendingPathComponent(name)
+                     .appendingPathExtension("mustache")
+    guard FileManager.default.fileExists(atPath: url.path) else {
+      logger.trace("No filesystem template for:", name)
+      return nil
+    }
+    
+    do {
+      let s = try String(contentsOf: url)
+      let m = Mustache(s)
+      logger.trace("Did load template:", name, "from:", url.path)
+      return m
+    }
+    catch {
+      logger.error("Failed to load template:", name, error)
+      return nil
+    }
+  }
+  
+  if let m = load("Page")               { templates.htmlWrapper         = m }
+  if let m = load("DocumentContent")    { templates.documentContent     = m }
+  if let m = load("Navigation")         { templates.navigation          = m }
+  if let m = load("PrimaryContent")     { templates.primaryContentGrid  = m }
+  if let m = load("CodeListing")        { templates.codeListing         = m }
+  if let m = load("StepContent")        { templates.step                = m }
+  if let m = load("DeclarationSection") { templates.declarationSection  = m }
+  if let m = load("ParametersSection")  { templates.parametersSection   = m }
+  if let m = load("Sections")           { templates.contentTableSection = m }
+  if let m = load("TopicTitle")         { templates.topicTitle          = m }
+  if let m = load("Hero")               { templates.hero                = m }
+  if let m = load("Task")               { templates.task                = m }
+  if let m = load("TaskIntro")          { templates.taskIntro           = m }
+  if let m = load("Volume")             { templates.volume              = m }
+  
+  return ( templates: templates, stylesheet: stylesheet )
+}
diff --git a/Sources/docc2html/Options.swift b/Sources/docc2html/Options.swift
index 60f85e1..58dec8c 100644
--- a/Sources/docc2html/Options.swift
+++ b/Sources/docc2html/Options.swift
@@ -23,11 +23,10 @@ func usage() {
     
     Options:
     
-      -f/--force:   overwrite/merge target directories and files
-      -s/--silent:  silent logging
-      -v/--verbose: verbose logging
-      --keep-hash:  keep hashes in resource names
-      --copy-css:   copy the CSS folder in the archive to the target
+      -f/--force:                 overwrite/merge target directories and files
+      -s/--silent:                silent logging
+      -v/--verbose:               verbose logging
+      -t/--templates <directory>: directory containing template files
     """
   )
 }
@@ -39,28 +38,64 @@ struct Options {
                     = [ .buildIndex, .buildAPIDocs, .buildTutorials ]
   let archivePathes : [ String ]
   let targetPath    : String
+  let templatesPath : String?
   let logFactory    : ( String ) -> LogHandler
   
   var targetURL     : URL { URL(fileURLWithPath: targetPath) }
 
   init?(argv: [ String ]) {
-    if argv.contains("--force") || argv.contains("-f") {
-      exportOptions.insert(.force)
+    var argv = argv
+    
+    func processFlag(_ long: String, _ short: String = "") -> Bool {
+      let ok = argv.contains(long)
+            || (short.isEmpty ? false : argv.contains(short))
+      argv.removeAll(where: { $0 == long || $0 == short })
+      return ok
     }
-    if argv.contains("--keep-hash") { exportOptions.insert(.keepHash     ) }
-    if argv.contains("--copy-css")  { exportOptions.insert(.copySystemCSS) }
     
-    let silent  = argv.contains("--silent")  || argv.contains("-s")
-    let verbose = argv.contains("--verbose") || argv.contains("-v")
-
-    logFactory = { label in
-      var handler = StreamLogHandler.standardOutput(label: label)
-      if      verbose { handler.logLevel = .trace }
-      else if silent  { handler.logLevel = .error }
-      return handler
+    if processFlag("--force", "-f") { exportOptions.insert(.force        ) }
+    if processFlag("--keep-hash")   { exportOptions.insert(.keepHash     ) }
+    if processFlag("--copy-css")    { exportOptions.insert(.copySystemCSS) }
+    
+    if let idx = argv.firstIndex(of: "-t")
+              ?? argv.firstIndex(of: "--templates"),
+       (idx + 1) < argv.count
+    {
+      argv.remove(at: idx)
+      templatesPath = argv[idx]
+      argv.remove(at: idx)
+    }
+    else {
+      let binURL = URL(fileURLWithPath: #filePath)
+      let pkgURL = binURL.deletingLastPathComponent()
+                         .deletingLastPathComponent()
+                         .deletingLastPathComponent()
+      let url    = pkgURL.appendingPathComponent("Templates")
+      var isDir  : ObjCBool = false
+      let fm     = FileManager.default
+      if fm.fileExists(atPath: url.path, isDirectory: &isDir), isDir.boolValue {
+        templatesPath = url.path
+      }
+      else {
+        templatesPath = nil
+      }
+    }
+    
+    do { // Logging
+      let silent  = processFlag("--silent",  "-s")
+      let verbose = processFlag("--verbose", "-v")
+      
+      logFactory = { label in
+        var handler = StreamLogHandler.standardOutput(label: label)
+        if      verbose { handler.logLevel = .trace }
+        else if silent  { handler.logLevel = .error }
+        return handler
+      }
     }
     
-    let pathes  = argv.dropFirst().filter { !$0.hasPrefix("-") }
+    // TODO: scan for unprocessed `-` and throw an error?
+        
+    let pathes    = argv.dropFirst().filter { !$0.hasPrefix("-") }
     guard pathes.count > 1 else { return nil }
     archivePathes = Array(pathes.dropLast())
     targetPath    = pathes.last ?? ""
diff --git a/Sources/docc2html/main.swift b/Sources/docc2html/main.swift
index 05746b4..5cb8562 100644
--- a/Sources/docc2html/main.swift
+++ b/Sources/docc2html/main.swift
@@ -9,6 +9,10 @@
 import Foundation
 import Logging            // @apple/swift-log
 import DocCStaticExporter // @docczz/docc2html
+import DocCHTMLExporter   // @docczz/docc2html
+
+
+// MARK: - Process Commandline Arguments and Setup Logging
 
 guard let options = Options(argv: CommandLine.arguments) else {
   usage()
@@ -16,11 +20,37 @@ guard let options = Options(argv: CommandLine.arguments) else {
 }
 
 LoggingSystem.bootstrap(options.logFactory)
+let logger = Logger(label: "docc2html")
+
+
+// MARK: - Load Templates, if available
+
+let templates  : DZRenderingContext.Templates?
+let stylesheet : String?
+if let path = options.templatesPath {
+  guard FileManager.default.fileExists(atPath: path) else {
+    logger.error("Did not find templates directory:", path)
+    exit(ExitCode.couldNotFindTemplatesDir)
+  }
+  
+  logger.trace("Using templates directory:", path)
+  ( templates, stylesheet ) = loadTemplatesAndStylesheet(from: path)
+}
+else {
+  templates  = nil
+  stylesheet = nil
+}
+
+
+// MARK: - Setup Site Exporter and Run
 
 let exporter = DocCStaticExporter(
   target        : DocCFileSystemExportTarget(targetPath: options.targetPath),
   archivePathes : options.archivePathes,
-  options       : options.exportOptions
+  options       : options.exportOptions,
+  templates     : templates,
+  stylesheet    : stylesheet,
+  logger        : logger
 )
 
 do {
diff --git a/Templates/CodeListing.mustache b/Templates/CodeListing.mustache
new file mode 100644
index 0000000..86acdbc
--- /dev/null
+++ b/Templates/CodeListing.mustache
@@ -0,0 +1,6 @@
+<div data-syntax="{{syntax}}" class="code-listing">
+  <div class="container-general">
+    <pre><code>{{#lines}}<span class="code-line-container"><span data-line-number="{{{line}}}" class="code-number" style="display: none;"></span><span class="code-line">{{code}}</span></span>
+{{/lines}}</code></pre>
+  </div>
+</div>
diff --git a/Templates/DeclarationSection.mustache b/Templates/DeclarationSection.mustache
new file mode 100644
index 0000000..71d91fb
--- /dev/null
+++ b/Templates/DeclarationSection.mustache
@@ -0,0 +1,6 @@
+<section id='declaration' class='declaration'>
+  <h2>{{title}}</h2>
+  <div class='declaration-group'>
+    <pre class='source indented'><code>{{{tokensHTML}}}</code></pre>
+  </div>
+</section>
diff --git a/Templates/DocumentContent.mustache b/Templates/DocumentContent.mustache
new file mode 100644
index 0000000..af3e302
--- /dev/null
+++ b/Templates/DocumentContent.mustache
@@ -0,0 +1,10 @@
+{{{navigationHTML}}}
+<main id="main" role="main" class="main">
+  {{{topicTitleHTML}}}
+  {{{primaryContentHTML}}}
+  {{#sectionsContentHTML}}
+    <div class="sections">{{{sectionsContentHTML}}}</div>
+  {{/sectionsContentHTML}}
+  {{{topicSectionsHTML}}}
+  {{{seeAlsoHTML}}}
+</main>
diff --git a/Templates/Hero.mustache b/Templates/Hero.mustache
new file mode 100644
index 0000000..b7d6777
--- /dev/null
+++ b/Templates/Hero.mustache
@@ -0,0 +1,29 @@
+<div id="introduction" class="tutorial-hero">
+  <div class="hero dark">
+    {{#backgroundImage}}
+      <div class="bg"
+       style="background-image: url(&quot;{{backgroundImage}}&quot;);"></div>
+    {{/backgroundImage}}
+
+    <div class="row">
+      <div class="col large-7 medium-9 small-12">
+        <div class="headline"><span class="eyebrow">{{eyebrow}}</span>
+          <h1 class="heading">{{title}}</h1>
+        </div>
+      </div>
+      <div class="intro">
+        <div class="content">{{{contentHTML}}}</div>
+      </div>
+      <div class="metadata">
+        <div class="item">
+          <div class="content">
+            <div class="duration">{{duration}}
+              <div class="minutes">min</div>
+            </div>
+          </div>
+          <div class="bottom">Estimated Time</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/Templates/Navigation.mustache b/Templates/Navigation.mustache
new file mode 100644
index 0000000..3939cbc
--- /dev/null
+++ b/Templates/Navigation.mustache
@@ -0,0 +1,26 @@
+<nav role="navigation" class="nav documentation-nav">
+  <div class="nav__wrapper">
+    <div class="nav__background"></div>
+    <div class="nav-content">
+      <div class="nav-title">
+        <span class="nav-title-link inactive">{{title}}</span>
+      </div>
+      <div class="nav-menu">
+        <div class="nav-menu-tray">
+          <ul class="nav-menu-items hierarchy">
+            {{#navitems}}
+              <li class="nav-menu-item hierarchy-item">
+                {{#isCurrent}}
+                  <span class="current item">{{title}}</span>
+                {{/isCurrent}}
+                {{^isCurrent}}
+                  <a href="{{link}}" class="item">{{title}}</a>
+                {{/isCurrent}}
+              </li>
+            {{/navitems}}
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
diff --git a/Templates/Page.mustache b/Templates/Page.mustache
new file mode 100644
index 0000000..f84e19c
--- /dev/null
+++ b/Templates/Page.mustache
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
+    
+    <title>{{title}}</title>
+    
+    <link rel="icon"       href="{{{relativePathToRoot}}}favicon.ico" />
+    <link rel="mask-icon"  href="{{{relativePathToRoot}}}favicon.svg" color="#333333" />
+    <link rel='stylesheet' href='{{{cssPath}}}site.css' />
+    <link rel="stylesheet" href="{{{highlightCDN}}}/styles/default.min.css" />
+    <script src="{{{highlightCDN}}}/highlight.min.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <div class="doc-topic">
+        {{{contentHTML}}}
+      </div>
+    </div>
+    <footer class="footer">{{{footerHTML}}}</footer>
+    <script>hljs.highlightAll();</script>
+  </body>
+</html>
diff --git a/Templates/ParametersSection.mustache b/Templates/ParametersSection.mustache
new file mode 100644
index 0000000..cab8336
--- /dev/null
+++ b/Templates/ParametersSection.mustache
@@ -0,0 +1,11 @@
+<section id="parameters" class="parameters">
+  <h2>{{title}}</h2>
+  <dl>
+    {{#parameters}}
+      <dt class="param-name"><code>{{name}}</code></dt>
+      <dd class="param-content">
+        <div class="content">{{{contentHTML}}}</div>
+      </dd>
+    {{/parameters}}
+  </dl>
+</section>
diff --git a/Templates/PrimaryContent.mustache b/Templates/PrimaryContent.mustache
new file mode 100644
index 0000000..f6f589f
--- /dev/null
+++ b/Templates/PrimaryContent.mustache
@@ -0,0 +1,13 @@
+<div class="container content-grid">
+  <div class="description">
+    <div class="abstract content">
+      {{{abstractHTML}}}
+    </div>
+  </div>
+  
+  <!-- The sidebar once we have one: <div class="summary"></div> -->
+  
+  <div class="primary-content">
+    {{{contentHTML}}}
+  </div>
+</div>
diff --git a/Templates/README.md b/Templates/README.md
new file mode 100644
index 0000000..7953f86
--- /dev/null
+++ b/Templates/README.md
@@ -0,0 +1,25 @@
+<h2>docc2html Templates
+  <img src="http://zeezide.com/img/docz/docc2html100.png"
+           align="right" width="100" height="100" />
+</h2>
+
+This folder contains the default Mustache templates used,
+plus the `Site.css` containing the default CSS.
+
+Help with both is appreciated! :-)
+
+Blog entry on the topic: [DocC 📚 Archived and Analyzed](https://www.alwaysrightinstitute.com/docz/).
+
+
+### Who
+
+**docc2html** is brought to you by
+the
+[Always Right Institute](http://www.alwaysrightinstitute.com)
+and
+[ZeeZide](http://zeezide.de).
+We like 
+[feedback](https://twitter.com/ar_institute), 
+GitHub stars, 
+cool [contract work](http://zeezide.com/en/services/services.html),
+presumably any form of praise you can think of.
diff --git a/Templates/Sections.mustache b/Templates/Sections.mustache
new file mode 100644
index 0000000..4bf2d15
--- /dev/null
+++ b/Templates/Sections.mustache
@@ -0,0 +1,34 @@
+<section id='{{sectionID}}' class='contenttable alt-light'>
+  <div class='container'>
+    <h2 class='title'>{{title}}</h2>
+
+    {{#sections}}
+      <div class="row contenttable-section">
+        <div class="col section-title large-3 medium-3 small-12">
+          <h3 class="title">{{title}}</h3>
+        </div>
+  
+        <div class="col section-content large-9 medium-9 small-12">
+          {{#items}}
+            <div class="link-block topic">
+              {{#decoratedTitleHTML}}
+                <a href="{{url}}" class="link{{#isDeprecated}} deprecated{{/isDeprecated}} has-adjacent-elements">
+                  <code class="decorated-title">{{{decoratedTitleHTML}}}</code>
+                </a>
+              {{/decoratedTitleHTML}}
+              {{^decoratedTitleHTML}}
+                <a href="{{url}}" class="link has-adjacent-elements">
+                  <span class="topic-icon-wrapper">&nbsp;</span>
+                  {{title}}
+                </a>
+              {{/decoratedTitleHTML}}
+              <div class="abstract">
+                <div class="content">{{{abstractHTML}}}</div>
+              </div>
+            </div>
+          {{/items}}
+        </div>
+      </div>
+    {{/sections}}
+  </div>
+</section>
diff --git a/Templates/Site.css b/Templates/Site.css
new file mode 100644
index 0000000..e900344
--- /dev/null
+++ b/Templates/Site.css
@@ -0,0 +1,249 @@
+/* docc2html custom stylesheet */
+
+/*
+  TODO: media classes for responsiveness and light & dark
+ */
+
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background-color:       white;
+  color:                  black;
+  padding:                0;
+  margin:                 0;
+  font-synthesis:         none;
+  -webkit-font-smoothing: antialiased;
+}
+
+code {
+  font-family: "Menlo", monospace;
+}
+
+h1 {
+  font-size:   2.4em;
+  font-weight: normal;
+}
+h2 {
+  font-size:   2em;
+  font-weight: normal;
+}
+h3 {
+  font-size:   1.5em;
+  font-weight: normal;
+}
+a {
+  text-decoration: none;
+  color:           #4064F6;
+}
+a:visited { color: #4064F6; }
+
+/* navigation */
+
+nav {
+  position:      sticky;
+  top:           0;
+  width:         100%;
+  z-index:       10;
+  background-color: white;
+  opacity:       0.95;
+  
+  color:         #777;
+  padding:       1em 3em 1em 3em;
+  margin:        0;
+  border-bottom: 1px solid #EEE;
+}
+
+nav .nav-content {
+  display: flex;
+  align-items: bottom;
+}
+
+nav ul {
+  padding: 0;
+  margin:  0;
+  display: inline;
+}
+nav .hierarchy li {
+  display: inline;
+}
+nav .hierarchy li *::before {
+  content: ">";
+  padding: 0 0.5em 0 0.5em;
+}
+
+
+/* page title */
+
+main {
+  padding: 2em 0em 1em 0em;
+  margin:  0;
+}
+main .topictitle {
+  padding: 0em 3em 0em 3em;
+}
+main > .container {
+  padding: 0em 3em 0em 3em;
+}
+
+main .topictitle .eyebrow {
+  font-size:     1.4em;
+  color:         #777;
+}
+
+
+/* page content */
+
+main .description {
+  border-bottom:  1px solid #CCC;
+  padding-bottom: 2em;
+}
+
+.description .abstract {
+  font-size: 1.4em;
+}
+
+p > picture > img {
+  max-width: 100%;
+}
+
+div.content {
+  font-size:   1em;
+  line-height: 1.5em;
+}
+
+div.content > p > a > code {
+  display: inline;
+}
+
+
+/* topics */
+
+section {
+  padding: 0em 3em 0em 3em;
+}
+div.section {
+  padding: 0em 3em 0em 3em;
+}
+
+section.alt-light {
+  background-color: #F7F7F7;
+}
+
+section h2 {
+  padding: 1.5em 0 1em 0;
+}
+
+.topic .topic-icon-wrapper {
+}
+
+/* contenttable */
+
+.contenttable h3 {
+  margin: 0;
+}
+.contenttable .row {
+  display:     flex;
+  align-items: flex-start;
+  border-top:  1px solid #CCC;
+  padding:     2em 0 1em 0;
+}
+
+.large-3 {
+  max-width:   25%;
+  flex-basis:  25%;
+  flex-grow:   0;
+  flex-shrink: 0;
+}
+.large-3 {
+  max-width:   50%;
+  flex-basis:  50%;
+  flex-grow:   0;
+  flex-shrink: 0;
+}
+.large-9 {
+  max-width:   75%;
+  flex-basis:  75%;
+  flex-grow:   0;
+  flex-shrink: 0;
+}
+
+.link-block {
+  padding-bottom: 1em;
+}
+
+.section-content {
+  padding-left: 1em;
+}
+
+a code .decorator {
+  color: #777;
+}
+
+.topic .abstract .content {
+  padding: 1em 0 1em 3em;
+}
+
+/* declarations */
+
+pre {
+  border:        1px solid #CCC;
+  border-radius: 4px;
+  margin:        0;
+  padding:       0;
+}
+pre {
+  margin:  0;
+  padding: 0;
+}
+
+/* hero */
+
+div.hero {
+  padding: 4em 3em 3em 4em;
+  margin-top: -2em; /* hack to counter the main padding */
+}
+div.hero.dark {
+  background-color: black;
+}
+div.hero.dark * {
+  color: white;
+}
+
+.hero .headline h1 {
+  margin-top: 0.2em;
+}
+.hero .content {
+  font-size: 1.2em;
+}
+.hero .duration {
+  display: flex;
+}
+.hero .eyebrow {
+  font-size:     1.2em;
+  color:         #CCC;
+}
+.hero .metadata .item .content {
+  font-size:     2em;
+  padding-left:  0.5em;
+}
+.hero .metadata .item .bottom {
+  font-weight:   bold;
+  font-size:     0.8em;
+}
+
+/* tasks */
+
+.intro-container .intro {
+  display: flex;
+}
+
+
+/* volumes */
+
+div.sections div.section {
+  padding-top: 2em;
+}
+
+.intro-container .eyebrow a {
+  font-size:     1.2em;
+  color:         #777;
+}
diff --git a/Templates/StepContent.mustache b/Templates/StepContent.mustache
new file mode 100644
index 0000000..cb44c04
--- /dev/null
+++ b/Templates/StepContent.mustache
@@ -0,0 +1,16 @@
+<div class="step-container step-{{step}}">
+  <div data-index="{{stepIndex}}" class="step">
+    <p class="step-label">Step {{step}}</p>
+    <div class="content">{{{contentHTML}}}</div>
+    <div class="caption content">{{{captionHTML}}}</div>
+  </div>
+
+  {{#hasCode}}
+    <div data-syntax="{{syntax}}" class="code-listing">
+      <div class="container-general">
+        <pre><code>{{#lines}}<span class="code-line-container"><span data-line-number="{{{line}}}" class="code-number" style="display: none;"></span><span class="code-line">{{code}}</span></span>
+    {{/lines}}</code></pre>
+      </div>
+    </div>
+  {{/hasCode}}
+</div>
diff --git a/Templates/Task.mustache b/Templates/Task.mustache
new file mode 100644
index 0000000..df242c2
--- /dev/null
+++ b/Templates/Task.mustache
@@ -0,0 +1,4 @@
+<div id="{{anchor}}" class="section">
+  {{{introHTML}}}
+  <div class="steps">{{{stepsHTML}}}</div>
+</div>
diff --git a/Templates/TaskIntro.mustache b/Templates/TaskIntro.mustache
new file mode 100644
index 0000000..76f1d7e
--- /dev/null
+++ b/Templates/TaskIntro.mustache
@@ -0,0 +1,15 @@
+<div class="intro-container">
+  <div class="row intro intro-{{task}}">
+    <div class="col left large-6 small-12">
+      <div class="headline">
+        <span class="eyebrow"><a href="#{{anchor}}">{{sectionTitle}}</a></span>
+        <h2 class="heading">{{title}}</h2>
+      </div>
+      {{#contentHTML}}
+        <div class="content">{{{contentHTML}}}</div>
+      {{/contentHTML}}
+    </div>
+    <div class="col right large-6 small-12">
+      <div class="media"><div class="asset">{{{assetHTML}}}</div></div>
+    </div>
+</div>
diff --git a/Templates/TopicTitle.mustache b/Templates/TopicTitle.mustache
new file mode 100644
index 0000000..bfe559e
--- /dev/null
+++ b/Templates/TopicTitle.mustache
@@ -0,0 +1,4 @@
+<div class="topictitle">
+  <span class="eyebrow">{{eyebrow}}</span>
+  <h1 class="title">{{title}}</h1>
+</div>
diff --git a/Templates/Volume.mustache b/Templates/Volume.mustache
new file mode 100644
index 0000000..042815e
--- /dev/null
+++ b/Templates/Volume.mustache
@@ -0,0 +1,55 @@
+<div class="learning-path">
+  <div class="main-container">
+    <div class="secondary-content-container">
+      <nav class="tutorials-navigation">
+        <ol role="list" class="tutorials-navigation-list">
+          <li class="volume">
+            <ol role="list" class="tutorials-navigation-list">
+              {{#chapters}}
+                <li><a href="#{{chapterID}}" class="tutorials-navigation-link"
+                    >{{name}}</a></li>
+              {{/chapters}}
+            </ol>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    
+    <div class="primary-content-container">
+      <div class="content-sections-container">
+        <section class="volume content-section">
+          {{#chapters}}
+            <section id="{{chapterID}}" class="chapter tile">
+              <div class="info">
+                <div class="asset">{{{assetHTML}}}</div>
+                <div class="intro">
+                  <h2 class="name">
+                    <div class="eyebrow">{{eyebrow}}</div>
+                    <span class="name-text">{{name}}</span>
+                  </h2>
+                  <div class="content">{{{contentHTML}}}</div>
+                </div>
+              </div>
+              
+              <ol class="topic-list">
+                {{#tutorials}}
+                  <li class="topic tutorial">
+                    <div class="topic-icon"></div>
+                    <a href="{{url}}" class="container">
+                      <div class="link">{{title}}</div>
+                      {{#estimatedTime}}
+                        <div class="time">
+                          <span class="time-label">{{estimatedTime}}</span>
+                        </div>
+                      {{/estimatedTime}}
+                    </a>
+                  </li>
+                {{/tutorials}}
+              </ol>
+            </section>
+          {{/chapters}}
+        </section>
+      </div>
+    </div>
+  </div>
+</div>