diff --git a/design/cards.css b/design/cards.css
new file mode 100644
index 0000000000000000000000000000000000000000..43816599537320a36f101843e53ceab9d4567cdb
--- /dev/null
+++ b/design/cards.css
@@ -0,0 +1,175 @@
+html, body {
+ margin: 0;
+}
+
+.container {
+ max-width: 80em;
+ margin: 1em auto;
+ padding: 0 1em;
+}
+
+/* Header Styles */
+
+.header {
+ padding: 2em 0 1em 0;
+ width: 100%;
+
+ color: white;
+ text-align: center;
+
+ background-image: url(cover.jpg);
+ background-size: cover;
+}
+
+.header-content img {
+ max-width: 80%;
+ max-height: 15%;
+}
+
+/* Navbar Styles */
+
+.nav {
+ padding: 0;
+ border-radius: 4px;
+ background-color: #222;
+
+ display: flex;
+ justify-content: space-between;
+}
+
+.nav ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.nav ul li {
+ padding: 1em;
+ margin: 0;
+
+ display: block;
+ float: left; /* Remove awful extra whitespace between ul items */
+}
+
+.nav ul li a {
+ color: white;
+ text-decoration: none;
+}
+
+/* We only want a border on all but the last element to act as a separator */
+.rightborder {
+ border-right: 1px solid white;
+}
+
+.active {
+ font-weight: bold;
+}
+
+.code {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+
+/* Just in case flex is not working */
+
+.left-nav {
+ float: left;
+}
+
+.right-nav {
+ float: right;
+}
+
+/* Card Styles */
+
+.cards {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ margin-top: 1em; /* Spacing Between Navbar */
+}
+
+.card {
+ width: 30%;
+
+ border: 1px solid #555;
+ border-radius: 4px;
+
+ box-shadow: 2px 2px 3px #BBB;
+ margin-bottom: 1em;
+}
+
+.card:hover {
+ box-shadow: 3px 3px 3px #888;
+}
+
+.card-content {
+ margin: 1em;
+}
+
+.card-content img {
+ width: 100%;
+ margin-bottom: 0.5em;
+}
+
+.caret {
+ width: 100%;
+ color: #298BDF;
+ font-size: 2em;
+}
+
+/* Breaking Styles */
+
+.break {
+ margin: 1em -1em;
+ border: 1px solid black;
+}
+
+/* Main content and sidebar styles */
+
+.content {
+ display: flex;
+ justify-content: space-between;
+}
+
+.sidebar {
+ width: 20%;
+}
+
+.text {
+ width: 75%;
+}
+
+/* Sidebar */
+
+.sidebar ul {
+ list-style: none;
+ float: right;
+ margin: 0;
+}
+
+.sidebar ul li {
+ border: 1px solid #145289;
+ border-radius: 4px;
+
+ padding: 0.5em;
+ margin-bottom: 0.5em;
+
+ background-color: white;
+ color: #145289;
+
+ display: block;
+}
+
+.sidebar ul li.active {
+ background-color: #298BDF;
+ color: white;
+}
+
+.sidebar h2 {
+ color: #145289;
+ text-align: right;
+ float: right;
+ width: 100%;
+}
\ No newline at end of file
diff --git a/design/cards.haml b/design/cards.haml
new file mode 100644
index 0000000000000000000000000000000000000000..e2616ce8fe9ff64ad97196b33c34e9fd92c788d1
--- /dev/null
+++ b/design/cards.haml
@@ -0,0 +1,56 @@
+!!! html
+
+%html
+ %head
+ %link{:rel => :stylesheet, :type => :"text/css", :href => "stylesheet.css"}
+ %link{:rel => :stylesheet, :type => :"text/css", :href => "cards.css"}
+ %link{href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", rel: "stylesheet", integrity: "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN", crossorigin: "anonymous"}
+
+ %body
+ .header
+ .header-content
+ %img{:src => "logo.svg"}
+ %h1.subhead <b>S</b>PH <b>W</b>ith <b>I</b>nter-dependent <b>F</b>ine-grained <b>T</b>asking
+
+ .container
+ .nav.mono
+ .left-nav
+ %ul
+ %li.rightborder.active
+ %a About
+ %li.rightborder
+ %a Papers
+ %li.rightborder
+ %a Talks
+ %li
+ %a Contact
+
+ .right-nav
+ %ul
+ %li.btn-orange.code
+ %a <i class="fa fa-gitlab" aria-hidden="true"></i> Code
+
+ .cards
+ .card
+ .card-content
+ %img{:src => "domains.png"}
+ %h3 Card 1
+ %p About Card 1
+
+ .card
+ .card-content
+ %img{:src => "domains.png"}
+ %h3 Card 2
+ %p About Card 2
+
+ .card
+ .card-content
+ %img{:src => "domains.png"}
+ %h3 Card 3
+ %p About Card 3
+
+ .card
+ .card-content
+ %img{:src => "domains.png"}
+ %h3 Card 4
+ %p About Card 4
\ No newline at end of file
diff --git a/design/cards.html b/design/cards.html
new file mode 100644
index 0000000000000000000000000000000000000000..4b419873013da67877e87f55f949dff0b6f56e89
--- /dev/null
+++ b/design/cards.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link href='stylesheet.css' rel='stylesheet' type='text/css'>
+<link href='cards.css' rel='stylesheet' type='text/css'>
+<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' rel='stylesheet'>
+</head>
+<body>
+<div class='header'>
+<div class='header-content'>
+<img src='logo.svg'>
+<h1 class='subhead'><b>S</b>PH <b>W</b>ith <b>I</b>nter-dependent <b>F</b>ine-grained <b>T</b>asking</h1>
+</div>
+</div>
+<div class='container'>
+<div class='nav mono'>
+<div class='left-nav'>
+<ul>
+<li class='rightborder active'>
+<a>About</a>
+</li>
+<li class='rightborder'>
+<a>Papers</a>
+</li>
+<li class='rightborder'>
+<a>Talks</a>
+</li>
+<li>
+<a>Contact</a>
+</li>
+</ul>
+</div>
+<div class='right-nav'>
+<ul>
+<li class='btn-orange code'>
+<a><i class="fa fa-gitlab" aria-hidden="true"></i> Code</a>
+</li>
+</ul>
+</div>
+</div>
+<div class='cards'>
+<div class='card'>
+<div class='card-content'>
+<img src='domains.png'>
+<h3>Card 1</h3>
+<p>About Card 1</p>
+</div>
+</div>
+<div class='card'>
+<div class='card-content'>
+<img src='domains.png'>
+<h3>Card 2</h3>
+<p>About Card 2</p>
+</div>
+</div>
+<div class='card'>
+<div class='card-content'>
+<img src='domains.png'>
+<h3>Card 3</h3>
+<p>About Card 3</p>
+</div>
+</div>
+<div class='card'>
+<div class='card-content'>
+<img src='domains.png'>
+<h3>Card 4</h3>
+<p>About Card 4</p>
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>