Guidelines
Design principles and best practices for creating consistent, accessible, and beautiful user experiences with Waypoint.
Design Principles
Clarity
Every design decision should prioritize clarity and ease of understanding. Users should immediately grasp the purpose and functionality of each interface element.
Consistency
Maintain visual and behavioral consistency across all products. Use established patterns, components, and design tokens to create a cohesive experience.
Accessibility
Design for everyone. Ensure all interfaces meet WCAG 2.1 AA standards, with proper contrast ratios, keyboard navigation, and screen reader support.
Efficiency
Optimize for speed and performance. Reduce cognitive load by streamlining workflows and minimizing unnecessary steps.
Brand Assets
Our brand assets are carefully crafted to represent Cohere's identity. Use these guidelines to ensure proper usage across all applications.
Logo Usage
- Always maintain minimum clear space around the logo
- Never distort, rotate, or modify the logo proportions
- Use approved color variations only (full color, white, or black)
- Minimum size: 24px height for digital, 0.5 inches for print
Color Palette
Our color system uses OKLCH for perceptually uniform colors. Always use the defined color tokens to maintain consistency.
View Color SystemTypography
Our type system is designed for readability and hierarchy across all platforms.
View TypographyAccessibility Standards
Waypoint is committed to creating inclusive experiences that work for everyone. Follow these standards to ensure your implementations are accessible.
- Color Contrast: Maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (WCAG AA standard).
- Keyboard Navigation: All interactive elements must be accessible via keyboard with visible focus indicators.
- Screen Readers: Use semantic HTML and ARIA labels to ensure compatibility with assistive technologies.
- Focus Management: Maintain logical tab order and manage focus appropriately in dynamic content.
- Motion & Animation: Respect prefers-reduced-motion settings for users sensitive to motion.
- Alternative Text: Provide meaningful alt text for images and descriptive labels for icons.
Component Usage
Use components as intended to maintain consistency across products. Each component has specific use cases and patterns.
Do
Use components for their intended purpose and follow documented patterns
Do
Compose components together to build more complex interfaces
Do
Use design tokens instead of hardcoded values
Don't
Modify component styles directly - use provided props and variants
Don't
Create custom components when a Waypoint component exists
Spacing & Layout
Consistent spacing creates visual rhythm and helps users understand relationships between elements.
Spacing Scale
Use our 8-point spacing system for consistent layouts. Common values include 4px, 8px, 12px, 16px, 24px, 32px, 48px, and 64px.
Grid System
Use a 12-column grid for layouts with appropriate gutters and margins. Maintain consistent alignment and use grid-based positioning.
Writing Guidelines
Clear, concise writing helps users understand and navigate our products. Follow these principles for all UI text.
Voice & Tone
Professional yet approachable. Be clear, direct, and helpful. Avoid jargon unless it's industry-standard terminology your audience understands.
Button Labels
Use action verbs that clearly describe what happens when clicked. Keep labels short (1-3 words when possible).
Error Messages
Explain what went wrong and how to fix it. Be specific and helpful, never blame the user.
Related Resources
Design Principles
Core philosophy and guiding principles behind Waypoint's design decisions.
View PrinciplesWriting Guidelines
Voice, tone, and content standards for clear and consistent communication.
View Writing GuideFor Developers
Technical documentation and integration guides for implementing Waypoint.
View Developer DocsIcon Guidelines
Best practices for using icons consistently and accessibly.
Browse Icons