I'll create a comprehensive style guide site that showcases the ZBD brand design system from your CSS file. This will demonstrate the custom colors, typography, components, and styling utilities you've defined.

I've created a comprehensive ZBD Design System style guide that showcases all the features from your custom CSS file. The site includes:

Key Features:

1. Complete CSS Integration: Your entire CSS file is integrated as the global stylesheet, including all custom variables, utilities, and brand colors.
2. Color Palette Showcase: Visual display of all ZBD brand colors (purple, green, blue, yellow, pink, gray) with their hex values.
3. Typography System: Demonstrates the WhyteRegular and WhyteBold fonts across different heading levels and body text sizes.
4. Button Components: Shows both your custom .btn classes and shadcn/ui buttons styled with the ZBD theme.
5. Interactive Components: Cards, forms, badges, and other UI elements that utilize the ZBD color system and styling.
6. Utility Classes Demo: Live examples of spacing, layout, animations, and hover effects from your CSS framework.
7. Responsive Design: The layout adapts to different screen sizes using your responsive breakpoints.

ZBD Brand Integration:

• Custom Colors: All ZBD brand colors are properly integrated and demonstrated
• Typography: Uses your WhyteRegular and WhyteBold font families
• Animations: Includes your custom fade-in and hover effects
• Button Styles: Showcases your custom .btn-primary and .btn-secondary classes
• Dark Mode Support: Includes your dark mode color definitions

The site serves as both a style guide and a demonstration of how shadcn/ui components can be seamlessly integrated with your custom ZBD design system. All the utility classes, animations, and styling from your CSS file are preserved and showcased throughout the interface.