admin/openhuman
1
0
Fork 0
mirror of https://github.com/tinyhumansai/openhuman.git synced 2026-07-28 13:32:23 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
4b25b2cf35a933f089fa7a95b98ec28237d99c06
openhuman/docs/DESIGN_GUIDELINES.md
T
Steven EnamakelandGitHub 58969667d9 fix: add ESLint and Prettier configuration (#15) 
* ran prettier

* Refactor ESLint configuration to use ES module syntax and enhance TypeScript support

- Converted CommonJS `require` statements to ES module `import` syntax for better compatibility with modern JavaScript.
- Added new paths to ignore in ESLint configuration to exclude additional directories.
- Updated TypeScript file patterns to be more specific, improving linting accuracy.
- Adjusted React hooks rules to allow certain patterns, enhancing flexibility in component design.

These changes improve the maintainability and clarity of the ESLint configuration, aligning it with current best practices.

* Refactor ESLint configuration to use ES module syntax and enhance TypeScript support

- Converted CommonJS `require` statements to ES module `import` syntax for better compatibility with modern JavaScript.
- Added new paths to ignore in ESLint configuration to exclude additional directories.
- Updated TypeScript file patterns to be more specific, improving linting accuracy.
- Introduced new React hooks rules and adjusted existing rules for better adherence to best practices.
- Made minor adjustments to import statements across various files for consistency and clarity.

These changes improve the overall linting setup and ensure better code quality across the project.

* Refactor import statements across multiple files for consistency

- Updated import statements to use TypeScript's `type` syntax for type imports, enhancing clarity and consistency across the codebase.
- Consolidated imports from the same module into single statements, improving readability and maintainability.

These changes streamline the code structure and align with best practices for TypeScript imports.

* Refactor import statements in memory manager for improved clarity

- Updated import statements to consolidate type imports and enhance readability.
- Removed redundant imports, streamlining the code structure in the memory manager file.

These changes align with best practices for TypeScript imports and improve maintainability.

* Add Husky for pre-commit and pre-push hooks

- Introduced Husky to manage Git hooks, enhancing the development workflow.
- Added pre-commit and pre-push scripts to enforce code formatting and linting checks before commits and pushes.
- Updated package.json to include Husky as a dependency and added a prepare script for setup.

These changes improve code quality and ensure adherence to formatting and linting standards during the development process.

* Refactor import statements for improved clarity and consistency

- Updated import statements across multiple files to consolidate type imports and enhance readability.
- Adjusted the order of imports for better organization and alignment with best practices in TypeScript.

These changes streamline the code structure and improve maintainability throughout the project.

* ran formatter

* Refactor import statements and improve code formatting across multiple files

- Consolidated and reordered import statements for better clarity and consistency in `SkillsGrid.tsx`, `SkillProvider.tsx`, and `index.ts`.
- Enhanced readability by adjusting formatting and removing redundant lines.
- These changes align with best practices for TypeScript imports and improve overall maintainability of the codebase.

* Refactor and optimize code in multiple components

- Removed redundant properties from the `STATUS_DISPLAY` object in `SkillsGrid.tsx` to streamline status handling.
- Consolidated import statements in `SettingsModal.tsx` for improved organization.
- Simplified state management and error handling in `BillingPanel.tsx`, enhancing performance and readability.
- Added `REHYDRATE` import to `index.ts` for better state persistence management.

These changes improve code clarity, maintainability, and align with best practices in TypeScript development.

* Consolidate import statements in SettingsModal.tsx for improved organization

* Add Prettier and ESLint checks to typecheck workflow

- Integrated a Prettier formatting check to ensure code style consistency.
- Added an ESLint step to enforce code quality and catch potential issues.
- These enhancements improve the development workflow by automating formatting and linting checks during the typecheck process.

* Add activeSkillDescription state to ConnectionsPanel and ConnectStep

- Introduced activeSkillDescription state in both ConnectionsPanel and ConnectStep components to store and manage skill descriptions.
- Updated the SkillSetupModal to accept skillDescription as a prop, enhancing the modal's functionality and data handling.

These changes improve the user experience by providing more detailed information about skills during the connection setup process.

* Enhance pre-push hook to include TypeScript compile check

- Added a TypeScript compile check to the pre-push script, ensuring that code compiles successfully before pushing.
- Updated error handling to include compile errors alongside formatting and linting issues, providing clearer feedback to developers.

These changes improve the reliability of the codebase by preventing non-compiling code from being pushed.

* Update GitHub workflows for pull request handling and publishing logic

- Modified the package-and-publish workflow to support pull request events, ensuring proper handling of branches.
- Adjusted the SHOULD_PUBLISH environment variable to differentiate between pull requests and main branch events.
- Updated the pr-protection workflow to focus solely on the main branch, removing references to the master branch.

These changes enhance the CI/CD process by refining branch handling and improving clarity in workflow conditions.
2026-02-02 06:24:50 +05:30

7.4 KiB
Raw Blame History

Crypto Platform Design Guidelines

Design Philosophy

Our design system embodies three core principles that align with the needs of crypto professionals:

1. Calm Sophistication

  • Soft, muted color palettes that reduce visual noise
  • Generous whitespace for breathing room
  • Subtle animations that feel natural, not jarring

2. Trust Through Clarity

  • Clear information hierarchy
  • Consistent component patterns
  • Professional typography that's easy to scan

3. Functional Beauty

  • Every aesthetic choice serves a functional purpose
  • Data visualization that's both beautiful and informative
  • Interactions that feel intuitive and responsive

Color System

Primary Palette

Canvas (Backgrounds)

  • Canvas-50 (#FAFAF9): Primary background, slight warmth prevents sterility
  • Canvas-100 (#F5F5F4): Secondary surfaces, cards, elevated elements
  • Canvas-200 (#E5E5E3): Tertiary backgrounds, hover states

Ocean Blue (Primary Actions)

  • Primary-500 (#5B9BF3): Main brand color, CTAs, active states
  • Primary-600 (#4A83DD): Hover states for primary elements
  • Why: Blue conveys trust, stability, and professionalism - crucial for financial platforms

Sage Green (Success/Growth)

  • Sage-500 (#4DC46F): Positive changes, success states, gains
  • Sage-600 (#3BA858): Hover states for success elements
  • Why: A sophisticated green that feels less aggressive than typical "success" greens

Coral Red (Errors/Losses)

  • Coral-500 (#F56565): Errors, losses, critical actions
  • Why: Softer than harsh reds, maintains professionalism even in negative states

Psychology Behind Color Choices

  1. Warm Neutrals Over Cold Grays: Creates a more welcoming, less clinical environment
  2. Muted Accent Colors: Reduces cognitive load during long trading sessions
  3. High Contrast for Data: Ensures critical information is immediately visible

Typography

Font Stack

font-sans: 'Inter', -apple-system, system-ui
font-display: 'Cabinet Grotesk', 'Inter'
font-mono: 'JetBrains Mono'

Type Scale & Usage

  • Display (4.5rem): Hero sections, major announcements
  • H1 (3rem): Page titles, primary headings
  • H2 (1.875rem): Section headers
  • Body (1rem): General content, -0.01em letter-spacing for clarity
  • Small (0.875rem): Secondary information, metadata
  • Micro (0.625rem): Tiny labels, timestamps

Typography Rules

  1. Line Height: 1.5-1.6 for body text, 1.1-1.2 for headings
  2. Letter Spacing: Negative for larger sizes, neutral for body
  3. Font Weight: Use 400-600 primarily, 700 sparingly for emphasis
  4. Monospace: Always for prices, percentages, numerical data

Spacing System

Base Unit: 0.25rem (4px)

  • Micro: 4px, 8px (tight groupings)
  • Small: 12px, 16px (related elements)
  • Medium: 24px, 32px (sections)
  • Large: 48px, 64px (major sections)
  • XLarge: 96px+ (hero areas)

Spacing Psychology

  • Tight spacing (4-8px): Creates relationships between elements
  • Medium spacing (16-24px): Standard breathing room
  • Generous spacing (48px+): Creates focus and hierarchy

Component Patterns

Cards

Elevated Card

<div className="card-elevated">// Shadow creates depth, white bg provides focus</div>
  • Use for primary content containers
  • Subtle shadow creates hierarchy without borders

Interactive Card

<div className="card-interactive">// Hover state with top border animation</div>
  • Use for clickable items
  • Progressive disclosure through hover states

Glass Card

<div className="glass-surface">// Backdrop blur for overlay contexts</div>
  • Use for floating elements, overlays
  • Creates depth while maintaining context

Buttons

Hierarchy

  1. Premium Button: Primary CTAs, most important actions
  2. Glass Button: Secondary actions, less emphasis
  3. Outline Button: Tertiary actions, minimal visual weight

Button Psychology

  • Rounded corners (0.75rem): Feels approachable, modern
  • Subtle shadows: Creates tactile feeling, encourages clicks
  • Hover animations: Provides feedback, builds confidence

Forms

Input Design

<input className="input-elevated" />
  • White background: Maximum contrast for readability
  • Subtle border: Defines boundaries without heaviness
  • Focus ring: Clear feedback for keyboard navigation

Motion & Animation

Timing Functions

--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

Animation Principles

  1. Purpose: Every animation serves a functional purpose
  2. Subtlety: Movements should feel natural, not dramatic
  3. Performance: Prefer transform and opacity for 60fps
  4. Consistency: Same elements animate the same way

Common Animations

  • Fade In: Content appearing (0.5s)
  • Scale In: Modals, popups (0.3s)
  • Slide In: Panels, drawers (0.3s)
  • Shimmer: Loading states (2s loop)

Data Visualization

Market Data Display

  1. Monospace fonts for all numbers
  2. Color coding: Green (up), Red (down), Gray (neutral)
  3. Tabular alignment for easy scanning
  4. Real-time updates with subtle transitions

Chart Guidelines

  • Muted gridlines: Don't compete with data
  • High contrast for data points
  • Interactive tooltips on hover
  • Responsive scaling for all screen sizes

Accessibility

WCAG 2.1 AA Compliance

  1. Color Contrast: 4.5:1 for normal text, 3:1 for large
  2. Focus Indicators: Visible keyboard navigation
  3. Touch Targets: Minimum 44x44px
  4. Screen Readers: Semantic HTML, ARIA labels

Inclusive Design

  • Color-blind safe: Don't rely solely on color
  • Keyboard navigable: All interactions keyboard accessible
  • Reduced motion: Respect prefers-reduced-motion
  • Clear language: Avoid jargon in critical flows

Responsive Design

Breakpoints

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

Mobile-First Principles

  1. Essential information visible without scrolling
  2. Touch-friendly tap targets (min 44px)
  3. Simplified navigation for small screens
  4. Performance optimized for mobile networks

Implementation Guidelines

Component Usage

  1. Consistency: Use existing components before creating new
  2. Composition: Build complex UIs from simple components
  3. Customization: Extend through composition, not modification
  4. Documentation: Document any deviations from guidelines

Performance Considerations

  1. Lazy load non-critical components
  2. Optimize images (WebP, proper sizing)
  3. Code split by route
  4. Cache aggressively for repeat visits

Testing Checklist

  • Responsive on all breakpoints
  • Accessible via keyboard
  • Color contrast passes
  • Animations respect reduced motion
  • Forms have proper validation
  • Loading states implemented
  • Error states handled gracefully

Summary

This design system creates a premium experience that:

  • Builds trust through consistency and clarity
  • Reduces cognitive load with calm aesthetics
  • Enhances usability through thoughtful interactions
  • Scales elegantly across devices and contexts

The result is a platform that feels sophisticated yet approachable, powerful yet simple - perfect for crypto professionals who demand both functionality and aesthetic excellence.

Reference in New Issue View Git Blame Copy Permalink