Hello World Studio Replica

# Hello World Studio Replica

{
  "summary": "A high-end editorial design system with a tech-nostalgia twist, using a warm beige palette, sophisticated serif-monospace typography pairing, and decorative floating ASCII art elements to define the brand identity.",
  "style": {
    "description": "The style is characterized by a high-contrast yet soft palette (Warm Off-White #f4f4ed and Charcoal #1a1a1a) with pastel accents (Mint #cdf0c9, Dusty Blue #7e8dd5). It pairs italicized Cormorant Garamond for a luxury editorial feel with DM Mono for a technical, raw look. Animations are subtle, primarily focusing on slow-floating Y-axis translations for decorative elements.",
    "prompt": "Create a design system using a background color of #f4f4ed and foreground text of #1a1a1a. Typography: Use 'Cormorant Garamond' (italicized) for headings and brand elements, and 'DM Mono' (300, 400 weight) for UI elements, navigation, and body text. Primary accents include #7e8dd5 (dusty blue) and #cdf0c9 (mint green). Borders should be 1px solid with a low opacity (e.g., #1a1a1a at 20%). Buttons are minimalist outline style with high tracking (0.2em) and uppercase text. Incorporate ASCII art as decorative patterns scattered across the layout with an opacity of 0.4 to 0.6. Implement a floating animation for decorative text elements using a cubic-bezier(0.4, 0, 0.2, 1) timing function over 6 seconds."
  },
  "layout_and_structure": {
    "description": "The layout is centered and spacious, featuring a fixed floating navigation bar and a prominent hero card that uses glassmorphism and subtle background layering.",
    "prompts": [
      {
        "part": "Navigation Bar",
        "prompt": "Fixed top navigation with a max-width of 1400px. Left: Logo in Cormorant Garamond (italic). Center: Navigation links styled as pill-shaped buttons with 1px borders (#1a1a1a/20%), using 10px font size, DM Mono, and 0.2em letter spacing. Right: Utility area with featured text in italic serif and a minimal shopping bag icon with a numerical badge."
      },
      {
        "part": "Hero Section",
        "prompt": "Centered container featuring a large text block. Heading: Cormorant Garamond italic, 48px-64px, with the second line indented. Content is housed in a slightly darker background card (#e8e8e0 at 60% opacity) with backdrop-blur. Include a centered body paragraph in DM Mono (14px) and a primary 'EXPLORE' button with a border-radius of 0 and heavy letter spacing."
      },
      {
        "part": "Decorative Layer",
        "prompt": "An absolute-positioned background layer containing various ASCII art structures. Elements should be placed at varying coordinates (e.g., top-left, bottom-right, mid-center) with font sizes ranging from 6px to 10px. Some elements should have a 'float' animation (translateY: -10px to 0px) to add depth."
      },
      {
        "part": "Footer/Status Widgets",
        "prompt": "Include a floating UI widget in the bottom-right corner styled like a digital toy/tamagotchi: a vertical rectangle with rounded corners (12px), 2px border, containing a small screen area with a smiley face or status icon."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Pill Navigation Link",
      "description": "Interactive pill-shaped links in the nav bar.",
      "prompt": "Apply a 1px border (#1a1a1a with 20% opacity) and 9999px border-radius. Padding: 8px 16px. Font: DM Mono, 10px, uppercase, tracking 0.15em. On hover, change the border color to #7e8dd5 (Dusty Blue) and transition color over 0.3s."
    },
    {
      "component": "Floating ASCII Pattern",
      "description": "Scattered text-based graphics used as background texture.",
      "prompt": "Use preformatted text tags (<pre>) with DM Mono, font-size 8px, line-height 1. Position absolutely behind content. Apply a keyframe animation '@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }' with a duration of 6s and infinite loop."
    }
  ],
  "special_notes": "MUST use 'DM Mono' for all UI controls and technical data to maintain the tech-editorial hybrid look. MUST NOT use vibrant or neon colors; keep all accents in the pastel/dusty range. DO use large amounts of whitespace (margins > 100px) to ensure an editorial, magazine-like feel. ASCII art elements should never interfere with the legibility of the main text; they are strictly decorative background textures."
}