loading...

Main Typography

Default font is set to 16px (fs-base). It should be standard in UI. Smaller and bigger font sizes should be used carefully with respect to good visual rythm between elements.

XS size should be used as little as possible in edge cases. Even though it’s readable we could consider it not meeting DEV’s standards. So keep it for like “asterisk copy” etc.

By default you should be using Regular font weight.

Medium should be used to emphasize something but not make it as loud as Bold.

Heavy should be used only for bigger title.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Line height: 1.5 – .lh-base (default) Line height: 1.25 – .lh-tight

This is a bit longer text title to present line-height difference.

This is a bit longer text title to present line-height difference.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.

  <!-- font sizes -->
  <p class="fs-xs">...</p> <!-- 12px -->
  <p class="fs-s">...</p> <!-- 14px -->
  <p class="fs-base">...</p> <!-- default: 16px -->
  <p class="fs-l">...</p> <!-- 18px -->
  <p class="fs-xl">...</p> <!-- 20px -->
  <p class="fs-2xl">...</p> <!-- 24px -->
  <p class="fs-3xl">...</p> <!-- 30px -->
  <p class="fs-4xl">...</p> <!-- 36px -->
  <p class="fs-5xl">...</p> <!-- 48px -->

  <!-- font weights -->
  <p class="... fw-normal">...</p> <!-- default: regular -->
  <p class="... fw-medium">...</p>
  <p class="... fw-bold">...</p>
  <p class="... fw-heavy">...</p>

  <!-- line heights -->
  <p class="... lh-base"></p> <!-- default: 1.5 -->
  <p class="... lh-tight"></p> <!-- tight: 1.25 -->

Accent typography

Its main purpose is to add a bit of flavor to DEV brand but it should never be the main font.

Please, do not overuse Accent typography.

We strongly encourage to limit number of sizes and weights to what presetned below.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

  <!-- font sizes -->
  <p class="ff-accent fs-xs">...</p> <!-- 12px -->
  <p class="ff-accent fs-s">...</p> <!-- 14px -->
  <p class="ff-accent fs-base">...</p> <!-- default: 16px -->
  <p class="ff-accent fs-l">...</p> <!-- 18px -->

  <!-- font weights -->
  <p class="... fw-normal">...</p> <!-- default: regular -->
  <p class="... fw-bold">...</p>

  <!-- line heights -->
  <p class="... lh-base"></p> <!-- default: 1.5 -->
  <p class="... lh-tight"></p> <!-- tight: 1.25 -->

Cards

Cards are basically content containers. There are two types of cards:

  • Primary (default) - main content, like whole article or feed cards.
  • Secondary - secondary content, used for example for sidebar widgets.

The visual difference between the two is basically in color: secodanry cards are a little less visible.

Hello, I am a primary card.
...And I am a secondary card.
  <div class="crayons-card">
    <div class="crayons-card__body">
      Hello, I am a primary card.
    </div>
  </div>

  <div class="crayons-card crayons-card--secondary">
    <div class="crayons-card__body">
      ...And I am a secondary card.
    </div>
  </div>

If you need headers, cards do have them as well.

Card title.

I'm a card content.

Card title.

I'm a card content.
  <div class="crayons-card crayons-card--secondary">
    <div class="crayons-card__header">
      <h3 class="crayons-card__headline">Card title.</h3>
    </div>
    <div class="crayons-card__body">...</div>
  </div>

  <div class="crayons-card crayons-card--secondary">
    <div class="crayons-card__header">
      <h3 class="crayons-card__headline">Card title.</h3>
      <div class="crayons-card__actions">
        <a href="#" class="crayons-link--branded">Action</a>
      </div>
    </div>
    <div class="crayons-card__body">...</div>
  </div>

Form elements





  <input type="text" class="crayons-textfield" placeholder="This is placeholder...">
  <input type="text" class="crayons-textfield" placeholder="This is placeholder..." value="Disabled field" disabled>
  <input type="text" class="crayons-textfield crayons-textfield--ghost" placeholder="This is placeholder for ghost textfield...">




  <textarea class="crayons-textfield" placeholder="This is placeholder..."></textarea>
  <textarea class="crayons-textfield" placeholder="This is placeholder..." disabled>Disabled textarea</textarea>
  <textarea class="crayons-textfield crayons-textfield--ghost" placeholder="This is placeholder for ghost textarea..."></textarea>


  <select class="crayons-select">
    <option>Option 1</option>
    ...
  </select>

  <select class="crayons-select" disabled>
    <option>Option 1 disbled</option>
    ...
  </select>
  <input type="checkbox" class="crayons-checkbox">
  <input type="checkbox" class="crayons-checkbox" checked>
  <input type="checkbox" class="crayons-checkbox" disabled>
  <input type="checkbox" class="crayons-checkbox" checked disabled>
  <input type="radio" name="n1" class="crayons-radio">
  <input type="radio" name="n1" class="crayons-radio" checked>
  <input type="radio" name="n2" class="crayons-radio" disabled>
  <input type="radio" name="n2" class="crayons-radio" checked disabled>

Field Component

Because of accessibility most (ideally all) fields should have label above.

Fields can also have optional description - between Label and Field itself.

Fields can also have additional optional description, for example characters count.

Another description just in case...

  <div class="crayons-field">
    <label for="t1" class="crayons-field__label">
      Textfield Label
      <p class="crayons-field__description">This is some description for a textfield lorem ipsum...</p>
    </label>
    <input type="text" id="t1" class="crayons-textfield" placeholder="This is placeholder...">
    <p class="crayons-field__description">Another description just in case...</p>
  </div>

Fields with Checkboxes & Radios

Labels for checkboxes and radios should be placed next to the form element.

Using additional description is optional.

It is possible to group checkboxes or radios into logical sections. Section may require having it’s own label (title).

  <div class="crayons-field crayons-field--checkbox">
    <input type="checkbox" id="c2" class="crayons-checkbox">
    <label for="c2" class="crayons-field__label">
      Raspberry
      <p class="crayons-field__description">This is...</p>
    </label>
  </div>
  <div class="crayons-fields">
    <div class="crayons-field crayons-field--checkbox">
      <input type="checkbox" id="c3" class="crayons-checkbox">
      <label for="c3" class="crayons-field__label">
        Avocado
        <p class="crayons-field__description">This is...</p>
      </label>
    </div>

    <div class="crayons-field crayons-field--checkbox">
      ...
    </div>

    ...
  </div>
  <div class="crayons-fields crayons-fields--horizontal">
    <div class="crayons-field crayons-field--checkbox">
      <input type="checkbox" id="c3" class="crayons-checkbox">
      <label for="c3" class="crayons-field__label">Avocado</label>
    </div>

    <div class="crayons-field crayons-field--checkbox">
      ...
    </div>

    ...
  </div>
  <div class="crayons-field crayons-field--radio">
    <input type="radio" name="name1" id="r2" class="crayons-radio">
    <label for="r2" class="crayons-field__label">
      Raspberry
      <p class="crayons-field__description">This is...</p>
    </label>
  </div>
  <div class="crayons-fields">
    <div class="crayons-field crayons-field--radio">
      <input type="radio" name="name2" id="r3" class="crayons-radio">
      <label for="r3" class="crayons-field__label">
        Avocado
        <p class="crayons-field__description">This is...</p>
      </label>
    </div>

    <div class="crayons-field crayons-field--radio">
      ...
    </div>

    ...
  </div>
  <div class="crayons-fields crayons-fields--horizontal">
    <div class="crayons-field crayons-field--radio">
      <input type="radio" name="name3" id="r6" class="crayons-radio">
      <label for="r6" class="crayons-field__label">Avocado</label>
    </div>

    <div class="crayons-field crayons-field--radio">
      ...
    </div>

    ...
  </div>

Buttons

Use Danger style only for destructive actions like removing something. Do not use it for, for example “unfollow” action.

If you have to use several buttons together, keep in mind you should always have ONE Primary button. Rest of them should be Secondary and/or Outlined and/or Text buttons.

It is ok to use ONLY Secondary or outlined button without being accompanied by Primary one.

For Stacking buttons (vertically or horizontally) please use 8px spacing unit for default size buttons (no matter if stacking horizontally or vertically).

Styles:

Style Default --icon-left --icon-right --icon --icon-rounded [disabled] --inverted
.crayons-btn
.crayons-btn--secondary
.crayons-btn--outlined
.crayons-btn--ghost
.crayons-btn--ghost-dimmed
.crayons-btn--ghost-brand
.crayons-btn--ghost-success
.crayons-btn--ghost-warning
.crayons-btn--ghost-danger
.crayons-btn--danger
  <a href="#" class="crayons-btn">Button label</a>
  <a href="#" class="... crayons-btn--secondary">Secondary Button label</a>
  <a href="#" class="... crayons-btn--outlined">Outlined Button label</a>
  <a href="#" class="... crayons-btn--ghost">Ghost Button label</a>
  <a href="#" class="... crayons-btn--ghost-brand">Ghost Brand Button label</a>
  <a href="#" class="... crayons-btn--ghost-success">Ghost Success Button label</a>
  <a href="#" class="... crayons-btn--ghost-warning">Ghost Warning Button label</a>
  <a href="#" class="... crayons-btn--ghost-danger">Ghost Danger Button label</a>
  <a href="#" class="... crayons-btn--danger">Danger Button label</a>
  <a href="#" class="... crayons-btn--icon"><svg class="crayons-icon" ...>...</svg></a>
  <a href="#" class="... crayons-btn--icon-rounded"><svg class="crayons-icon" ...>...</svg></a>
  <a href="#" class="... crayons-btn--icon-left"><svg class="crayons-icon" ...>...</svg>Button label</a>
  <a href="#" class="... crayons-btn--icon-right">Button label<svg class="crayons-icon" ...>...</svg></a>
  <a href="#" class="crayons-btn[--...] crayons-btn--inverted">Inverted style button</a>

Sizes

Buttons come with bunch of sizes.

Style --s Default --l --xl
Normal
Icon left
Icon right
Only icon
  <a href="#" class="... crayons-btn--s">Small</a>
  <a href="#" class="crayons-btn">Default size</a>
  <a href="#" class="... crayons-btn--l">Large</a>
  <a href="#" class="... crayons-btn--xl">Extra Large</a>

Buttons Group

It is possible to combine two or more buttons into a visual group.

Use your best judgment for when it should be used. If you think every time you have more than one button you should create this kind of group, then no it's wrong.

Think of it as an extension to the button itself: this component lets you visually create an actionable area for cases when you need something more than just a classic button.

  <div class="crayons-btn-group">
    <a href="#" class="crayons-btn">Action 1</a>
    ...
  </div>

Dropdowns

Dropdowns should have position relative to it’s trigger. They can be used for some 2nd level navigations, contextual configurations, etc...

Dropdowns should not be bigger than 320px (unless it's smallest breakpoint, then dropdowns become full width).

Dropdown default padding is set to 16px.

By default dropdowns are hidden with display: none; so keep that in mind if you ever use dropdowns and can't see them :D.

Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
  <div class="crayons-dropdown">
    Hey, ...
  </div>

Modals

Modals should be positioned centered in relation to entire viewport. So relation to its trigger doesn’t really matter.

Use your best judgements when choosing the right size.

Modal title

Hey, I'm a Default Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
  <div class="crayons-modal crayons-modal--s absolute">
    <div class="crayons-modal__box">
      <header class="crayons-modal__box__header">
        <h2>Modal title</h2>
        <button type="button" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
          <svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
          </svg>
        </button>
      </header>
      <div class="crayons-modal__box__body">
        Hey, Im a Default Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
      </div>
    </div>
    <div class="crayons-modal__overlay"></div>
  </div>

Notices

Use Notices to focus user on specific piece of content, for example (but not limited to):

  • alerts after form submission,
  • box with tip like “Did you know..?”
  • etc...

This should be simple message. And this is exactly what this Figma component let you do.

By default, this component has 16px padding.

This is Default Notice content.

This is Danger Notice content.

This is Warning Notice content.

This is Success Notice content.

This is Info Notice content.
  <!-- Default -->
  <div class="crayons-notice">This...</div>

  <!-- Styles: danger, warning, success, info -->
  <div class="... crayons-notice--danger">This...</div>
  <div class="... crayons-notice--warning">This...</div>
  <div class="... crayons-notice--success">This...</div>
  <div class="... crayons-notice--info">This...</div>

Indicators

Indicators are meant to be used to inform user about, for example, unread notifications. They supposed to steal user's attention and make him notice or click specific element.

We should keep in mind to never show too many indicators at the same time. Use your best judgment.

There're two types of indicators:

  • Rectangle with label (text or number)
  • Bullet - just a circle without any text on it.

And there're 3 styles to pick from:

  • Default (dimmed grey) - nothing really crucial, basic information about something.
  • Accent - something we want user to be aware of but it's also not crucial information
  • Critical (red) - something super important, don't overuse it!!
Label Outlined 1
Label Outlined 1
Label Outlined 1
  <span class="crayons-indicator">Label</span>
  <span class="crayons-indicator">1</span>
  <span class="crayons-indicator crayons-indicator--bullet"></span>

  <!-- styles: accent, critical -->
  <span class="... crayons-indicator--accent">...</span>
  <span class="... crayons-indicator--critical">...</span>

Avatars & Logos

An image representing a user is called an avatar.

An image representing a company or organization is called a logo.

To make a distinction between these two different entities we should keep them visually different. For Avatars, we gonna use circle shape. And for Logos we gonna use square shape. This will help recognize what is what in a heartbeat.

Each of these will be available in 5 different sizes (use your best judgment in picking right size):

  • Default: 24px
  • L(arge): 32px
  • XL(arge): 48px
  • 2XL(arge): 64px
  • 3XL(arge): 128px

Remember to use descriptive alt="" values!

Ben Ben Ben Ben Ben
  <span class="crayons-avatar"><img src="..." class="crayons-avatar__image" alt="..." /></span>

  <!-- sizes: l, xl, 2xl, 3xl -->
  <span class="... crayons-avatar--l">...</span>
  <span class="... crayons-avatar--xl">...</span>
  <span class="... crayons-avatar--2xl">...</span>
  <span class="... crayons-avatar--3xl">...</span>
  <span class="crayons-logo"><img src="..." class="crayons-logo__image" alt="..." /></span>

  <!-- sizes: l, xl, 2xl, 3xl -->
  <span class="... crayons-logo--l">...</span>
  <span class="... crayons-logo--xl">...</span>
  <span class="... crayons-logo--2xl">...</span>
  <span class="... crayons-logo--3xl">...</span>

Navigation: Link

Crayons comes with bunch of navigation compontents - each being a variation of .crayons-link which itself is a simple text link.

By defualt .crayons-link has similar color to contnet. But we have a variation to make it stand out if needed.

  <a href="#" class="crayons-link">Hello, I am default link.</a>
  <a href="#" class="crayons-link crayons-link--branded">Hello, I am colored link.</a>

Navigation: Link: Block

This component is extension for classic .crayons-link and it comes with more visual hover and current states.

It can be used for example for nav, where links are rather short and stacked one under another. Think of main navigation or contextual navigation in dropdowns.

It's responsive: for resolutions smaller than $breakpoint-s it has extra padding to make it easier to tap.

It can contain extras, like icon or indicator. Or actually anything else - everything will be in the same line since this component has display: flex applied by default.

These links cna also be indented for scenarios like below (see last link "More...").

  <a href="#" class="crayons-link crayons-link--current crayons-link--block"><span class="crayons-icon">🏡</span>Home</a>
  <a href="#" class="... crayons-link--block">...</a>
  <a href="#" class="... crayons-link--block">... <span class="crayons-indicator">3</span></a>
  <a href="#" class="... crayons-link--block crayons-link--block--indented">More...</a>

Navigation: Link: Contentful

This component is extension for classic .crayons-link and is meant to be used where we have to display more contnet inside.

.crayons-link--contentful can be used in sidebar widgets where we list posts or listings. It can have secondary contnet.

Contenful Links will be automatically divided by a line.

  <a href="#" class="crayons-link crayons-link--contentful">
    <div>Lorem ...</div>
    <span class="crayons-link__secondary">Category ...</span>
  </a>

Tabs

...

  <nav class="crayons-tabs">
    <a href="#" class="crayons-tabs__item">Week</a>
    <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
    <a href="#" class="crayons-tabs__item">Year</a>
    <a href="#" class="crayons-tabs__item">Infinity</a>
  </nav>

  <nav class="crayons-tabs crayons-tabs--pills">
    ...
  </nav>

  <nav class="crayons-tabs crayons-tabs--muted">
    ...
  </nav>

  <nav class="crayons-tabs crayons-tabs--pills crayons-tabs--pills">
    ...
  </nav>

  <nav class="crayons-tabs crayons-tabs--scrollable">
    ...
  </nav>

  <nav class="crayons-tabs crayons-tabs--stacked">
    ...
  </nav>

  <nav class="crayons-tabs crayons-tabs--wrapped">
    ...
  </nav>

Snackbars

Snackbars inform users of a process that an app has performed. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

A Snackbar can contain a single action. Because they disappear automatically, the action shouldn’t be “Dismiss” or “Cancel.”

A Snackbar should disappear after at least 5 secs. Countdown will be paused when user mouse over the snackbar.

Snackbars can be stacked on top of each other if there's more of them. New ones show up at the bottom of snackbar. We can display maximum 3 snackbars at a time.

Keep in mind that Snackbar default styling has display: none; applied. To show it you have to overwrite it by applying flex (and not block!) utility class.

You have just downvoted this article.

And now upvoted...

And downvoted again...

You have just downvoted this article.

  <div class="crayons-snackbar">
    <div class="crayons-snackbar__item">
      <div class="crayons-snackbar__body">
        <p>You have just downvoted this article.</p>
      </div>
      <div class="crayons-snackbar__actions">
        <button type="button" class="crayons-btn crayons-btn--ghost-success">Undo</button>
      </div>
    </div>
    <div class="crayons-snackbar__item">
      ...
    </div>
    ...
  </div>