What everything means

A generator is one graphic-design style turned into a set of controls. Move them and the picture answers. You can't break anything: Reset brings the opening picture back.

The controls

Variation

The number behind a picture's random decisions. The same number with the same settings always gives the same picture. Random draws a new one; Shuffle settings changes the design choices too.

Format

The shape of the picture: square (1:1), portrait (4:5), poster (1:√2), story (9:16), landscape (16:9), banner (3:1).

Design choices

The decisions that make the style what it is, named as designers name them. All of them are explained below.

Settings

Plain adjustments such as scale or density, which belong to no style in particular.

Colour

The style's own colours, another style's, or your own. Saved colours stay in this browser.

Finish

What printing and screens do to a picture, added on top:

Misregistration. Each ink printed as its own layer, slightly out of register, overprinting where they meet, as on a risograph or screen print.
Halftone. Areas of ink broken into a screen of dots, lines or squares whose size follows the coverage, as in Ben-Day and offset printing.
Dither. The picture rebuilt on a coarse pixel grid from a few colours, faking the in-between tones: with an ordered screen, by spreading each cell’s error to its neighbours, or with lines and waves, as early screens, 1-bit printers and engravers did.
Glitch. Torn horizontal slices, split colour channels and displaced blocks, as when a file or a signal breaks. When animated it changes at most three times a second.
Tube screen. A cathode-ray tube: the picture made of red, green and blue phosphor dots, light blooming round the bright parts, colour fringes and dark edges.
Grain. Fine noise, specks and a darkened edge, as of film, paper or a cheap print.

Motion

Generators that move play a loop that ends where it began. Loop length sets how long it takes, Intensity how far things travel. Pause stops every moving picture on the page, and devices set to reduced motion start with them still.

Export

SVG for a vector file that scales to any size, PNG for a picture at print size, Video for the loop. The finish is made of pixels, so SVG leaves it out. Copy link keeps the picture in an address; Copy recipe gives the same thing as text for code.

Keys

← →: Previous or next variation
R: A random variation
S: Shuffle the settings
C: Borrow another style's colours
Space: Play or pause the loop

The design choices

Everything the generators here make or let you set. Developers meet them by the short name in small type, such as form.angular.

Colour

Complementary clash color.complementary-clash: Vibrating opposites placed edge to edge. In Op Art, Memphis, Psychedelic, Duotone.
Dark ground color.dark-ground: Light elements on black or deep fields. In Memphis, FUI, Sprites, Lo-res magazine, Duotone.
Flat fields color.flat-fields: Unmodulated areas of colour. In Op Art, Swiss, Bauhaus, De Stijl, Memphis, Concrete, Pixel, Kinetic, Vorticism, Di Tella, Generative identity, Lucerne poster, Pop Art, Risograph, Stencil, Psychedelic, Sprites, Quote poster, Silkscreen, Clear line, Weave, Supergraphics, Duotone, Mirror bloom.
Fluorescent & neon color.neon: Day-glo inks and RGB brights. In Risograph, Psychedelic, FUI.
Full polychrome color.polychrome: Many saturated hues at once. In Psychedelic, Clear line, Techno-futurism.
Gradients color.gradient: Smooth blends, fades or spectral ramps. In Psychedelic, Sprites, Glassmorphism.
Light ground color.light-ground: Paper-white or pale fields dominate. In Risograph, Duotone.
Limited spot colours color.limited-spot: Two or three flat inks. In Op Art, Swiss, Bauhaus, Concrete, Pixel, Kinetic, Vorticism, Di Tella, Generative identity, Lucerne poster, Risograph, Stencil, Sprites, Quote poster, Linocut, Silkscreen, Plotter, Lo-res magazine, Techno-futurism, Mavo, New wave.
Monochrome color.monochrome: A single hue, or black and white. In Op Art, Swiss, Pixel, Kinetic, Vorticism, Di Tella, Generative identity, Lucerne poster, Stencil, Quote poster, Linocut, Plotter, Lo-res magazine, Techno-futurism.
Pastel color.pastel: Light, softened tints. In Memphis.
Primary triad color.primary-triad: Red, yellow and blue with black and white. In Bauhaus, De Stijl.

Form & shape

Angular & zigzag form.angular: Chevrons, zigzags, sunbursts and faceted shards. In Memphis, Vorticism, Silkscreen, Supergraphics.
Biomorphic curves form.organic: Soft, cell-like, plant-like forms. In Generative identity, Psychedelic, Glassmorphism, Silkscreen.
Distortion & exaggeration form.distorted-figure: Elongated, warped or grotesque figures. In Psychedelic.
Geometric primitives form.primitives: Circle, square and triangle as building blocks. In Swiss, Bauhaus, Memphis, Concrete, Generative identity, FUI, Plotter, Supergraphics, Mirror bloom.
Non-representational form.abstract: Pure form with no depicted subject. In Op Art, Bauhaus, De Stijl, Concrete, Vorticism, Generative identity, Plotter, Mavo.
Optical pattern form.op-pattern: Repeated lines and modules that vibrate or warp perception. In Op Art, Di Tella, Lucerne poster, Psychedelic.
Pictogram form.pictogram: Reduced, systematic signs. In Pixel, Techno-futurism.
Rectilinear form.rectilinear: Orthogonal bars, blocks and lines. In Swiss, De Stijl, Pixel, Sprites, Weave.
Rounded & pill form.rounded: Soft corners, capsules and blobs. In Generative identity, Glassmorphism, Mirror bloom.
Squiggles & confetti form.squiggle: Playful scribbles, dots and fragments scattered across the field. In Memphis.
Stylised figuration form.stylised-figure: Simplified, flattened people and objects. In Sprites, Silkscreen.
Whiplash line form.whiplash: Sinuous, energetic S-curves. In Psychedelic.

Imagery

3D render image.3d-render: Computer-generated objects, scenes and textures. In Glassmorphism.
Comic & cartoon image.comic: Outlines, speech balloons, character art. In Clear line.
Diagram & data image.diagram: Charts, maps, isotypes, technical drawings. In Generative identity, FUI, Techno-futurism.
Found & vernacular imagery image.found-vernacular: Clip art, stock, screenshots, appropriated ephemera. In Pop Art, Mavo.
Generative imagery image.generative: Code-, algorithm- or AI-generated pictures. In Generative identity, Plotter.
Icons & pictograms image.iconography: Systematic icon families. In Sprites, Techno-futurism.
Line illustration image.line-illustration: Outline drawing, engraving, pen and ink. In FUI, Clear line, Plotter.
Pattern & repeat image.pattern: Repeating motifs as the image itself. In Memphis, Pixel, Generative identity, Mirror bloom.
Photomontage image.photomontage: Cut and recombined photographs. In Mavo.
Treated photography image.treated-photo: Duotone, high-contrast or posterised photographs. In Op Art, Pixel, Pop Art, Risograph, Stencil, Psychedelic, FUI, Linocut, Silkscreen, Clear line, New wave, Duotone.
Typography only image.typographic-only: No pictures; type carries everything. In Swiss, Kinetic, Vorticism, Di Tella, Quote poster.

Layout & composition

All-over field layout.all-over: No focal point; the whole surface is filled evenly, like a textile. In Op Art, Pixel, Plotter.
Broken grid layout.broken-grid: A grid is implied and then deliberately violated or deconstructed. In Lo-res magazine, New wave.
Cards & bento tiles layout.bento: Content partitioned into rounded tiles or cards of varied size. In Glassmorphism, Techno-futurism.
Central symmetry layout.symmetric: Elements mirrored around a central axis; formal and stable. In Pixel, Mirror bloom.
Collage & layering layout.collage: Overlapping fragments, cut-outs and stacked planes. In Memphis, Lo-res magazine, Mavo, New wave.
Diagonal axis layout.diagonal: Composition driven by tilted axes and oblique movement. In Bauhaus, De Stijl, Vorticism, Di Tella, Linocut, Supergraphics, New wave, Duotone.
Dynamic asymmetry layout.asymmetric: Off-centre balance from the tension between unequal masses. In Swiss, Bauhaus, De Stijl, Quote poster.
Framed panels layout.framed-panels: Content held in borders, cartouches or compartments. In Vorticism, Sprites, Clear line, Plotter, Techno-futurism.
Full bleed layout.full-bleed: Image or colour runs off every edge; no protective margins. In Kinetic, Di Tella, Supergraphics, Techno-futurism, Duotone, Mirror bloom.
Isolated object layout.isolated-object: A single object or figure isolated on a plain ground. In Generative identity, Pop Art, Risograph, Stencil, Linocut, Silkscreen, Clear line.
Modular grid layout.modular-grid: Fields defined by rows and columns; every element snaps to modules. In Swiss, Concrete, Pixel, Generative identity, Pop Art.
Organic flow layout.organic-flow: Text and image follow curving, natural paths instead of a grid. In Lucerne poster, Psychedelic.
Radial & concentric layout.radial: Elements radiate from, or orbit around, a centre. In Generative identity, Lucerne poster, Psychedelic, FUI.

Medium & production

Desktop publishing medium.desktop-publishing: Early Mac/PC layout, bitmap fonts and PostScript. In Lo-res magazine.
Generative & AI medium.generative-code: Code, parametric systems or machine-learning models. In Generative identity, Plotter, Mirror bloom.
Letterpress medium.letterpress: Metal and wood type printed in relief. In Quote poster.
Motion & broadcast medium.motion: Animated, time-based work: titles, broadcast, video. In Kinetic, FUI.
Photocopy & zine medium.photocopy: Xerox and other cheap reproduction. In Quote poster.
Risograph medium.risograph: Stencil duplicator printing with soy inks. In Risograph.
Screen printing medium.screenprint: Flat stencil-printed inks, often opaque or fluorescent. In Pop Art, Silkscreen.
Textile & craft medium.textile: Weaving, dyeing, embroidery and applied craft. In Weave.
Woodblock & linocut medium.woodblock: Carved relief printing. In Linocut.

Ornament

Abundant decoration ornament.abundant: Decoration is primary content. In Memphis.
Borders & frames ornament.borders: Decorative frames, cartouches and rules around content. In Quote poster.
Emblems & badges ornament.emblem: Seals, crests, roundels and badges. In Techno-futurism.
Ornament-free ornament.none: Decoration rejected; form follows function. In Op Art, Concrete, Pixel, Kinetic, Generative identity, Glassmorphism, Clear line.
Rules & bars ornament.rules-bars: Thick bars, lines and dots as structural accents. In Swiss, Bauhaus, De Stijl, Vorticism, FUI, Quote poster, Lo-res magazine, Supergraphics, Mavo, New wave.

Space & hierarchy

Extreme scale contrast space.scale-contrast: Very large against very small elements, for drama and order. In Swiss, Bauhaus, Vorticism, Di Tella, Quote poster, Supergraphics, Techno-futurism, New wave, Duotone, Mirror bloom.
Generous white space space.generous-whitespace: Emptiness is an active element: wide margins and quiet areas. In Swiss, Bauhaus, Concrete, Quote poster, Plotter.
Horror vacui space.dense: Every area is filled; abundant, crowded, layered. In Vorticism, Psychedelic, Lo-res magazine, Mavo.
Illusion of depth space.depth-illusion: Perspective, overlap, shadow or parallax create a z-axis. In Op Art, Kinetic, Lucerne poster, Glassmorphism, Supergraphics.
Layered information space.layered-information: Several reading levels: headline, deck, captions, data. In FUI.
Repetition & rhythm space.repetition: Repeated units create a visual cadence. In Op Art, Bauhaus, Memphis, Concrete, Pixel, Kinetic, Di Tella, Generative identity, Lucerne poster, Pop Art, Stencil, Sprites, Weave, Plotter, Mirror bloom.
Single focal point space.single-focal: One unmistakable point of entry. In Pixel, Vorticism, Lucerne poster, Pop Art, Stencil, FUI, Mirror bloom.
Visual tension space.tension: Deliberate instability: crowded edges, clashes, near-collisions. In Bauhaus, Concrete, Vorticism, Linocut, Mavo.

Surface & texture

Carved line surface.woodcut: Woodcut, linocut or engraving marks. In Linocut, Mavo.
Flat surface.flat: No simulated depth or texture. In Swiss, De Stijl, Pop Art, Psychedelic, Techno-futurism, Mirror bloom.
Frosted glass surface.glass: Translucent layers over blurred backdrops. In Glassmorphism.
Glitch surface.glitch: Corrupted pixels, scanlines, compression artefacts. In FUI, Lo-res magazine.
Grain & noise surface.grain: Film grain, riso speckle, dithering noise. In Pixel, Risograph, Stencil, Duotone.
Halftone & Ben-Day dots surface.halftone: Dot screens made visible. In Pop Art, Risograph, FUI, New wave.
Hard offset shadow surface.hard-shadow: Solid, unblurred drop shadows and outlines. In Memphis, Lucerne poster, Quote poster.
Misregistration & overprint surface.misregistration: Inks slightly out of register; transparent overprints. In Pop Art, Risograph, Silkscreen, New wave.
Paper & letterpress bite surface.paper-texture: Visible fibre, impression and ink spread. In Quote poster.
Photocopy & distress surface.photocopy: Xerox degradation, toner, torn and pasted edges. In Stencil, New wave.

Tone & intent

Ironic & self-aware tone.ironic: Quotation, pastiche and knowing exaggeration. In Memphis, Techno-futurism.
Nostalgic & retro tone.nostalgic: Deliberate reference to an earlier period. In Sprites.
Playful & witty tone.playful: Humour, games, visual puns. In Memphis, Sprites.
Rational & objective tone.rational: Clarity, neutrality and order above personality. In Bauhaus, Concrete, Weave, Plotter.
Technological & futurist tone.technological: Speed, machines, progress and the future. In Pixel, FUI, Sprites, Techno-futurism.

Typography

All caps type.all-caps: Capitals for monumentality, order or shouting. In Bauhaus, Kinetic, Vorticism, Lucerne poster, Stencil, Techno-futurism.
Bitmap & pixel type.pixel: Letters constructed on a pixel grid. In Pixel, FUI, Lo-res magazine.
Brush & pen calligraphy type.calligraphic: Calligraphy as structure: Arabic, East Asian, broad-pen Latin. In Quote poster.
Condensed display type.condensed-display: Tall, narrow, heavy letters for impact. In Di Tella, Lucerne poster, FUI, Quote poster.
Eclectic mixing type.mixed-faces: Many typefaces and sizes combined in one composition. In Quote poster, Lo-res magazine, Mavo.
Experimental & distorted type.experimental: Stretched, fragmented, layered or deliberately hard-to-read letters. In Kinetic, Lucerne poster, Psychedelic, Lo-res magazine.
Flush left, ragged right type.flush-left: Asymmetric, unjustified text setting. In Swiss, Di Tella, Quote poster.
Geometric sans type.geometric-sans: Built from circle and line: Futura, Avant Garde, Circular. In Bauhaus, Duotone.
Grotesque & neo-grotesque type.grotesque: Neutral, rational sans: Akzidenz-Grotesk, Helvetica, Univers. In Swiss, Kinetic, Vorticism, Di Tella, Generative identity, Glassmorphism, New wave.
Humanist & Garalde serif type.humanist-serif: Calligraphic stress and bracketed serifs: Jenson, Garamond, Bembo. In Quote poster.
Lowercase only type.lowercase: Capitals rejected as unnecessary. In Bauhaus, Kinetic, Quote poster.
Monospace type.monospace: Fixed-width typewriter or code letterforms. In Pixel, FUI.
Ornamented display type.decorative-display: Inline, shaded, Tuscan or fantasy display faces. In Quote poster.
Rotated & vertical setting type.rotated: Lines set at angles, stacked or running vertically. In Swiss, Kinetic, Vorticism, Di Tella, Supergraphics, Techno-futurism, New wave.
Stencil type.stencil: Bridged letterforms evoking crates, military or industrial marking. In Stencil.
Tight setting type.tight-setting: Letters and lines crowded together, touching or overlapping. In Kinetic, Di Tella, Quote poster.
Type as image type.oversized: Letters so large they become the picture. In Kinetic, Di Tella, Lucerne poster, Quote poster, Lo-res magazine, Supergraphics.
Wide letterspacing type.wide-tracking: Airy, generously spaced letters, usually capitals. In Concrete, FUI, Quote poster, New wave.

Where the names come from

The styles and the design choices are described in Stylogeny, an atlas of graphic-design styles and a separate site, which opens in a new tab.