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:

Image Added

 DON'T:

Image Added

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:

Use Descriptive Text

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

If there is a situation where an icon cannot have descriptive text, collaborate with your engineering team to create a text pop-up that appears when the user hovers over the icon.

 DO:

Image Added

 DON'T:

Image Added

Use Icons For Practical Purpose

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

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

 DO:

We are Nebula Labs! Nice to meet you.

 DON'T:

We Are Nebula Labs! NICE TO MEET YOU

Highlighting

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

 DO:

This is an important text. And this is an important link.

 DON'T:

This is an important text. And this is an important link.

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

Days and months

Use abbreviations when space is limited. Be clear about which months or days you are referring to.

Use these abbreviations for the days of the week:

• Monday – Mon

• Tuesday – Tue

• Wednesday – Wed

• Thursday – Thu

• Friday – Fri

• Saturday – Sat

• Sunday – Sun

Use these abbreviations for the months:

• January – Jan

• February – Feb

• March – Mar

• April – Apr

• May – leave it as May

• June – Jun

• July – Jul

• August – Aug

• September –  Sep

• October – Oct

• November – Nov

• December – Dec

 DO:

Be consistent when using abbreviations

 DON'T:

Avoid using abbreviations for days and months such as F, M, N, etc. If space is limited for indicating the month, consider redesigning the format.

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:

Image Added

 DON'T:

Image Added

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:

Prompt: "Enter your name."

Error Message: "Your name is required to create a profile."

Help Text: "This will be the name displayed on your public profile."

 DON'T:

Prompt: "Input your moniker."

Error Message: "You missed the boat! We need your name for profile initialization."

Help Text: "This is the handle that'll pop up for all and sundry to see."

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:

Image Added

 DON'T:

Image Added