📐 Layout Principles

Layout design significantly impacts users with cognitive differences, ADHD, and autism. Clear visual hierarchy, consistent layouts, and adequate whitespace reduce cognitive load and improve navigation.

Design Guidelines

Principle	Description	Recommendation
Clear Visual Hierarchy	Establish information levels	Use headings, subheadings, and proper heading order
Consistent Layout	Reduce cognitive load	Maintain same structure across pages
Adequate Whitespace	Prevent visual crowding	Use generous padding and margins
Grid System	Improve predictability	Use consistent column structures
Content Grouping	Aid comprehension	Group related items visually
Avoid Information Overload	Reduce overwhelm	Use pagination or progressive disclosure
Responsive Design	Support all devices	Ensure readability on all screen sizes

CSS Implementation

/* Clear visual hierarchy */
.content-section {
  padding: 2rem;
  margin-bottom: 2rem;
}

.content-section h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.content-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Adequate whitespace */
.spacious-layout {
  padding: 2rem;
  gap: 1.5rem;
}

/* Content grouping cards */
.content-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

/* Consistent grid */
.content-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

Tailwind CSS Classes

<div className="p-8 space-y-6">
  <header className="space-y-2">
    <h1 className="text-3xl font-bold text-neutral-900">Page Title</h1>
    <p className="text-lg text-neutral-600">Page description or subtitle</p>
  </header>

  <main className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <div className="card bg-base-100 border border-base-300 p-6">
      <h2 className="text-xl font-semibold mb-3">Card Title</h2>
      <p className="text-neutral-600">Card content description</p>
    </div>
  </main>
</div>

React Component

interface ContentCardProps {
  title: string;
  description?: string;
  children: React.ReactNode;
}

export function ContentCard({
  title,
  description,
  children,
}: ContentCardProps) {
  return (
    <article className="card bg-base-100 border border-base-300 p-6 space-y-4">
      <header>
        <h2 className="text-xl font-semibold text-neutral-900">{title}</h2>
        {description && <p className="text-neutral-600 mt-1">{description}</p>}
      </header>
      <div className="text-neutral-700">{children}</div>
    </article>
  );
}

// Usage
<ContentCard
  title="Design Principle"
  description="A brief description of this principle"
>
  Detailed content goes here...
</ContentCard>;

Progressive Disclosure Pattern

interface ExpandableSectionProps {
  title: string;
  summary: string;
  children: React.ReactNode;
}

export function ExpandableSection({
  title,
  summary,
  children,
}: ExpandableSectionProps) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className="border border-base-300 rounded-lg">
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full p-4 flex items-center justify-between text-left"
        aria-expanded={isExpanded}
      >
        <div>
          <h3 className="font-semibold">{title}</h3>
          <p className="text-sm text-neutral-600">{summary}</p>
        </div>
        {isExpanded ? <ChevronUp /> : <ChevronDown />}
      </button>

      {isExpanded && (
        <div className="p-4 pt-0 border-t border-base-300">{children}</div>
      )}
    </div>
  );
}

Checklist

Visual hierarchy is clear with proper heading order
Layout is consistent across pages
Adequate whitespace is provided
Content is logically grouped
Information is not overwhelming
Responsive design works on all devices
Grid system is consistent