All visual elements on UNA.edu must support clarity, consistency, accessibility, and institutional identity. These standards ensure pages are easy to navigate, visually cohesive, and fully accessible. See the Graphic Standards Guide for full specifications.
Core Visual Standards
- Approved color palette with WCAG-compliant contrast ratios
- Approved typography and standardized font sizes
- Standard CTA button formats for consistent interaction patterns
- Grid-based layouts with consistent spacing
- Mobile-first design principles for responsive experiences
Spacing Framework
UNA.edu follows an 8-point spacing system to ensure visual consistency and rhythm across all digital properties. This creates predictable, harmonious layouts that scale effectively across devices.
8-Point Grid System
- Base unit: 8px (0.5rem)
- Scale: 8, 16, 24, 32, 40, 48, 56, 64px
- Micro-adjustments: 4px increments for small elements only
- Component padding: Minimum 16px internal spacing
- Section spacing: Minimum 32px between major sections
Accessibility Note: Adequate white space improves readability for all users, particularly those with cognitive disabilities or reading difficulties. Follow WCAG guidelines for spacing around interactive elements (minimum 44x44px touch targets).
Layout Patterns
Reading Flow
Design layouts to support natural reading patterns:
- Z-Pattern: For pages with minimal text content and strong visual hierarchy
- F-Pattern: For text-heavy pages and content listings
- Layer Pattern: For complex information with progressive disclosure
Responsive Design Principles
- Mobile-first approach: Design for smallest screens first
- Fluid typography: Scale text proportionally across breakpoints
- Flexible grids: Use percentage-based widths with max-width constraints
- Progressive enhancement: Add complexity for larger screens
Component Standards
Buttons and CTAs
- Primary buttons: Full brand color with high contrast
- Secondary buttons: Outlined style with brand color border
- Minimum size: 44x44px for touch accessibility
- Clear hover and focus states for keyboard navigation
Typography Hierarchy
- H1: Page title, one per page, clear topic indicator
- H2: Major sections, consistent sizing across pages
- H3: Subsections, maintains clear hierarchy
- Body text: Minimum 16px, optimal line length 45-75 characters
- Line height: 1.5 for body text, 1.2 for headings
Color and Contrast
- Text contrast: Minimum 4.5:1 for normal text (WCAG AA)
- Large text contrast: Minimum 3:1 for text 18pt+ or bold 14pt+
- Interactive elements: 3:1 contrast against adjacent colors
- Focus indicators: Visible keyboard focus with 3:1 contrast ratio
Implementation Guidelines
- Use CSS custom properties for consistent spacing values
- Implement a modular scale for typography sizing
- Apply spacing consistently through design tokens
- Test layouts at multiple breakpoints and zoom levels
- Validate color contrast with automated tools
Design System Note: All visual decisions should align with UNA's brand identity while prioritizing usability and accessibility. When conflicts arise, accessibility requirements take precedence.