📍 Table of Contents
Table of Contents |
---|
🌟 Getting started
Please install these kits on your design file.
Expand | ||
---|---|---|
| ||
|
✨ General Design Principles
General ideas of UI design
Principle one | Principle two | Principle three |
---|---|---|
Establish clear hierarchies using font size, spacing, and color indication | Utilize the Gestalt Principle to effectively group similar items and sections together. | When designing, it's crucial to prioritize accessibility and conduct testing with several users to guarantee that the design is accessible. |
💫 Visual Design Guidelines
A general guide on how design should be visually designed
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.
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:
✍️ Typography Guidelines
Guide on typography (font size, font choice, etc.)
Font Size
Our UI kit has preset font sizes 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:
Line Height
Line height (leading) affects readability. A general best practice is to set the line height to 1.5 times the font size.
Example: If a font size is 16px, the line height should be 24 px.
16 px (font size) × 1.5 = 24 px (line height)Formatting
Bold: Use to emphasize 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 should not be underlined unless hovered over.
Ordered lists: Use ordered lists to group items in a pre-determined order. Should have a line height of 20px.
DO:
DON'T:
🎨 Icons & Illustrations Guidelines
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:
✏ Writing
General guide on style, spelling, and grammar.
House rules
All words will be in American English
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 time times should follow the American format MM-DD-YYY
DO: Today is 08/01/2023
DON'T: Today is 2023/08/01
👩💻 Accessibility
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:
Frame Size
Typically, we create designs for both desktop and mobile devices. However, it is recommended to also consider tablet size based on the preferences of your users' preferences and the project itself.
Size | Dimension |
---|---|
Regular Desktop (“Desktop”) | 1440 x 1024 |
Tablet (“Ipad Pro 11'“) | 834 x 1194 |
Mobile (“Iphone 13/Iphone 13 Pro”) | 390 x 844 |