themx
← Back to themes

Collage / Scrapbook

bold Visual style

Layered paper and image cutouts with a clear reading order

Reference year: 2026

Compare this theme

Best for

Games & entertainment, Brand & events, Portfolio

Less suitable for

  • Long forms and data-heavy interfaces where overlapping decoration obscures controls.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Collage / Scrapbook preview

Color Palette

Primary #BE123C
Secondary #1D4ED8
Accent #FDE047
Background #F5EBDC
Text #292524

Typography

Heading: Anton
Body: DM Sans

Key Characteristics

  • Paper panels, image cutouts, and sticker-like accents
  • A few overlapping layers with deliberate alignment
  • Bold condensed headings and readable supporting text
  • Light texture with strong solid accent colors

Tags

collage paper cutout stickers texture

Collage design combines paper surfaces, image cutouts, and graphic accents in several visible layers. It works well when the content already includes photography, art, or event material. Layering should retain a clear reading order.

When to Use

This style suits entertainment websites, brand campaigns, and creative portfolios. Avoid it for long forms and data-heavy interfaces where overlapping decoration obscures controls.

Key Visual Elements

Use a limited set of paper textures and accent colors. Keep the main heading and call to action unobstructed. Decorative rotation and overlap should reduce on mobile. Use real content images with useful descriptions instead of filling every gap with a sticker.

Typography

Anton gives short headlines a condensed shape. DM Sans supports longer descriptions and controls. Use a limited number of text sizes so layered panels remain easy to scan.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #F5EBDC;
  --tx-font-heading: "Anton", sans-serif;
  --tx-font-body: "DM Sans", sans-serif;
  --tx-surface-bg-image: radial-gradient(#29252418 1px, transparent 1px);
  --tx-card-bg: #FFFEF8;
  --tx-card-border: #292524;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: 5px 6px 0 #292524;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #111111;
  --tx-card-shadow-hover: 7px 8px 0 #292524;
  --tx-font-heading-weight: 400;
  --tx-font-body-weight: 400;
  --tx-text-muted: #57534E;
  --tx-text-subtle: #78716C;
  --tx-link-color: #BE123C;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #292524;
  --tx-text: #292524;
  --tx-primary: #BE123C;
  --tx-secondary: #1D4ED8;
  --tx-accent: #FDE047;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Collage / Scrapbook

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Games & entertainment
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Collage / Scrapbook (visual-style)
- Paper panels, image cutouts, and sticker-like accents
- A few overlapping layers with deliberate alignment
- Bold condensed headings and readable supporting text
- Light texture with strong solid accent colors

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #BE123C, secondary #1D4ED8, accent #FDE047, background #F5EBDC, text #292524
Typography: Anton for headings, DM Sans for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #F5EBDC;
  --tx-font-heading: "Anton", sans-serif;
  --tx-font-body: "DM Sans", sans-serif;
  --tx-surface-bg-image: radial-gradient(#29252418 1px, transparent 1px);
  --tx-card-bg: #FFFEF8;
  --tx-card-border: #292524;
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: 5px 6px 0 #292524;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #111111;
  --tx-card-shadow-hover: 7px 8px 0 #292524;
  --tx-font-heading-weight: 400;
  --tx-font-body-weight: 400;
  --tx-text-muted: #57534E;
  --tx-text-subtle: #78716C;
  --tx-link-color: #BE123C;
  --tx-button-radius: 0;
  --tx-input-bg: #FFFFFF;
  --tx-input-border: #292524;
  --tx-text: #292524;
  --tx-primary: #BE123C;
  --tx-secondary: #1D4ED8;
  --tx-accent: #FDE047;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Layer paper panels and image cutouts around a clear content grid.
- Keep decorative overlap away from links and forms. Flatten the layout to one column on mobile.

## Interaction
- Use subtle card lifts and preserve visible keyboard focus. Keep important text stationary.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Collage / Scrapbook: Long forms and data-heavy interfaces where overlapping decoration obscures controls.

## Components
Generate the following components in this style:
- Hero
- Navbar
- Cards
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.