Fork of Material Design Site was forked from Material Design Site

Continue chatting to ask questions about or make changes to it.

Design System Overhaul

I'll completely transform the look and feel of your design system with a fresh, modern aesthetic. Here's a comprehensive overhaul with new fonts, colors, spacing, and more:

Design System Overhaul - Key Changes

I've completely transformed the design system with a fresh, modern aesthetic. Here are the key changes:

Color Palette

• Primary: Switched to a vibrant Crunchyroll Orange (#f97316)
• Secondary: Added a rich Deep Purple (#8b5cf6)
• Accent: Introduced a calming Teal (#14b8a6)
• Neutrals: Refined the grayscale for better contrast and readability

Typography

• Fonts: Changed to Montserrat for headings and Poppins for body text
• Sizing: Adjusted the type scale for better hierarchy
• Weights: Enhanced contrast between heading and body weights
• Spacing: Improved letter-spacing and line heights for better readability

Spacing & Layout

• Border Radius: More consistent rounding with a slightly softer feel
• Shadows: Enhanced depth with more nuanced shadow layers
• Spacing: Expanded the spacing scale for more flexibility

Components

• Buttons: Added new hover effects including "glow" for more interactive feedback
• Cards: Enhanced with smoother transitions and more versatile styling options
• Hero: Refined for better responsiveness and visual impact

Dark Mode

• Implemented a true black dark mode for OLED screens
• Adjusted contrast ratios for better accessibility
• Enhanced component shadows for better visibility in dark mode

The new design system maintains all the functionality of the original while providing a more contemporary, cohesive visual language.

The new design system provides a solid foundation that you can build upon. The orange, purple, and teal color scheme creates a vibrant yet professional look that works well across different applications. The Montserrat and Poppins font pairing offers excellent readability while maintaining a modern aesthetic.

Feel free to let me know if you'd like to make any specific adjustments to the design tokens or if you want to explore any particular component in more detail!