Color

Our primary palette is comprised of neutrals, white, and blue.

We use blue (500) to indicate progress for primary actions, buttons, and text links.

Neutral is used primarily for body text and headings, and white/gray for page backgrounds.

Color Contrast

It’s essential to stick the colors within the UI Kit as all colors have been vetted to pass The Web Content Accessibility Guidelines (WCAG)

However, in a situation where using other colors are required, it is crucial to check and vet the contrast against the WCAG standard. Link to check here.

All colors should meet at least Level AA (contrast ratio of 4.5:1 for normal text and 3:1 for large text)

 DO:

 DON'T:

Grid System

It's essential to utilize a grid system when designing to create compelling designs.

Our UI kit offers multiple grid systems for your convenience. For optimal results, we suggest using 6 columns for mobile design and 12 columns for web design.

 DO:

 DON'T:

Spacing

To ensure consistency in design, we will utilize the 8-Point Grid System, spacing elements at intervals of 8, 16, 24, 32, and so on.

 DO:

 DON'T:

Forms and Inputs

Form fields should have associated labels, and error messages should be descriptive and helpful.

 DO:

 DON'T:

Font Size

Our UI kit has text styles that we strongly advise incorporating into your designs for consistency.

It is also recommended that you avoid using font sizes below 12pts when designing for mobile screens to maintain accessibility for all users.

 DO:

 DON'T:

Font Choice

Nebula Labs’s brand typography consisted of two fonts: Kallisto (Display) and Inter (Primary).

Kallisto can be used for impactful headlines, titles, or any elements meant to grab attention. However, for sustained readability and a clean interface, Inter should be your go-to choice.

In summary, Use Kallisto in select scenarios where impact is essential (such as Hero section on website). For all else, lean on Inter to ensure consistent, legible, and accessible content presentation across our digital platforms.

 DO:

 DON'T:

Formatting

Bold: Use to emphasize text (Should be use for heading or any important text)

Link: If you are linking only a few words of text or if the link stands alone, please avoid using it for actions and use a button instead. Links should use the Primary 500 color and not be underlined unless hovered over.

 DO:

 DON'T:

To facilitate easy navigation, it is recommended to use icons alongside descriptive text to help users move through the product in an accessible manner.

 DO:

 DON'T:

It is recommended to refrain from using icons only for decoration or aesthetics, as it takes away from their intended function elsewhere.

 DO:

 DON'T:

To help enhance usability further, ensure the icon color has at least a Web Content Accessibility Guidelines (WCAG) 2.1 AA standard color contrast ratio.

 DO:

 DON'T:

Spelling

Text and words should be written in American English format.

This standardization ensures consistency across our content, making it easier for our primary users to understand and engage with.

 DO: Color

 DON'T: Colour

Capitalization

 DO:

 DON'T:

Highlighting

Use bold to emphasize text rather than italics, which can be harder to read. Underlining should typically be reserved for links.

 DO:

 DON'T:

Abbreviation & acronyms

To ensure that all users can understand your design, it is best to avoid using abbreviations and acronyms.

However, if you must use them, it is important first to spell out the entire phrase and then include the abbreviation or acronym in parentheses for clarity.

 DO:

“This is a Call to Action button…”

“This is a CTA (Call to Action) button…”

 DON'T:

“This is a CTA button…”

Numbers & percentages

Use sentence case in all titles, headings, menu items, labels, and buttons.

 DO: Welcome to Nebula Labs

 DON'T: Welcome To NEbula Labs

Dates and times

All dates and times should follow the American format MM-DD-YYY

 DO: Today is 08/01/2023

 DON'T: Today is 2023/08/01

Color Contrast

Colors should have enough contrast to be distinguishable by users with visual impairments. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for standard text and 3:1 for large text.

 DO:

 DON'T:

Clear and Simple Language

Keep language clear and straightforward, avoiding jargon and idiomatic phrases that might confuse people who are not native speakers or people with cognitive disabilities.

 DO:

 DON'T:

Avoid Reliance on Color Alone

Information shouldn't be conveyed using color alone, as some users may be unable to distinguish specific colors. Other visual cues should also be used.

 DO:

 DON'T: