I'll create a site that follows your CSS style guide using shadcn-ui components. Let me build a demonstration page that incorporates the colors, typography, and layout from your test.css file.
I've created a comprehensive style guide demonstration site that follows your test.css specifications:
Key Features:
Color Scheme:
- Background: Light gray (
#f2f2f2) as specified - Primary blue (
#007bff) for headings and accents - Success green (
#28a745) for buttons with hover state (#218838) - Dark gray (#333) for body text
- White containers with subtle shadows
Typography:
- Maintains your 16px font size and 1.5 line height for paragraphs
- Centers main headings as specified
- Uses consistent color hierarchy
Layout:
- Container with 600px max-width, centered with white background
- 20px padding and box shadow matching your CSS
- Responsive design that works on different screen sizes
Components Used:
- Cards for content sections with consistent styling
- Buttons styled to match your green color scheme
- Form elements (Input, Textarea, Label) with proper focus states
- Typography components following your specifications
- Badges and Separators for visual organization
The site demonstrates how shadcn-ui components can be customized to perfectly match your existing CSS style guide while maintaining modern component functionality and accessibility.