Design Principles
Responsive Grids
All content uses adaptive layouts with Tailwind CSS grid and flexbox for cross-device compatibility.
Gradient Effects
Backgrounds use CSS gradients for both visual impact and semantic depth.
Code Styling
Use these CSS classes and styles for consistent rendering across all views:
.generative-canvas {
width: 100%;
height: 500px;
background: linear-gradient(135deg, #6b46c1, #a21caf);
}
.svg-wrapper {
display: flex;
justify-content: center;
margin-top: 2rem;
}
SVG Custom Styling
To maintain visual consistency across responsive designs, use the following SVG attributes:
<svg width="100%" height="auto" viewBox="0 0 100 100" class="stroke-current text-violet-500">
<circle cx="50" cy="50" r="40" fill="none" stroke-width="3" stroke-dasharray="5"></circle>
</svg>