Patterns
A huge part of the new Cohere aesthetic. Reusable design patterns and layout systems that form the foundation of consistent, scalable user interfaces.
Grid System
Our 12-column grid system provides a flexible foundation for creating responsive layouts. Built with consistency and scalability in mind.
Column Structure
12 equal-width columns provide maximum flexibility for various layout configurations.
Common Layouts
50/50 split - Equal columns
Three equal columns
66/33 split - Main content with sidebar
Responsive Breakpoints
smmdlgxl2xlLayout Patterns
Application Shell
Fixed header with sidebar navigation and main content area. Ideal for dashboard and admin interfaces.
Content + Sidebar
Main content area with complementary sidebar. Perfect for documentation, blogs, and detail pages.
Card Grid
Responsive grid of cards for displaying collections of content. Adapts from 1 to 4 columns based on screen size.
Split Screen
Two equal-width panels for comparison or dual-focus interfaces. Common in authentication flows and settings.
Visual Patterns
Glassmorphism
Frosted glass effect with backdrop blur for modern, layered interfaces.
Elevated Cards
Subtle shadows and borders create depth and hierarchy in the interface.
Gradient Accents
Subtle gradients add visual interest and guide user attention.
Spacing Patterns
Consistent spacing creates visual rhythm and improves readability. Our 8-point spacing system ensures harmony across all interfaces.
Component Spacing
Section Spacing
Use larger spacing values (32px, 48px, 64px) to separate major sections and create clear visual breaks.
Navigation Patterns
Sidebar Navigation
Fixed sidebar with hierarchical menu structure. Supports collapsible sections and active state indication.
Top Navigation
Horizontal navigation bar with dropdowns for sub-navigation. Responsive collapse to hamburger menu on mobile.
Breadcrumbs
Display hierarchical navigation path. Helps users understand their location within the application.
Tabs
Organize related content into separate views. Use for switching between different aspects of the same context.
Form Patterns
Well-designed forms improve data collection and reduce user errors. Follow these patterns for consistent form experiences.
Single Column Layout
Stack form fields vertically in a single column. This is the most user-friendly approach for most forms.
Inline Validation
Provide real-time feedback as users complete fields. Show success states and clear error messages.
Field Grouping
Group related fields together with clear section headings. Use visual separation to distinguish groups.
Progressive Disclosure
Show only essential fields initially. Reveal additional options based on user selections to reduce cognitive load.
Best Practices
- Consistency: Use established patterns throughout your application. Users should be able to predict how interfaces will behave.
- Flexibility: Patterns should adapt to different content and screen sizes while maintaining their core structure.
- Accessibility: Ensure all patterns support keyboard navigation, screen readers, and meet WCAG standards.
- Performance: Optimize patterns for fast loading and smooth interactions, especially on mobile devices.
- Scalability: Design patterns that work with both small and large amounts of content.
- White Space: Don't be afraid of empty space. It improves readability and creates visual breathing room.