Visual design reference library

See the style. Recognize its traits. Prompt it clearly.

A focused library of established interface and graphic directions. Every entry pairs an original HTML/CSS reference with practical recognition cues and a prompt you can adapt.

Browse visual styles

Detailed references

Browse visual styles

Use the references to identify a direction—not as evidence of a generated result.

14 styles
  1. Illustrative finance dashboard with softly raised cards and inset controls in a neomorphic style.
    Surface & depth Illustrative reference

    Soft, extruded controls appear molded from the same surface through paired light and dark shadows.

    • Low contrast
    • Paired shadows
    • Rounded controls
    • Tactile depth
    Original HTML/CSS illustration
    Explore this style
  2. Illustrative project dashboard with structured surfaces, elevation, and role-based color inspired by Material Design principles.
    Interface systems Illustrative reference

    A systematic interface language built around surfaces, elevation, bold color, clear hierarchy, and purposeful motion.

    • Elevation
    • Color roles
    • Structured grid
    • Clear states
    Original HTML/CSS illustration; no Google assets
    Explore this style
  3. Illustrative editorial planning website composed from warm paper sheets, ink typography, tabs, and ruled details.
    Surface & depth Illustrative reference

    Layered sheets, ink-like typography, ruled details, and physical stationery cues organize digital content.

    • Warm stock
    • Layered sheets
    • Ink details
    • Editorial rhythm
    Original HTML/CSS illustration
    Explore this style
  4. Illustrative travel planning website using generic 1990s desktop windows, beveled controls, and a limited teal-gray palette.
    Graphic directions Illustrative reference

    Beveled window chrome, pixel-conscious type, compact toolbars, and early desktop conventions create nostalgic utility.

    • Beveled chrome
    • Compact density
    • Window metaphors
    • Limited palette
    Original HTML/CSS illustration; no proprietary OS assets
    Explore this style
  5. Original project dashboard arranged as a varied bento grid of priority, progress, activity, and team tiles.
    Interface systems Illustrative reference

    Varied but aligned tiles turn mixed content, status, and actions into a compact modular overview.

    • Modular tiles
    • Mixed spans
    • Strong alignment
    • Compact summaries
    Original HTML/CSS illustration
    Explore this style
  6. Original dark terminal-style release console with process logs, status metrics, and a command field.
    Interface systems Illustrative reference

    Monospace hierarchy, command patterns, and semantic status colors create a keyboard-oriented text interface.

    • Monospace hierarchy
    • Command patterns
    • Status colors
    • Keyboard-first flow
    Original HTML/CSS illustration; no operating-system assets
    Explore this style
  7. Original field recorder interface with a wood desk, metal console, display, knobs, switches, and meter.
    Surface & depth Illustrative reference

    Recognizable physical metaphors, believable materials, and dimensional controls make digital actions feel tangible.

    • Physical metaphors
    • Material texture
    • Dimensional controls
    • Realistic feedback
    Original HTML/CSS illustration; no hardware assets
    Explore this style
  8. Original pastel project planner with inflated cards, soft volume, rounded blobs, and tactile buttons.
    Surface & depth Illustrative reference

    Soft inflated forms, saturated pastels, and directional shadows create playful volumetric components.

    • Inflated forms
    • Saturated pastels
    • Soft volume
    • Playful depth
    Original HTML/CSS illustration
    Explore this style
  9. Original design-program page with bold black type, red circle, blue field, yellow square, and asymmetric geometry.
    Graphic directions Illustrative reference

    Functional composition gains energy from primary geometry, assertive type, and dynamic asymmetric balance.

    • Primary geometry
    • Functional composition
    • Bold type
    • Dynamic asymmetry
    Original HTML/CSS illustration
    Explore this style
  10. Original midnight event page with symmetrical arches, gold linework, fan geometry, and refined serif type.
    Graphic directions Illustrative reference

    Symmetry, stepped geometry, metallic accents, and refined display type create a precise ceremonial character.

    • Stepped geometry
    • Strong symmetry
    • Metallic accents
    • Refined display type
    Original HTML/CSS illustration
    Explore this style
  11. Original workshop page with bright geometric motifs, dotted and wavy patterns, bold type, and colored panels.
    Graphic directions Illustrative reference

    Playful postmodern geometry, mixed patterns, and bright accents bring expression to a disciplined layout.

    • Playful geometry
    • Pattern mixing
    • Bright accents
    • Intentional imbalance
    Original HTML/CSS illustration
    Explore this style
  12. Original dark network console with cyan and magenta accents, angular panels, map nodes, and technical status labels.
    Graphic directions Illustrative reference

    Dark high-contrast surfaces, luminous accents, angular frames, and dense technical labels suggest speculative technology.

    • Dark high contrast
    • Luminous accents
    • Angular frames
    • Technical microcopy
    Original HTML/CSS illustration; no franchise assets
    Explore this style
  13. Original garden planning page with flowing organic shapes, leaf forms, earth colors, and soft asymmetric composition.
    Graphic directions Illustrative reference

    Irregular organic forms, flowing boundaries, and nature-derived colors soften a rigid digital grid.

    • Organic silhouettes
    • Flowing boundaries
    • Earth-derived color
    • Soft asymmetry
    Original HTML/CSS illustration
    Explore this style
  14. Original culture magazine page with oversized headlines, layered type, vivid color blocks, and dense editorial sections.
    Graphic directions Illustrative reference

    Dramatic scale shifts, layered typography, dense rhythm, and vivid contrast turn hierarchy into the experience.

    • Dramatic scale
    • Layered typography
    • Dense rhythm
    • Vivid contrast
    Original HTML/CSS illustration
    Explore this style

Original illustrative recreation—not a generated result or proprietary product screenshot.

Website Prompts

Need the full website brief?

Choose a visual direction here, then carry it into a page-specific prompt from the Website Prompts library.

Browse website prompts