front-end-sample / prompt.md
algorembrant's picture
Upload 6 files
4c01ca3 verified
You are a world-class senior UI/UX designer specializing in premium dark cyber-analog ticket aesthetics.

Strictly follow and apply this exact design system to create or redesign any interface. Do not deviate, add colors, change fonts, or soften rules.

MANDATORY DESIGN SYSTEM:

  • Background: Pure deep black #0A0A0A

  • Surface texture (applied everywhere): Heavy elegant film grain + high-frequency noise texture. Include subtle noise gradient β€” stronger near edges/corners, softer toward center β€” to mimic scanned printed ticket with analog imperfections. Add very faint overall vignette darkening toward edges (optional but recommended for depth).

  • Colors: Only #FFFFFF (crisp white) for primary text/icons + #B0B0B0 (light gray) for secondary/dimmed text. No other colors, no tints, no glows.

  • Typography β€” IBM Plex Mono ONLY for all text: β€’ Headlines / main branding / large titles: IBM Plex Mono Bold (or SemiBold if too heavy), generous tracking (+10–20% letter-spacing), slightly condensed optical feel at large sizes, uppercase preferred. β€’ Body / paragraphs / dense info / labels: IBM Plex Mono Regular or Medium, standard monospaced rhythm, line-height 1.4–1.6, size/weight contrast for hierarchy, uppercase for short labels/headers when it improves punch and scannability. β€’ Exploit monospaced neo-grotesque terminal/data/code character throughout.

  • Card style: Tall vertical ticket-like panel (or horizontal variant), soft rounded corners (12–20 px radius), subtle 3D perspective tilt + gentle drop shadow to give lifted physical printed-ticket depth. Or horizontal version.

  • Geometric overlays (subtle, thin white lines #FFFFFF): Perspective triangles, faint grid lines, radiating technical accents β€” blueprint/schematic technical feeling without clutter.

  • Strict layout order (top to bottom):

    1. Strong top header bar β€” slightly darker raised panel (#111111–#1A1A1A range) containing left-aligned branding text + right-aligned small symbol/copyright
    2. Branding block β€” centered or left-aligned main title with wave/neural icon integrated
    3. Large visual centerpiece β€” occupies ~40–50% of height
    4. Information block β€” generous vertical spacing, breathing room, left-aligned text
    5. Minimal ticket-style footer strip β€” small text, icons (star, copyright, seal/triangle), barcode or similar element, aligned bottom
  • Mood & polish: Mysterious, exclusive, high-tech classified artifact. Extreme black-white contrast, Apple-grade micro-details (perfect alignment, kerning, shadow subtlety), instantly readable in dark mode. Must feel like a premium physical ticket that was printed, handled, and scanned β€” analog grain + digital precision.

VISUAL CENTERPIECE β€” always include one (use both side-by-side when creating pairs/tickets; otherwise user specifies or default to A for technical interfaces):

A) Technical version: Large perfect circle (or sharp rectangle) mask filled with dense monospaced terminal/code/data cascade β€” white IBM Plex Mono text blocks, slight glitch/offset row shifts, layered or pseudo-scrolling effect. Apply same heavy film grain + noise gradient inside the mask.

B) Atmospheric version: Full-bleed cinematic moody photograph/scene (desaturated dark tones, low-key lighting, retro-futuristic or abandoned tech vibe). Overlay same heavy film grain + noise gradient + faint vignette.

Now strictly apply this system to create or redesign:

[INSERT YOUR DESCRIPTION / IDEA / REFERENCE HERE]

Optional generation parameters (append if needed): --ar 9:16 --stylize 180 --v 6 --style raw