Buttons

Link button
<button class="Button" type="button">Button button</button>
<a class="Button" href="#" role="button">Link button</a>

Grid

Foundation Grid with some custom breakpoints.

s-3 m-4
s-3 m-6
s-3 m-1
s-3 m-1
<div class="row">
  <div class="column small-3 medium-4">s-3 m-4</div>
  <div class="column small-3 medium-6">s-3 m-6</div>
  <div class="column small-3 medium-1">s-3 m-1</div>
  <div class="column small-3 medium-1">s-3 m-1</div>
</div>
m-8 m-push-4
<div class="row">
  <div class="column medium-8 medium-push-4">m-8 m-push-4</div>
</div>
m-4
m-8
<div class="row">
  <div class="column medium-4">m-4</div>
  <div class="column medium-8">m-8</div>
</div>
m-4
m-8 l-4
m-8 l-4
<div class="row">
  <div class="column medium-4">m-4</div>
  <div class="column medium-8 large-4">m-8 l-4</div>
  <div class="column medium-8 large-4">m-8 l-4</div>
</div>
m-8 m-push-4 l-4
m-8 l-4
<div class="row">
  <div class="column medium-8 medium-push-4 large-4">m-8 m-push-4 l-4</div>
  <div class="column medium-8 large-4">m-8 l-4</div>
</div>
s-6 m-4 m-push-4
s-6 m-4
<div class="row">
  <div class="column small-6 medium-4 medium-push-4">s-6 m-4 m-push-4</div>
  <div class="column small-6 medium-4">s-6 m-4</div>
</div>
m-4
m-8
<div class="row row--Editorial">
  <div class="column medium-4">m-4</div>
  <div class="column medium-8">m-8</div>
</div>

Block Grid

<section class="row">
  <div class="column">
    <ol class="List--bare small-block-grid-2">
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
    </ol>
  </div>
</section>
<section class="row">
  <div class="column">
    <ol class="List--bare small-block-grid-3">
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
    </ol>
  </div>
</section>
<section class="row">
  <div class="column">
    <ol class="List--bare small-block-grid-4">
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
    </ol>
  </div>
</section>
<section class="row">
  <div class="column">
    <ol class="List--bare small-block-grid-5">
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
      <li>
        <figure class="MediaContainer">
          <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
        </figure>
      </li>
    </ol>
  </div>
</section>

Headings

Heading xx-large

Heading x-large

Heading large

Heading small

Heading x-small
Heading xx-small
<h1 class="Heading Heading--xx-large">
  Heading xx-large
</h1>

<h2 class="Heading Heading--x-large">
  Heading x-large
</h2>

<h3 class="Heading Heading--large">
  Heading large
</h3>

<h4 class="Heading Heading--small">
  Heading small
</h4>

<h5 class="Heading Heading--x-small">
  Heading x-small
</h5>

<h6 class="Heading Heading--xx-small">
  Heading xx-small
</h6>

Leaders

Leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.

<p class="Leader">
  Leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

Medium size leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.

<p class="Leader Leader--medium">
  Medium size leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

Large leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.

<p class="Leader Leader--large">
  Large leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

Extra large leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.

<p class="Leader Leader--x-large">
  Extra large leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

Leaders with gradiated text entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.

<p class="Leader Leader--x-large u-text-gradient">
  Leaders with gradiated text entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

Leaders with gradiated text entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.

<p class="Leader Leader--xx-large u-text-gradient">
  Leaders with gradiated text entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

Lite leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.

<p class="Leader Leader--x-large Leader--lite">
  Lite leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

Pulled leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.

<p class="Leader Leader--x-large Leader--pull">
  Pulled leaders entice the reader into a larger body of text by providing a focal point on arrival to the page and setting the scene of the piece.
</p>

Links

Link styles get applied automatically to links inside editorial containers, but can also be triggered by adding a class of `Link`.

Links can be placed inside headings.

Links can also be placed inside large leaders.

Links can have arrows

<p>
  Link styles get applied automatically to <a href="#">links inside editorial containers</a>, but can also be triggered by <a class="Link" href="#">adding a class of `Link`</a>.
</p>

<h3 class="Heading Heading--large">
  Links can be placed <a class="Heading-link" href="#">inside headings</a>.
</h3>

<h3 class="Leader Leader--large">
  Links can also be placed <a class="Link" href="#">inside large leaders</a>.
</h3>


<h3 class="Heading Heading--large">
  <a class="Heading-link has-rightArrow" href="#">Links can have arrows</a>
</h3>

<p class="Metadata Metadata--large">
  <a class="Link Link--Metadata" href="#">
    Links can appear in a metadata style
  </a>
</p>

Lists

  • A bare list, without any markers
  • Useful when the list structure shouldn’t be pronounced
<ul class="List List--bare">
  <li>
     A bare list, without any markers
  </li>
  <li>
    Useful when the list structure shouldn’t be pronounced
  </li>
</ul>
  • Important: ensure content inside the list items is typed on a new line, else horizontal alignment of the dash + content will be off. The dashed list is used frequently.
  • Replacing bullets with dashes feels more elegant
<ul class="List List--dashed">
  <li>
    Important: ensure content inside the list items is typed on a new line, else horizontal alignment of the dash + content will be off. The dashed list is used frequently.
  </li>
  <li>
    Replacing bullets with dashes feels more elegant
  </li>
</ul>
  • A dashed list that’s also indented
  • When a more pronounced break from other content is required
<ul class="List List--dashed List--dashed--indented">
  <li>
    A dashed list that’s also indented
  </li>
  <li>
    When a more pronounced break from other content is required
  </li>
</ul>
  • A negatively indented dashed list
  • Useful when the left edge of the text column should remain flush
<ul class="List List--dashed List--dashed--negativeIndent">
  <li>
    A negatively indented dashed list
  </li>
  <li>
    Useful when the left edge of the text column should remain flush
  </li>
</ul>
  • The xx-loosely dashed list
  • Useful when items contain a lot of content
<ul class="List List--dashed List--dashed--xx-loose">
  <li>
    The xx-loosely dashed list
  </li>
  <li>
    Useful when items contain a lot of content
  </li>
</ul>
  • A list with extra-loosely spaced items. This is a good solution when the items contain a lot of written content, as the extra space helps to aid readability.
  • A list with extra-loosely spaced items. This is a good solution when the items contain a lot of written content, as the extra space helps to aid readability.
  • A list with extra-loosely spaced items. This is a good solution when the items contain a lot of written content, as the extra space helps to aid readability.
<ul class="List List--dashed List--dashed--x-loose">
  <li>
    A list with extra-loosely spaced items. This is a good solution when the items contain a lot of written content, as the extra space helps to aid readability.
  </li>
  <li>
    A list with extra-loosely spaced items. This is a good solution when the items contain a lot of written content, as the extra space helps to aid readability.
  </li>
  <li>
    A list with extra-loosely spaced items. This is a good solution when the items contain a lot of written content, as the extra space helps to aid readability.
  </li>
</ul>
  1. An ordered counter list

    There’s typically a paragraph following each ordered counter item, further expanding upon the heading.

  2. Where each item has a count

    There’s typically a paragraph following each ordered counter item, further expanding upon the heading.

  3. Which continue in sequence

    There’s typically a paragraph following each ordered counter item, further expanding upon the heading.

<ol class="List List--orderedCounter">
  <li>
    <h3 class="Heading Heading--large">
      <span class="List--orderedCounter-count">
        An ordered counter list
      </span>
    </h3>
    <p>
      There’s typically a paragraph following each ordered counter item, further expanding upon the heading.
    </p>
  </li>
  <li>
    <h3 class="Heading Heading--large">
      <span class="List--orderedCounter-count">
        Where each item has a count
      </span>
    </h3>
    <p>
      There’s typically a paragraph following each ordered counter item, further expanding upon the heading.
    </p>
  </li>
  <li>
    <h3 class="Heading Heading--large">
      <span class="List--orderedCounter-count">
        Which continue in sequence
      </span>
    </h3>
    <p>
      There’s typically a paragraph following each ordered counter item, further expanding upon the heading.
    </p>
  </li>
</ol>
  1. Inline list example.

    Is currently just produced using utility classes on individual heading and paragraph elements.

  2. Works for dashed or orderedCounter.

    Doesn't matter which list type because it's all just driven with utility classes.

  3. Use loose spacing.

    The `List--dashed--xx-loose` class will help here.

<ol class="List List--dashed List--dashed--xx-loose">
  <li>
    <h3 class="Heading Heading--large u-display--inline">
      <span>
        Inline list example.
      </span>
    </h3>
    <p class="u-display--inline">
      Is currently just produced using utility classes on individual heading and paragraph elements.  
    </p>
  </li>
  <li>
    <h3 class="Heading Heading--large u-display--inline">
      <span>
        Works for dashed or orderedCounter.
      </span>
    </h3>
    <p class="u-display--inline">
      Doesn't matter which list type because it's all just driven with utility classes.
    </p>
  </li>
  <li>
    <h3 class="Heading Heading--large u-display--inline">
      <span>
        Use loose spacing.
      </span>
    </h3>
    <p class="u-display--inline">
       The `List--dashed--xx-loose` class will help here.   
    </p>
  </li>
</ol>
  1. An indented ordered counter list
  2. Indentation width matches indentation for dashed lists
  3. Line spacing can be altered with the `List--loose`, `List--x-loose`, `List--xx-loose` classes
<ol class="List List--orderedCounter List--orderedCounter--indented">
  <li>
    <span class="List--orderedCounter-count">
      An indented ordered counter list 
    </span>
  </li>
  <li>
    <span class="List--orderedCounter-count">
      Indentation width matches indentation for dashed lists
    </span>
  </li>
  <li>
    <span class="List--orderedCounter-count">
      Line spacing can be altered with the `List--loose`, `List--x-loose`, `List--xx-loose` classes
    </span>
  </li>
</ol>

Media

<figure class="MediaContainer">
  <img class="Media Media--image" src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/freeagent-mobile--masthead4.jpg" alt="" />
  <figcaption class="Metadata Metadata--figcaption">
    Image caption
  </figcaption>
</figure>
<figure class="MediaContainer">
  <figcaption class="Metadata Metadata--figcaption">
    Lazy loaded image
  </figcaption>
  <img class="lazyload Media Media--image" data-src="http://assets.robbiemanson.com/assets/images/case-studies/project-dashboards/project-dashboards--moodboards.jpg" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
</figure>
<figure class="MediaContainer">
  <img class="Media Media--image u-width--100percent" src="http://assets.robbiemanson.com/assets/images/case-studies/project-dashboards/project-dashboards--masthead.jpg" alt="" />
</figure>
<div class="column small-6 medium-4 medium-push-4">

  <figure>
    <figcaption class="Metadata Metadata--figcaption">
      Video
    </figcaption>
    <div class="MediaContainer MediaContainer--mobile">
      <img class="lazyload Media Media--image Media--image--feature Media--image--poster"
          data-src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--home--poster.png" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
      <video id="freeagent-mobile--home"
          class="lazyload Media Media-video Media-video--inline video-js vjs-big-play-centered vjs-default-skin"
          controls
          data-setup='{ "children": { "controlBar": { "children": { "muteToggle": false, "fullscreenToggle": false, "volumeControl": false } } } }'
          preload="none">
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--home.mp4" type="video/mp4" />
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--home.webmhd.webm" type="video/webm" />
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--home.oggtheora.ogv" type="video/ogg" />
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/">supports HTML5 video</a></p>
      </video>
    </div>
  </figure>

</div>
<div class="column small-6 medium-4">

  <figure>
    <figcaption class="Metadata Metadata--figcaption">
      Video
    </figcaption>
    <div class="MediaContainer MediaContainer--mobile">
      <img class="lazyload Media Media--image Media--image--feature Media--image--poster"
          data-src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--invoices--poster.png" src="http://assets.robbiemanson.com/assets/images/placeholder.svg" />
      <video id="freeagent-mobile--invoices"
          class="lazyload Media Media-video Media-video--inline video-js vjs-big-play-centered vjs-default-skin"
          controls
          data-setup='{ "children": { "controlBar": { "children": { "muteToggle": false, "fullscreenToggle": false, "volumeControl": false } } } }'
          preload="none">
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--invoices.mp4" type="video/mp4" />
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--invoices.webmhd.webm" type="video/webm" />
        <source src="http://assets.robbiemanson.com/assets/images/case-studies/freeagent-mobile/videos/freeagent-mobile--invoices.oggtheora.ogv" type="video/ogg" />
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/">supports HTML5 video</a></p>
      </video>
    </div>
  </figure>

</div>

Metadata

<p class="Metadata">
  Metadata is supplementary; extra information to clarify another element.
</p>
<p class="Metadata Metadata--large">
  Metadata is smaller than regular body text by default, but can be increased in size. Note the size increase only kicks in at larger breakpoints.
</p>
<p class="Metadata Metadata--small">
  Metadata can be made even smaller than its default size if required.
</p>

Page/post title

<h1 class="Heading Heading--xx-large">
  Page/post title
</h1>
<span class="Metadata Metadata--editorialSubhead">
  Metadata as an editorial subheading
</span>
<p class="Metadata Metadata--limitWidth">
  Metadata can have its measure limited, independently of any container, to prevent pesky long lines from disrupting thr reading experience. This is particularly useful when metadata takes the form of a paragraph.
</p>
<p class="Metadata Metadata--figcaption">
  The `figcaption` element is treated as metadata.
</p>
<p class="Metadata Metadata--figcaption--text-align--left">
  Metadata `figcaption` elements are right-aligned by default, but but can left-aligned if desired.  
</p>

NavList + NavLink

<ul class="NavList" role="navigation">
  <li>
  	<a class="NavLink NavLink--current" href="">
      Current NavLink item
    </a>
  </li>
  <li>
  	<a class="NavLink" href="">
      Regular weight
    </a>
  </li>
  <li>
  	<a class="NavLink NavLink--bold" href="">
      Bold weight
    </a>
  </li>
</ul>
<ol class="NavList NavList--inline" role="navigation">
  <li>
    <a class="NavLink" href="">
      Inline NavList
    </a>
  </li>
  <li>
    <a class="NavLink NavLink--current" href="">
      Current NavLink
    </a>
  </li>
  <li>
    <a class="NavLink NavLink--small" href="">
      Small NavLink
    </a>
  </li>
  <li class="Metadata Metadata--small">
    Metadata in inline NavList
  </li>
</ol>

Pull quote

Pull quotes stick out of the right and left-hand sides of the main content column by default. It’s a useful feature when they’re quite long, but they can be contained easily.
<blockquote class="Pullquote">
  <span class="Pullquote-quote u-text-gradient">Pull quotes stick out of the right and left-hand sides of the main content column by default. It’s a useful feature when they’re quite long, but they can be contained easily.</span>
</blockquote>
Contained pull quotes always stay inside their parent column. This helps to keep things feeling tidy. Ideally they’re a little shorter in length.
<blockquote cite="http://robbiemanson.com/styleguide/" class="Pullquote Pullquote--contained">
  <span class="Pullquote-quote u-text-gradient">Contained pull quotes always stay inside their parent column. This helps to keep things feeling tidy. Ideally they’re a little shorter in length.</span>
  <footer>
    <cite class="Pullquote-cite">Cited Author, <a class="Link" href="http://robbiemanson.com/styleguide/">Cited Publication</a></cite>
  </footer>
</blockquote>
Pull quotes don’t need to be colourful. They can be the standard old text colour, a bit like this.
<blockquote class="Pullquote">
  <span class="Pullquote-quote">Pull quotes don’t need to be colourful. They can be the standard old text colour, a bit like this.</span>
</blockquote>
Pull quotes come in a ‘lite’ variant, useful for knocked back leaders and whatnot. The reduced contrast means you can get away with a bit more content.
<blockquote class="Pullquote Pullquote--lite">
  <span class="Pullquote-quote">Pull quotes come in a ‘lite’ variant, useful for knocked back leaders and whatnot. The reduced contrast means you can get away with a bit more content.</span>
</blockquote>

Table

Table header Table header Table header
Table cell Table cell Table cell
Table cell Table cell Table cell
Table cell Table cell Table cell
<table class="Table">
  <thead>
    <tr>
      <th>Table header</th>
      <th>Table header</th>
      <th>Table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>
Table header Table header Table header
Table cell Table cell Table cell
Table cell Table cell Table cell
Table cell Table cell Table cell
<table class="Table">
  <thead>
    <tr>
      <th>Table header</th>
      <th>Table header</th>
      <th>Table header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Table-row Table-row--borderBottom">
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr class="Table-row Table-row--borderBottom">
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>
Phase Mindset Focus Metrics Process Craft
Explore Move fast and break things Experiment. The 10x/100x idea that gains traction will be a diamond in the rough. Expect lots of failures. That's fine – you have nothing to lose. Don't stress about defining your own yet, you're still looking for them. Forget about estimates, just time-box your work and pay attention. Be Agile if that's your thing. Not a priority. Time spent fine-tuning code / design / scontent is time you could be spending exploring (starting new experiments).
Expand Focus on impact Remove scaling bottlenecks by solving the difficult technical problems. Focus on future impact because the work is unlikely to produce immediate payoffs. Define what you need to measure the success of the technical problems being solved. Use estimates as a way to ruthlessly prioritise and sequence the most important work. Celebrate each win no matter how small each may feel. Iterate but don't refactoring too heavily yet. The public results of code / design / content changes are still more important than their internal states.
Extract Slow down and fix your shit Few experiments. Minimise the possibility of failure. Upside is that every fix is multipled because of the work done in Expand. They drive everything. Now is about picking which of those metric levers to pull on at different times. Forget about Agile. Forget about XP. This is not a game of courage like Explore. There's a lot to lose. Make everything the best it can be. Refactor, refine, polish.
<table class="Table Table--alignTop Table--wide">
  <thead>
    <tr>
      <th class="Table-head Table-head--narrow">Phase</th>
      <th class="Table-head Table-head--narrow">Mindset</th>
      <th class="Table-head Table-head--medium">Focus</th>
      <th class="Table-head Table-head--medium">Metrics</th>
      <th class="Table-head Table-head--medium">Process</th>
      <th class="Table-head Table-head--medium">Craft</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Table-row Table-row--borderBottom">
      <td><strong>Explore</strong></td>
      <td>Move fast and break things</td>
      <td>Experiment. The 10x/100x idea that gains traction will be a diamond in the rough. Expect lots of failures. That's fine – you have nothing to lose.</td>
      <td>Don't stress about defining your own yet, you're still looking for them.</td>
      <td>Forget about estimates, just time-box your work and pay attention. Be Agile if that's your thing.</td>
      <td>Not a priority. Time spent fine-tuning code / design / scontent is time you could be spending exploring (starting new experiments).</td>
    </tr>
    <tr class="Table-row Table-row--borderBottom">
      <td><strong>Expand</strong></td>
      <td>Focus on impact</td>
      <td>Remove scaling bottlenecks by solving the difficult technical problems. Focus on future impact because the work is unlikely to produce immediate payoffs.</td>
      <td>Define what you need to measure the success of the technical problems being solved.</td>
      <td>Use estimates as a way to ruthlessly prioritise and sequence the most important work. Celebrate each win no matter how small each may feel.</td>
      <td>Iterate but don't refactoring too heavily yet. The public results of code / design / content changes are still more important than their internal states.</td>
    </tr>
    <tr>
      <td><strong>Extract</strong></td>
      <td>Slow down and fix your shit</td>
      <td>Few experiments. Minimise the possibility of failure. Upside is that every fix is multipled because of the work done in Expand.</td>
      <td>They drive everything. Now is about picking which of those metric levers to pull on at different times.</td>
      <td>Forget about Agile. Forget about XP. This is not a game of courage like Explore. There's a lot to lose.</td>
      <td>Make everything the best it can be. Refactor, refine, polish.</td>
    </tr>
  </tbody>
</table>