Style Guide

Style Guide

This page outlines the principles and standards for UI/UX design and code style within the StateForce project.

UI/UX Principles

• Consistency in layout and interactions.
• Accessibility best practices.
• Responsive design for multiple device sizes.

Color Palette

• Primary colors and their usage.
• Secondary/supporting colors.
• Accessibility considerations (contrast ratios, etc.).

Typography

• Fonts used (families, sizes, weights).
• Usage guidelines for headers, body text, etc.

Components

• List of reusable UI components (buttons, forms, modals, etc.).
• Example usage and appearance for each component.

Icons and Imagery

• Icon library used (if any).
• Guidelines for using images, illustrations, and icons.

Code Style

Frontend

• Structure of CSS/SCSS or Tailwind utility classes.
• Naming conventions for classes and IDs.

Backend

• Ruby/Rails style conventions.
• Naming and organization of files, modules, and classes.

JavaScript

• ES6+ standards.
• Naming conventions and structure for Stimulus controllers.

Linting and Formatting

• Tools used (Rubocop, ESLint, Prettier, etc.).
• How to run linters and fix issues.

Accessibility Guidelines

• ARIA attributes and semantic HTML.
• Keyboard navigation support.

Examples

• Screenshots or code snippets demonstrating best practices.

References

• Links to external design systems, style guides, or documentation for further reading.