---
patterns:
  - name: Typography
    items:
      - Use a modular type scale
      - Pair a distinctive display font with a refined body font
  - name: Color & Contrast
    items:
      - Use off-whites and near-blacks for softer, sophisticated feel
      - Use the latest CSS has to offer for color and gradients
  - name: Layout & Space
    items:
      - Create visual rhythm through varied spacing
      - Use asymmetry and unexpected compositions
      - Break the grid intentionally for emphasis
antipatterns:
  - name: Typography
    items:
      - Don't use overused fonts like Arial or Inter
  - name: Color & Contrast
    items:
      - Don't use gray text on colored backgrounds
      - Don't use pure gray or black. Always tint - pure black/gray never appears in nature.
  - name: Layout & Space
    items:
      - Don't wrap everything in cards
      - Don't nest cards inside cards
      - Modals are lazy. Only use modals if there's truly no better alternative
  - name: Motion
    items:
      - Don't animate layout properties (width, height, padding, margin) - use transform instead
      - Don't use bounce or elastic easing - they feel dated and tacky; use ease-out-quart/quint/expo
  - name: Interaction
    items:
      - Don't repeat the same information (redundant headers, intro restating heading, etc.)
  - name: Responsive
    items:
      - Don't hide critical functionality on mobile
---