aino.agency

# Terminal-Style ASCII Art Display Interface

Create a terminal-inspired ASCII art display interface with dark theme and navigation. The layout features a large central ASCII art viewer with a horizontal navigation bar and terminal-like aesthetics.

## Layout Structure

The interface uses a full-viewport layout with:
- Fixed top navigation bar with spaced menu items
- Large central display area for ASCII art content
- Dark background with monospace typography throughout
- Terminal-style character grid display

## Key Components

**Navigation Bar**: Horizontal menu with items: KTNO, WORK, SERVICES, ABOUT, PLAY, SETTINGS, CONTACT. Items are evenly spaced with clean typography.

**ASCII Art Display**: Large central viewing area showing complex ASCII art patterns. The content appears to be generated character art using various ASCII symbols (dots, numbers, letters) forming intricate patterns and designs.

**Terminal Interface**: Bottom area with command-line style text output, showing technical information and coordinates in a terminal format.

## Visual Styling

- Pure monospace font family for authentic terminal feel
- High contrast white text on dark backgrounds
- Pixel-perfect alignment for ASCII character grids
- Minimal borders and clean geometric layout
- No rounded corners - sharp, technical aesthetic

## Responsive Behavior

The layout should maintain ASCII art readability across screen sizes, with the navigation remaining fixed and the central display area scaling appropriately while preserving character alignment.

**Design specification**
<design-specification>
```jsonc
{
  "project": {
    "name": "Terminal ASCII Display",
    "description": "Dark terminal-style interface for displaying ASCII art with navigation bar and character grid layout"
  },
  "tokens": {
    "colors": {
      "primary-900": { "light": "#000000", "dark": "#000000" },
      "primary-800": { "light": "#1a1a1a", "dark": "#1a1a1a" },
      "neutral-100": { "light": "#ffffff", "dark": "#ffffff" },
      "neutral-300": { "light": "#d4d4d4", "dark": "#d4d4d4" },
      "neutral-500": { "light": "#737373", "dark": "#737373" },
      "accent-500": { "light": "#10b981", "dark": "#10b981" }
    },
    "typography": {
      "families": { 
        "mono": "Monaco, 'Courier New', Consolas, monospace"
      },
      "sizes": { 
        "xs": "10px", 
        "sm": "12px", 
        "base": "14px", 
        "lg": "16px" 
      },
      "weights": { 
        "normal": "400", 
        "medium": "500" 
      },
      "lineHeights": { 
        "tight": "1.0", 
        "normal": "1.2" 
      },
      "letterSpacing": { 
        "tight": "-0.01em", 
        "normal": "0em" 
      }
    },
    "spacing": {
      "xs": "4px",
      "sm": "8px", 
      "md": "16px",
      "lg": "24px",
      "xl": "32px",
      "rationale": "Minimal spacing for dense terminal layout with consistent 8px base unit"
    },
    "radii": {
      "none": "0px",
      "sm": "2px"
    },
    "shadows": {
      "none": { "light": "none", "dark": "none" }
    }
  },
  "screens": [
    {
      "name": "TerminalDisplay",
      "route": "/",
      "layout": "Full height viewport with fixed navigation and scrollable ASCII display area",
      "components": [
        {
          "name": "TopNavigation",
          "type": "header",
          "properties": {
            "background": "tokens.colors.primary-800",
            "padding": "tokens.spacing.md tokens.spacing.xl",
            "fontFamily": "tokens.typography.families.mono",
            "fontSize": "tokens.typography.sizes.sm",
            "color": "tokens.colors.neutral-100",
            "display": "flex",
            "justifyContent": "space-between",
            "position": "fixed",
            "width": "100%",
            "top": "0",
            "zIndex": "10"
          },
          "states": {
            "default": {
              "borderBottom": "1px solid tokens.colors.neutral-500"
            }
          }
        },
        {
          "name": "ASCIIDisplay",
          "type": "main",
          "properties": {
            "background": "tokens.colors.primary-900",
            "padding": "tokens.spacing.lg",
            "fontFamily": "tokens.typography.families.mono",
            "fontSize": "tokens.typography.sizes.xs",
            "color": "tokens.colors.neutral-100",
            "lineHeight": "tokens.typography.lineHeights.tight",
            "letterSpacing": "tokens.typography.letterSpacing.tight",
            "overflow": "auto",
            "height": "100vh",
            "paddingTop": "60px"
          },
          "states": {
            "default": {
              "whiteSpace": "pre",
              "fontVariantLigatures": "none"
            }
          }
        },
        {
          "name": "TerminalOutput",
          "type": "section",
          "properties": {
            "background": "tokens.colors.primary-800",
            "padding": "tokens.spacing.sm tokens.spacing.lg",
            "fontFamily": "tokens.typography.families.mono",
            "fontSize": "tokens.typography.sizes.xs",
            "color": "tokens.colors.neutral-300",
            "lineHeight": "tokens.typography.lineHeights.normal",
            "position": "fixed",
            "bottom": "0",
            "width": "100%"
          },
          "states": {
            "default": {
              "borderTop": "1px solid tokens.colors.neutral-500"
            }
          }
        }
      ]
    }
  ]
}
```
</design-specification>

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