diff --git a/demo/.gitignore b/demo/.gitignore
new file mode 100644
index 0000000..1d7ffab
--- /dev/null
+++ b/demo/.gitignore
@@ -0,0 +1 @@
+static/css
diff --git a/demo/Makefile b/demo/Makefile
new file mode 100644
index 0000000..87bd217
--- /dev/null
+++ b/demo/Makefile
@@ -0,0 +1,14 @@
+LESSC = lessc
+LESSCFLAGS = -x
+DEPLOYMENT = dev
+
+all: clean build
+
+STATIC=./static
+
+clean:
+	rm -rf $(STATIC)/css
+
+build:
+	mkdir $(STATIC)/css
+	$(LESSC) $(LESSCFLAGS) less/debuild.me.less > $(STATIC)/css/debuild.css
diff --git a/demo/less/config.less b/demo/less/config.less
new file mode 100644
index 0000000..4689e52
--- /dev/null
+++ b/demo/less/config.less
@@ -0,0 +1,16 @@
+@background-color:         #DCDCDC;
+@color:                    #333333;
+
+@link-color:               #191921;
+
+@nav-background-color:     #333333;
+@nav-color:                #EEEEEE;
+@nav-border:               #FFFFFF;
+@nav-height:               50px;
+
+@shadow-color:             #333333;
+
+@nav-from:                 #CACACA;
+@nav-to:                   #F5F5F5;
+
+@table-zebra:              #FFFFFF;
diff --git a/demo/less/debuild.me.less b/demo/less/debuild.me.less
new file mode 100644
index 0000000..12291e6
--- /dev/null
+++ b/demo/less/debuild.me.less
@@ -0,0 +1,6 @@
+@import "config.less";
+
+@import "macros.less";
+@import "font.less";
+
+@import "layout.less";
diff --git a/demo/less/font.less b/demo/less/font.less
new file mode 100644
index 0000000..67a664a
--- /dev/null
+++ b/demo/less/font.less
@@ -0,0 +1,32 @@
+@font-face {
+    font-family: 'Damion';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Damion'), url(../fonts/Damion.woff) format('woff');
+}
+
+@font-face {
+    font-family: 'Cantarel';
+    font-style: normal;
+    font-weight: 400;
+    src: url(../fonts/cantarell.otf);
+}
+
+@font-face {
+    font-family: 'Quicksand';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Quicksand'), url(../fonts/Quicksand.woff) format('woff');
+}
+
+.damion {
+    font-family:                                    'Damion', cursive;
+}
+
+.quicksand {
+    font-family:                                    'Quicksand', sans-serif;
+}
+
+.cantarell {
+    font-family:                                    'Cantarel', sans-serif;
+}
diff --git a/demo/less/layout.less b/demo/less/layout.less
new file mode 100644
index 0000000..b867d86
--- /dev/null
+++ b/demo/less/layout.less
@@ -0,0 +1,196 @@
+.noshim {
+    padding:                   0px;
+    margin:                    0px;
+}
+
+html, body {
+    background-color:          @background-color;
+    height:                    100%;
+    .noshim;
+    .cantarell;
+}
+
+pre {
+    border-radius:             5px;
+    background-color:          #FFFFFF;
+    padding:                   10px;
+    border:                    1px solid darken(@background-color, 1%);
+}
+
+.spacer {
+    min-height:                30px;
+}
+
+a {
+    color:                     @link-color;
+}
+
+ul {
+    .noshim;
+    list-style-type: none;
+}
+
+table {
+    width:                     100%;
+    .noshim;
+    border-spacing:            0px;
+    border-collapse:           collapse;
+    border:                    1px solid darken(@background-color, 1%);
+    tr {
+        .noshim;
+        td {
+            .noshim;
+            padding:           5px;
+        }
+        border-bottom:         1px solid darken(@background-color, 1%);
+    }
+    margin-top:                10px;
+    margin-bottom:             10px;
+}
+
+table.zebra {
+    tr:nth-child(2n) {
+        background-color:      @table-zebra;
+    }
+}
+
+.profile {
+    background-color:          #FFFFFF;
+    border-radius:             5px;
+    padding:                   10px;
+    width:                     50%;
+    margin-left:               auto;
+    margin-right:              auto;
+    border:                    1px solid darken(@background-color, 1%);
+    .picture {
+        border:                1px solid darken(@background-color, 5%);
+        float:                 left;
+        border-radius:         5px;
+    }
+    .name {
+        float:                 right;
+    }
+}
+
+.headblock {
+    background-color:           #F8F8F8;
+}
+
+.banner {
+    .damion;
+    padding-left:               10px;
+    padding-right:              10px;
+    width:                      750px;
+    line-height:                30px;
+    vertical-align:             middle;
+    background-image: -moz-linear-gradient(
+                          bottom,
+                          @nav-from 10%,
+                          @nav-to 100%
+    );
+    background-image: -webkit-linear-gradient(
+                          bottom,
+                          @nav-from 10%,
+                          @nav-to 100%
+    );
+    background-image: linear-gradient(
+                          bottom,
+                          @nav-from 10%,
+                          @nav-to 100%
+    );
+    border:                     1px solid #444444;
+    border-radius:              5px;
+    height:                     30px;
+    margin-left:                auto;
+    margin-right:               auto;
+    ul {
+        list-style-type:        none;
+        .noshim;
+        li {
+            display:            inline;
+            padding-right:      10px;
+        }
+    }
+}
+
+.content {
+    background-color:           #F8F8F8;
+    min-height:                 70%;
+    border-bottom:              1px solid #888888;
+    padding-top:                30px;
+}
+
+.container {
+    margin-left:                auto;
+    margin-right:               auto;
+    width:                      700px;
+}
+
+.main-container {
+    .container;
+    padding-bottom:             50px;
+}
+
+.shim {
+    padding:                    5px;
+}
+
+.header {
+    .color {
+        width:                  12.5%;
+        height:                 10px;
+        float:                  left;
+    }
+}
+
+.footer {
+    font-size:                  0.8em;
+    min-height:                 200px;
+    color:                      #EEEEEE;
+    margin-top:                 20px;
+    .container .fifth {
+        width:                  20%;
+        float:                  left;
+    }
+}
+
+.fifth {
+    color:                      #333333;
+    .damion;
+
+    img {
+        height:                 200px;
+    }
+
+    ul {
+        list-style-type:        none;
+        font-size:              0.9em;
+        color:                  #AEAEAE;
+        .noshim;
+    }
+
+    li {
+        .noshim;
+    }
+
+    a {
+        color:                  #333333;
+    }
+
+    h1 {
+        font-size:              1.2em;
+        border-bottom:          1px solid #333333;
+        width:                  90%;
+        .noshim;
+    }
+}
+
+.label {
+    border-radius:              5px;
+    padding:                    0px 8px 0px 8px;
+    font-size:                  0.7em;
+}
+
+.clear {
+    clear:                      both;
+}
diff --git a/demo/less/macros.less b/demo/less/macros.less
new file mode 100644
index 0000000..8a9b94c
--- /dev/null
+++ b/demo/less/macros.less
@@ -0,0 +1,5 @@
+.box-shadow(@style) {
+    box-shadow:         @style @shadow-color;
+    -webkit-box-shadow: @style @shadow-color;
+    -moz-box-shadow:    @style @shadow-color;
+}
diff --git a/demo/static/fonts/Damion.woff b/demo/static/fonts/Damion.woff
new file mode 100644
index 0000000..23d7ec1
Binary files /dev/null and b/demo/static/fonts/Damion.woff differ
diff --git a/demo/static/fonts/Quicksand.woff b/demo/static/fonts/Quicksand.woff
new file mode 100644
index 0000000..4e1999f
Binary files /dev/null and b/demo/static/fonts/Quicksand.woff differ
diff --git a/demo/static/fonts/cantarell.otf b/demo/static/fonts/cantarell.otf
new file mode 100644
index 0000000..34f17a9
Binary files /dev/null and b/demo/static/fonts/cantarell.otf differ
diff --git a/demo/templates/base.html b/demo/templates/base.html
new file mode 100644
index 0000000..e6bc44e
--- /dev/null
+++ b/demo/templates/base.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>{% block title %}{% endblock %} | hy</title>
+        <link rel="stylesheet" href = "{{ url_for('static', filename='css/debuild.css') }}" ></link>
+    </head>
+    <body>
+        <div class = 'headblock' >
+            <div class = 'spacer' ></div>
+        </div>
+        <div class = 'headblock' >
+            <div class = 'banner' >
+                <ul>
+                    <li><a href = '/' >Home</a></li>
+                    <li><a href = '/packages' >Try it</a></li>
+                    <li><a href = '/about' >Source</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class = 'content' >
+            <div class = 'main-container' ><div class = 'shim' >
+{% block content %}
+{% endblock %}
+            </div></div>
+        </div>
+        <div class = 'footer' >
+            <div class = 'container' ><div class = 'shim' >
+                <div class = 'fifth' >
+                    <h1><i class="icon-sitemap"></i> Links</h1>
+                    <ul>
+                    </ul>
+                </div>
+                <div class = 'fifth' >
+                    <h1><i class="icon-link"></i> Examples</h1>
+                    <ul>
+                    </ul>
+                </div>
+                <div class = 'fifth' >
+                    <h1><i class="icon-group"></i> About</h1>
+                    <ul>
+                        <li><a href = 'http://pault.ag/' >Paul's Homepage</a></li>
+                    </ul>
+                </div>
+                <div class = 'fifth' >
+                    <h1><i class="icon-info-sign"></i> Help</h1>
+                    <ul>
+                    </ul>
+                </div>
+                <div class = 'fifth' >
+                    <h1><i class="icon-github"></i> Source Code</i></h1>
+                    <ul>
+
+                    </ul>
+                </div>
+            </div></div>
+        </div>
+    </body>
+</html>
diff --git a/demo/templates/index.html b/demo/templates/index.html
index 3a5266a..7f12751 100644
--- a/demo/templates/index.html
+++ b/demo/templates/index.html
@@ -1,77 +1,7 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Hy!</title>
-<script type="text/javascript" src="/static/jquery.min.js"></script>
-<script type="text/javascript">
-function reload() {
-    var input = $("#repl-input").val();
-    console.log("Input: " + input);
-    $('#repl-output').load(
-        '/translate',
-        {"code": input}
-    );
-}
+{% extends "base.html" %}
 
-$(document).ready(function() {
-    $("#repl-input").keyup(function(e) {
-        reload();
-    });
-    reload();
-});
-</script>
-<style>
-html, body {
-    height:   90%;
-    padding:  0px;
-    margin:   0px;
-}
-.repl {
-    width:    100%;
-    height:   100%;
-}
-#repl-input {
-    float:    left;
-    width:    49%;
-    border:   0px solid #000000;
-    resize:   none;
-    height:   100%;
-}
-#repl-output {
-    float:    right;
-    width:    49%;
-    height:   100%;
-}
-.head {
-    min-height:  20px;
-}
-.r-i-l {
-    float:    left;
-    width:    49%;
-    height:   100%;
-}
-.r-o-l {
-    float:    right;
-    width:    49%;
-    height:   100%;
-}
-</style>
-    </head>
-    <body>
-        <h1>Edit the left side</h1>
-        <div class = 'repl' >
-            <textarea id = 'repl-input' >; LISP input
-(import "sunlight")
+{% block title %}Welcome!{% endblock %}
 
-
-(defn square [x]
-  "This squares a function"
-  (* x x))
-
-
-(for [x (kwapply (sunlight.openstates.legislators) {"state" "ma"})]
-  (print x)) </textarea>
-            <pre id = 'repl-output' ></pre>
-        </div>
-    </body>
-</html>
+{% block content %}
+Challah
+{% endblock %}