Comprehensive guidelines for creating consistent, accessible, and effective user experiences

Core principles that guide our design decisions

CLARITY
Clear hierarchy and purposeful design choices that guide users effortlessly through their tasks.

Examples

  • Use consistent typography scales
  • Maintain clear visual hierarchy
  • Provide obvious interactive elements
CONSISTENCY
Uniform patterns and behaviors across all touchpoints create predictability and trust.

Examples

  • Use standardized spacing system
  • Apply consistent color usage
  • Maintain uniform interaction patterns
EFFICIENCY
Streamlined workflows that minimize cognitive load and maximize productivity.

Examples

  • Reduce clicks to complete tasks
  • Provide keyboard shortcuts
  • Use progressive disclosure
ACCESSIBILITY
Inclusive design that works for everyone, regardless of abilities or technology used.

Examples

  • Ensure sufficient color contrast
  • Provide alt text for docs
  • Support keyboard navigation

How we communicate with our users through language

VOICE ATTRIBUTES

PROFESSIONAL

Competent and knowledgeable, inspiring confidence in our expertise.

FRIENDLY

Approachable and warm, making complex processes feel manageable.

CLEAR

Direct and concise, avoiding jargon and unnecessary complexity.

HELPFUL

Supportive and solution-oriented, always guiding users toward success.

TONE BY SITUATION
Success MessagesCelebratory yet professional

"Great! Your profile has been successfully updated."

Error MessagesEmpathetic and solution-focused

"We couldn't save your changes. Please check your connection and try again."

OnboardingEncouraging and informative

"Welcome! Let's get you set up in just a few steps."

Standards for content creation and microcopy

WRITING RULES

Use active voice

✓ GOOD

Update your profile

✗ AVOID

Your profile should be updated

Write in sentence case

✓ GOOD

Create new post

✗ AVOID

Create New Post

Be concise

✓ GOOD

Save changes

✗ AVOID

Save all the changes you have made

Use positive language

✓ GOOD

Choose a different option

✗ AVOID

Invalid selection

CONTENT TYPES

Buttons

  • Use verbs that describe the action
  • Keep to 1-3 words when possible
  • Avoid 'Click here' or generic terms

Form Fields

  • Use clear, descriptive labels
  • Provide helpful placeholder text
  • Include validation messages that explain how to fix errors

Navigation

  • Use familiar terms
  • Keep navigation labels consistent
  • Group related items logically

Motion design guidelines for smooth, purposeful interactions

CORE PRINCIPLES

Duration

Keep animations swift but not jarring

Micro-interactions: 100-200msTransitions: 200-500msComplex animations: 500-800ms

Easing

Use natural motion curves

ease-out for entrancesease-in for exitsease-in-out for transitions

Purpose

Every animation should have a clear function

Provide feedbackGuide attentionShow relationshipsIndicate progress
ANIMATION TYPES

Hover Effects

Subtle feedback for interactive elements

Button lift, color change, shadow increase

Page Transitions

Smooth navigation between views

Slide, fade, or scale transitions

Loading States

Indicate progress and maintain engagement

Skeleton screens, progress bars, spinners

How our interfaces adapt across devices and screen sizes

BREAKPOINTS

Mobile

< 640px

Single column, touch-friendly targets, simplified navigation

Tablet

640px - 1024px

Flexible layouts, hybrid navigation, optimized for both touch and mouse

Desktop

> 1024px

Multi-column layouts, hover states, keyboard shortcuts

RESPONSIVE PATTERNS

Navigation

📱 MOBILE

Collapsible hamburger menu

📱 TABLET

Horizontal scrollable tabs

🖥️ DESKTOP

Full horizontal navigation bar

Forms

📱 MOBILE

Stacked single column

📱 TABLET

Two columns for shorter forms

🖥️ DESKTOP

Multi-column with logical grouping

Cards

📱 MOBILE

Full width stacked

📱 TABLET

2-3 columns grid

🖥️ DESKTOP

Flexible grid with consistent heights

Standard behaviors and interactions users can expect

ACTION HIERARCHY

Primary Actions

Most important actions are prominently displayed

  • Use primary button style
  • Position in expected locations
  • Make touch-friendly (44px minimum)

Secondary Actions

Supporting actions are available but not competing for attention

  • Use outline or ghost button styles
  • Position near but not competing with primary
  • Group related actions together

Destructive Actions

Potentially harmful actions require confirmation

  • Use warning colors
  • Require confirmation dialog
  • Provide undo options when possible
FEEDBACK PATTERNS

Button Press

Visual press state, subtle animation, immediate response

Form Submission

Loading state, success confirmation, error handling

Data Loading

Skeleton screens, progress indicators, timeout handling