Logo & Wordmark

Primary - Light Background

Use this version on white or light backgrounds.

Primary - Dark Background

Use this version on dark or brand-colored backgrounds.

Monochrome - Black

For black and white print or single-color applications.

Monochrome - White

For dark backgrounds where color is not permitted.

Audience

Inclusive Mission Statement

Chami is a messenger app similar to Discord, Zoom, or Microsoft Teams. The goal of chami is to create a simple to navigate message sending service that provides an easy way for people to message and interact with each other. Be it in a business or a casual setting. Chami aims to be a swiss army knife of messengers, an app designed for anybody and everybody, catering to whatever needs users may have!

Audience Considerations

• Messaging apps tend have have one of two problems. Either having too many settings, becoming difficult to navigate and intimidating new users. Or not enough settings, leaving more advanced users upset. Chami aims to be simple and easy to navigate upfront. and allow for more advanced settings in its own separate menu system.


• The Weary: Recently concerns over user safety in the modern age have been popping up. With demanding verification methods being more common. Chami aims for a safe and secure messaging service. Keeping your personal data safe.


• The International: messaging cross country can be expensive over text. Similarly to other apps of the same nature. Chami can message across continents with little worry for money.

Voice & Language

Plain Language Guidelines

Chami aims to have a reading level that averages out around the 8th grade. Being easy to understand is vital to creating an easy to use space such as ours.

Colors

Brand Palette

Color Usage Policy

Use of Color: Chami strives to create an easy to understand user experience. While putting a striking red on a purple backdrop could help notify a user of an issue. Utilizing an image or symbol alongside the color is essential. Helping clarity visual clarity for anybody with visual impairments.

Text Contrast Playground

[Define the minimum contrast ratio required for normal text vs. large text according to WCAG 2.1 AA, explain to users what the tool below helps them do and how they can use it]

Negative Examples

The following examples illustrate color combinations that fail WCAG AA compliance due to insufficient contrast.

Non-Text Contrast (UI Elements)

Buttons should follow the WCAG AA guidelines similarly to text. Buttons with text on them are allowed to be a little more lenient, as long as the text is following WCAG guidelines.
Ex: Chami Purple on Dark Purple is okay. As long as a color such as white is on top of the Chami Purple.

Inline Links

Links will use Link Pink in dark mode and Chami Purple in Light Mode. This ensures the 4.5:1 ratio needed for the WCAG AA Guidelines.

• Text Decoration: The primary use of text decoration is utilizing underlines for links.
• Color Contrast: Ensure link color meets 4.5:1 contrast against the background.
• Hover & Focus: Links will gain a boarder when hovered.

Typography

Typeface Selection

Primary Typeface: Satoshi

Secondary Typeface: Archivo

Readability Standards

• Line Height: Body text must have a line height of at least 1.5 to ensure readability.
• Paragraph Spacing: Spacing between paragraphs must be at least 2 times the font size.
• Alignment: All text must be right alligned for legibility. Only exception is text under icons, which can be centered under the icon.
• Capitalization: All caps text is not allowed in type, especially on headings.

Hierarchy Preview

Imagery

Multimedia Policies

• Text in Images: Text inside iamges is not allowed, only exception is brand logo.
• Video & Audio: Any video provided by the Chami brand must include accurate video captions and audio transcripts.
• Motion Control: There will be no flashing, blinking, or auto-playing content, the only exception is app/website start-up. Which will include an simplified image of the Chami bird flying.

Alt-Text Style Guide

Alt-Text: "Simplified Iamge of Chami Bird Flying above Chami type logo"

Alt-Text: "Chami Image Logo on top of Chami Text Logo"

UX & Content Design

Visual UI States

Text Links

Links must be distinguishable by more than just color. Default: Underlined.

Button States

Buttons must have a highly visible focus indicator (e.g., outline) for keyboard navigation.

Touch Targets

Interactive elements must have a target size of at least 44x44 CSS pixels to accommodate touch inputs.

Structure & Semantics

• Form Labels:
  Persistant Lables are utilized in smaller body text above the entry bar.
• Heading Structure:
  H1 - Reserved for page title.
  H2 - Used to organize sections within page.
  H3 - Used for smaller organizations such as server names or specific options within settings.

Implementation

Approved Accessibility Tools

• Tool 1: WCAG Contrast Checker
• Tool 2: Hemingwey Editor
• Tool 3: Apple Screen Reader

Pre-Flight Audit Checklist

Before publishing any digital asset for Chami, designers and content creators must verify the following:

• Ensure all text follows WCAG AA guidelines.
• Ensure all buttons relate to WCAG AA guidelines along with previously mentioned stipulations.
• Ensure links all utilize proper styling.
• Ensure colors follow brand guidelines
• Ensure all image descriptions are easily understood and legible
• Ensure all interactive elements are at least 44x44 CSS pixels
• Ensure all text is legible up to an 8th grade reading level.