Studio X
S
Designed byStudio X
View on AwwwardsOne-Shot Build Prompt
# Interior Design Hero Section Build Prompt
Implement this sophisticated interior design hero section that combines elegant typography with a warm, architectural aesthetic. The design features a large hero image with overlaid text and minimal navigation elements.
## Layout Structure
Create a full-viewport hero section with a prominent background image showcasing modern interior design elements (marble surfaces, hexagonal tiles, wood accents). The layout uses a centered content approach with typography as the primary focal point and subtle navigation elements positioned at the bottom.
## Key Components
**Hero Background**: Full-screen background image with a subtle dark overlay to ensure text readability. The image should showcase high-end interior design materials and textures.
**Typography Hierarchy**: Large, elegant serif headline text positioned center-left of the viewport. Use sophisticated typography with specific styling for emphasized words like "retail", "workplace", and "food & beverage" which should appear italicized.
**Navigation Bar**: Minimalist bottom navigation with a hamburger menu icon (white X symbol) on the left, centered "Menu" text, and an orange/red "Contact" button on the right. The navigation should have a subtle semi-transparent background.
**Content Overlay**: Dark semi-transparent overlay behind text content to ensure readability while maintaining the background image's visual impact.
## Visual Styling
Use a warm color palette with rich browns, creams, and accent orange. Typography should be elegant and readable with generous line spacing. The overall aesthetic should convey luxury and sophistication through material textures and refined typography choices.
## Responsive Behavior
On mobile devices, adjust typography sizes and ensure the navigation bar remains functional. The background image should maintain its focal point across all screen sizes while the text content adapts fluidly.
## Design Implementation
The design uses a classic full-screen hero pattern with sophisticated material photography as the foundation, elegant typography for content hierarchy, and minimal UI elements that don't compete with the visual story.
<design-specification>
```jsonc
{
"project": {
"name": "Interior Design Hero Section",
"description": "Sophisticated full-screen hero section with architectural background imagery and elegant typography overlay"
},
"tokens": {
"colors": {
"primary-500": { "light": "#8B4513", "dark": "#D2691E" },
"secondary-500": { "light": "#F5F5DC", "dark": "#2F2F2F" },
"accent-500": { "light": "#FF6B35", "dark": "#FF8C42" },
"neutral-50": { "light": "#FAFAFA", "dark": "#1A1A1A" },
"neutral-100": { "light": "#F5F5F5", "dark": "#262626" },
"neutral-900": { "light": "#171717", "dark": "#FAFAFA" },
"overlay-dark": { "light": "rgba(0,0,0,0.4)", "dark": "rgba(0,0,0,0.6)" },
"overlay-nav": { "light": "rgba(0,0,0,0.2)", "dark": "rgba(255,255,255,0.1)" }
},
"typography": {
"families": {
"serif": "Playfair Display, Georgia, serif",
"sans": "Inter, system-ui, sans-serif"
},
"sizes": {
"sm": "14px",
"base": "16px",
"lg": "18px",
"xl": "20px",
"2xl": "24px",
"3xl": "32px",
"4xl": "40px",
"5xl": "48px",
"6xl": "56px"
},
"weights": {
"normal": "400",
"medium": "500",
"semibold": "600",
"bold": "700"
},
"lineHeights": {
"tight": "1.1",
"normal": "1.5",
"relaxed": "1.6"
},
"letterSpacing": {
"tight": "-0.025em",
"normal": "0em",
"wide": "0.05em"
}
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"2xl": "48px",
"3xl": "64px",
"rationale": "Generous spacing scale for sophisticated, breathable layouts with emphasis on whitespace"
},
"radii": {
"sm": "4px",
"md": "8px",
"lg": "12px",
"xl": "16px",
"full": "9999px"
},
"shadows": {
"sm": {
"light": "0 1px 3px rgba(0,0,0,0.1)",
"dark": "0 1px 3px rgba(0,0,0,0.4)"
},
"md": {
"light": "0 4px 8px rgba(0,0,0,0.1)",
"dark": "0 4px 8px rgba(0,0,0,0.3)"
}
}
},
"screens": [
{
"name": "InteriorDesignHero",
"route": "/",
"layout": "Full-viewport hero section with background image, centered content overlay, and bottom navigation",
"components": [
{
"name": "HeroContainer",
"type": "section",
"properties": {
"height": "100vh",
"position": "relative",
"backgroundImage": "url('interior-design-hero.jpg')",
"backgroundSize": "cover",
"backgroundPosition": "center",
"display": "flex",
"flexDirection": "column",
"justifyContent": "center",
"alignItems": "flex-start"
}
},
{
"name": "BackgroundOverlay",
"type": "div",
"properties": {
"position": "absolute",
"top": "0",
"left": "0",
"right": "0",
"bottom": "0",
"background": "tokens.colors.overlay-dark",
"zIndex": "1"
}
},
{
"name": "HeroContent",
"type": "div",
"properties": {
"position": "relative",
"zIndex": "2",
"maxWidth": "800px",
"paddingLeft": "tokens.spacing.3xl",
"paddingRight": "tokens.spacing.xl"
}
},
{
"name": "HeroHeadline",
"type": "h1",
"properties": {
"fontSize": "tokens.typography.sizes.6xl",
"fontFamily": "tokens.typography.families.serif",
"fontWeight": "tokens.typography.weights.normal",
"lineHeight": "tokens.typography.lineHeights.tight",
"color": "tokens.colors.neutral-50",
"marginBottom": "tokens.spacing.lg"
}
},
{
"name": "ItalicEmphasis",
"type": "em",
"properties": {
"fontStyle": "italic",
"textDecoration": "underline",
"textDecorationThickness": "1px",
"textUnderlineOffset": "4px"
}
},
{
"name": "NavigationBar",
"type": "nav",
"properties": {
"position": "absolute",
"bottom": "tokens.spacing.xl",
"left": "50%",
"transform": "translateX(-50%)",
"display": "flex",
"alignItems": "center",
"gap": "tokens.spacing.xl",
"padding": "tokens.spacing.md tokens.spacing.lg",
"background": "tokens.colors.overlay-nav",
"borderRadius": "tokens.radii.full",
"backdropFilter": "blur(10px)",
"zIndex": "3"
}
},
{
"name": "MenuIcon",
"type": "div",
"properties": {
"width": "24px",
"height": "24px",
"color": "tokens.colors.neutral-50",
"display": "flex",
"alignItems": "center",
"justifyContent": "center",
"cursor": "pointer"
}
},
{
"name": "MenuText",
"type": "span",
"properties": {
"fontSize": "tokens.typography.sizes.base",
"fontFamily": "tokens.typography.families.sans",
"color": "tokens.colors.neutral-50",
"fontWeight": "tokens.typography.weights.medium"
}
},
{
"name": "ContactButton",
"type": "button",
"properties": {
"padding": "tokens.spacing.sm tokens.spacing.lg",
"background": "tokens.colors.accent-500",
"color": "tokens.colors.neutral-50",
"border": "none",
"borderRadius": "tokens.radii.full",
"fontSize": "tokens.typography.sizes.base",
"fontFamily": "tokens.typography.families.sans",
"fontWeight": "tokens.typography.weights.medium",
"cursor": "pointer"
},
"states": {
"hover": {
"background": "tokens.colors.accent-600",
"transform": "scale(1.05)"
}
}
}
]
}
]
}
```
</design-specification>Copy this prompt and paste it into your AI coding assistant to build this design.