diff --git a/ballot.rb b/ballot.rb
--- a/ballot.rb
+++ b/ballot.rb
@@ -548,6 +548,10 @@
       erb :about
    end
 
+   get '/css/base.css' do
+      send_file 'static/css/base.css'
+   end
+
    # Blank vote value, so redirect back to the front page
    get '/vote/?' do
       redirect '/'
diff --git a/static/css/base.css b/static/css/base.css
new file mode 100644
--- /dev/null
+++ b/static/css/base.css
@@ -0,0 +1,111 @@
+/* Custom to ballot.rb */
+.note {
+   font-weight: 700;
+   color:#ff7772; /* see txt-red below */
+}
+
+.btn-text-white {
+   color:white;
+   font-size:1.15em; /* h4 size below */
+}
+
+.vote-desc {
+   font-size:1.3em;  /* h3 size below */
+   font-weight:700;
+   background-color:#353535; /* bg-black below */
+   color:#e2e5e9; /* txt-light-gray below */
+   padding:0.2em;
+}
+
+/*!LOTUS*/
+/* See https://goatslacker.github.io/lotus.css */
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700,300,400|Inconsolata);
+body{background-color:#f0f0f0;color:#353535;font-family:'OpenSans',sans-serif;font-size:1em;line-height:1.5em}
+code,pre,kbd,samp{font-family:'Inconsolata',monospace}
+h1,h2,h3,h4,h5,h6{line-height:1.5em;margin:0 0 .5em}
+h1,.h1{font-size:2em}
+h2,.h2{font-size:1.5em}
+h3,.h3{font-size:1.3em}
+h4,.h4{font-size:1.15em}
+h5,.h5{font-size:1em}
+h6,.h6{font-size:.75em;text-transform:uppercase}
+p{margin:0 0 1em}
+blockquote{border-left:.1em solid #e2e5e9;margin:1.5em 0;padding:0 1.25em 0 1.24em}
+hr{border-color:#e2e5e9;border-style:solid;border-width:.1em;margin:2em 0}
+ol ol li{list-style-type:lower-alpha}
+ol ol ol li{list-style-type:lower-roman}
+b,strong{font-weight:700}
+small{font-size:.8em;line-height:1.2em}
+sub,sup{font-size:.6em;line-height:0;position:relative;vertical-align:baseline}
+sup{top:-.5em}
+@media (min-width:56em){
+.hide-lg{display:none}
+.show-lg{display:block}
+.show-md,.show-sm{display:none}
+}
+@media (max-width:55em){
+.hide-md{display:none}
+.show-md{display:block}
+.show-lg,.show-sm{display:none}
+.cm12{width:100%}
+.cm11{width:91.66%}
+.cm10{width:83.33%}
+.cm9{width:75%}
+.cm8{width:66.66%}
+.cm7{width:58.33%}
+.cm6{width:50%}
+.cm5{width:41.66%}
+.cm4{width:33.33%}
+.cm3{width:25%}
+.cm2{width:16.66%}
+.cm1{width:8.33%}
+}
+@media (max-width:30em){
+.hide-sm{display:none}
+.hide-md,.show-sm{display:block}
+.show-lg,.show-md{display:none}
+.cs12{width:100%}
+.cs11{width:91.66%}
+.cs10{width:83.33%}
+.cs9{width:75%}
+.cs8{width:66.66%}
+.cs7{width:58.33%}
+.cs6{width:50%}
+.cs5{width:41.66%}
+.cs4{width:33.33%}
+.cs3{width:25%}
+.cs2{width:16.66%}
+.cs1{width:8.33%}
+}
+.btn{background-color:#a8b2bd;border:0;border-radius:.25em;cursor:pointer;display:inline-block;padding:.5em 1.5em;outline:0;text-align:center}
+.btn-sm{padding:.25em .75em}
+.btn-lg{padding:1em 3em}
+label{margin-bottom:.5em}
+label,label textarea,label input,label select{display:block}
+textarea,input,select{border:.1em solid #e2e5e9;padding:.5em}
+textarea:focus,input:focus,select:focus{border-color:#70bde6}
+textarea,input{outline:0;width:13em}
+select{height:2.25em;width:14em}
+input[type=checkbox],input[type=radio]{display:inline-block;width:auto}
+input[disabled]{color:#e2e5e9}
+.form-addon{background-color:#fff;border:.1em solid #e2e5e9;padding:.5em 1em}
+.table{border-collapse:collapse;border-spacing:0;width:100%}
+.table th,.table td{padding:.5em;text-align:left}
+.table tbody>:nth-child(2n-1){background-color:#e2e5e9}
+.bg-dark-gray{background-color:#a8b2bd}
+.bg-light-gray{background-color:#e2e5e9}
+.bg-red{background-color:#ff7772}
+.bg-green{background-color:#67ba72}
+.bg-blue{background-color:#70bde6}
+.bg-yellow{background-color:#ffdd69}
+.bg-magenta{background-color:#bf75ff}
+.bg-cyan{background-color:#92f9f6}
+.bg-black{background-color:#353535}
+.txt-dark-gray{color:#a8b2bd}
+.txt-light-gray{color:#e2e5e9}
+.txt-red{color:#ff7772}
+.txt-green{color:#67ba72}
+.txt-blue{color:#70bde6}
+.txt-yellow{color:#ffdd69}
+.txt-magenta{color:#bf75ff}
+.txt-cyan{color:#92f9f6}
diff --git a/views/index.erb b/views/index.erb
--- a/views/index.erb
+++ b/views/index.erb
@@ -17,7 +17,7 @@
    along with Ballot. If not, see <http://www.gnu.org/licenses/>.
 <% end %>
 
-<strong>Ballot:</strong><br />Unbearably Ugly.  Simply Secure.<br /><br />
+<strong>Ballot:</strong><br />Bearably Ugly.  Simply Secure.<br /><br />
 <a href="/votes">See my available votes</a>
 <p>
 <a href="/about">About Ballot (including security information)</a>
diff --git a/views/layout.erb b/views/layout.erb
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -20,6 +20,7 @@
 <html>
   <head>
     <title>Ballot Voting System</title>
+    <link rel="stylesheet" type="text/css" href="/css/base.css" />
   </head>
   <body>
     <div id='container'>
diff --git a/views/login.erb b/views/login.erb
--- a/views/login.erb
+++ b/views/login.erb
@@ -17,6 +17,8 @@
    along with Ballot. If not, see <http://www.gnu.org/licenses/>.
 <% end %>
 
+<h3>Login</h3>
+
 <% if @status == "notcomplete" %>
    <font color="red">You must enter both a username and password.</font>
 <% elsif @status == "notvalid" %>
@@ -30,10 +32,17 @@
 <% end %>
 <br /><br />
 <form action="/login?votename=<%=h(@votename)%>" method="post">
-      Username: <input type="text" name="username" value="<%=h(@username)%>" autofocus/><br />
-      Password: <input type="password" name="password"/><br />
-      <% if @use_yubikeys %>
-         YubiKey OTP (if configured for your account): <input type="text" name="yubikeyotp"/><br />
-      <% end %>
-   <input type="submit" value="Log in" />
+   <label for="username">Username:</label>
+   <input type="text" name="username" value="<%=h(@username)%>" class="width-50" autofocus/>
+
+   <label for="password">Password:</label>
+   <input type="password" class="width-50" name="password"/>
+
+   <% if @use_yubikeys %>
+      <label for="yubikeyotp">YubiKey OTP (if configured for your account):</label>
+      <input type="text" class="width-50" name="yubikeyotp"/>
+   <% end %>
+
+   <br/><br/>
+   <input class="btn bg-green" type="submit" value="Log in" />
 </form>
diff --git a/views/vote.erb b/views/vote.erb
--- a/views/vote.erb
+++ b/views/vote.erb
@@ -17,12 +17,16 @@
    along with Ballot. If not, see <http://www.gnu.org/licenses/>.
 <% end %>
 
-Vote ID: <%=@votedata["id"]%><br />
-Vote Name: <%=@votedata["description"]%><br />
+Vote ID: <code><%=@votedata["id"]%></code>
 <% if @votedata.has_key?("expiration") %>
-   Vote Expiration: <%=Time.at(@votedata["expiration"]).utc%><br />
+    (<small>vote expires <%=Time.at(@votedata["expiration"]).utc%></small>)
 <% end %>
-<br />
+
+<h2>Voting On:</h2>
+
+<div class="vote-desc"><%=@votedata["description"]%></div>
+<br /><br />
+
 <% if @status == "returnvoter" %>
    Welcome back. <font color="green">You can change your vote</font>, but only if you provide the <b>exact</b> unique key you provided when you originally cast your vote.
 <% elsif @status == "voted" and @scramblevalues == nil %>
@@ -32,7 +36,7 @@
 <% elsif @status == "failedchange" %>
    <font color="red">Could not change your vote; the unique key was not correct.</font>
 <% elsif @status == "newvoter" %>
-   Make your selection below.<br /><br/><font color="red">IMPORTANT:</font> You must type a unique key. Once you press the "Vote!" button you will not be able to change your vote unless you provide that <b>exact</b> key!
+   Make your selection and re-voting key below. <span class="note">IMPORTANT:</span> Once you vote you will not be able to change your vote unless you provide that <strong>exact</strong> key!
 <% elsif @status == "smssent" %>
    <font color="green">An SMS has been sent to your mobile phone. The decodes there are valid for this one page view only!</font><br /><br />This vote has scrambling enabled for extra security.<br /><br />Once you exit this page you will have to provide your <b>exact</b> unique key to change your vote!
 <% elsif @status == "invitemailsent" %>
@@ -43,50 +47,54 @@
    <font color="green">Results mails sent.</font>
 <% end %>
 <br /><br />
-Instructions: <%=@votedata["instructions"]%>
-<br /><br />
+<h3>Instructions:</h3>
+<p><%=@votedata["instructions"]%></p>
+
 <% if @scramblevalues and @show_sms == nil and @show_gpg == nil %>
    <font color="red">This vote is scrambled, but you have neither your SMS number nor your public ASCII-armored GPG key entered in Identity. Therefore the values cannot be displayed to you.</font><br />
 <% else %>
    <% if @scramblevalues and @show_sms %>
       <form action="/vote/<%=@votename%>" method="post">
-         <input type="submit" name="send_sms" value="Send SMS with descrambled voting options" />
+         <input class="btn btn-sm bg-blue" type="submit" name="send_sms" value="Send SMS with descrambled voting options" />
       </form>
    <% end %>
    <% if @administrator %>
       <form action="/vote/<%=@votename%>" method="post">
          <font color="green">You are an administrator of this vote, and you can send invite and reminder emails by clicking the buttons below:</font>
          <br />
-         <input type="submit" name="sendinvitemail" method="post" value="Send Invite Email">
-         <br />
-         <input type="submit" name="sendremindermail" method="post" value="Send Reminder Email">
-         <br />
+         <input class="btn btn-sm bg-blue" type="submit" name="sendinvitemail" method="post" value="Send Invite Email">
+         <input class="btn btn-sm bg-blue" type="submit" name="sendremindermail" method="post" value="Send Reminder Email">
          <% if @votecomplete %>
-            <input type="submit" name="sendresultsmail" method="post" value="Send Results Email">
-            <br />
+            <input class="btn btn-sm bg-blue" type="submit" name="sendresultsmail" method="post" value="Send Results Email">
          <% end %>
       </form>
       <br />
    <% end %>
-   Your selection<%= " (entries in randomized order)" if @scramblevalues%>:<br />
+
+   1. Make your selection<%= " (entries in randomized order)" if @scramblevalues%>:<br />
    <form action="/vote/<%=@votename%>" method="post">
       <% @votedata["choices"].each_key do |choice| %>
          <% if @scramblevalues %>
-            <label><input type="radio" name="selection" value="<%=@scramblevalues[choice]%>"/> <%= @scramblevalues[choice]%></label><br />
+            <label><%= @scramblevalues[choice]%></label><input type="radio" name="selection" value="<%=@scramblevalues[choice]%>"/>
          <% else %>
-            <label><input type="radio" name="selection" value="<%=choice%>" <%= "checked" if @votevalue == choice %>/> <%= @votedata["choices"][choice]%></label><br />
+            <label><input type="radio" name="selection" value="<%=choice%>" <%= "checked" if @votevalue == choice %>/> <%= @votedata["choices"][choice]%></label>
          <% end %>
       <% end %>
+
       <br />
-      <% if not @status == "newvoter" %>
-         Your unique key: <input type="text" name="userkey" value="<%=@userkey%>"/><br /><br />
-      <% else %>
-         Your unique key (enter some text, punctuation and spaces are okay, <font color="red">only valid for this vote, cannot be changed!</font>): <input type="text" name="userkey" value="<%=@userkey%>"/><br /><br />
-      <% end %>
-      <input type="submit" name="votesubmit" value="Vote!" />
+
+      <label>2. Choose a unique key to use for changing your vote:
+         <br />
+         <input style="display:inline-block" type="text" name="userkey" value="<%=@userkey%>" placeholder="Text, symbols, spaces OK"/>
+         <% if @status == "newvoter" %>
+            <small class="note">This key applies only to this election and cannot be changed once set!</small>
+         <% end %>
+      </label>
+      <br />
+      <input class="btn bg-green btn-text-white" type="submit" name="votesubmit" value="3. Vote!" />
    </form>
 <% end %>
-<br />
+<br /><br />
 <a href="/votes">Open votes</a>
 <br /><br />
 <a href="/logout">Log out</a>
diff --git a/views/votes.erb b/views/votes.erb
--- a/views/votes.erb
+++ b/views/votes.erb
@@ -17,18 +17,30 @@
    along with Ballot. If not, see <http://www.gnu.org/licenses/>.
 <% end %>
 
+<h3>Your available votes:</h3>
+
 <% if @votes.length == 0 %>
-   There are no votes available to you at this time.
+   <p>There are no votes available to you at this time.</p>
 <% else %>
-   Your available votes:
-   <br /><br />
+   <table class="table">
+   <tr>
+      <th>Vote ID</th>
+      <th>Description</th>
+      <th>Valid Until</th>
+   </tr>
    <% @votes.each_key do |vote| %>
-      <% if @votes[vote].has_key?("expiration") %>
-         <a href="/vote/<%=vote%>"><%=@votes[vote]["id"]%></a>: <%=@votes[vote]["description"]%> (valid until <%=Time.at(@votes[vote]["expiration"]).utc%>)<br />
-      <% else %>
-         <a href="/vote/<%=vote%>"><%=@votes[vote]["id"]%></a>: <%=@votes[vote]["description"]%><br />
-      <% end %>
+      <tr>
+         <th><a href="/vote/<%=vote%>"><%=@votes[vote]["id"]%></a></th>
+         <th><%=@votes[vote]["description"]%></th>
+         <% if @votes[vote].has_key?("expiration") %>
+            <th><%=Time.at(@votes[vote]["expiration"]).utc%></th>
+         <% else %>
+            <th>No expiration listed</th>
+         <% end %>
+      </tr>
    <% end %>
+   </table>
 <% end %>
+
 <br /><br />
 <a href="/logout">Log out</a>