diff --git a/src/amo/components/AddonDetail.js b/src/amo/components/AddonDetail.js
new file mode 100644
index 00000000000..18f0ef96f75
--- /dev/null
+++ b/src/amo/components/AddonDetail.js
@@ -0,0 +1,74 @@
+import React, { PropTypes } from 'react';
+
+import translate from 'core/i18n/translate';
+
+import AddonMeta from 'amo/components/AddonMeta';
+import InstallButton from 'disco/components/InstallButton';
+import LikeButton from 'amo/components/LikeButton';
+import ScreenShots from 'amo/components/ScreenShots';
+import SearchBox from 'amo/components/SearchBox';
+
+
+import 'amo/css/AddonDetail.scss';
+
+export class AddonDetail extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object,
+  }
+
+  render() {
+    const { i18n } = this.props;
+
+    return (
+      <div className="AddonDetail">
+        <header>
+          <SearchBox />
+          <div className="icon">
+            <img alt="" />
+            <LikeButton />
+          </div>
+          <div className="title">
+            <h1>Placeholder Add-on Title
+              <span className="author">by <a href="#">AwesomeAddons</a></span></h1>
+            <InstallButton slug="placeholder" />
+          </div>
+          <div className="description">
+            <p>Lorem ipsum dolor sit amet, dicat graece partiendo cu usu.
+            Vis recusabo accusamus et.</p>
+          </div>
+        </header>
+
+        <section className="addon-metadata">
+          <h2 className="visually-hidden">{i18n.gettext('Extension Metadata')}</h2>
+          <AddonMeta />
+        </section>
+
+        <hr />
+
+        <section className="screenshots">
+          <h2>{i18n.gettext('Screenshots')}</h2>
+          <ScreenShots />
+        </section>
+
+        <hr />
+
+        <section className="about">
+          <h2>{i18n.gettext('About this extension')}</h2>
+          <p>Lorem ipsum dolor sit amet, dicat graece partiendo cu usu. Vis
+          recusabo accusamus et, vitae scriptorem in vel. Sed ei eleifend
+          molestiae deseruisse, sit mucius noster mentitum ex. Eu pro illum
+          iusto nemore, te legere antiopam sit. Suas simul ad usu, ex putent
+          timeam fierent eum. Dicam equidem cum cu. Vel ea vidit timeam.</p>
+
+          <p>Eu nam dicant oportere, et per habeo euismod denique, te appetere
+          temporibus mea. Ad solum reprehendunt vis, sea eros accusata senserit
+          an, eam utinam theophrastus in. Debet consul vis ex. Mei an iusto
+          delicatissimi, ut timeam electram maiestatis nam, te petentium
+          intellegebat ius. Ei legere everti.</p>
+        </section>
+      </div>
+    );
+  }
+}
+
+export default translate({ withRef: true })(AddonDetail);
diff --git a/src/amo/components/AddonMeta.js b/src/amo/components/AddonMeta.js
new file mode 100644
index 00000000000..dab33fd798e
--- /dev/null
+++ b/src/amo/components/AddonMeta.js
@@ -0,0 +1,37 @@
+import React, { PropTypes } from 'react';
+
+import translate from 'core/i18n/translate';
+
+import 'amo/css/AddonMeta.scss';
+
+export class AddonMeta extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object,
+  }
+
+  render() {
+    const { i18n } = this.props;
+
+    // This is just a placeholder.
+    return (
+      <div className="AddonMeta">
+        <div className="category security">
+          <h3 className="visually-hidden">{i18n.gettext('Category')}</h3>
+          <p>Security &amp; Privacy</p>
+        </div>
+
+        <div className="users">
+          <h3 className="visually-hidden">{i18n.gettext('Used by')}</h3>
+          <p>1,342 users</p>
+        </div>
+
+        <div className="sentiment love-it">
+          <h3 className="visually-hidden">{i18n.gettext('Sentiment')}</h3>
+          <p>89% love it!</p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default translate({ withRef: true })(AddonMeta);
diff --git a/src/amo/components/LikeButton.js b/src/amo/components/LikeButton.js
new file mode 100644
index 00000000000..9583b390c5e
--- /dev/null
+++ b/src/amo/components/LikeButton.js
@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+
+import translate from 'core/i18n/translate';
+
+import 'amo/css/LikeButton.scss';
+
+export class LikeButton extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object,
+  }
+
+  render() {
+    const { i18n } = this.props;
+
+    // This is just a placeholder.
+    return (
+      <button className="LikeButton">
+        <span className="visually-hidden">{i18n.gettext('Mark as liked')}</span>
+      </button>
+    );
+  }
+}
+
+export default translate({ withRef: true })(LikeButton);
diff --git a/src/amo/components/ScreenShots.js b/src/amo/components/ScreenShots.js
new file mode 100644
index 00000000000..cf8090ecf42
--- /dev/null
+++ b/src/amo/components/ScreenShots.js
@@ -0,0 +1,39 @@
+import React, { PropTypes } from 'react';
+
+import translate from 'core/i18n/translate';
+
+import 'amo/css/ScreenShots.scss';
+
+
+export class ScreenShots extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object,
+  }
+
+  render() {
+    const { i18n } = this.props;
+    const totalImages = 5;
+
+    // This is just a placeholder.
+    return (
+      <div className="ScreenShots">
+        <img alt="" />
+        <ol>
+          {[...Array(totalImages)].map((x, i) =>
+            (<li>
+              <a href="#" className={i + 1 === 2 ? 'active' : null}>
+                <span className="visually-hidden">
+                  {i18n.sprintf(i18n.gettext(
+                    'screenshot %(imageNumber)s of %(totalImages)s'
+                  ), { imageNumber: i + 1, totalImages })}
+                </span>
+              </a>
+            </li>)
+          )}
+        </ol>
+      </div>
+    );
+  }
+}
+
+export default translate({ withRef: true })(ScreenShots);
diff --git a/src/amo/components/SearchBox.js b/src/amo/components/SearchBox.js
new file mode 100644
index 00000000000..c63c4c9c0b9
--- /dev/null
+++ b/src/amo/components/SearchBox.js
@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+
+import translate from 'core/i18n/translate';
+
+import 'amo/css/SearchBox.scss';
+
+
+export class SearchBox extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object,
+  }
+
+  render() {
+    const { i18n } = this.props;
+
+    // This is just a placeholder.
+    return (
+      <div className="SearchBox">
+        <span className="visually-hidden">{i18n.gettext('Search')}</span>
+      </div>
+    );
+  }
+}
+
+export default translate({ withRef: true })(SearchBox);
diff --git a/src/amo/containers/DetailPage.js b/src/amo/containers/DetailPage.js
index 81dc7356e8d..239c349ba7f 100644
--- a/src/amo/containers/DetailPage.js
+++ b/src/amo/containers/DetailPage.js
@@ -1,10 +1,12 @@
 import React from 'react';
 
+import AddonDetail from 'amo/components/AddonDetail';
+
 export default class DetailPage extends React.Component {
   render() {
     return (
       <div>
-        <h1>Detail Page</h1>
+        <AddonDetail />
       </div>
     );
   }
diff --git a/src/amo/css/AddonDetail.scss b/src/amo/css/AddonDetail.scss
new file mode 100644
index 00000000000..a907997a5cf
--- /dev/null
+++ b/src/amo/css/AddonDetail.scss
@@ -0,0 +1,74 @@
+@import "~amo/css/inc/vars";
+
+.AddonDetail {
+  header {
+    background: $header-background;
+    color: $header-font-color;
+  }
+
+  hr {
+    margin: 0 20px;
+  }
+
+  .icon,
+  .title,
+  .description,
+  .screenshots {
+    overflow: hidden;
+    padding: 20px;
+  }
+
+  .icon {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    img {
+      background: #fff;
+      border-radius: 5px;
+      display: inline-block;
+      height: 64px;
+      width: 64px;
+    }
+
+    .LikeButton {
+      margin-left: auto;
+    }
+  }
+
+  .title {
+    background: darken($header-background, 3%);
+
+    h1 {
+      margin-top: 0;
+      color: $header-font-color;
+    }
+  }
+
+  .author {
+    display: block;
+    font-size: 20px;
+
+    a {
+      color: $header-font-color;
+      font-size: 20px;
+    }
+  }
+
+  .switch {
+    float: right;
+  }
+
+  .description {
+    background: darken($header-background, 5.5%);
+    font-size: 18px;
+
+    p:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .about {
+    padding: 20px;
+  }
+}
diff --git a/src/amo/css/AddonMeta.scss b/src/amo/css/AddonMeta.scss
new file mode 100644
index 00000000000..8dfa53dd705
--- /dev/null
+++ b/src/amo/css/AddonMeta.scss
@@ -0,0 +1,34 @@
+.AddonMeta {
+  font-size: 10px;
+  padding: 20px;
+
+  .category,
+  .sentiment,
+  .users {
+    display: inline-block;
+    margin: 5px;
+    padding-top: 40px;
+    text-align: center;
+    vertical-align: top;
+    width: 60px;
+  }
+
+  p {
+    display: inline-block;
+    line-height: 14px;
+    max-width: 45px;
+    text-align: center;
+  }
+
+  .category.security {
+    background: url(../img/categories/security.svg) no-repeat 50% 5px;
+  }
+
+  .users {
+    background: url(../img/icons/users.svg) no-repeat 50% 5px;
+  }
+
+  .sentiment.love-it {
+    background: url(../img/ratings/love-it-mono.svg) no-repeat 50% 5px;
+  }
+}
diff --git a/src/amo/css/App.scss b/src/amo/css/App.scss
index 3989133652e..d34dabfa53e 100644
--- a/src/amo/css/App.scss
+++ b/src/amo/css/App.scss
@@ -1,9 +1,83 @@
 @import "~normalize.css";
 @import "~core/css/inc/lib";
 @import "~core/css/inc/mixins";
+@import "~amo/css/inc/vars";
+@import "~amo/css/inc/mixins";
 
 html,
 body {
   background: #fff;
-  font-family: "Fira Sans", sans-serif;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body {
+  @include font-regular();
+  font-size: 14px;
+  color: $body-font-color;
+  line-height: 19px;
+  padding-top: 50px;
+}
+
+h1,
+h2 {
+  @include font-bold();
+  color: $primary-font-color;
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 32px;
+  line-height: 32px;
+}
+
+h2 {
+  font-size: 12px;
+  color: $primary-font-color;
+}
+
+h3 {
+  @include font-bold();
+  font-size: 14px;
+  color: $primary-font-color;
+  line-height: 19px;
+
+}
+
+a:link {
+  @include font-medium();
+  font-size: 14px;
+  color: #0996f8;
+}
+
+em {
+  @include font-regular-italic();
+}
+
+strong {
+  @include font-bold();
+}
+
+.caption {
+  font-size: 10px;
+  color: $primary-font-color;
+  line-height: 11px;
+}
+
+.date-time {
+  font-size: 14px;
+  color: #b1b1b1;
+}
+
+button {
+  background: none;
+  border: none;
 }
diff --git a/src/amo/css/LikeButton.scss b/src/amo/css/LikeButton.scss
new file mode 100644
index 00000000000..054e0a9cc6e
--- /dev/null
+++ b/src/amo/css/LikeButton.scss
@@ -0,0 +1,6 @@
+.LikeButton {
+  height: 40px;
+  width: 40px;
+  background: transparent url('../img/icons/like.svg') no-repeat 50% 50%;
+  float: right;
+}
diff --git a/src/amo/css/ScreenShots.scss b/src/amo/css/ScreenShots.scss
new file mode 100644
index 00000000000..319ccf29e2d
--- /dev/null
+++ b/src/amo/css/ScreenShots.scss
@@ -0,0 +1,41 @@
+.ScreenShots {
+  ol {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    padding: 0;
+    width: 100%;
+  }
+
+  li {
+    display: inline-block;
+  }
+
+  li a {
+    display: inline-block;
+    padding: 5px;
+
+    &::before {
+      background: #000;
+      border-radius: 50%;
+      content: '';
+      display: block;
+      flex-direction: row;
+      height: 12px;
+      width: 12px;
+    }
+
+    &.active::before {
+      border: 3px solid #000;
+      background: #fff;
+    }
+  }
+
+  img {
+    width: 100%;
+    padding-bottom: 75%;
+    background: #ff211e;
+    display: block;
+  }
+}
diff --git a/src/amo/css/SearchBox.scss b/src/amo/css/SearchBox.scss
new file mode 100644
index 00000000000..b1ea24f925d
--- /dev/null
+++ b/src/amo/css/SearchBox.scss
@@ -0,0 +1,10 @@
+.SearchBox {
+  height: 50px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background: #000 url('../img/icons/search.svg') no-repeat 98% 50%;
+  z-index: 20;
+}
diff --git a/src/amo/css/inc/mixins.scss b/src/amo/css/inc/mixins.scss
new file mode 100644
index 00000000000..5b8d801aed5
--- /dev/null
+++ b/src/amo/css/inc/mixins.scss
@@ -0,0 +1,47 @@
+@mixin font-light() {
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+@mixin font-light-italic() {
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+@mixin font-regular() {
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+@mixin font-regular-italic() {
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+@mixin font-medium() {
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}
+
+@mixin font-medium-italic() {
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: 500;
+  font-style: italic;
+}
+
+@mixin font-bold() {
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: 600;
+  font-style: normal;
+}
+
+@mixin font-bold-italic() {
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: 600;
+  font-style: italic;
+}
diff --git a/src/amo/css/inc/vars.scss b/src/amo/css/inc/vars.scss
new file mode 100644
index 00000000000..426824a173a
--- /dev/null
+++ b/src/amo/css/inc/vars.scss
@@ -0,0 +1,4 @@
+$primary-font-color: #000;
+$body-font-color: #1d1d1d;
+$header-font-color: #fff;
+$header-background: #1f386e;
diff --git a/src/amo/img/categories/security.svg b/src/amo/img/categories/security.svg
new file mode 100644
index 00000000000..89152f89ec9
--- /dev/null
+++ b/src/amo/img/categories/security.svg
@@ -0,0 +1,8 @@
+<svg width="26.6px" height="34px" viewBox="86 1281 77 102" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Group-3-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(89.000000, 1284.000000)">
+        <path d="M54.295082,38.557377 L54.295082,19.6721311 C54.295082,9.2427541 45.8392131,0.786885246 35.4098361,0.786885246 L35.4098361,0.786885246 C24.980459,0.786885246 16.5245902,9.2427541 16.5245902,19.6721311 L16.5245902,38.557377" id="Shape" stroke="#000000" stroke-width="6"></path>
+        <rect id="Rectangle-path" stroke="#000000" stroke-width="6" x="0.786885246" y="38.557377" width="69.2459016" height="56.6557377"></rect>
+        <path d="M34.6229508,71.6065574 L34.6229508,81.0491803" id="Shape" stroke="#000000" stroke-width="6"></path>
+        <circle id="Oval" stroke="#000000" stroke-width="6" cx="35.4098361" cy="62.1639344" r="9.44262295"></circle>
+    </g>
+</svg>
diff --git a/src/amo/img/icons/like.svg b/src/amo/img/icons/like.svg
new file mode 100644
index 00000000000..a7926ab76a7
--- /dev/null
+++ b/src/amo/img/icons/like.svg
@@ -0,0 +1,4 @@
+<svg width="40px" height="40px" viewBox="-3 -3 126 126" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <circle id="Oval-53" stroke="#FFFFFF" stroke-width="6" fill="none" cx="60" cy="60" r="60"></circle>
+    <path d="M73.6,30 C67.9,30 62.9,33 60,37.6551724 C57.1,33 52.1,30 46.4,30 C37.3,30 30,37.6551724 30,47.1724138 C30,64.2413793 60,90 60,90 C60,90 90,64.2413793 90,47.1724138 C90,37.6551724 82.7,30 73.6,30 L73.6,30 Z" id="Shape" stroke="#FFFFFF" stroke-width="6" fill="none"></path>
+</svg>
diff --git a/src/amo/img/icons/search.svg b/src/amo/img/icons/search.svg
new file mode 100644
index 00000000000..34bbaa4d107
--- /dev/null
+++ b/src/amo/img/icons/search.svg
@@ -0,0 +1,9 @@
+<svg width="25px" height="25px" viewBox="977 39 66 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Group-35" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(980.000000, 42.000000)">
+        <path d="M59.4915254,59.4915254 L42.2033898,42.2033898" id="Shape" stroke="#FFFFFF" stroke-width="6"></path>
+        <circle id="Oval" stroke="#FFFFFF" stroke-width="6" cx="24.9152542" cy="24.9152542" r="24.4067797"></circle>
+    </g>
+</svg>
diff --git a/src/amo/img/icons/users.svg b/src/amo/img/icons/users.svg
new file mode 100644
index 00000000000..70bb0a9d2c1
--- /dev/null
+++ b/src/amo/img/icons/users.svg
@@ -0,0 +1,6 @@
+<svg width="27.3px" height="34px" viewBox="15 -3 82 102" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Group-2-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(18.000000, 0.000000)">
+        <path d="M37.7142857,54.8571429 L37.7142857,54.8571429 C24.5142857,54.8571429 13.7142857,44.0571429 13.7142857,30.8571429 L13.7142857,24 C13.7142857,10.8 24.5142857,0 37.7142857,0 L37.7142857,0 C50.9142857,0 61.7142857,10.8 61.7142857,24 L61.7142857,30.8571429 C61.7142857,44.0571429 50.9142857,54.8571429 37.7142857,54.8571429 L37.7142857,54.8571429 Z" id="Shape" stroke="#000000" stroke-width="6"></path>
+        <path d="M54.8571429,68.5714286 L20.5714286,68.5714286 C9.25714286,68.5714286 0,77.8285714 0,89.1428571 L0,96 L75.4285714,96 L75.4285714,89.1428571 C75.4285714,77.8285714 66.1714286,68.5714286 54.8571429,68.5714286 L54.8571429,68.5714286 Z" id="Shape" stroke="#000000" stroke-width="6"></path>
+    </g>
+</svg>
diff --git a/src/amo/img/ratings/love-it-mono.svg b/src/amo/img/ratings/love-it-mono.svg
new file mode 100644
index 00000000000..a72407b5c25
--- /dev/null
+++ b/src/amo/img/ratings/love-it-mono.svg
@@ -0,0 +1,8 @@
+<svg width="34px" height="34px" viewBox="5 -3 102 102" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Group-47" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(8.000000, 0.000000)">
+        <path d="M35.2,35.2 C35.2,31.68 32.32,28.8 28.8,28.8 C25.28,28.8 22.4,31.68 22.4,35.2" id="Shape" stroke="#000000" stroke-width="6"></path>
+        <path d="M73.6,35.2 C73.6,31.68 70.72,28.8 67.2,28.8 C63.68,28.8 60.8,31.68 60.8,35.2" id="Shape" stroke="#000000" stroke-width="6"></path>
+        <circle id="Oval" stroke="#000000" stroke-width="6" cx="48" cy="48" r="48"></circle>
+        <path d="M73.6,51.2 C73.6,65.28 62.08,76.8 48,76.8 C33.92,76.8 22.4,65.28 22.4,51.2 L73.6,51.2 L73.6,51.2 Z" id="Shape" stroke="#000000" stroke-width="6"></path>
+    </g>
+</svg>
diff --git a/tests/client/amo/containers/TestDetail.js b/tests/client/amo/containers/TestDetail.js
index a97fa551060..837b9311a91 100644
--- a/tests/client/amo/containers/TestDetail.js
+++ b/tests/client/amo/containers/TestDetail.js
@@ -1,16 +1,30 @@
 import React from 'react';
 import { findDOMNode } from 'react-dom';
 import {
+  findRenderedComponentWithType,
   renderIntoDocument,
 } from 'react-addons-test-utils';
 
+import { getFakeI18nInst } from 'tests/client/helpers';
 import DetailPage from 'amo/containers/DetailPage';
+import I18nProvider from 'core/i18n/Provider';
+import translate from 'core/i18n/translate';
+
+function renderDetailPage({ ...props }) {
+  const MyDetailPage = translate({ withRef: true })(DetailPage);
+
+  return findRenderedComponentWithType(renderIntoDocument(
+    <I18nProvider i18n={getFakeI18nInst()}>
+      <MyDetailPage {...props} />
+    </I18nProvider>
+  ), MyDetailPage).getWrappedInstance();
+}
 
 
 describe('DetailPage', () => {
   it('renders a heading', () => {
-    const root = renderIntoDocument(<DetailPage />);
+    const root = renderDetailPage();
     const rootNode = findDOMNode(root);
-    assert.include(rootNode.querySelector('h1').textContent, 'Detail Page');
+    assert.include(rootNode.querySelector('h1').textContent, 'Placeholder Add-on');
   });
 });