Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← StylesCompare with another style

Tech Collage

Photography cut into signals, screens, dots, and measured offsets.

S02 / C1
12.0,05.7
FLT / contour
04.2,03.1
compiling field
Signal field

A sharp image, two displaced strips, contour traces, dot data, and one disciplined annotation system.

SPECIMEN / 04
-044 / 136 / 316
148287180654
archive mode
Archival instrument

Sepia image planes cross from solid to halftone under rulers, reticles, corner marks, and a barcode.

Vantage / 01Index   Field   Signal
IMG / screened
See further.
Editorial screen

The quiet web variant: one screened image carries the effect while the interface and headline stay calm.

A dark modular collage with flower photographs, pink and green noise, contour lines, dot fields, and coordinate labels.
Compiling fieldAna · 2026
A cream landing page with a large blue halftone image of classical architecture above a serif headline.
Vantage heroBobo Wong · 2026
A sepia collage of a sailboat with halftone dots, a circular reticle, ruler ticks, and dark rectangular panels.
Fable 5 visual studyOleg · 2026
A Japanese Toshiba advertisement showing a tomato connected to a sliced red disk form by a cable.
Toshiba floppy-disk advertisementToshiba

How it works

Color

Signal BlackArchive BoneCalibration TaupePhosphorSignal PinkPowder Blue

Typography

IBM Plex Mono
Space Grotesk
Instrument Serif
Characteristics

A photograph under analysis

A flower, mountain, boat, building, or face stays recognizable while overlays make it look sampled, measured, or tracked. The image gives the composition an emotional center; the instrumentation keeps it at a distance.

Rectangular tears and offsets

Images are split into hard-edged panes, strips, and duplicate fragments that shift out of register. The break reads like a damaged buffer or a misaligned print plate, even when every offset is composed by hand.

Halftone as structure

Dots, lines, and pixel fields replace whole parts of the photograph instead of sitting over it as decoration. The screened region becomes a second image mode with its own scale and density.

Machine annotations

Coordinates, ticks, crop corners, crosshairs, serials, barcodes, and small monospace labels imply a system at work. Most are semantic theater, but their placement needs the discipline of real instrumentation.

Competing resolutions

Sharp photos, blurred blocks, coarse dots, thin vector lines, and visible noise share one frame. The changes in fidelity create hierarchy and keep the picture from resolving into one seamless surface.

Controlled instability

Motion arrives as a jump, tear, scan, or shuffled block. The frame can feel broken without becoming random because a strict grid, limited palette, and repeated marks hold it together.

Use it

Figma
Offset image tear
  1. Place the photograph in a frame and duplicate it three times.
  2. Draw narrow rectangles over the areas you want to displace.
  3. Use each rectangle as a mask for one duplicate.
  4. Move the masked strips 8 to 32px along one axis; leave the base image fixed.
  5. Tint one strip or reduce its opacity if the tear needs a color split.

Two convincing tears beat twelve weak ones. Keep most of the source image intact.

Halftone image mode
  1. Duplicate the image and crop to the region that will become halftone.
  2. Convert that crop with a halftone plugin or an external bitmap tool, then reimport it.
  3. Set the result to monochrome or one spot color.
  4. Mask the processed image into a clean rectangular cell.
  5. Scale until the dots are visible at the intended export size.

Figma has no native photographic halftone effect. Treat the processed image as an asset and keep the source alongside it.

Instrument overlay
  1. Create a component set for corner marks, rulers, nodes, and coordinate labels.
  2. Use one 1px line token and one mono text style across every component.
  3. Attach the marks to Auto Layout edges or absolute positions inside the image frame.
  4. Expose label text, accent color, and line visibility as component properties.
  5. Place only the marks that reinforce a real edge or point in the composition.

Instrumentation feels credible when its spacing repeats. Build a kit before decorating the frame.

Stepped motion study
  1. Duplicate the finished frame into three to five prototype states.
  2. Move one masked strip or swap one image cell in each state.
  3. Connect the states with After Delay and short linear transitions.
  4. Hold the stable first and last states longer than the tear frames.
  5. Create a reduced-motion branch that stays on the resolved composition.

The tear should read as an event. If everything moves continuously, the frame loses tension.

Starting points
  1. Choose one photograph with a strong silhouette and clear subject.
  2. Build a strict modular grid on a black, bone, or taupe ground.
  3. Place the photograph across several cells, then duplicate it before editing.
Research notes & sources

2020s to present, with print and glitch-art roots

Digital design feeds, motion tools, and generative image workflows

Web experiments, motion studies, and digital photomontage

Data Core, Interface Collage, Signal Collage, Digital Photomontage

Related styles

  • Handmade CollageBoth assemble photographs and fragments. Handmade Collage exposes paper, tape, and fibers; Tech Collage exposes grids, buffers, and screens.
  • Retro-FuturismBoth borrow technical imagery. Retro-Futurism reaches for chrome, neon, and imagined interfaces; Tech Collage stays closer to print, photography, and current tools.
  • Swiss / International Typographic StyleThe modular grid, small grotesk labels, measurement, and disciplined alignment remain underneath the broken surface.
  • Brutalism (web)Brutalism exposes the browser and document structure. Tech Collage builds an authored picture of technical failure inside a controlled frame.
  1. so how shall we call this style, people are askingX
  2. Collage experiment postX
  3. CollageAna's Lab
  4. Tech-Collage Pattern Tool studyX
  5. Fable 5 visual studiesX
  6. Vantage hero section recreation promptX
  7. Japanese graphic design reference: Toshiba floppy-disk advertisementX
  8. Materials: Glossary, collage and photomontageThe Museum of Modern Art
  9. Rodchenko: PhotocollageThe Museum of Modern Art
  10. The Graphic Designs of Herbert MatterThe Museum of Modern Art
  11. Halftone photomechanical printsLibrary of Congress
  12. Revolution in a Grid of DotsCooper Hewitt, Smithsonian Design Museum
  13. Glitch Studies Manifesto by Rosa MenkmanRhizome