Gemini 3
CSS Architecture Designer
Design scalable CSS architecture with proper naming conventions, component organization, and modern CSS features like Grid, Flexbox, and Custom Properties.
#Css#Architecture
View
GPT-4o Development
While optimized for GPT-4o, this prompt is compatible with most major AI models.
Responsive Web Design System
Build a complete responsive design system with fluid typography, flexible layouts, and mobile-first components that work across all devices.
Prompt Health: 100%
Length
Structure
Variables
Est. 2453 tokens
# Role
You are a Responsive Web Design Expert who creates mobile-first design systems with fluid typography, flexible layouts, and adaptive components.
# Task
Build a comprehensive responsive design system with fluid typography, flexible layouts, container queries, and mobile-first components.
# Instructions
**Project Requirements:**
**Design Specifications:**
- Minimum viewport: [320PX_375PX_OTHER]
- Maximum viewport: [1920PX_2560PX_UNLIMITED]
- Target devices: [MOBILE_TABLET_DESKTOP_ALL]
- Orientation support: [PORTRAIT_LANDSCAPE_BOTH]
**Content Types:**
```
[DESCRIBE_CONTENT]
Examples:
- Text-heavy articles
- Image galleries
- Data tables
- Forms
- Navigation menus
- Cards/grids
```
**Current Issues:**
- Horizontal scrolling: [YES_NO_WHERE]
- Text too small on mobile: [YES_NO]
- Touch targets too small: [YES_NO]
- Layout breaks at certain sizes: [YES_NO_SIZES]
Based on this information:
1. **Fluid Typography System:**
```css
/* Fluid typography using clamp() */
:root {
/* Base font size: 16px at 320px, 18px at 1920px */
--font-size-base: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
/* Heading scale */
--font-size-h1: clamp(2rem, 1.5rem + 2vw, 3.5rem);
--font-size-h2: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem);
--font-size-h3: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
--font-size-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.75rem);
--font-size-h5: clamp(1.125rem, 1rem + 0.25vw, 1.5rem);
/* Small text */
--font-size-sm: clamp(0.875rem, 0.8rem + 0.15vw, 1rem);
--font-size-xs: clamp(0.75rem, 0.7rem + 0.1vw, 0.875rem);
}
body {
font-size: var(--font-size-base);
}
h1 {
font-size: var(--font-size-h1);
}
h2 {
font-size: var(--font-size-h2);
}
h3 {
font-size: var(--font-size-h3);
}
```
2. **Fluid Spacing System:**
```css
:root {
/* Fluid spacing */
--space-xs: clamp(0.5rem, 0.4rem + 0.25vw, 0.75rem);
--space-sm: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
--space-md: clamp(1rem, 0.8rem + 0.75vw, 1.75rem);
--space-lg: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
--space-xl: clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
--space-2xl: clamp(3rem, 2rem + 2vw, 5rem);
}
/* Section spacing */
section {
padding-block: var(--space-xl);
}
@media (min-width: 768px) {
section {
padding-block: var(--space-2xl);
}
}
```
3. **Mobile-First Breakpoints:**
```css
/* Mobile-first approach */
.container {
width: 100%;
padding-inline: var(--space-md);
}
/* Tablet */
@media (min-width: 640px) {
.container {
max-width: 640px;
margin-inline: auto;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
/* Large desktop */
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
```
4. **Intrinsic Layouts (No Media Queries):**
```css
/* Auto-responsive grid */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: var(--space-md);
}
/* Flexible sidebar */
.sidebar-layout {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
}
.sidebar {
flex-basis: 250px;
flex-grow: 1;
}
.main-content {
flex-basis: 0;
flex-grow: 999;
min-inline-size: 50%;
}
/* Cluster layout */
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: flex-start;
align-items: center;
}
```
5. **Container Queries (Modern Approach):**
```css
.card-container {
container-type: inline-size;
container-name: card;
}
.card {
padding: var(--space-md);
}
/* When container is > 400px */
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-md);
}
}
/* When container is > 600px */
@container card (min-width: 600px) {
.card {
padding: var(--space-lg);
}
}
```
6. **Responsive Images:**
```html
<!-- Art direction with picture -->
<picture>
<source media="(min-width: 1024px)" srcset="hero-desktop.webp" type="image/webp" />
<source media="(min-width: 640px)" srcset="hero-tablet.webp" type="image/webp" />
<img
src="hero-mobile.jpg"
alt="Hero image"
loading="lazy"
decoding="async"
width="800"
height="600"
/>
</picture>
<!-- Responsive srcset -->
<img
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="
(min-width: 1024px) 1200px,
(min-width: 640px) 800px,
400px
"
src="image-800.jpg"
alt="Responsive image"
/>
```
```css
/* Aspect ratio boxes */
.aspect-ratio-16-9 {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.aspect-ratio-square {
aspect-ratio: 1;
object-fit: cover;
}
```
7. **Touch-Friendly Components:**
```css
/* Minimum touch target size: 44x44px */
button,
a,
input[type='checkbox'],
input[type='radio'] {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Larger tap targets on mobile */
@media (max-width: 640px) {
button,
a {
min-height: 48px;
padding-inline: var(--space-md);
}
}
/* Prevent text selection on buttons */
button {
user-select: none;
-webkit-tap-highlight-color: transparent;
}
```
8. **Responsive Navigation:**
```css
/* Mobile navigation */
.nav {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.nav-toggle {
display: block;
}
.nav-menu {
display: none;
position: fixed;
inset: 0;
background: white;
padding: var(--space-lg);
}
.nav-menu[data-open='true'] {
display: flex;
flex-direction: column;
}
/* Desktop navigation */
@media (min-width: 768px) {
.nav {
flex-direction: row;
align-items: center;
}
.nav-toggle {
display: none;
}
.nav-menu {
display: flex;
position: static;
flex-direction: row;
padding: 0;
}
}
```
9. **Responsive Tables:**
```css
/* Horizontal scroll on mobile */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
min-width: 600px;
width: 100%;
}
/* Card layout on mobile */
@media (max-width: 640px) {
.responsive-table thead {
display: none;
}
.responsive-table tr {
display: block;
margin-bottom: var(--space-md);
border: 1px solid #ddd;
}
.responsive-table td {
display: flex;
justify-content: space-between;
padding: var(--space-sm);
border-bottom: 1px solid #eee;
}
.responsive-table td::before {
content: attr(data-label);
font-weight: bold;
}
}
```
10. **Viewport Units with Fallbacks:**
```css
/* Full height with mobile browser chrome */
.full-height {
min-height: 100vh;
min-height: 100dvh; /* Dynamic viewport height */
}
/* Fluid width */
.fluid-width {
width: clamp(300px, 90vw, 1200px);
}
/* Responsive padding */
.section {
padding-inline: max(var(--space-md), 5vw);
}
```
11. **Orientation-Specific Styles:**
```css
/* Portrait mode */
@media (orientation: portrait) {
.hero {
aspect-ratio: 3 / 4;
}
}
/* Landscape mode */
@media (orientation: landscape) {
.hero {
aspect-ratio: 16 / 9;
}
}
/* Short viewports (landscape mobile) */
@media (max-height: 500px) {
.header {
padding-block: var(--space-sm);
}
}
```
12. **Print Styles:**
```css
@media print {
/* Hide non-essential elements */
nav,
footer,
.no-print {
display: none;
}
/* Optimize for print */
body {
font-size: 12pt;
color: black;
background: white;
}
a {
text-decoration: underline;
}
/* Show URLs */
a[href]::after {
content: ' (' attr(href) ')';
}
/* Page breaks */
h1,
h2,
h3 {
page-break-after: avoid;
}
img {
max-width: 100%;
page-break-inside: avoid;
}
}
```
13. **Performance Optimizations:**
```css
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Optimize font loading */
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
/* Critical CSS inline, defer non-critical */
<link rel="preload" href="critical.css" as="style">
<link rel="stylesheet" href="main.css" media="print" onload="this.media='all'">
```
14. **Complete Responsive System:**
Provide full responsive design system with:
- Fluid typography
- Flexible layouts
- Container queries
- Responsive images
- Touch-friendly components
- Mobile navigation
- Responsive tables
- Print styles
- Performance optimizations
Deliver a production-ready responsive design system that works flawlessly across all devices with fluid scaling, intrinsic layouts, and modern CSS features.
Private Notes
Insert Into Your AI
Edit the prompt above then feed it directly to your favorite AI model
Clicking opens the AI in a new tab. Content is also copied to clipboard for backup.
Related Prompts
Claude Sonnet 4.5
Linear-Style Dark Mode Interface
Professional Claude Sonnet 4.5 AI prompt for Linear-Style Dark Mode Interface. Generate sophisticated, subtle, and premium dark mode UIs for SaaS applications.
#Ui Design#Dark Mode
View
Claude Opus 4.5
Cross-Browser Compatibility Fixer
Professional Claude Opus 4.5 AI prompt for Cross-Browser Compatibility Fixer. Solve modern CSS layout issues across Safari, Chrome, and Firefox.
#Css#Debugging
View
Claude Opus 4.5
High Level CSS Audit
Senior-level procedural prompt for conducting exhaustive CSS audits, ensuring visual consistency and technical health across web directories.
#Css#Audit
View