Classical Collage Web Design

Classical Collage × Modern Tech

An editorial web art direction. Old Master paintings, Greco-Roman ruins and marble are combined with modern objects and product UI: laptops, phones, gold coins, dashboards. The art carries the emotion and brand. The interface stays almost invisible: off-white paper, near-black ink, one accent and a light serif.

Two reference implementations define the two official variants:

How to use this skill

Work through these steps in order. Each one has a detailed reference file.

1. Brief. Collect the product, audience, 3–6 key messages and the CTA. Pick the variant (warm or cool) with the decision table in references/01-art-direction.md.
2. Metaphors. Give every section exactly one literal visual metaphor that acts out its headline. Use the metaphor bank in references/02-metaphor-bank.md.
3. Art. Source or generate the images, cut them out, grade them to one palette and apply the halftone / texture treatments. See references/03-imagery-and-prompts.md and references/04-techniques.md.
4. Tokens. Apply the colour, type, spacing, radius and shadow tokens from references/05-design-tokens.md. Ready-made files are in assets/tokens.css and assets/tailwind.preset.js.
5. Components. Build from the specs in references/06-components.md. React/Tailwind versions are in assets/components/.
6. Page. Assemble one of the blueprints in references/07-page-blueprints.md (fintech, AI/SaaS, agency/portfolio, D2C/product).
7. Motion. Follow references/08-motion.md: slow, weighty, scroll-led.
8. Copy. Write in the voice from references/09-copywriting.md.
9. Build. Use references/10-build-figma.md, references/11-build-framer.md or references/12-build-nextjs.md. examples/landing.html is a working single-file demo.
10. QA. Run every item in references/13-qa-checklist.md before handing anything over.

If the user only wants a quick concept (moodboard, single hero, art brief), do steps 1–3 and show the result. Don't build the whole system.

The ten rules (memorise these)

1. One metaphor per section, and it must be literal. Scales mean evaluation, a keystone coin means foundation, a key means access. If the image could swap with another section's image and still work, it is decoration. Replace it.
2. Anachronism is the hook. Classical figures use modern objects calmly, as if they always had them. Never make it a joke: no sunglasses on statues and no memes.
3. Loud art, quiet UI. All saturation lives in the imagery. The UI uses neutrals plus at most one accent.
4. Never tint the UI to match a painting. Paintings change from section to section; the UI palette does not.
5. Light serif, tight leading. Display serif at weight 300–400, line-height 1.0, tracking −0.03 to −0.05em. Never bold a headline.
6. Grotesk for function, mono for labels. Body, buttons and nav use a neutral grotesk. Eyebrows and data use mono or tracked small caps.
7. Space is the luxury signal. At most two ideas per viewport. Section padding is 120–200px on desktop.
8. One grade for every image. Colour-grade every painting to the variant's palette so the collage reads as one world.
9. Modern objects must look modern. Render tech crisply (dark UI) or as black-and-white halftone. Never paint it in the oil style. The contrast is the point.
10. Legally clean art only. Use public-domain paintings or original generated images. Never lift images from the reference sites or from living artists.

Fast defaults (when the user gives no constraints)

• Variant: cool for AI/SaaS/creative, warm for money/luxury/physical.
• Fonts: Source Serif 4 (display), Inter (body/UI) and JetBrains Mono (labels). All are free on Google Fonts.
• Hero: eyebrow // CATEGORY, a two-beat headline ending in a full stop, one-sentence sub, a dark pill CTA plus an outline pill, and one hero artwork.
• Sections: Hero → logo strip → intro + product shot on a painting → 4 stacked feature cards → scroll story → stats → testimonial → closing CTA → dark footer.
• Motion: 700ms, cubic-bezier(0.22, 1, 0.36, 1), fade-up 16px, sticky stacking cards and parallax thumbnails.

Anti-patterns (reject these)

• Blue/purple gradients, glassmorphism, neon glows, 3D blobs and emoji icons
• Bold or condensed serif headlines, or more than two typefaces plus a mono
• Mixing the warm and cool variants on one site
• Statues or paintings with no link to the copy ("classical vibe" filler)
• Dense, multi-panel dashboard screenshots. Show one focused widget at a time.
• Cartoonish AI art, plastic skin, or text and garbled letters inside generated images
• Stock-photo people alongside the paintings
• Fast, springy or bouncy animation

File map

Copy code
SKILL.md                         ← you are here
references/
  01-art-direction.md            concept, variant decision, mood, art direction brief template
  02-metaphor-bank.md            80+ headline→image metaphors by industry
  03-imagery-and-prompts.md      sourcing, licensing, AI prompt system, grading recipes
  04-techniques.md               halftone, data-text texture, dot grid, cut-out collage, floating UI
  05-design-tokens.md            colour, type scale, spacing, radius, shadow, grid (measured values)
  06-components.md               every component with exact specs and states
  07-page-blueprints.md          4 full page blueprints, section by section
  08-motion.md                   timing, easing, scroll choreography, reduced motion
  09-copywriting.md              voice, headline formulas, label system, examples
  10-build-figma.md              Figma file setup, styles, layers, export
  11-build-framer.md             Framer setup, effects, scroll transforms, CMS, template packaging
  12-build-nextjs.md             Next.js + Tailwind + Framer Motion implementation
  13-qa-checklist.md             pre-ship checklist
assets/
  tokens.css                     CSS variables for both variants
  tailwind.preset.js             Tailwind preset
  halftone.css                   halftone + paper + data-texture utilities
  components/                    React + Tailwind components
examples/
  landing.html                   single-file demo page (no external images needed)