By default, Ray will assign css attributes directly to HTML tags like h1–h6. If that kind of behavior is undesired, assign the $ray-assign-typography-styles-natively sass variable to false.

Headings

Ray includes typography styles for <h1> through <h6> classes, with .ray-text--h*.

The classes are not tied to the semantic html tags, so for example you could use a .ray-text--h3 on an <h1>, however this is an indicator that the information hierarchy of your page may need some reconsideration.

Headings include some margin on them. If you wish to use a heading without including the margin you can assign the class to a span, like below:

<span class="ray-text--h1">Heading 1</span><br />
<span class="ray-text--h2">Heading 2</span><br />
<span class="ray-text--h3">Heading 3</span><br />
<span class="ray-text--h4">Heading 4</span><br />
<span class="ray-text--h5">Heading 5</span><br />
<span class="ray-text--h6">Heading 6</span><br />

Displays

Native heading elements (h1-h6) are designed for general-purpose use throughout the content. However, if a more distinguished and intentional headline is needed, consider using a display headline.

<h1><span class="ray-text--display-1">Display 1</span></h1>
<h2><span class="ray-text--display-2">Display 2</span></h2>

Body Copy

<div class="ray-text--body-large">Body large</div>
<div class="ray-text--body">Body default</div>
<div class="ray-text--body-small">Body small</div>
<div class="ray-text--body-x-small">Body x-small</div>

Running Text

This utility is useful for long-form content, especially content that is dynamically generated from markdown. It will directly style h1–h6, p, blockquote, ul, and ol tags. This will generally only be needed when $ray-assign-typography-styles-natively is set to false.

<div class="ray-running-text">
  <h1>Title</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel quia magnam at
    eligendi, incidunt amet eaque distinctio veniam atque, beatae laudantium
    vitae autem molestias repellendus exercitationem in inventore accusamus
    eveniet.
  </p>

  <h2>Title 2</h2>
  <ul>
    <li>Item the <code>first</code>.</li>
    <li>Item the <strong>second</strong>.</li>
    <li>Item the <a href="#core/typography.running-text">third</a>.</li>
  </ul>

  <h2>Title 3</h2>
  <ol>
    <li>Item the <code>first</code>.</li>
    <li>Item the <strong>second</strong>.</li>
    <li>
      Item the <a href="#core/typography.running-text">third</a>.
      <ul>
        <li>Item the <code>first</code>.</li>
        <li>Item the <strong>second</strong>.</li>
        <li>Item the <a href="#core/typography.running-text">third</a>.</li>
      </ul>
    </li>
  </ol>
</div>

Utilities

<div class="ray-text--monospace">Dock 72 at the brooklyn navy yard</div>

Blockquote

Add a <footer class="ray-blockquote__footer"> to identify a source.

<blockquote class="ray-blockquote">
  What works good is better than what looks good, because what works good lasts.
  <footer class="ray-blockquote__footer">Ray Eames</footer>
</blockquote>

Lists

<ol class="ray-list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>
    Item four
    <ul>
      <li>and a one</li>
      <li>and a two</li>
      <li>and a three</li>
    </ul>
  </li>
  <li>Item five</li>
</ol>

Links

<div>
  <a href="javascript:;">this is an anchor tag</a>
</div>

<div>
  <button class="ray-link">this is a &lt;button&gt; styled as a link</button>
</div>

Font Family

Limiting font-families, a tight type scale, and content limits will keep it tight.

Apercu

The design system uses Apercu as the main typeface. It has been the typeface of choice for WeWork for the past two years and has proved to be consistent with our brand style and execution.

Font weights will be restricted to regular and bold.

Apercu Mono

A mono-space font is useful for differentiating between general body copy and specific data or section headers. We use Apercu-Mono to define the section headers and specific numerical data.

A mono-spaced font only has a single weight.

Standard Text Colors

Text colors used will be broken out by use case and tint (light, medium, dark). Restricting the colors used will help with consistency.

Dark

$ray-color-text-dark – The primary text color, this should generally be used by default for most elements and body text.

Medium

$ray-color-text-medium – A secondary text color is needed for the system in places like labels on inputs.

Light

$ray-color-text-light – A tertiary text color is need for the system to convey placeholder for example.

Full Scale

Typography Mixins

These mixins can be useful for responsively assigning typography styles.

.my-copy {
  @include ray-body;

  @include ray-breakpoint(tablet) {
    @include ray-body-large;
  }
}

All available typography mixins

@include ray-display-1;
@include ray-display-2;
@include ray-h1;
@include ray-h2;
@include ray-h3;
@include ray-h4;
@include ray-h5;
@include ray-h6;
@include ray-body;
@include ray-body-large;
@include ray-body-small;
@include ray-body-x-small;