American Psychological Association (APA)

Overview

The American Psychological Association design system embodies institutional authority and scientific precision through a clean, accessible interface rooted in the 'Institutional Clarity' aesthetic movement. The brand prioritizes legibility and trust, using a restrained color palette anchored by a bold red accent (#ce1f1b) for critical actions and a professional blue (#3860be) for secondary navigation and informational elements. The interface evokes confidence and accessibility—users should feel they are engaging with a credible, research-backed organization that values their understanding above decorative flourish.

The APA voice is authoritative yet approachable: precise without jargon, confident without condescension. The brand speaks in clear, declarative sentences grounded in evidence. Example: 'Psychological research illuminates the power and limits of our sensory processing systems.' Tone is never breathless or promotional; instead, it educates and informs. Typography is set in Whitney (or Helvetica/Arial fallback), a humanist sans-serif that balances institutional weight with warmth. The design system prioritizes accessibility: sufficient contrast ratios (WCAG AA minimum 4.5:1 for body text), generous touch targets (minimum 44px height), and semantic HTML structure.

Colors

The APA color system operates on a principle of institutional restraint with strategic accent deployment. Primary (#ce1f1b, a bold institutional red) is reserved exclusively for high-priority calls-to-action ('Join APA', 'Log In', error states) and critical interactive elements. This red commands attention without aggression, evoking urgency and importance. Secondary (#3860be, a professional blue) serves as the workhorse accent for navigation, links, and informational hierarchy—it appears frequently across the interface and establishes the brand's intellectual authority. Tertiary (#68b631, a muted green) is used sparingly for success states, positive indicators, and supplementary actions.

The surface stack is built on pure white (#ffffff) as the primary canvas, with a carefully calibrated

Typography

The APA typography system is built on Whitney (with Helvetica and Arial as fallbacks), a humanist sans-serif that conveys both institutional credibility and approachability. The type scale ranges from display (56px, 700 weight) for hero headlines down to label-sm (12px, 500 weight) for metadata and captions. Headlines use a tight line-height (64px for display, 44px for headline-lg) to create visual density and authority, with negative letter-spacing (-0.02em for display, -0.01em for headline-lg) to tighten the letterforms. Body text (16px, 400 weight, 24px line-height) is set with generous leading to ensure readability across all screen sizes and accessibility contexts. Interactive labels (14px, 600 weight) use a 0.02em letter-spacing to add subtle emphasis without appearing artificial. Al

Layout

The APA layout system uses a 12-column grid with a maximum container width of 1280px, ensuring content remains readable on large displays while maintaining focus. The gutter width is 24px, providing breathing room between columns without excessive whitespace. Semantic spacing is applied using the scale: xs (4px) for micro-interactions and icon spacing, sm (12px) for list item padding and form field spacing, md (24px) for card padding and section margins, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The homepage uses a two-column layout for featured content (image + text), with the text column occupying 6 columns and the image occupying 6 columns on desktop, stacking to full-width on mobile. Navigation occupies a fixed header with 24px vertical padd

Elevation & Depth

Elevation in the APA system is achieved through a restrained shadow vocabulary that avoids the visual noise of deep drop shadows. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle depth on interactive elements like buttons and form fields, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and secondary containers that require clear separation from the background, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and overlay surfaces that demand maximum visual hierarchy. Shadows are always soft and diffuse, never sharp or high-contrast. Interactive elements

Shapes

The APA shape philosophy embraces 'Institutional Minimalism'—rounded corners are used sparingly and purposefully, never as decoration. Buttons use a minimal border-radius of 0.25rem (4px), providing just enough softness to feel contemporary without appearing playful or casual. Cards and containers use 0.5rem (8px) for slightly more visual softness, signaling that they are secondary to the primary action. Form inputs use a full border-radius (9999px) for search fields and text inputs, creating a distinctive pill-shaped appearance that signals 'search' or 'input' without explicit labeling. Navig

Components

Action Elements Buttons are the primary mechanism for user intent and come in three variants. The primary button (background: #ce1f1b, text: white, padding: 12px 24px, height: 40px, border-radius: 4px) is used for the most important action on a page ('Join APA', 'Submit'). On hover, the background darkens to #b81815 over 150ms, providing clear feedback. The secondary button (background: white, text: #3860be, border: 1px solid #c1c1c1, padding: 15px 22px, height: 44px, border-radius: 8px) is used for supporting actions ('Log In', 'Learn More'). On hover, the background shifts to #f0f0f0 and the border color becomes #3860be. The tertiary button (background: transparent, text: #3860be, text-decoration: underline) is used for low-priority actions and links within text. All buttons use labe

Do's and Don'ts

**Do**

• Do use the primary red (#ce1f1b) exclusively for high-priority CTAs and error states—overuse dilutes its impact and confuses users about action priority.
• Do maintain a minimum 4.5:1 contrast ratio between text and background for all body copy, and 3:1 for large text (18px+) and UI components, per WCAG AA standards.
• Do apply consistent spacing using the semantic scale (xs/sm/md/lg/xl) rather than arbitrary pixel values—this ensures visual rhythm and makes responsive design predictable.
• Do use the full border-radius (9999px) exclusively for search inputs and badges to create a distinctive visual language that users learn to recognize.
• Do transition all interactive states (hover, focus, active) over 150–200ms using ease-in-out timing to provide smooth, professional feedback without feeling sluggish.

**Don't**

• Don't use the secondary blue (#3860be) or tertiary green (#68b631) for primary CTAs—these colors are reserved for navigation and secondary actions, and using them for primary actions creates visual confusion.
• Don't apply shadows deeper than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12))—the APA aesthetic is institutional and restrained, not theatrical or dramatic.
• Don't use border-radius values between 1.5rem and 9999px (e.g., 2rem, 3rem, 5rem)—this creates visual inconsistency. Use only the defined scale: 4px, 8px, 24px, or 9999px.
• Don't apply text-shadow or other decorative effects to body text except when necessary for contrast over images—the APA brand is clean and professional, not ornamental.
• Don't mix font families or use system fonts (system-ui, -apple-system) in place of Whitney—the humanist sans-serif is core to the brand identity and must be loaded consistently across all contexts.