Styleguide

Typography 2.0

Light background

meta text

display 1

header 1

header 2

header 3

header 4

header 5
header 6

subhead 1

subhead 2

subhead 3

copy lead
copy lead secondary
copy default
copy default secondary
copy mini
copy mini secondary
.new-typography.xs-p2
  .layout
    .layout__item
      %p.meta-text meta text
      %h1.d1 display 1
  .layout
    .layout__item.xs-12of12
      .layout
        .layout__item.xs-4of12
          %h1 header 1
          %h2 header 2
          %h3 header 3
          %h4 header 4
          %h5 header 5
          %h6 header 6
        .layout__item.xs-8of12
          %h1.subhead subhead 1
          %h2.subhead subhead 2
          %h3.subhead subhead 3
          .layout
            .layout__item.xs-3of12
              .copy.copy--lead copy lead
            .layout__item.xs-5of12
              .copy.copy--lead.copy--secondary copy lead secondary
            .layout__item.xs-4of12
              %div
                %a.copy.copy--lead link lead
          .layout
            .layout__item.xs-3of12
              .copy copy default
            .layout__item.xs-5of12
              .copy.copy--secondary copy default secondary
            .layout__item.xs-4of12
              %div
                %a.copy link default
          .layout
            .layout__item.xs-3of12
              .copy.copy--mini copy mini
            .layout__item.xs-5of12
              .copy.copy--mini.copy--secondary copy mini secondary
            .layout__item.xs-4of12
              %div
                %a.copy.copy--mini link mini
    .layout__item.xs-6of12
<div class='new-typography xs-p2'>
  <div class='layout'>
    <div class='layout__item'>
      <p class='meta-text'>meta text</p>
      <h1 class='d1'>display 1</h1>
    </div>
  </div>
  <div class='layout'>
    <div class='layout__item xs-12of12'>
      <div class='layout'>
        <div class='layout__item xs-4of12'>
          <h1>header 1</h1>
          <h2>header 2</h2>
          <h3>header 3</h3>
          <h4>header 4</h4>
          <h5>header 5</h5>
          <h6>header 6</h6>
        </div>
        <div class='layout__item xs-8of12'>
          <h1 class='subhead'>subhead 1</h1>
          <h2 class='subhead'>subhead 2</h2>
          <h3 class='subhead'>subhead 3</h3>
          <div class='layout'>
            <div class='layout__item xs-3of12'>
              <div class='copy copy--lead'>copy lead</div>
            </div>
            <div class='layout__item xs-5of12'>
              <div class='copy copy--lead copy--secondary'>copy lead secondary</div>
            </div>
            <div class='layout__item xs-4of12'>
              <div>
                <a class='copy copy--lead'>link lead</a>
              </div>
            </div>
          </div>
          <div class='layout'>
            <div class='layout__item xs-3of12'>
              <div class='copy'>copy default</div>
            </div>
            <div class='layout__item xs-5of12'>
              <div class='copy copy--secondary'>copy default secondary</div>
            </div>
            <div class='layout__item xs-4of12'>
              <div>
                <a class='copy'>link default</a>
              </div>
            </div>
          </div>
          <div class='layout'>
            <div class='layout__item xs-3of12'>
              <div class='copy copy--mini'>copy mini</div>
            </div>
            <div class='layout__item xs-5of12'>
              <div class='copy copy--mini copy--secondary'>copy mini secondary</div>
            </div>
            <div class='layout__item xs-4of12'>
              <div>
                <a class='copy copy--mini'>link mini</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='layout__item xs-6of12'></div>
  </div>
</div>

Dark background

meta text

display 1

header 1

header 2

header 3

header 4

header 5
header 6

subhead 1

subhead 2

subhead 3

copy lead
copy lead secondary
copy default
copy default secondary
copy mini
copy mini secondary
.new-typography
  .background-dark.xs-p2
    .layout
      .layout__item
        %p.meta-text meta text
        %h1.d1.text--white display 1
    .layout
      .layout__item.xs-12of12
        .layout
          .layout__item.xs-4of12
            %h1.text--white header 1
            %h2.text--white header 2
            %h3.text--white header 3
            %h4.text--white header 4
            %h5.text--white header 5
            %h6.text--white header 6
          .layout__item.xs-8of12
            %h1.subhead.text--white subhead 1
            %h2.subhead.text--white subhead 2
            %h3.subhead.text--white subhead 3
            .layout
              .layout__item.xs-3of12
                .copy.copy--lead.text--white copy lead
              .layout__item.xs-5of12
                .copy.copy--lead.copy--secondary.text--white copy lead secondary
              .layout__item.xs-4of12
                %div
                  %a.copy.copy--lead link lead
            .layout
              .layout__item.xs-3of12
                .copy.text--white copy default
              .layout__item.xs-5of12
                .copy.copy--secondary.text--white copy default secondary
              .layout__item.xs-4of12
                %div
                  %a.copy link default
            .layout
              .layout__item.xs-3of12
                .copy.copy--mini.text--white copy mini
              .layout__item.xs-5of12
                .copy.copy--mini.copy--secondary.text--white copy mini secondary
              .layout__item.xs-4of12
                %div
                  %a.copy.copy--mini link mini
<div class='new-typography'>
  <div class='background-dark xs-p2'>
    <div class='layout'>
      <div class='layout__item'>
        <p class='meta-text'>meta text</p>
        <h1 class='d1 text--white'>display 1</h1>
      </div>
    </div>
    <div class='layout'>
      <div class='layout__item xs-12of12'>
        <div class='layout'>
          <div class='layout__item xs-4of12'>
            <h1 class='text--white'>header 1</h1>
            <h2 class='text--white'>header 2</h2>
            <h3 class='text--white'>header 3</h3>
            <h4 class='text--white'>header 4</h4>
            <h5 class='text--white'>header 5</h5>
            <h6 class='text--white'>header 6</h6>
          </div>
          <div class='layout__item xs-8of12'>
            <h1 class='subhead text--white'>subhead 1</h1>
            <h2 class='subhead text--white'>subhead 2</h2>
            <h3 class='subhead text--white'>subhead 3</h3>
            <div class='layout'>
              <div class='layout__item xs-3of12'>
                <div class='copy copy--lead text--white'>copy lead</div>
              </div>
              <div class='layout__item xs-5of12'>
                <div class='copy copy--lead copy--secondary text--white'>copy lead secondary</div>
              </div>
              <div class='layout__item xs-4of12'>
                <div>
                  <a class='copy copy--lead'>link lead</a>
                </div>
              </div>
            </div>
            <div class='layout'>
              <div class='layout__item xs-3of12'>
                <div class='copy text--white'>copy default</div>
              </div>
              <div class='layout__item xs-5of12'>
                <div class='copy copy--secondary text--white'>copy default secondary</div>
              </div>
              <div class='layout__item xs-4of12'>
                <div>
                  <a class='copy'>link default</a>
                </div>
              </div>
            </div>
            <div class='layout'>
              <div class='layout__item xs-3of12'>
                <div class='copy copy--mini text--white'>copy mini</div>
              </div>
              <div class='layout__item xs-5of12'>
                <div class='copy copy--mini copy--secondary text--white'>copy mini secondary</div>
              </div>
              <div class='layout__item xs-4of12'>
                <div>
                  <a class='copy copy--mini'>link mini</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>