🎨📚 Style Guide for Documentation Layout

📌 1. Page Structure

  • Header: Always include a clear navigation bar with links to /en/docs and /en/tutorials
  • Sidebar: Use collapsible sections for /en/docs/layout/best-practices and /en/docs/layout/typography
  • Main Content: Prioritize readability with 1.5x line height and 120% font size
  • Footer: Add a subtle copyright notice and links to /en/privacy

🧩 2. Design Principles

  • Consistency: Use the same color palette (#1a1a1a for text, #f5f5f5 for backgrounds)
  • Accessibility: Ensure contrast ratios meet WCAG 2.1 AA standards
  • Responsive: Test layouts on mobile devices using @media queries
  • Hierarchy: Use ## for subheadings and * for bullet points

🖼️ 3. Style Specifications

  • Code Blocks: Highlight syntax with language-python class
  • Images: Use documentation_layout as keyword for visual examples
    Documentation Layout
  • Links: Style with blue underline and hover effect
  • Buttons: Use primary class for CTAs like /en/docs/layout/best-practices

📚 4. Further Reading

Let me know if you'd like to explore specific sections like layout/grid-system or style/colors! 🌐