Maxima Therapy
M
Designed byMaxima Therapy
View on AwwwardsOne-Shot Build Prompt
# Build Prompt: Colorful Illustrated Website Header
Apply this vibrant illustrated website design to your existing project. Create a header section with a playful, colorful illustration featuring abstract characters and geometric shapes on a gradient background.
## Layout Structure
The design features a full-width header section with a bright blue outer background containing a rounded card with a golden-yellow gradient background. The card includes a top navigation bar and a central illustrated area with geometric characters and shapes.
## Key Components
**Navigation Bar**: White rounded navigation container with left-aligned logo and right-aligned menu items including dropdown indicators, service areas link, orange donate button, and mail icon.
**Illustration Area**: Central canvas featuring multiple geometric character illustrations including a purple figure with outstretched arms, a large blue ghost-like character, various geometric shapes (triangles, squares, circles), clouds, and decorative elements arranged in a playful composition.
**Content Card**: Red/orange rectangular card overlaid on the illustration with bold white text reading "EARLY INTERVENTION" and smaller "AGES 0-3" subtitle.
**Navigation Controls**: Left and right arrow buttons positioned at the bottom corners of the illustration area for carousel functionality.
## Visual Styling
The design uses a vibrant color palette with bright blues, oranges, purples, and yellows. Characters feature simple geometric shapes with minimal facial features (dots for eyes, simple curved lines for smiles). The overall aesthetic is flat design with bold colors and friendly, approachable illustrations.
## Responsive Behavior
The layout should maintain the card-based structure across breakpoints, with the illustration area scaling appropriately and navigation condensing into a mobile menu on smaller screens.
## Design Specification
<design-specification>
```jsonc
{
"project": {
"name": "Illustrated Header Website",
"description": "Vibrant website header with geometric character illustrations on gradient background"
},
"tokens": {
"colors": {
"primary-600": { "light": "#4338CA", "dark": "#4338CA" },
"primary-500": { "light": "#6366F1", "dark": "#6366F1" },
"secondary-500": { "light": "#F59E0B", "dark": "#F59E0B" },
"accent-500": { "light": "#EF4444", "dark": "#EF4444" },
"accent-600": { "light": "#DC2626", "dark": "#DC2626" },
"neutral-50": { "light": "#FAFAFA", "dark": "#1F2937" },
"neutral-100": { "light": "#F5F5F5", "dark": "#374151" },
"neutral-900": { "light": "#171717", "dark": "#F9FAFB" },
"gradient-yellow": { "light": "linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%)", "dark": "linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%)" },
"blue-character": { "light": "#3B82F6", "dark": "#3B82F6" },
"purple-character": { "light": "#8B5CF6", "dark": "#8B5CF6" },
"teal-accent": { "light": "#14B8A6", "dark": "#14B8A6" }
},
"typography": {
"families": { "sans": "Inter, system-ui, sans-serif" },
"sizes": { "xs": "12px", "sm": "14px", "base": "16px", "lg": "18px", "xl": "20px", "2xl": "24px", "3xl": "30px", "4xl": "36px" },
"weights": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700", "extrabold": "800" },
"lineHeights": { "tight": "1.25", "normal": "1.5", "relaxed": "1.75" },
"letterSpacing": { "tight": "-0.025em", "normal": "0em", "wide": "0.05em", "wider": "0.1em" }
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"2xl": "48px",
"3xl": "64px",
"rationale": "Standard 8px base scale with larger jumps for section spacing"
},
"radii": {
"sm": "4px",
"md": "8px",
"lg": "12px",
"xl": "16px",
"2xl": "24px",
"full": "9999px"
},
"shadows": {
"sm": { "light": "0 1px 2px rgba(0,0,0,0.05)", "dark": "0 1px 2px rgba(255,255,255,0.05)" },
"md": { "light": "0 4px 6px rgba(0,0,0,0.07)", "dark": "0 4px 6px rgba(0,0,0,0.3)" },
"lg": { "light": "0 10px 15px rgba(0,0,0,0.1)", "dark": "0 10px 15px rgba(0,0,0,0.5)" }
}
},
"screens": [
{
"name": "IllustratedHeader",
"route": "/",
"layout": "Full-width header with nested rounded card containing navigation and illustration area",
"components": [
{
"name": "OuterContainer",
"type": "section",
"properties": {
"background": "tokens.colors.primary-600",
"padding": "tokens.spacing.2xl",
"minHeight": "100vh"
}
},
{
"name": "MainCard",
"type": "div",
"properties": {
"background": "tokens.colors.gradient-yellow",
"borderRadius": "tokens.radii.2xl",
"padding": "tokens.spacing.xl",
"maxWidth": "1200px",
"margin": "0 auto"
}
},
{
"name": "NavigationBar",
"type": "nav",
"properties": {
"background": "tokens.colors.neutral-50",
"borderRadius": "tokens.radii.full",
"padding": "tokens.spacing.sm tokens.spacing.lg",
"display": "flex",
"justifyContent": "space-between",
"alignItems": "center",
"marginBottom": "tokens.spacing.2xl"
}
},
{
"name": "Logo",
"type": "div",
"properties": {
"fontSize": "tokens.typography.sizes.xl",
"fontWeight": "tokens.typography.weights.bold",
"color": "tokens.colors.primary-600"
}
},
{
"name": "NavMenu",
"type": "div",
"properties": {
"display": "flex",
"gap": "tokens.spacing.lg",
"alignItems": "center"
}
},
{
"name": "DonateButton",
"type": "button",
"properties": {
"background": "tokens.colors.accent-500",
"color": "tokens.colors.neutral-50",
"padding": "tokens.spacing.sm tokens.spacing.lg",
"borderRadius": "tokens.radii.full",
"fontWeight": "tokens.typography.weights.medium"
},
"states": {
"hover": {
"background": "tokens.colors.accent-600"
}
}
},
{
"name": "IllustrationArea",
"type": "div",
"properties": {
"position": "relative",
"height": "400px",
"overflow": "hidden"
}
},
{
"name": "GeometricCharacter",
"type": "div",
"properties": {
"background": "tokens.colors.blue-character",
"borderRadius": "tokens.radii.full",
"position": "absolute"
}
},
{
"name": "ContentCard",
"type": "div",
"properties": {
"background": "tokens.colors.accent-500",
"color": "tokens.colors.neutral-50",
"padding": "tokens.spacing.lg",
"borderRadius": "tokens.radii.md",
"position": "absolute",
"bottom": "tokens.spacing.xl",
"left": "50%",
"transform": "translateX(-50%)",
"textAlign": "center"
}
},
{
"name": "CardTitle",
"type": "h2",
"properties": {
"fontSize": "tokens.typography.sizes.2xl",
"fontWeight": "tokens.typography.weights.extrabold",
"letterSpacing": "tokens.typography.letterSpacing.wider",
"lineHeight": "tokens.typography.lineHeights.tight"
}
},
{
"name": "NavigationArrow",
"type": "button",
"properties": {
"background": "tokens.colors.neutral-50",
"width": "40px",
"height": "40px",
"borderRadius": "tokens.radii.full",
"position": "absolute",
"bottom": "tokens.spacing.lg",
"boxShadow": "tokens.shadows.md"
},
"states": {
"hover": {
"background": "tokens.colors.neutral-100"
}
}
}
]
}
]
}
```
</design-specification>Copy this prompt and paste it into your AI coding assistant to build this design.