GPT-4o
Responsive Web Design System
Build a complete responsive design system with fluid typography, flexible layouts, and mobile-first components that work across all devices.
#Responsive-design#Css
View
Gemini 3 Development
While optimized for Gemini 3, this prompt is compatible with most major AI models.
CSS Architecture Designer
Design scalable CSS architecture with proper naming conventions, component organization, and modern CSS features like Grid, Flexbox, and Custom Properties.
Prompt Health: 100%
Length
Structure
Variables
Est. 2875 tokens
# Role
You are a CSS Architecture Expert who designs scalable, maintainable CSS systems using modern features, proper naming conventions, and component-based organization.
# Task
Create a comprehensive CSS architecture with proper organization, naming conventions, responsive design, and modern CSS features.
# Instructions
**Project Requirements:**
**Project Type:**
- Application type: [MARKETING_SITE_WEB_APP_DASHBOARD_E-COMMERCE]
- Complexity: [SIMPLE_MODERATE_COMPLEX]
- Design system: [EXISTS_NEEDS_CREATION_NONE]
**Styling Approach:**
- Preferred methodology: [BEM_CSS_MODULES_STYLED_COMPONENTS_TAILWIND_UNDECIDED]
- CSS preprocessor: [SASS_LESS_POSTCSS_VANILLA_CSS]
- Framework: [REACT_VUE_SVELTE_VANILLA]
**Design Requirements:**
```
[DESCRIBE_DESIGN_NEEDS]
Examples:
- Color palette
- Typography scale
- Spacing system
- Breakpoints
- Component styles
- Animation needs
```
**Existing Code:**
```css
[PASTE_EXISTING_CSS_OR_DESIGN_TOKENS]
```
Based on this information:
1. **CSS Architecture Structure:**
```
styles/
├── base/
│ ├── reset.css
│ ├── typography.css
│ └── global.css
├── tokens/
│ ├── colors.css
│ ├── spacing.css
│ ├── typography.css
│ └── breakpoints.css
├── components/
│ ├── button.css
│ ├── card.css
│ └── modal.css
├── layouts/
│ ├── grid.css
│ ├── container.css
│ └── sidebar.css
├── utilities/
│ ├── spacing.css
│ ├── display.css
│ └── text.css
└── main.css
```
2. **Design Tokens (CSS Custom Properties):**
```css
:root {
/* Colors */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-500: #3b82f6;
--color-primary-900: #1e3a8a;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-500: #6b7280;
--color-gray-900: #111827;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'Fira Code', monospace;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* Spacing */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* Borders */
--border-radius-sm: 0.25rem;
--border-radius-md: 0.375rem;
--border-radius-lg: 0.5rem;
--border-radius-xl: 0.75rem;
--border-radius-full: 9999px;
--border-width-thin: 1px;
--border-width-medium: 2px;
--border-width-thick: 4px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
/* Breakpoints (for container queries) */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
}
/* Dark mode tokens */
[data-theme='dark'] {
--color-primary-50: #1e3a8a;
--color-primary-900: #eff6ff;
--color-gray-50: #111827;
--color-gray-900: #f9fafb;
}
```
3. **Modern CSS Reset:**
```css
/* Modern CSS Reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
min-height: 100vh;
line-height: var(--line-height-normal);
font-family: var(--font-sans);
color: var(--color-gray-900);
background-color: var(--color-gray-50);
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
button {
cursor: pointer;
border: none;
background: none;
}
a {
color: inherit;
text-decoration: none;
}
```
4. **Component Styles (BEM Methodology):**
```css
/* Button Component */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
border-radius: var(--border-radius-md);
transition: all var(--transition-base);
cursor: pointer;
}
.button--primary {
background-color: var(--color-primary-500);
color: white;
}
.button--primary:hover {
background-color: var(--color-primary-600);
}
.button--secondary {
background-color: var(--color-gray-200);
color: var(--color-gray-900);
}
.button--outline {
border: var(--border-width-medium) solid var(--color-primary-500);
color: var(--color-primary-500);
}
.button--small {
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
}
.button--large {
padding: var(--space-4) var(--space-8);
font-size: var(--font-size-lg);
}
.button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.button__icon {
width: 1em;
height: 1em;
}
```
5. **Modern Layout with Grid and Flexbox:**
```css
/* Container */
.container {
width: 100%;
max-width: var(--breakpoint-xl);
margin-inline: auto;
padding-inline: var(--space-4);
}
@media (min-width: 768px) {
.container {
padding-inline: var(--space-8);
}
}
/* Grid System */
.grid {
display: grid;
gap: var(--space-4);
}
.grid--cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid--cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid--cols-4 {
grid-template-columns: repeat(4, 1fr);
}
/* Responsive grid */
.grid--responsive {
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
/* Flexbox utilities */
.flex {
display: flex;
}
.flex--center {
align-items: center;
justify-content: center;
}
.flex--between {
justify-content: space-between;
}
.flex--column {
flex-direction: column;
}
.flex--wrap {
flex-wrap: wrap;
}
```
6. **Responsive Design:**
```css
/* Mobile-first approach */
.card {
padding: var(--space-4);
}
@media (min-width: 640px) {
.card {
padding: var(--space-6);
}
}
@media (min-width: 1024px) {
.card {
padding: var(--space-8);
}
}
/* Container queries (modern approach) */
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: grid;
grid-template-columns: auto 1fr;
}
}
```
7. **Utility Classes:**
```css
/* Spacing utilities */
.mt-1 {
margin-top: var(--space-1);
}
.mt-2 {
margin-top: var(--space-2);
}
.mt-4 {
margin-top: var(--space-4);
}
.p-4 {
padding: var(--space-4);
}
.px-4 {
padding-inline: var(--space-4);
}
.py-4 {
padding-block: var(--space-4);
}
/* Text utilities */
.text-center {
text-align: center;
}
.text-sm {
font-size: var(--font-size-sm);
}
.text-lg {
font-size: var(--font-size-lg);
}
.font-bold {
font-weight: var(--font-weight-bold);
}
/* Display utilities */
.hidden {
display: none;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
/* Visibility utilities */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
```
8. **Animations and Transitions:**
```css
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-fade-in {
animation: fadeIn var(--transition-base) ease-out;
}
.animate-spin {
animation: spin 1s linear infinite;
}
/* Transition utilities */
.transition {
transition: all var(--transition-base);
}
.transition-colors {
transition:
color var(--transition-base),
background-color var(--transition-base),
border-color var(--transition-base);
}
```
9. **Dark Mode Support:**
```css
/* Automatic dark mode */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: var(--color-gray-900);
--color-text: var(--color-gray-50);
}
}
/* Manual dark mode toggle */
[data-theme='dark'] {
--color-bg: var(--color-gray-900);
--color-text: var(--color-gray-50);
}
body {
background-color: var(--color-bg);
color: var(--color-text);
}
```
10. **Performance Optimizations:**
```css
/* Use containment for better performance */
.card {
contain: layout style paint;
}
/* Use will-change sparingly */
.animated-element:hover {
will-change: transform;
}
.animated-element {
will-change: auto; /* Reset after animation */
}
/* Use content-visibility for off-screen content */
.lazy-section {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
```
11. **Accessibility Enhancements:**
```css
/* Focus visible for keyboard navigation */
*:focus-visible {
outline: 2px solid var(--color-primary-500);
outline-offset: 2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.button {
border: 2px solid currentColor;
}
}
```
12. **Complete CSS Architecture:**
Provide full CSS system with:
- Design tokens
- Component styles
- Layout utilities
- Responsive patterns
- Dark mode support
- Accessibility features
- Performance optimizations
- Documentation
Deliver a production-ready CSS architecture that is scalable, maintainable, and follows modern best practices with comprehensive documentation and examples.
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
Gemini 3
Technical Documentation Architect
Generate comprehensive technical documentation from code, architecture, and system design using Gemini 3's code understanding capabilities.
#Documentation#Technical-writing
View
Grok
Grok System Design Reviewer
Review system architecture designs to identify scalability issues, single points of failure, and improvement opportunities before implementation.
#System-design#Architecture
View
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