ASCENDynamics-NFP / AscendCoopPlatform

An open-source collaboration platform for worker-owned cooperatives, nonprofits, and private organizations, built with Ionic and Firebase, to foster growth, real-time data-driven decision-making, and address basic human needs through community-based solutions.
https://ascendynamics.org/
GNU Affero General Public License v3.0
5 stars 14 forks source link

Design: Create Style Guide #170

Open mufniarz opened 9 months ago

mufniarz commented 9 months ago

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.

mufniarz commented 3 weeks 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.