# Activity: Define Information Architecture

**Activity ID**: 37
**Order**: 3
**Phase**: Inception
**Dependencies**: None

## Description

Define Information Architecture

## Guidance

# Define Information Architecture

## Objective

Establish the design system foundation, layout patterns, and component standards.

## Artifacts Created

- `docs/ux/IA_guidelines.md` - Information architecture and design system

## Process

### 1. Define Information Architecture

- Document design system foundation (Bootstrap 5.3+ base)
- Define design tokens (colors, spacing, typography, shadows, borders)
- Establish layout patterns (2-column, 3-column, grid, forms)
- Define navigation structure (top navbar, breadcrumbs, tabs)
- Document component patterns (cards, buttons, forms, modals)
- Specify accessibility requirements
- Define icon system (Font Awesome Pro)

**Philosophy**: Leverage Bootstrap's conventions, utilities, and component patterns as the first choice. Customize only when necessary for brand identity or specific user experience requirements.

### Key Sections to Document

#### 1. Design Tokens
- Color palette (primary, secondary, custom colors)
- Spacing scale (Bootstrap multipliers)
- Typography (font stacks, sizes, weights)
- Shadows and borders

#### 2. Layout Patterns
- Dashboard grids
- Form layouts
- List/table views
- Detail pages

#### 3. Navigation Design
- Top navigation structure
- Breadcrumbs
- Tab navigation
- Active states and ARIA attributes

#### 4. Component Patterns
- Cards
- Buttons (with Font Awesome icons and tooltips)
- Forms and inputs
- Modals and dialogs
- Tables
- Empty states

## How to Execute This Step

### 1. Plan Before Executing
- Identify all design system components needed
- Reference existing Bootstrap documentation
- Note Mimir-specific customizations
- Show plan and get approval

### 2. Work Incrementally
- Document one section at a time
- After every section: write → review → refine
- Build incrementally: tokens → layouts → navigation → components

## Deliverables

- ✅ IA guidelines with design system specifications
- ✅ **Screen ID convention documented**: Format, CRUDLF operations, examples
- ✅ Navigation structure defined
- ✅ Layout patterns documented
- ✅ Component patterns with accessibility requirements
- ✅ Icon system (Font Awesome Pro) documented
- ✅ Bootstrap customization approach clear

## Agent

None

## Skill

None

## Rules

- **Diagrams Element By Element** (`do-diagrams-element-by-element`)
- **Look Via Human Eye** (`do-look-via-human-eye`)
- **View Drawio Diagrams** (`do-view-drawio-diagrams`)

## Artifacts Produced

- **IA Guidelines** (Document) - Required
- **IA Guidelines Template** (Template) - Required

## Artifacts Consumed

None

## Notes

No additional notes.
