Capitolium
C
Designed byCapitolium
View on AwwwardsOne-Shot Build Prompt
# Create a Classical Architecture-Inspired Hero Banner with Ornate Typography Overlay
Transform your existing project with this elegant hero banner featuring classical architectural photography overlaid with sophisticated typography treatment. The design showcases ornate ceiling details and columned archways as a backdrop for prominent title text with decorative flourishes.
## Layout Structure
Build a full-width hero section with a layered composition. The base layer features a high-quality architectural photograph showing ornate ceiling paintings, brick archways, and classical columns. Over this, implement a sophisticated typography overlay system with multiple text layers including a primary headline, subtitle, and decorative script elements.
The visual hierarchy flows from top to bottom with the main title "CAPITOLIUM" as the dominant element, followed by "CHAPITRE I" as a secondary identifier, and elegant script text at the bottom. Small decorative elements and French text ("LE CAPITOLE") appear in the upper corners for added refinement.
## Key Visual Components
The typography system requires careful attention to contrast and readability over the photographic background. Implement a semi-transparent overlay or text shadow system to ensure legibility. The main headline uses bold, classical serif letterforms with generous letter-spacing. The script text at bottom should feel hand-lettered and organic, contrasting with the structured geometry of the main titles.
The architectural photography should maintain rich colors - warm brick tones, ornate painted ceiling details in reds and golds, and natural stone columns. Ensure the image has sufficient resolution and sharpness to showcase the intricate architectural details.
## Responsive Behavior
Scale typography proportionally across breakpoints while maintaining the dramatic impact. On mobile, consider repositioning text elements to avoid covering key architectural details. The script text may need to wrap or resize significantly on smaller screens while preserving its decorative character.
## Dark/Light Mode
This design works primarily in a light context with the warm-toned architectural photography. In dark mode implementations, consider applying a subtle overlay to maintain text contrast while preserving the rich colors of the historical architecture.
**Design specification**
<design-specification>
```jsonc
{
"project": {
"name": "Classical Architecture Hero Banner",
"description": "Elegant hero section featuring ornate architectural photography with sophisticated typography overlay and decorative elements"
},
"tokens": {
"colors": {
"primary-50": { "light": "#fefce8", "dark": "#1a1a1a" },
"primary-100": { "light": "#fef3c7", "dark": "#2d2d2d" },
"primary-500": { "light": "#f59e0b", "dark": "#fbbf24" },
"primary-700": { "light": "#b45309", "dark": "#f59e0b" },
"neutral-50": { "light": "#fafaf9", "dark": "#0a0a0a" },
"neutral-100": { "light": "#f5f5f4", "dark": "#171717" },
"neutral-800": { "light": "#292524", "dark": "#d6d3d1" },
"neutral-900": { "light": "#1c1917", "dark": "#f5f5f4" },
"accent-red": { "light": "#dc2626", "dark": "#ef4444" },
"accent-gold": { "light": "#d97706", "dark": "#f59e0b" }
},
"typography": {
"families": {
"serif": "Playfair Display, Times New Roman, serif",
"script": "Dancing Script, cursive, serif",
"sans": "Inter, system-ui, sans-serif"
},
"sizes": {
"xs": "12px",
"sm": "14px",
"base": "16px",
"lg": "18px",
"xl": "20px",
"2xl": "24px",
"3xl": "30px",
"4xl": "36px",
"5xl": "48px",
"6xl": "60px",
"7xl": "72px"
},
"weights": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700", "black": "900" },
"lineHeights": { "tight": "1.1", "normal": "1.5", "relaxed": "1.75" },
"letterSpacing": {
"tighter": "-0.05em",
"tight": "-0.025em",
"normal": "0em",
"wide": "0.1em",
"wider": "0.2em",
"widest": "0.4em"
}
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"2xl": "48px",
"3xl": "64px",
"rationale": "Classical proportions with emphasis on generous whitespace and dramatic scale differences"
},
"radii": {
"sm": "4px",
"md": "8px",
"lg": "12px",
"xl": "16px"
},
"shadows": {
"text-light": { "light": "2px 2px 4px rgba(0,0,0,0.3)", "dark": "2px 2px 4px rgba(0,0,0,0.8)" },
"text-heavy": { "light": "4px 4px 8px rgba(0,0,0,0.5)", "dark": "4px 4px 8px rgba(0,0,0,0.9)" },
"overlay": { "light": "0 0 20px rgba(0,0,0,0.2)", "dark": "0 0 20px rgba(0,0,0,0.6)" }
}
},
"screens": [
{
"name": "ArchitecturalHeroBanner",
"route": "/hero",
"layout": "Full-width hero section with background image and layered typography overlay",
"components": [
{
"name": "HeroContainer",
"type": "section",
"properties": {
"width": "100vw",
"height": "70vh",
"background": "architectural photograph with ornate ceiling and columns",
"position": "relative",
"overflow": "hidden"
},
"states": {
"default": {}
}
},
{
"name": "BackgroundImage",
"type": "div",
"properties": {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"backgroundSize": "cover",
"backgroundPosition": "center",
"zIndex": "1"
},
"states": {
"default": {}
}
},
{
"name": "TextOverlay",
"type": "div",
"properties": {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"zIndex": "2",
"display": "flex",
"flexDirection": "column",
"justifyContent": "center",
"alignItems": "center"
},
"states": {
"default": {}
}
},
{
"name": "CornerText",
"type": "span",
"properties": {
"position": "absolute",
"top": "tokens.spacing.lg",
"fontSize": "tokens.typography.sizes.sm",
"fontFamily": "tokens.typography.families.sans",
"fontWeight": "tokens.typography.weights.medium",
"color": "tokens.colors.neutral-50",
"textShadow": "tokens.shadows.text-light",
"letterSpacing": "tokens.typography.letterSpacing.wide"
},
"states": {
"default": {}
}
},
{
"name": "MainTitle",
"type": "h1",
"properties": {
"fontSize": "tokens.typography.sizes.6xl",
"fontFamily": "tokens.typography.families.serif",
"fontWeight": "tokens.typography.weights.bold",
"color": "tokens.colors.neutral-50",
"textAlign": "center",
"letterSpacing": "tokens.typography.letterSpacing.widest",
"textShadow": "tokens.shadows.text-heavy",
"lineHeight": "tokens.typography.lineHeights.tight",
"marginBottom": "tokens.spacing.md"
},
"states": {
"default": {}
}
},
{
"name": "Subtitle",
"type": "p",
"properties": {
"fontSize": "tokens.typography.sizes.lg",
"fontFamily": "tokens.typography.families.sans",
"fontWeight": "tokens.typography.weights.medium",
"color": "tokens.colors.neutral-100",
"textAlign": "center",
"letterSpacing": "tokens.typography.letterSpacing.wide",
"textShadow": "tokens.shadows.text-light",
"marginBottom": "tokens.spacing.xl"
},
"states": {
"default": {}
}
},
{
"name": "ScriptText",
"type": "span",
"properties": {
"position": "absolute",
"bottom": "tokens.spacing.xl",
"fontSize": "tokens.typography.sizes.4xl",
"fontFamily": "tokens.typography.families.script",
"fontWeight": "tokens.typography.weights.normal",
"color": "tokens.colors.primary-100",
"textShadow": "tokens.shadows.text-light",
"transform": "rotate(-5deg)",
"opacity": "0.9"
},
"states": {
"default": {}
}
}
]
}
]
}
```
</design-specification>Copy this prompt and paste it into your AI coding assistant to build this design.