Studs Design System

Appearance

Design Guidelines ​

These guidelines ensure consistency and quality across all applications built with Studs Design System.

Spacing ​

Use our predefined spacing scale to maintain consistent layout rhythm:

  • space-1: 4px
  • space-2: 8px
  • space-3: 12px
  • space-4: 16px
  • space-6: 24px
  • space-8: 32px

Typography ​

Our type scale is designed for optimal readability:

  • Headings: Inter
  • Body: Inter
  • Code: JetBrains Mono

Color Usage ​

  • Use primary colors for main actions and focus states
  • Secondary colors for supporting elements
  • Neutral colors for text and backgrounds
  • Ensure sufficient contrast for accessibility

Accessibility ​

  • All components meet WCAG 2.1 AA standards
  • Use semantic HTML elements
  • Provide alternative text for images
  • Ensure keyboard navigation works properly