San Rita
S
Designed bySan Rita
View on AwwwardsOne-Shot Build Prompt
# Recreate Trail Map Interface with Topographic Background
Implement this creative studio interface featuring a sophisticated navigation sidebar, large topographic map display, and content overlay system with topographic styling elements.
## Layout Structure
The design uses a **two-panel layout** with a left sidebar (approximately 25% width) and main content area (75% width). The entire interface sits on a dark topographic background with flowing contour lines.
### Left Sidebar Panel
- Dark semi-transparent background with subtle border
- Vertical navigation menu with icons and labels
- Legend section showing different trail elements (road, trail, fishing spot, viewpoint)
- Large typography section at bottom with studio description
### Main Content Area
- Large satellite/aerial map image as primary focus
- White trail path overlay with circular waypoints
- Top header with location info and time/date
- Bottom status bar with project details
- Small content card in bottom right corner
### Background
- Dark topographic pattern with flowing contour lines
- Creates depth and reinforces the outdoor/mapping theme
## Key Visual Elements
**Navigation Icons**: Simple line-style icons for map, projects, about, etc.
**Typography**: Bold, condensed font for headings; clean sans-serif for body text
**Map Overlay**: White/light colored trail paths with dot markers
**Color Palette**: Predominantly dark theme with warm earth tones from the map imagery
**Content Cards**: Clean white/light backgrounds with structured information layout
## Responsive Behavior
- Sidebar should collapse to icon-only on mobile breakpoints
- Map area becomes full-width when sidebar collapses
- Typography section may stack differently on smaller screens
**Design specification**
<design-specification>
```jsonc
{
"project": {
"name": "Trail Map Interface",
"description": "Creative studio interface with topographic map display and navigation sidebar"
},
"tokens": {
"colors": {
"primary-900": { "light": "#1a1a1a", "dark": "#0a0a0a" },
"primary-800": { "light": "#2d2d2d", "dark": "#1a1a1a" },
"primary-700": { "light": "#404040", "dark": "#2d2d2d" },
"neutral-50": { "light": "#fafafa", "dark": "#fafafa" },
"neutral-100": { "light": "#f5f5f5", "dark": "#f5f5f5" },
"neutral-400": { "light": "#a3a3a3", "dark": "#a3a3a3" },
"neutral-500": { "light": "#737373", "dark": "#737373" },
"neutral-600": { "light": "#525252", "dark": "#525252" },
"accent-500": { "light": "#10b981", "dark": "#10b981" },
"accent-600": { "light": "#059669", "dark": "#059669" },
"earth-orange": { "light": "#ea580c", "dark": "#ea580c" },
"earth-red": { "light": "#dc2626", "dark": "#dc2626" }
},
"typography": {
"families": {
"sans": "Inter, system-ui, sans-serif",
"display": "Bebas Neue, Impact, sans-serif"
},
"sizes": {
"xs": "11px",
"sm": "12px",
"base": "14px",
"lg": "16px",
"xl": "18px",
"2xl": "24px",
"3xl": "32px",
"4xl": "48px"
},
"weights": {
"normal": "400",
"medium": "500",
"semibold": "600",
"bold": "700",
"black": "900"
},
"lineHeights": {
"tight": "1.1",
"normal": "1.4",
"relaxed": "1.6"
},
"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": "8px base unit with exponential growth for larger spaces"
},
"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.5)" },
"md": { "light": "0 4px 12px rgba(0,0,0,0.1)", "dark": "0 4px 12px rgba(0,0,0,0.4)" },
"lg": { "light": "0 8px 24px rgba(0,0,0,0.1)", "dark": "0 8px 24px rgba(0,0,0,0.3)" }
}
},
"screens": [
{
"name": "TrailMapInterface",
"route": "/",
"layout": "Full viewport with topographic background, two-panel layout with sidebar and main content",
"components": [
{
"name": "TopographicBackground",
"type": "div",
"properties": {
"background": "tokens.colors.primary-900",
"backgroundImage": "Flowing topographic contour line pattern",
"position": "fixed",
"inset": "0"
}
},
{
"name": "MainContainer",
"type": "div",
"properties": {
"maxWidth": "1400px",
"margin": "tokens.spacing.xl auto",
"padding": "tokens.spacing.lg",
"background": "rgba(255,255,255,0.95)",
"borderRadius": "tokens.radii.lg",
"boxShadow": "tokens.shadows.lg"
}
},
{
"name": "Sidebar",
"type": "aside",
"properties": {
"width": "320px",
"background": "rgba(45,45,45,0.9)",
"padding": "tokens.spacing.lg",
"borderRadius": "tokens.radii.md",
"color": "tokens.colors.neutral-100"
},
"states": {
"default": {},
"collapsed": { "width": "80px" }
}
},
{
"name": "NavigationItem",
"type": "button",
"properties": {
"display": "flex",
"alignItems": "center",
"gap": "tokens.spacing.md",
"padding": "tokens.spacing.sm tokens.spacing.md",
"fontSize": "tokens.typography.sizes.sm",
"fontWeight": "tokens.typography.weights.medium",
"color": "tokens.colors.neutral-400",
"textTransform": "uppercase",
"letterSpacing": "tokens.typography.letterSpacing.wide"
},
"states": {
"hover": { "color": "tokens.colors.neutral-100" },
"active": { "color": "tokens.colors.accent-500" }
}
},
{
"name": "MapContainer",
"type": "div",
"properties": {
"flex": "1",
"position": "relative",
"borderRadius": "tokens.radii.md",
"overflow": "hidden",
"backgroundImage": "url(satellite-map-image)",
"backgroundSize": "cover",
"backgroundPosition": "center"
}
},
{
"name": "TrailOverlay",
"type": "svg",
"properties": {
"position": "absolute",
"inset": "0",
"width": "100%",
"height": "100%"
}
},
{
"name": "TrailPath",
"type": "path",
"properties": {
"stroke": "tokens.colors.neutral-50",
"strokeWidth": "3px",
"strokeDasharray": "5,5",
"fill": "none"
}
},
{
"name": "Waypoint",
"type": "circle",
"properties": {
"fill": "tokens.colors.accent-500",
"stroke": "tokens.colors.neutral-50",
"strokeWidth": "3px",
"radius": "8px"
}
},
{
"name": "HeaderInfo",
"type": "div",
"properties": {
"position": "absolute",
"top": "tokens.spacing.lg",
"right": "tokens.spacing.lg",
"background": "rgba(255,255,255,0.9)",
"padding": "tokens.spacing.sm tokens.spacing.md",
"borderRadius": "tokens.radii.sm",
"fontSize": "tokens.typography.sizes.xs",
"color": "tokens.colors.neutral-600"
}
},
{
"name": "StudioDescription",
"type": "div",
"properties": {
"marginTop": "tokens.spacing.3xl",
"fontSize": "tokens.typography.sizes.3xl",
"fontFamily": "tokens.typography.families.display",
"fontWeight": "tokens.typography.weights.black",
"lineHeight": "tokens.typography.lineHeights.tight",
"textTransform": "uppercase",
"color": "tokens.colors.neutral-100"
}
},
{
"name": "StatusBar",
"type": "div",
"properties": {
"position": "absolute",
"bottom": "tokens.spacing.lg",
"left": "tokens.spacing.lg",
"right": "tokens.spacing.lg",
"display": "flex",
"justifyContent": "space-between",
"fontSize": "tokens.typography.sizes.xs",
"color": "tokens.colors.neutral-500"
}
},
{
"name": "ContentCard",
"type": "div",
"properties": {
"position": "absolute",
"bottom": "tokens.spacing.xl",
"right": "tokens.spacing.xl",
"width": "200px",
"background": "tokens.colors.neutral-100",
"padding": "tokens.spacing.lg",
"borderRadius": "tokens.radii.md",
"boxShadow": "tokens.shadows.md"
}
}
]
}
]
}
```
</design-specification>Copy this prompt and paste it into your AI coding assistant to build this design.