Vast

Apply this futuristic space station interface design to your existing project, creating a hero landing page with a sophisticated dark theme and architectural navigation.

The design features a full-viewport hero section with a dramatic diagonal composition. The layout uses a top navigation bar with centered branding and distributed menu items, overlaying a large background image that shows a sleek space station module from an aerial perspective. The main content area uses a strong typographic hierarchy with a multi-line headline positioned in the lower left, accompanied by a subtle video play button.

## Layout Structure

Create a full-height viewport container with the navigation positioned absolutely at the top. The background should feature a large hero image with subtle dark overlays to ensure text readability. The main headline uses a bold, modern sans-serif typeface with generous line spacing, creating strong visual impact against the architectural background.

## Key Components

**Navigation Bar:** Semi-transparent dark header with the brand logo on the left, centered navigation links, and a call-to-action button on the right. Use subtle hover effects and ensure the navigation remains readable over the background image.

**Hero Content:** Position the main headline in the lower third of the viewport using a large, bold typography scale. Include a secondary action element (video play button) below the headline with appropriate spacing.

**Background Treatment:** Implement the space station image as a background with subtle gradients or overlays to create the appropriate contrast for text elements.

## Responsive Behavior

On mobile devices, collapse the navigation to a hamburger menu and stack the headline text with adjusted sizing. Ensure the background image remains impactful across all breakpoints while maintaining text readability.

## Dark Theme Implementation

This design is inherently dark-themed with deep grays and blacks dominating the color palette. Ensure proper contrast ratios for accessibility while maintaining the sophisticated, high-tech aesthetic.

**Design specification**
<design-specification>
```jsonc
{
  "project": {
    "name": "Space Station Interface",
    "description": "Futuristic landing page with architectural hero section and sophisticated navigation"
  },
  "tokens": {
    "colors": {
      "primary-500": { "light": "#ffffff", "dark": "#ffffff" },
      "neutral-900": { "light": "#0a0a0a", "dark": "#0a0a0a" },
      "neutral-800": { "light": "#1a1a1a", "dark": "#1a1a1a" },
      "neutral-700": { "light": "#2a2a2a", "dark": "#2a2a2a" },
      "neutral-600": { "light": "#404040", "dark": "#404040" },
      "neutral-400": { "light": "#a0a0a0", "dark": "#a0a0a0" },
      "accent-500": { "light": "#60a5fa", "dark": "#60a5fa" },
      "overlay-dark": { "light": "rgba(0,0,0,0.6)", "dark": "rgba(0,0,0,0.6)" },
      "overlay-subtle": { "light": "rgba(0,0,0,0.2)", "dark": "rgba(0,0,0,0.2)" }
    },
    "typography": {
      "families": { "sans": "Inter, system-ui, sans-serif" },
      "sizes": { 
        "sm": "14px", 
        "base": "16px", 
        "lg": "18px", 
        "xl": "20px", 
        "2xl": "24px", 
        "3xl": "30px", 
        "4xl": "36px",
        "5xl": "48px",
        "6xl": "60px"
      },
      "weights": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700" },
      "lineHeights": { "tight": "1.1", "normal": "1.5", "relaxed": "1.75" },
      "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": "Consistent 8px base scale with larger increments for hero spacing"
    },
    "radii": {
      "sm": "4px",
      "md": "8px", 
      "lg": "12px"
    },
    "shadows": {
      "subtle": { "light": "0 1px 3px rgba(0,0,0,0.1)", "dark": "0 1px 3px rgba(0,0,0,0.5)" },
      "medium": { "light": "0 4px 6px rgba(0,0,0,0.1)", "dark": "0 4px 6px rgba(0,0,0,0.3)" }
    }
  },
  "screens": [
    {
      "name": "HeroLanding",
      "route": "/",
      "layout": "Full viewport height with absolute positioned navigation and hero content in lower third",
      "components": [
        {
          "name": "NavigationBar",
          "type": "header",
          "properties": {
            "background": "tokens.colors.overlay-subtle",
            "padding": "tokens.spacing.md tokens.spacing.xl",
            "position": "absolute",
            "width": "100%",
            "zIndex": "10"
          },
          "states": {
            "default": { "backdrop": "blur-sm" },
            "hover": { "background": "tokens.colors.overlay-dark" }
          }
        },
        {
          "name": "BrandLogo", 
          "type": "text",
          "properties": {
            "fontSize": "tokens.typography.sizes.xl",
            "fontWeight": "tokens.typography.weights.bold",
            "color": "tokens.colors.primary-500",
            "letterSpacing": "tokens.typography.letterSpacing.wide"
          }
        },
        {
          "name": "NavigationLinks",
          "type": "nav",
          "properties": {
            "fontSize": "tokens.typography.sizes.base",
            "color": "tokens.colors.neutral-400",
            "gap": "tokens.spacing.xl"
          },
          "states": {
            "hover": { "color": "tokens.colors.primary-500" }
          }
        },
        {
          "name": "CTAButton",
          "type": "button", 
          "properties": {
            "background": "tokens.colors.primary-500",
            "color": "tokens.colors.neutral-900",
            "padding": "tokens.spacing.sm tokens.spacing.lg",
            "borderRadius": "tokens.radii.sm",
            "fontWeight": "tokens.typography.weights.medium"
          },
          "states": {
            "hover": { "background": "tokens.colors.neutral-400" }
          }
        },
        {
          "name": "HeroBackground",
          "type": "div",
          "properties": {
            "backgroundImage": "url('space-station-aerial.jpg')",
            "backgroundSize": "cover",
            "backgroundPosition": "center",
            "height": "100vh",
            "position": "relative"
          }
        },
        {
          "name": "HeroOverlay",
          "type": "div", 
          "properties": {
            "background": "tokens.colors.overlay-dark",
            "position": "absolute",
            "inset": "0"
          }
        },
        {
          "name": "HeroContent",
          "type": "section",
          "properties": {
            "position": "absolute",
            "bottom": "tokens.spacing.3xl",
            "left": "tokens.spacing.xl",
            "maxWidth": "600px"
          }
        },
        {
          "name": "MainHeadline",
          "type": "h1",
          "properties": {
            "fontSize": "tokens.typography.sizes.6xl",
            "fontWeight": "tokens.typography.weights.bold", 
            "lineHeight": "tokens.typography.lineHeights.tight",
            "color": "tokens.colors.primary-500",
            "marginBottom": "tokens.spacing.lg"
          }
        },
        {
          "name": "VideoButton",
          "type": "button",
          "properties": {
            "display": "flex",
            "alignItems": "center",
            "gap": "tokens.spacing.sm",
            "color": "tokens.colors.neutral-400",
            "fontSize": "tokens.typography.sizes.base"
          },
          "states": {
            "hover": { "color": "tokens.colors.primary-500" }
          }
        }
      ]
    }
  ]
}
```
</design-specification>

Copy this prompt and paste it into your AI coding assistant to build this design.