Tooltips

Tooltips should be short, simple and without any styling - just pure text. Its purpose is to provide some additional context or explanation.

Keep in mind they should be only ADDITIONAL information since tooltips are accessible on :hover which means you may not really see the tooltip content while on mobile.

Hover over the label below to see a tooltip.

All you have to do to set up this kind of a tooltip is add crayons-tooltip class name to an element as well as data-tooltip attribute which will contain the tooltip content.

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 <%= community_name %>’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.

Accent typography

Its main purpose is to add a bit of flavor to <%= community_name %> 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.

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.

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

Form elements

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.

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).

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).

Sizes

Buttons come with bunch of sizes.

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.

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.

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.

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.

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!!

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!

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.

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...").

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.

Tabs

...

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.