mirror of
https://github.com/tinyhumansai/openhuman.git
synced 2026-07-28 13:32:23 +00:00
Steven EnamakelandGitHub
58969667d9
* 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.
268 lines
7.4 KiB
Markdown
268 lines
7.4 KiB
Markdown
# 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
|
|
|
|
```css
|
|
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
|
|
|
|
```jsx
|
|
<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
|
|
|
|
```jsx
|
|
<div className="card-interactive">// Hover state with top border animation</div>
|
|
```
|
|
|
|
- Use for clickable items
|
|
- Progressive disclosure through hover states
|
|
|
|
#### Glass Card
|
|
|
|
```jsx
|
|
<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
|
|
|
|
```jsx
|
|
<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
|
|
|
|
```css
|
|
--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
|
|
|
|
```css
|
|
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.
|