Open mufniarz opened 9 months ago
Hi @BrunoUrquiza, I'm assigning this item to you. I'm not 100% sure what we still need for this, this is what I'm aware of at the moment. https://github.com/ASCENDynamics-NFP/AscendCoopPlatform/wiki/Project-Style-Guide Feel free to update the wiki and provide any additional documentation if needed.
Please keep in mind that we're using this front-end framework. Ionic is a hybrid JavaScript framework that allows for both web and mobile applications to be created with it. https://ionicframework.com/docs/components
Brand Identity:
Logo: Usage rules, sizes, and positioning.
Color Palette: Primary, secondary, and tertiary colors along with their hex codes.
Typography: Specific fonts, sizes, line heights, and font weights for headings, subheadings, body text, captions, etc.
Imagery: Guidelines for photos, illustrations, and other visual content.
UI Components:
Buttons: Different states (default, hover, active, disabled) and types of buttons (primary, secondary, link, icon, etc.)
Forms: Input fields, checkboxes, radio buttons, dropdowns, date pickers, etc.
Icons: Usage, size, and placement of icons.
Cards: Design and usage of different types of cards.
Navigation: Guidelines for header, footer, sidebars, menus, and breadcrumbs.
Modals, tooltips, notifications, and alerts: Design and usage rules.
Layout:
Grid System: Defines the structure for placing elements.
Spacing: Rules for margins and padding.
Breakpoints: Specific points at which the layout adjusts for different screen sizes.
Interaction:
States: How UI elements look and behave when interacted with, such as hover, focus, active, disabled, or loading states.
Animations and Transitions: Guidelines for using motion in the interface.
Feedback: Visual cues to show the result of an action (success, error, loading, etc.)
Content Guidelines:
Tone of Voice: The brand’s personality expressed through writing.
Grammar and Spelling: Basic rules and specific terms related to the product or industry.
Copywriting: Guidelines for writing headlines, body text, CTAs, error messages, etc.
Accessibility:
Color Contrast: Ensures text is readable on different backgrounds.
Font Size: Minimum font size to ensure readability.
Keyboard Navigation: Guidelines for designing keyboard-friendly interfaces.
ARIA usage: Guidelines to ensure that elements are accessible.
Code Standards:
CSS/SCSS Naming Conventions: Guidelines for naming classes.
JavaScript/TypeScript Conventions: Rules for writing scripts.
Component Usage: Instructions for implementing UI components.
A style guide should be a living document that evolves with your product, brand, and audience needs.