gh-levnikolaevich-claude-code-skills-full-development-workflow-skills/skills/ln-114-project-docs-creator/references/templates/design_guidelines_template.md

Design Guidelines: {{PROJECT_NAME}}

Document Version: 1.0 Date: {{DATE}} Status: {{STATUS}}

---

1. Design Approach

1.1 Design Philosophy

{{DESIGN_PHILOSOPHY}}

1.2 Design Inspiration

{{DESIGN_INSPIRATION}}

---

2. Core Design Elements

2.1 Typography

Font Families: {{FONT_FAMILIES}}

Type Scale: {{TYPE_SCALE}}

Line Height: {{LINE_HEIGHT}}

---

2.2 Color System

Primary Colors: {{PRIMARY_COLORS}}

Semantic Colors: {{SEMANTIC_COLORS}}

Neutral Colors: {{NEUTRAL_COLORS}}

Color Accessibility: {{COLOR_ACCESSIBILITY}}

---

2.3 Layout System

Spacing Primitives: {{SPACING_SYSTEM}}

Container Strategy: {{CONTAINER_STRATEGY}}

Grid System: {{GRID_SYSTEM}}

---

2.4 Component Library

2.4.1 Navigation

{{NAVIGATION_COMPONENTS}}

2.4.2 Buttons

{{BUTTON_COMPONENTS}}

2.4.3 Forms

{{FORM_COMPONENTS}}

2.4.4 Cards

{{CARD_COMPONENTS}}

2.4.5 Modals & Dialogs

{{MODAL_COMPONENTS}}

2.4.6 Tables

{{TABLE_COMPONENTS}}

---

2.5 Responsive Behavior

Breakpoints: {{BREAKPOINTS}}

Layout Adaptations: {{RESPONSIVE_LAYOUTS}}

---

3. Accessibility Guidelines

3.1 WCAG Compliance

{{WCAG_LEVEL}}

3.2 Keyboard Navigation

{{KEYBOARD_NAVIGATION}}

3.3 Screen Reader Support

{{SCREEN_READER}}

3.4 Focus Management

{{FOCUS_MANAGEMENT}}

---

4. Branding & Visual Identity

4.1 Logo Usage

{{LOGO_USAGE}}

4.2 Imagery Guidelines

{{IMAGERY_GUIDELINES}}

4.3 Iconography

{{ICONOGRAPHY}}

---

5. Page Layout Patterns

5.1 {{PAGE_TYPE_1}}

{{PAGE_LAYOUT_1}}

5.2 {{PAGE_TYPE_2}}

{{PAGE_LAYOUT_2}}

5.3 {{PAGE_TYPE_3}}

{{PAGE_LAYOUT_3}}

---

6. Internationalization (if applicable)

{{I18N_GUIDELINES}}

---

7. Maintenance

Last Updated: {{DATE}}

Update Triggers:

• New component added to design system
• Brand refresh or logo change
• Accessibility audit findings
• Design system library update (Material UI, Ant Design, etc.)
• Responsive breakpoint changes
• Color palette modifications

Verification:

• All components documented with examples
• Color contrast ratios WCAG AA compliant (4.5:1 text, 3:1 UI)
• Typography scale consistent across platform
• Accessibility guidelines up to date
• Responsive behaviors tested on all breakpoints
• Logo usage rules followed

---

Version: 1.0.0 Template Last Updated: 2025-11-16