Skip to content

Design System

This page defines the documentation visual language for Avvy docs.

Creative Direction

The guiding concept is The Precision Navigator: a high-clarity, premium editorial style that balances technical confidence with practical readability.

Principles

  • Prioritize hierarchy through spacing and typography
  • Use asymmetry and breathing room to reduce visual clutter
  • Keep long-form instructions left-aligned for scanning
  • Highlight only mission-critical actions with accent color

Color Rules

  • Deep Slate foundation for high-contrast surfaces
  • Crisp light surfaces for primary reading areas
  • Solar Orange accent for urgent status and key operator actions

Structural Rule

Do not use hard 1px section borders to divide content. Use background tone changes and whitespace instead.

Typography Rules

  • Headings: Space Grotesk
  • Body and labels: Inter
  • Labels and metadata: uppercase where useful, with slight letter spacing

Component Rules for Documentation

  • Callouts: use admonitions for warning, note, and tip content
  • Lists: separate with vertical spacing rather than divider lines
  • Buttons and links: reserve strong contrast styles for primary actions only
  • Search and utility surfaces: use soft layered backgrounds

Do and Don't

Do

  • Use clear step-by-step instructions
  • Increase spacing when a page feels dense
  • Use orange emphasis only for items requiring immediate attention

Don't

  • Do not use decorative borders as section separators
  • Do not center-align long-form instructional text
  • Do not overload pages with visual accents