# Classical Collage Web Design Use when designing or building a website, landing page, Framer template, pitch visual or brand system in the "classical painting × modern tech" art direction (Renaissance / neoclassical oil paintings and marble ruins combined with laptops, phones, coins and quiet product UI, as on the Aureon fintech page and contralabs.com). Covers art direction, metaphor selection, image sourcing and AI prompts, halftone and texture techniques, exact design tokens, components, page blueprints, motion, copy voice, and Figma / Framer / Next.js build steps. Claude skill from Creative UI. Docs: https://ui.krutikraut.com/docs/classical-collage-web-design ## Installation ```bash npx shadcn@latest add @creative-ui/classical-collage-web-design ``` On an older shadcn CLI, use the URL: `npx shadcn@latest add https://ui.krutikraut.com/r/classical-collage-web-design.json` Files go into `.claude/skills/classical-collage-web-design/`. This skill includes reference code that imports clsx, motion, next. Those files have type-checking and lint turned off, so they won't break your project. To use one in your app, install its packages and delete the header at the top of the file. ## Skill files ### .claude/skills/classical-collage-web-design/SKILL.md ````md --- name: classical-collage-web-design description: Use when designing or building a website, landing page, Framer template, pitch visual or brand system in the "classical painting × modern tech" art direction (Renaissance / neoclassical oil paintings and marble ruins combined with laptops, phones, coins and quiet product UI, as on the Aureon fintech page and contralabs.com). Covers art direction, metaphor selection, image sourcing and AI prompts, halftone and texture techniques, exact design tokens, components, page blueprints, motion, copy voice, and Figma / Framer / Next.js build steps. --- # 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: | Variant | Reference | Mood | Best for | |---|---|---|---| | **Warm / "Aureon"** | Aureon fintech landing page (Figma concept) | Sepia, ochre, antique gold, marble cream | Fintech, payments, wealth, legal, real estate, luxury, hospitality | | **Cool / "Contra"** | contralabs.com (built in Framer) | Deep teal + mint with saturated reds/golds in the paintings | AI, research, creative tools, dev tools, agencies, education | --- ## 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 ``` 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) ``` ```` ### .claude/skills/classical-collage-web-design/assets/components/ChipTestimonial.tsx ```tsx /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. 'use client'; import { motion } from 'motion/react'; /** Contra-style testimonial: paint-chip bands sliding in, then a mint quote card. */ export function ChipTestimonial({ quote, name, role }: { quote: string; name: string; role: string }) { const chips = ['bg-chip-1', 'bg-chip-2', 'bg-chip-3', 'bg-chip-4']; return (
{chips.map((c, i) => ( ))}
“{quote}”
— {name}, {role}
); } ``` ### .claude/skills/classical-collage-web-design/assets/components/DataTexture.tsx ```tsx /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. /** Faint monospace "system text" behind a hero (Aureon signature). Server component. */ const TOKENS = { finance: ['SETTLEMENT_STATUS: COMPLETE', 'TXN_ID 0x8F2C7A91', 'API_RESPONSE 200 OK', 'LEDGER_SYNC OK', 'FX_RATE USD/EUR 0.9213', 'ENCRYPTION AES-256', 'NODE FRA-02', 'LATENCY 12MS', 'BALANCE_CHECK PASSED', 'AMOUNT 248,560.00', 'NETWORK GLOBAL', 'KYC VERIFIED'], ai: ['EVAL_RUN 2041', 'PREF_SCORE 0.82', 'TOKENS 4,096', 'RATER_ID R-1182', 'MODEL_A WIN', 'TRAJECTORY_LEN 312', 'DATASET IMAGE/VIDEO', 'AGREEMENT 0.91', 'STATUS COMPLETE', 'SEED 7731', 'LATENCY 840MS', 'BENCHMARK V3'], }; function seeded(n: number) { let s = n; return () => (s = (s * 9301 + 49297) % 233280) / 233280; } export function DataTexture({ kind = 'finance', rows = 48 }: { kind?: keyof typeof TOKENS; rows?: number }) { const rand = seeded(42); const list = TOKENS[kind]; const lines = Array.from({ length: rows }, () => Array.from({ length: 8 }, () => list[Math.floor(rand() * list.length)] + ' '.repeat(2 + Math.floor(rand() * 6))).join(''), ); return
{lines.join('\n')}
; } ``` ### .claude/skills/classical-collage-web-design/assets/components/Eyebrow.tsx ```tsx /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. import clsx from 'clsx'; /** Category label. `slashes` adds the warm-variant "// " prefix and mono styling. */ export function Eyebrow({ children, slashes = false, className }: { children: React.ReactNode; slashes?: boolean; className?: string }) { return (

{slashes && '// '}{children}

); } ``` ### .claude/skills/classical-collage-web-design/assets/components/FeatureCardStack.tsx ```tsx /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. 'use client'; import Image from 'next/image'; import Link from 'next/link'; import { useRef } from 'react'; import { motion, useScroll, useTransform, useReducedMotion } from 'motion/react'; export type Feature = { eyebrow: string; title: string; description?: string; href?: string; image: { src: string; alt: string }; widget?: React.ReactNode }; /** Sticky stacking painting cards (Contra "ecosystem"). */ export function FeatureCardStack({ items }: { items: Feature[] }) { return (
{items.map((f, i) => )}
); } function Card({ f, i, last }: { f: Feature; i: number; last: boolean }) { const ref = useRef(null); const reduce = useReducedMotion(); const { scrollYProgress } = useScroll({ target: ref, offset: ['start start', 'end start'] }); const scale = useTransform(scrollYProgress, [0, 1], [1, last || reduce ? 1 : 0.96]); const opacity = useTransform(scrollYProgress, [0, 1], [1, last || reduce ? 1 : 0.85]); return (
{f.image.alt}

{f.eyebrow}

{f.widget &&
{f.widget}
}

{f.title}

{(f.description || f.href) && (
{f.description &&

{f.description}

} {f.href && Learn more}
)}
); } ``` ### .claude/skills/classical-collage-web-design/assets/components/FloatingCoins.tsx ```tsx /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. 'use client'; import Image from 'next/image'; import { motion, useMotionValue, useSpring, useTransform, useReducedMotion } from 'motion/react'; type Coin = { src: string; x: string; y: string; size: number; rotate: number; delay: number; depth: number }; /** Cut-out objects (coins) that float slowly and follow the pointer slightly. */ export function FloatingCoins({ coins }: { coins: Coin[] }) { const reduce = useReducedMotion(); const mx = useMotionValue(0), my = useMotionValue(0); const sx = useSpring(mx, { stiffness: 40, damping: 20 }), sy = useSpring(my, { stiffness: 40, damping: 20 }); return (
{ const r = e.currentTarget.getBoundingClientRect(); mx.set((e.clientX - r.left) / r.width - 0.5); my.set((e.clientY - r.top) / r.height - 0.5); }} > {coins.map((c, i) => (
))}
); } function Parallax({ sx, sy, depth, style, children }: any) { const x = useTransform(sx, (v: number) => v * depth * 24); const y = useTransform(sy, (v: number) => v * depth * 24); return {children}; } ``` ### .claude/skills/classical-collage-web-design/assets/components/Hero.tsx ```tsx /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. import Image from 'next/image'; import { Eyebrow } from './Eyebrow'; import { PillButton } from './PillButton'; import { Reveal } from './Reveal'; import { DataTexture } from './DataTexture'; type HeroProps = { layout?: 'editorial' | 'stage'; eyebrow?: string; lines: string[]; // headline lines, e.g. ["Money moves.", "The future begins here."] lead: string; primary: { label: string; href: string }; secondary?: { label: string; href: string }; art: { src: string; alt: string }; dataTexture?: 'finance' | 'ai'; children?: React.ReactNode; // e.g. or cut-out hands }; export function Hero({ layout = 'editorial', eyebrow, lines, lead, primary, secondary, art, dataTexture, children }: HeroProps) { const stage = layout === 'stage'; return (
{dataTexture && } {!stage && (
{art.alt}
)} {children}
{eyebrow && {eyebrow}}

{lines.map((l, i) => {l})}

{lead}
{primary.label} {secondary && {secondary.label}}
); } ``` ### .claude/skills/classical-collage-web-design/assets/components/PillButton.tsx ```tsx /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. import clsx from 'clsx'; import Link from 'next/link'; type Variant = 'primary' | 'secondary' | 'small' | 'onDark'; const styles: Record = { primary: 'h-12 px-6 text-base bg-ink text-bg', secondary: 'h-12 px-6 text-base bg-transparent text-ink border border-ink-25', small: 'h-9 px-4 font-mono text-[11px] tracking-[.08em] uppercase bg-ink text-bg', onDark: 'h-12 px-6 text-base bg-bg text-ink', }; /** Pill button with the "label roll" hover (text slides up, duplicate enters from below). */ export function PillButton({ href, children, variant = 'primary', dot = variant === 'small', className, }: { href: string; children: React.ReactNode; variant?: Variant; dot?: boolean; className?: string }) { return ( {dot && } {children} {children} ); } ``` ### .claude/skills/classical-collage-web-design/assets/components/Reveal.tsx ```tsx /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. 'use client'; import { motion, useReducedMotion } from 'motion/react'; const ease = [0.22, 1, 0.36, 1] as const; /** Fade-up reveal. Wrap headline lines individually and pass index for stagger. */ export function Reveal({ children, index = 0, y = 20, className }: { children: React.ReactNode; index?: number; y?: number; className?: string }) { const reduce = useReducedMotion(); return ( {children} ); } ``` ### .claude/skills/classical-collage-web-design/assets/components/ScrollStory.tsx ```tsx /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. 'use client'; import Image from 'next/image'; import { useRef } from 'react'; import { motion, useScroll, useTransform, useReducedMotion, MotionValue } from 'motion/react'; type Thumb = { src: string; x: string; y: string; w: number; speed: number }; /** Calm, tall section: serif lines appear one after another while thumbnails drift. */ export function ScrollStory({ lines, thumbs }: { lines: string[]; thumbs: Thumb[] }) { const ref = useRef(null); const reduce = useReducedMotion(); const { scrollYProgress } = useScroll({ target: ref, offset: ['start start', 'end end'] }); if (reduce) { return (
{lines.map((l) =>

{l}

)}
); } return (
{thumbs.map((t, i) => )}
{lines.map((l, i) => )}
); } function Line({ text, i, n, p }: { text: string; i: number; n: number; p: MotionValue }) { const s = i / n, e = (i + 1) / n; const opacity = useTransform(p, [s, s + 0.08, e - 0.04, e + 0.04], [0, 1, 1, i === n - 1 ? 1 : 0.2]); const y = useTransform(p, [s, s + 0.08, e + 0.04], [40, 0, i === n - 1 ? 0 : -40]); return ( {text} ); } function DriftThumb({ t, p }: { t: Thumb; p: MotionValue }) { const y = useTransform(p, [0, 1], [200 * t.speed, -400 * t.speed]); const scale = useTransform(p, [0, 1], [0.9, 1.05]); return ( ); } ``` ### .claude/skills/classical-collage-web-design/assets/components/StatBlock.tsx ```tsx /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. 'use client'; import { useEffect, useRef, useState } from 'react'; import { animate, useInView, useReducedMotion } from 'motion/react'; /** Huge serif number that counts up on enter, with a small caps caption. */ export function StatBlock({ value, prefix = '', suffix = '', decimals = 0, label }: { value: number; prefix?: string; suffix?: string; decimals?: number; label: string }) { const ref = useRef(null); const inView = useInView(ref, { once: true, amount: 0.5 }); const reduce = useReducedMotion(); const [n, setN] = useState(reduce ? value : 0); useEffect(() => { if (!inView || reduce) return; const c = animate(0, value, { duration: 1.2, ease: [0.22, 1, 0.36, 1], onUpdate: setN }); return () => c.stop(); }, [inView, reduce, value]); return (

{prefix}{n.toFixed(decimals)}{suffix}

{label}

); } ``` ### .claude/skills/classical-collage-web-design/assets/CREDITS.template.md ```md # Image Credits | File | Source | ID / URL | Licence | Edits | |---|---|---|---|---| | feature-scales-cool@2x.webp | AI-generated (tool, date) | prompt in /prompts/scales.txt | Commercial OK per tool ToS | cut-out, cool grade | | hero-figure-cool@2x.webp | The Met Open Access | 436xxx | CC0 | crop, halftone laptop added, grade | ``` ### .claude/skills/classical-collage-web-design/assets/halftone.css ```css /* Texture + halftone utilities */ /* Paper with dot grid */ .paper-dots { background-color: var(--bg); background-image: radial-gradient(var(--ink-06) 1px, transparent 1px); background-size: 24px 24px; } /* Film grain overlay — add
as a fixed layer */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .05; background-image: url("data:image/svg+xml;utf8,"); } /* Flat halftone fill — apply to an element shaped like the object (clip-path / SVG mask) */ .halftone { background: #111; -webkit-mask-image: radial-gradient(circle at center, #000 38%, transparent 42%); mask-image: radial-gradient(circle at center, #000 38%, transparent 42%); -webkit-mask-size: 6px 6px; mask-size: 6px 6px; } /* Tonal halftone: dots fade along a gradient (light → dark) */ .halftone-tonal { position: relative; background: #111; -webkit-mask-image: radial-gradient(circle at center, #000 38%, transparent 42%), linear-gradient(135deg, transparent 0%, #000 70%); -webkit-mask-size: 6px 6px, 100% 100%; -webkit-mask-composite: source-in; mask-image: radial-gradient(circle at center, #000 38%, transparent 42%), linear-gradient(135deg, transparent 0%, #000 70%); mask-size: 6px 6px, 100% 100%; mask-composite: intersect; } /* Square-dot cloud around a hero subject (Contra) */ .dot-cloud { background-image: radial-gradient(var(--tint-1) 2.5px, transparent 3px); background-size: 10px 10px; -webkit-mask-image: radial-gradient(ellipse at 70% 60%, #000 0%, transparent 60%); mask-image: radial-gradient(ellipse at 70% 60%, #000 0%, transparent 60%); opacity: .7; } /* Data-text texture container */ .data-texture { position: absolute; inset: 0; overflow: hidden; pointer-events: none; font-family: var(--font-mono); font-size: 10px; line-height: 1.9; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); opacity: .07; white-space: pre; user-select: none; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); } /* Scrim for captions on paintings */ .scrim-bottom::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%); } /* Floating dark UI widget */ .ui-widget { background: color-mix(in srgb, var(--ui-dark) 94%, transparent); color: #F5F5F2; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: var(--shadow-float); font-family: var(--font-sans); } ``` ### .claude/skills/classical-collage-web-design/assets/tailwind.preset.js ```js /* eslint-disable */ // @ts-nocheck // Reference file from a Claude skill: type-checking and lint are off so it can't break your project. // If you copy it into your app, install the packages it imports and delete these four lines. /** Classical Collage × Modern Tech — Tailwind preset * Requires assets/tokens.css to be loaded (all colours are CSS variables, * so data-variant="warm" | "cool" on re-themes everything). */ module.exports = { theme: { extend: { colors: { bg: 'var(--bg)', surface: 'var(--surface)', ink: 'var(--ink)', 'ink-70': 'var(--ink-70)', 'ink-25': 'var(--ink-25)', 'ink-06': 'var(--ink-06)', accent: 'var(--accent)', 'accent-2': 'var(--accent-2)', tint: { 1: 'var(--tint-1)', 2: 'var(--tint-2)', 3: 'var(--tint-3)' }, 'section-dark': 'var(--section-dark)', footer: 'var(--footer)', 'ui-dark': 'var(--ui-dark)', chip: { 1: 'var(--chip-1)', 2: 'var(--chip-2)', 3: 'var(--chip-3)', 4: 'var(--chip-4)', 5: 'var(--chip-5)' }, positive: 'var(--positive)', negative: 'var(--negative)', }, fontFamily: { serif: ['var(--font-serif)'], sans: ['var(--font-sans)'], mono: ['var(--font-mono)'], }, fontSize: { mega: ['var(--fs-mega)', { lineHeight: '1', letterSpacing: '-0.04em' }], 'display-xl': ['var(--fs-display-xl)', { lineHeight: '1', letterSpacing: '-0.04em' }], 'display-l': ['var(--fs-display-l)', { lineHeight: '1', letterSpacing: '-0.04em' }], 'display-m': ['var(--fs-display-m)', { lineHeight: '1', letterSpacing: '-0.05em' }], stat: ['var(--fs-stat)', { lineHeight: '1', letterSpacing: '-0.04em' }], quote: ['var(--fs-quote)', { lineHeight: '1.2', letterSpacing: '-0.01em' }], lead: ['var(--fs-lead)', { lineHeight: '1.3' }], label: ['12px', { lineHeight: '1.2', letterSpacing: '0.06em' }], }, borderRadius: { sm: 'var(--radius-sm)', md: 'var(--radius-md)', lg: 'var(--radius-lg)', pill: 'var(--radius-pill)' }, boxShadow: { float: 'var(--shadow-float)', contact: 'var(--shadow-contact)', panel: 'var(--shadow-panel)' }, transitionTimingFunction: { 'out-quint': 'cubic-bezier(0.22, 1, 0.36, 1)', 'in-out-cubic': 'cubic-bezier(0.65, 0, 0.35, 1)' }, transitionDuration: { 700: '700ms', 1100: '1100ms' }, maxWidth: { site: 'var(--max-w)' }, spacing: { section: 'var(--section-y)', gutter: 'var(--gutter)' }, keyframes: { float: { '0%,100%': { transform: 'translateY(0) rotate(var(--r,0deg))' }, '50%': { transform: 'translateY(-8px) rotate(calc(var(--r,0deg) + 3deg))' } }, marquee: { from: { transform: 'translateX(0)' }, to: { transform: 'translateX(-50%)' } }, }, animation: { float: 'float 6s ease-in-out infinite', marquee: 'marquee 40s linear infinite' }, }, }, }; ``` ### .claude/skills/classical-collage-web-design/assets/tokens.css ```css /* Classical Collage × Modern Tech — design tokens Set data-variant="cool" (Contra) or "warm" (Aureon) on . */ :root, [data-variant="cool"] { --bg: #FBFAF6; --surface: #FFFFFF; --ink: #2B2B29; --ink-70: rgba(43, 43, 41, .70); --ink-25: rgba(43, 43, 41, .25); --ink-06: rgba(43, 43, 41, .06); --accent: #387478; --accent-2: #317B87; --tint-1: #A5BEBA; /* sage */ --tint-2: #C8E1DD; /* mint */ --tint-3: #E7F2F0; /* mint-50 */ --section-dark: #494444; /* umber */ --footer: #12232A; --ui-dark: #2B2B29; --chip-1: #2B2B29; --chip-2: #918989; --chip-3: #C8BCAE; --chip-4: #918F66; --chip-5: #C8E1DD; } [data-variant="warm"] { --bg: #F2F1EE; --surface: #FFFFFF; --ink: #141414; --ink-70: rgba(20, 20, 20, .62); --ink-25: rgba(20, 20, 20, .22); --ink-06: rgba(20, 20, 20, .06); --accent: #B8893A; --accent-2: #9C7230; --tint-1: #E6D9C2; --tint-2: #EFE7D8; --tint-3: #F7F3EA; --section-dark: #1A1714; --footer: #111214; --ui-dark: #111214; --chip-1: #141414; --chip-2: #8A6A4A; --chip-3: #C9B48F; --chip-4: #7D7350; --chip-5: #E6D9C2; } :root { --positive: #3FB950; --negative: #F85149; --font-serif: "Source Serif 4", "Source Serif 4 Variable", Georgia, serif; --font-sans: "Inter", "GT Standard", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, monospace; --fs-mega: clamp(160px, 38vw, 600px); --fs-display-xl: clamp(44px, 3.4vw + 16px, 96px); --fs-display-l: clamp(36px, 3vw + 14px, 66px); --fs-display-m: clamp(28px, 1.6vw + 18px, 44px); --fs-stat: clamp(56px, 5vw + 20px, 120px); --fs-quote: clamp(30px, 2.2vw + 16px, 56px); --fs-lead: clamp(16px, .5vw + 14px, 22px); --fs-body: 16px; --fs-small: 14px; --fs-label: 12px; --tracking-display: -0.04em; --tracking-card: -0.05em; --tracking-label: 0.06em; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --shadow-float: 0 30px 60px -20px rgba(0, 0, 0, .45); --shadow-contact: 0 12px 24px -12px rgba(43, 43, 41, .35); --shadow-panel: 0 1px 0 rgba(0, 0, 0, .04), 0 20px 40px -24px rgba(0, 0, 0, .18); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 300ms; --dur-base: 700ms; --dur-slow: 1100ms; --section-y: clamp(96px, 10vw, 160px); --gutter: clamp(16px, 4vw, 64px); --max-w: 1360px; } /* Type helpers */ .t-display-xl { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-display-xl); line-height: 1; letter-spacing: var(--tracking-display); text-wrap: balance; } .t-display-l { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-display-l); line-height: 1; letter-spacing: var(--tracking-display); text-wrap: balance; } .t-display-m { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-display-m); line-height: 1; letter-spacing: var(--tracking-card); } .t-stat { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-stat); line-height: 1; letter-spacing: var(--tracking-display); } .t-quote { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-quote); line-height: 1.2; letter-spacing: -0.01em; } .t-lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: 1.3; } .t-label { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-label); line-height: 1.2; letter-spacing: var(--tracking-label); text-transform: uppercase; } .t-mono-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 200ms; --dur-slow: 200ms; } } ``` ### .claude/skills/classical-collage-web-design/examples/landing.html ```html Classical Collage — Demo

Creative infrastructure

Creative intelligence.

A studio and research lab making digital products feel timeless, crafted, and unmistakably yours.

Request partnershipExplore work

Meet the Atelier ecosystem

Four disciplines, one standard of craft. Each card stacks as you scroll.

Comparative model evals

Creative Arena

Industry standard

Benchmarking

Currency
$ USDUS Dollar ✓
€ EUREuro
£ GBPBritish Pound

Private lab benchmarks

Creative preference

Long-horizon workflow capture

Trajectories & environments

Built on real-world creative expertise

Atelier taps a vetted network of practicing professionals

With real market experience

“Replace this with a real, approved client quote about a specific result.”
— Full Name, Role at Company

Connecting with the missing signal: taste

Graphic designersProduct designersEngineersContent creatorsVideo editors

0

creative experts

0

skills and tools

0

verified earnings

Execution is free.
Now, judgment is everything.

Move beyond templates and uncover the qualitative signals that shape preference.

Get in touch
``` ### .claude/skills/classical-collage-web-design/LICENSE ```registry/skills/classical-collage-web-design/LICENSE MIT License Copyright (c) 2026 Krutik Raut Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` ### .claude/skills/classical-collage-web-design/references/01-art-direction.md ````md # 01 — Art Direction ## The concept in one sentence > **Timeless authority meets modern capability.** The paintings say "this is trustworthy, cultured and enduring", and the modern object in the painting says "and it works today". The style borrows the cultural weight of museum art (Renaissance, Baroque, neoclassical and 19th-century academic painting, Greco-Roman sculpture and architecture) and uses it as a premium brand language for technology. It works because tech brands usually look interchangeable (gradients, 3D blobs, isometric illustrations), while an oil painting of a robed figure typing on a laptop is instantly memorable. ## Why it converts - **Pattern interrupt:** it looks nothing like the category, so people stop scrolling. - **Borrowed trust:** classical art suggests permanence, craft and seriousness, which helps money, AI and B2B sell. - **Literal metaphors make abstract products concrete:** "evaluation" is hard to picture, but golden scales are easy. - **Quiet UI makes the product look simple and premium.** --- ## Choosing the variant | Question | Warm / Aureon | Cool / Contra | |---|---|---| | What does the product touch? | Money, assets, property, physical goods | Data, models, code, creativity, research | | Desired emotion | Security, wealth, stability, heritage | Intelligence, curiosity, taste, the frontier | | Audience | Finance teams, consumers with money, luxury buyers | Builders, researchers, designers, AI labs | | Dominant art | Ruins, columns, gold coins, marble, warm landscapes | Portraits, crowds, scholars, armour, instruments | | Background | Warm paper `#F2F1EE`, white cards | Off-white `#FBFAF6`, teal/mint sections | | UI dark tone | True near-black `#111214` | Warm charcoal `#2B2B29` | If unsure, ask the user one question: *"Should it feel like old money (warm) or a modern research lab (cool)?"* ### Hybrid rules You may borrow **techniques** across variants (e.g. halftone on a warm site), but **never palettes**. Pick one palette for the whole site. --- ## Mood keywords **Warm:** sun-bleached, marble, ochre, terracotta, gilded, ruins at golden hour, Mediterranean, heritage, vault, keystone. **Cool:** museum-at-night, verdigris, patina, teal velvet, scholar's study, gallery wall, academy, laboratory, salon. --- ## Art-period palette | Period / source | Typical use | |---|---| | Greek & Roman sculpture, ruins and temples | Foundation, structure, permanence (warm) | | Italian Renaissance portraits (1450–1550) | Hero figures, faces in profile, laurel crowns | | Baroque (Caravaggio-style chiaroscuro) | Drama, focus, single-subject cards | | Dutch Golden Age still life | Craft, abundance, objects, "tools of the trade" | | Neoclassical / 19th-century academic painting | Clean draped figures, white gowns, crowds in togas (both variants) | | Pompeii frescoes | Texture backgrounds, warm section breaks | | Classical landscapes (Claude Lorrain-style) | Calm card backgrounds behind floating UI | --- ## Composition principles 1. **Subject placement.** The figure usually sits on the right or bottom of the frame and the headline on the top-left. Leave a 40–55% calm area for text. 2. **Cropping.** Crop tight and with confidence: a hand, half a face, a helmet visor. Close crops feel editorial; whole scenes feel like stock. 3. **Edge bleed.** Let hands, drapery or columns enter from outside the frame or cross into the next section. This creates depth and "collage" energy. 4. **Scale contrast.** Pair a huge serif headline with a small figure, or a huge painting with a tiny label. Avoid medium-on-medium. 5. **One focal point per image.** The modern object should be at or near the focal point (the laptop on the lap, the coin between the fingers). 6. **Direction of gaze and gesture** should point toward the headline or CTA. --- ## Art direction brief template Fill this in for each section before sourcing or generating images: ``` Section: [e.g. Feature 2 – Benchmarking] Headline: [e.g. "The industry standard for measuring creative AI"] Core idea: [evaluation, fairness] Metaphor: [golden balance scales] Modern element: [none / halftone laptop on one pan / dark UI card floating] Subject & crop: [scales filling 80% of frame, cropped at top, pans at bottom third] Background: [teal #387478 flat with dot texture] Palette grade: [cool – teal shadows, gold highlights] Text placement: [label top-left, serif title bottom-left, white] Format: [card 16:9 desktop, 4:5 mobile] Source: [AI-generated / Met Open Access ID ####] ``` --- ## Do / Don't summary | Do | Don't | |---|---| | Make one strong image per section | Fill sections with collages of 6 small images (except in a scroll story) | | Use calm, dignified figures | Use memes, jokes, sunglasses on statues or vaporwave | | Use crisp modern UI or halftone tech | Paint the laptop in oil style so it disappears | | Use the same grade across all images | Mix sepia, teal and full-colour images freely | | Use real whitespace | Fill every gap with texture | ```` ### .claude/skills/classical-collage-web-design/references/02-metaphor-bank.md ```md # 02 — Metaphor Bank Every section needs one image that **literally acts out its headline**. Find the core idea of the headline (one or two words), then choose or invent the image. **Formula:** `classical subject` + `the action of the idea` + (optional) `one modern object`. --- ## Universal concepts | Idea | Primary image | Alternative | |---|---|---| | Foundation / building / stability | Hand placing a gold coin as the keystone of a ruined arch | Masons laying marble blocks; Ionic column base | | Trust / security | Bronze shield; vault door in a marble wall | Guard in armour holding a phone | | Access / unlock / onboarding | Ornate gold key | Temple doors opening with light pouring out | | Speed / movement / flow | Hermes/Mercury figure in motion; coins arcing between two hands | Chariot horses; flowing drapery | | Connection / integration | Two hands reaching (Creation of Adam-style, but original) holding phones | Aqueduct linking two cities | | Global / scale | Harbour with ships and temples; celestial globe | Map fresco; ancient astrolabe | | Growth | Olive tree growing from a column; stacked coins rising like steps | Laurel wreath | | Precision / research / detail | Scholar at a microscope or magnifying glass | Astronomer with a brass telescope | | Evaluation / fairness / judgement | Golden balance scales | Judge's laurel; jury of philosophers | | Competition / comparison / arena | Two knights' helmets facing off | Two gladiators; chess on marble | | Crowd / community / network / preference | Dense crowd of robed figures, some on phones | Amphitheatre full of people | | Creativity / craft | Studio with marble bust, brushes, books and a halftone laptop | Sculptor carving a statue | | Intelligence / AI | Philosopher with an open laptop; Athena with an owl | Bust with a halftone circuit pattern on the shadow side | | Simplicity / clarity | Single white marble column against the sky | Woman in a white gown, lots of negative space | | Time / history / longevity | Sundial; hourglass on a ledge | Ruins overgrown with ivy | | Insight / vision | Lighthouse of Alexandria; open eye in clouds | Figure looking through a window to a landscape | | Protection / compliance | Roman shield wall | Gate with columns and guards | | Automation / workflow | Water wheel or aqueduct; clockwork astrolabe | Orderly procession of figures | | Choice / multiple options | Many doors in a colonnade | Fan of playing cards held by a noblewoman | | Feedback / reviews | Orator speaking to a crowd | Senate debate scene | | Launch / new | Ship setting sail from a classical harbour | Dawn over a temple | | Partnership | Two hands shaking over a marble table with coins | Two philosophers in conversation | | Support / help | Hand reaching down from clouds to another hand | Lighthouse in a storm | | Data / storage | Library of scrolls; archive shelves | Clay tablets stacked like servers | | Analytics / dashboards | Astronomer charting stars | Map table with a dark UI card on it | --- ## By industry ### Fintech / payments / banking - **Payments in motion:** coins arcing between two hands holding phones. - **Multi-currency:** classical harbour at dusk with a floating currency-selector UI. - **Investing / markets:** ruins at sunrise with a floating price card ("Stay ahead of every market movement"). - **Savings:** coin resting on a column capital like a sculpture. - **Cards:** a noble figure holding a metal card like a relic. - **Fraud protection:** a centurion standing guard before a vault door. - **Payouts / global teams:** a merchant ship loaded with gold amphorae. - **Stats:** coin on a pedestal next to huge serif numbers. ### AI / ML / data - **Evaluation:** golden scales. - **Model comparison:** two helmets facing off. - **Human preference / RLHF:** a crowd voting or raising hands. - **Datasets:** a library of scrolls. - **Agents / computer use:** a robed figure at a halftone laptop; hands on a keyboard reaching from both sides of a gilded table. - **Training:** a philosopher teaching students at the Academy. - **Taste / judgement:** a connoisseur with a magnifying glass studying a painting. - **Safety:** a shield and laurel. ### Dev tools / SaaS / B2B - **Infrastructure:** aqueduct. - **APIs / integrations:** two buildings joined by a bridge. - **Deploy / ship:** ship leaving a harbour. - **Monitoring:** lighthouse. - **Collaboration:** a group of philosophers around a table with a laptop. - **Docs:** a scholar writing on a scroll next to a laptop. - **Speed / performance:** Mercury mid-flight. - **Scaling:** a column multiplied into a colonnade. ### Agency / creative studio / portfolio - **Craft:** sculptor's studio. - **Strategy:** a general over a map table. - **Brand:** a signet ring pressing a wax seal. - **Web design:** an architect with a compass over a halftone laptop. - **Video / motion:** a fresco frieze in sequence. - **Results:** laurel wreath plus big serif stats. - **Team:** a row of busts, each a team member (with tasteful, consented portrait edits only). ### D2C / consumer / product brands - **Quality / heritage:** product on a marble plinth in a museum vitrine. - **Ingredients:** a Dutch still-life arrangement with the product among fruit. - **Gifting:** a figure offering the product with both hands. - **Community:** a festive crowd scene. - **Craftsmanship:** an artisan workshop. - **Packaging reveal:** a statue unveiling, with drapery pulled away. ### Hospitality / real estate / legal / education - **Resort / hotel:** a classical villa garden with a pool and a dark booking-widget card. - **Property:** an architect's plan on marble. - **Legal:** Lady Justice (original rendering), columns and a gavel. - **Education:** School of Athens-style group (original composition). --- ## Inventing new metaphors 1. Write the headline. 2. Circle the verb or noun that carries the value (e.g. "*unify* your finances"). 3. Ask: **"How would a 17th-century painter show this?"** (unify → hands binding a bundle of rods; many streams joining one river). 4. Ask: **"Where does the modern object go?"** (the river flows into a phone screen; a halftone laptop sits on the riverbank). 5. Check it can't be swapped with another section's image. ``` ### .claude/skills/classical-collage-web-design/references/03-imagery-and-prompts.md ````md # 03 — Imagery: Sourcing, AI Prompts and Grading ## 1. Legal sourcing (always first) **Allowed:** - **Public-domain museum collections (CC0):** Metropolitan Museum Open Access, Rijksmuseum (Rijksstudio), Art Institute of Chicago, National Gallery of Art (Washington), Smithsonian Open Access, Paris Musées, Statens Museum for Kunst, Cleveland Museum of Art, Wikimedia Commons (check that each file is PD). - **Original AI-generated images** made from your own prompts with a tool whose licence allows commercial use (Midjourney paid plans, Adobe Firefly, Flux Pro, Ideogram, Google Imagen, OpenAI image generation, etc.). - **Your own photos of statues/architecture** (check museum photo policies). **Not allowed:** - Images taken from contralabs.com, the Aureon shot or any other reference site - Prompts naming living artists ("in the style of [living artist]") - Recognisable copyrighted characters, logos or modern artworks - Photos of real people composited into paintings without consent Keep a `CREDITS.md` with each asset's source, ID, licence and any edits. --- ## 2. AI prompt system ### Base prompt structure ``` [SUBJECT + ACTION], [MODERN OBJECT if any], [PERIOD STYLE], [MEDIUM + TEXTURE], [LIGHTING], [PALETTE], [COMPOSITION + CROP], [BACKGROUND], [QUALITY TAGS] ``` ### Style blocks (copy as is) **Period style** - `19th-century academic oil painting, neoclassical` - `Italian Renaissance portrait, tempera and oil` - `Baroque oil painting, dramatic chiaroscuro` - `Dutch Golden Age still life painting` - `Pompeii fresco, aged plaster` **Medium + texture** - `visible brushwork, fine canvas texture, subtle craquelure, museum quality` **Lighting** - Warm: `soft golden-hour light from the left, gentle shadows` - Cool: `soft north-window light, deep shadows, rich highlights` **Palette** - Warm: `palette of ochre, terracotta, sienna, cream marble and antique gold` - Cool: `deep teal background, rich vermilion red, gold leaf, ivory skin tones` **Background for cut-outs:** `isolated on plain light grey background` or `plain flat teal background` **Quality / negative:** `no text, no watermark, no frame, no modern clothing, anatomically correct hands` ### Modern object handling AI tends to paint the laptop in oil style. Two approaches: 1. **Generate with the object**, then replace it in Figma/Photoshop with a halftone or crisp UI version (best result). 2. **Generate without the object**, with the pose set up for it ("hands resting as if typing on a laptop on her lap"), then composite the object yourself. ### Ready prompts — warm variant 1. **Hero coins:** `Carved stone gold coin with an embossed dollar sign, aged gold and marble texture, slight chips on the edge, 3D render, soft studio light, isolated on light grey background, no text` (generate 6–8 at different angles) 2. **Keystone:** `Close-up of an elegant hand in a red draped sleeve placing a gold coin at the top of a ruined stone arch, neoclassical oil painting, warm golden light, ochre and sienna palette, ruins of sandstone blocks, plain light background, visible brushwork` 3. **Scholar with laptop:** `Young Roman man with a gold laurel crown seen from behind over his shoulder, wearing a draped terracotta and grey toga, sitting and looking down at a laptop on his lap, 19th-century academic oil painting, warm light, plain light background` 4. **Column pedestal:** `Single Ionic marble column capital used as a pedestal, weathered marble, soft shadow, isolated on light grey, photorealistic sculpture photo` 5. **Harbour card bg:** `Calm classical Mediterranean harbour at dusk with temples on the shore and sailing ships, Claude Lorrain-style landscape oil painting, hazy golden light, lots of calm sky on the left` 6. **Ruins card bg:** `Ancient temple ruins at sunrise with tall cypress trees, warm hazy light, classical landscape oil painting, calm area in the centre` 7. **Two hands exchange:** `Two hands reaching toward each other from left and right, each holding a modern smartphone, draped classical sleeves in blue and red, neoclassical oil painting, plain light background, wide composition` 8. **Key:** `Ornate antique gold key with a laurel pattern, Baroque oil still life, isolated on cream background` ### Ready prompts — cool variant 1. **Hero figure:** `Woman in a flowing ivory silk gown reclining, hands resting on a laptop on her lap, blonde hair in a classical updo, 19th-century academic oil painting, soft light, cream and pearl tones, plain light background, cropped at the shoulder on the right` 2. **Helmets:** `Two ornate gold and green Renaissance knights' helmets facing each other in profile, Baroque oil painting, deep teal background, gold leaf highlights` 3. **Scales:** `Ornate golden balance scales with a dark green liquid in one pan, oil painting, deep teal background, cropped close` 4. **Crowd:** `Dense crowd of figures in colourful headscarves and robes, red, ivory, teal and ochre, seen from behind facing a neoclassical building, 19th-century oil painting, teal sky` 5. **Microscope:** `Young scholar with curly hair looking into a brass microscope, white shirt, Baroque oil painting, deep teal background, chiaroscuro` 6. **Crowd with phones:** `Group of young Renaissance women and men with gold hair ribbons in red, blue and sage robes looking down at smartphones, academic oil painting, deep blue background` 7. **Studio still life:** `Scholar's shelf with old leather books, a white marble bust, a brush jar, an open book and a closed laptop, teal velvet curtains, Dutch Golden Age still life painting` 8. **Small thumbnails:** generate a series of 8–12 single figures (reading, typing, sitting on a ledge, holding a phone) on flat teal or blue backgrounds, portrait 3:4. --- ## 3. Cut-out and clean-up 1. Remove the background (Figma "Remove background", Photoshop Select Subject, or remove.bg). 2. Refine the edges: 0.5–1px feather and no halo. Painted edges can stay slightly soft. 3. Fix hands and fingers (the most common AI flaw). Use inpainting or crop the hands out. 4. Remove stray text or signatures. 5. Export the master at 2× size. --- ## 4. Colour grading (makes the collage feel like one world) ### Warm grade (Lightroom / Photoshop / Figma) - White balance: +8 to +15 warmth - Highlights: tint toward `#F3E6CC`; shadows toward `#3B2A1C` - Saturation −10, vibrance +5 - Gentle S-curve and lifted blacks (output black ≈ 18) - Optional grain 4–6% ### Cool grade - Keep skin and reds saturated, and pull the backgrounds to teal `#387478` - Shadows toward `#12302F`, highlights neutral-cream `#F5EFE2` - HSL: aqua/blue hue −5 and saturation −10, red saturation +5 - Grain 3–5% ### Figma-only grade Place a solid layer above the image: - Warm: `#C89B5A` at 12–18%, blend **Color** or **Soft light** - Cool: `#2F6B6B` at 10–15%, blend **Color** (mask the skin if needed) --- ## 5. Export specs | Use | Desktop size | Mobile crop | Format | Target weight | |---|---|---|---|---| | Hero artwork | 2400px wide | 4:5 | AVIF + WebP fallback | ≤ 250 KB | | Feature card | 1920×1080 | 4:5 (1080×1350) | AVIF/WebP | ≤ 180 KB | | Thumbnail | 600×800 | same | WebP | ≤ 50 KB | | Cut-out object (coin, hand) | 1200px | same | WebP with alpha / PNG | ≤ 120 KB | | Texture tiles | 256×256 | same | PNG/SVG | ≤ 10 KB | Always provide `alt` text that describes the scene *and* the metaphor ("Golden balance scales — evaluation"). ```` ### .claude/skills/classical-collage-web-design/references/04-techniques.md ````md # 04 — Signature Techniques Five techniques give this style its look. Use 2–3 per site, not all five everywhere. --- ## 1. Halftone tech overlay (Contra signature) Modern objects (laptop, phone, tablet) are drawn as **black-and-white dot halftone**, so they look printed or stamped onto the oil painting. The halftone stays clearly modern and graphic while sitting naturally inside the painted scene. **Specs** - Dot pitch: 4–7px at 1×, round dots - Colours: black dots `#111` on white highlights, or white dots on a dark object - Keep a sparkle/logo mark on the lid as a solid white shape (Contra uses a 4-point star) - The halftone edge is crisp and follows the object's perspective **Figma method** 1. Draw or trace the laptop as a vector shape in perspective. 2. Fill it with an image of a grayscale gradient or a photo of a laptop. 3. Run a halftone plugin ("Halftone", "Dither", "Pixelify"). Alternatively, fill it with a dot pattern (an image fill of a dot tile, set to Tile) and mask with the shape. 4. Place it above the painting with Normal blend. Add a soft contact shadow under it (black at 15%, blur 20). **Photoshop method:** Filter → Pixelate → Color Halftone (radius 6, all channels 45°), then Image → Mode → Grayscale and Threshold. **CSS method** (see `assets/halftone.css`): ```css .halftone { background: #111; -webkit-mask-image: radial-gradient(circle at center, #000 38%, transparent 42%); -webkit-mask-size: 6px 6px; mask-image: radial-gradient(circle at center, #000 38%, transparent 42%); mask-size: 6px 6px; } ``` To give the halftone tonal depth, layer two masks or use an SVG `` with dot radius driven by a gradient. **Dot cloud transition:** Contra also scatters halftone dot clusters (light teal/grey squares of 6–8px) around the hero subject, fading into the paper. Build these with a dot-grid SVG that has a radial mask. --- ## 2. Data-text texture (Aureon signature) A faint layer of monospace "system text" behind the hero suggests infrastructure without showing UI. **Content:** fake but believable tokens, e.g. `SETTLEMENT_STATUS: COMPLETE`, `TXN_ID 0x8F2C...`, `API_RESPONSE 200 OK`, `LATENCY 12ms`, `LEDGER_SYNC`, `FX_RATE USD/EUR 0.9213`, `ENCRYPTION AES-256`, `NODE: FRA-02`. For AI products use `EVAL_RUN`, `PREF_SCORE 0.82`, `TOKENS 4,096`. **Specs** - Font: mono, 9–11px, uppercase, tracking +0.06em - Colour: ink at **5–8% opacity**; occasionally highlight one word ("COMPLETE") at 20% - Layout: dense rows with random spacing that fill the hero, masked by a radial gradient so they fade at the edges - Never let it compete with the headline. If you notice it at first glance, it is too strong. **Implementation:** generate about 60 lines in JS, or bake them into an SVG background. See `DataTexture.tsx`. --- ## 3. Paper and dot grid The off-white background is never flat. Use one of: - **Dot grid:** 1px dots, 24px pitch, ink at 4–6% opacity - **Noise/grain:** an SVG feTurbulence at 3–4% opacity - **Paper fibre:** a subtle scanned paper texture at 5% (warm variant) ```css .paper-dots { background-color: var(--bg); background-image: radial-gradient(rgba(43,43,41,.06) 1px, transparent 1px); background-size: 24px 24px; } ``` --- ## 4. Cut-out collage Cut-out painted elements (hands, drapery, columns, coins, busts) sit on the clean background and break the grid. **Rules** - Elements **enter from the frame edge** (a hand from the right, drapery from the bottom). - They may **overlap section boundaries** by 40–120px for depth (use `z-index` and negative margins). - Add a **soft contact shadow** only where an object touches a surface (coin on a column). - At most one large cut-out per viewport, plus small floating items (coins). - Floating items get slightly different rotations (−20° to +25°) and sizes (60–140px) and float slowly. --- ## 5. Painting + floating UI card A full-bleed painting is the card background, and a small **dark product widget** floats on it. **Specs** - Card radius 12–16px; image `object-fit: cover` - Widget: background `#111214` at 92–96%, radius 10–12px, 1px border `rgba(255,255,255,.08)`, shadow `0 30px 60px -20px rgba(0,0,0,.5)` - Widget content: ONE idea (currency list, price ticker, balance). Mono for figures, grotesk for labels; use green `#3FB950` / red `#F85149` sparingly for deltas. - Caption bottom-left in serif, white, 20–28px, with a mono eyebrow above it at 60% opacity - Add a bottom gradient `linear-gradient(to top, rgba(0,0,0,.45), transparent 45%)` so the caption is readable --- ## 6. Huge-word typography (Contra extra) Contra sets single words ("The", "Network") at **~300–600px** in the display serif as a scroll-driven background element, scaled and translated as the section passes. Use it once per site at most, for the manifesto moment. --- ## 7. Paint-chip strip (Contra extra) The testimonial is decorated with vertical bands in muted colours (charcoal `#2B2B29`, mauve `#918989`, sand `#C8BCAE`, olive `#918F66`, mint `#C8E1DD`), stacked like paint samples, with the quote card as the last, widest chip. Animate the bands sliding in one after another. ```` ### .claude/skills/classical-collage-web-design/references/05-design-tokens.md ```md # 05 — Design Tokens The cool-variant values were **measured from contralabs.com** (computed styles, Oct 2026). The warm-variant values were **sampled from the Aureon design**. Free font alternatives are listed alongside the originals. --- ## Colour ### Cool / Contra (measured) | Token | Hex | Use | |---|---|---| | `--bg` | `#FBFAF6` | Page background, light button bg, text on dark | | `--ink` | `#2B2B29` | Text, primary button, nav pill | | `--ink-70` | `rgba(43,43,41,.70)` | Secondary text | | `--ink-25` | `rgba(43,43,41,.25)` | Borders, outline buttons | | `--teal` | `#387478` | Primary accent, card backgrounds behind paintings, "missing signal" section | | `--teal-2` | `#317B87` | Hover/variation | | `--sage` | `#A5BEBA` | Logo ribbon, section bg ("ecosystem"), stat cards | | `--mint` | `#C8E1DD` | Soft section bg, quote card | | `--mint-50` | `#E7F2F0` | Lightest tint, hover fills | | `--umber` | `#494444` | Dark section ("Execution is free") | | `--deep` | `#12232A` | Footer (approximately) | | chips | `#2B2B29` `#918989` `#C8BCAE` `#918F66` `#C8E1DD` | Paint-chip testimonial strip | ### Warm / Aureon (sampled) | Token | Hex | Use | |---|---|---| | `--bg` | `#F2F1EE` | Page background | | `--surface` | `#FFFFFF` | Cards, stat panels | | `--ink` | `#141414` | Text, buttons | | `--ink-muted` | `#6B6B6B` | Body copy | | `--ink-faint` | `rgba(20,20,20,.06)` | Data texture, dividers | | `--ui-dark` | `#111214` | Product UI panels | | `--ui-dark-2` | `#1B1C1F` | Nested UI surfaces | | `--gold` | `#B8893A` | Sparing accent (icon, focus ring, live dot) | | `--sand` | `#E6D9C2` | Hover tints | | `--positive` | `#3FB950` | UI deltas only | | `--negative` | `#F85149` | UI deltas only | ### Colour rules - Text on paintings is always `--bg`/white with a gradient scrim (≥ 4.5:1 contrast). - A section can switch background (teal/mint/umber) to pace the page. Cool variant: max 3 tinted sections per page. Warm variant: stay on paper plus one dark footer. - The accent never appears in more than ~5% of the UI area. --- ## Typography ### Families | Role | Contra (measured) | Aureon (approx.) | Free alternative | |---|---|---|---| | Display | **Source Serif 4** (variable), 400 | GT Sectra / Canela Light-like high-contrast serif | Source Serif 4, Instrument Serif, Newsreader, Fraunces (opsz 144, wght 300) | | Body / UI | **GT Standard L** Regular / Medium | Neue Haas / Inter-like grotesk | Inter, Geist, Manrope, Hanken Grotesk | | Label / data | GT Standard Medium caps, +0.06em | Mono (JetBrains/Geist Mono) caps | JetBrains Mono, Geist Mono, IBM Plex Mono | ### Type scale — desktop (1440px) | Style | Size / line-height | Tracking | Weight | Notes | |---|---|---|---|---| | Mega word | 300–600px / 1.0 | −0.04em | 400 | Scroll element, once per site | | Display XL (hero) | 64–96px / 1.0 | −0.04em (Contra: −2.56px @ 64px) | 400 (300 if available) | 1–2 lines | | Display L (H2) | 56–66px / 1.0 | −0.04em (Contra: −2.64px @ 66px) | 400 | | | Display M (H3 / card title) | 40–44px / 1.0 | −0.05em (Contra: −2.2px @ 44px) | 400 | Serif card titles | | Stat number | 72–120px / 1.0 | −0.04em | 400 | Serif | | Quote | 40–56px / 1.2 | −0.01em | 400 | Serif | | Lead / sub | 20–22px / 1.3 (Contra 22/28.6) | 0 | 400 | Grotesk, max 46ch | | Body | 16px / 1.5 | 0 | 400 | Grotesk | | Small | 14px / 1.2 (Contra 14/16.8) | −0.01em | 400 | Card descriptions | | Label / eyebrow | 12–14px / 1.2 | +0.06em, UPPERCASE | 500 | Grotesk Medium or mono | | Button | 16px / 24px | +0.01em | 400 | Grotesk | | Micro data | 9–11px | +0.06em caps | 400 | Mono, data texture | ### Type scale — mobile (390px) | Style | Size | |---|---| | Display XL | 44–48px | | Display L | 36–40px | | Display M | 28px | | Stat number | 56px | | Quote | 30–34px | | Lead | 16–18px | | Label | 11–12px | Fluid formula: `font-size: clamp(44px, 3.2vw + 20px, 96px);` ### Type rules - Headlines: 2 lines max in the hero; break lines deliberately ("Money moves. / The future begins here."). - Never set the serif in bold, italic for emphasis, or all caps. - Eyebrows can be prefixed with `// ` (warm, tech-flavoured) or plain caps (cool). - Use `font-feature-settings: "ss01", "kern"` and `text-wrap: balance` on headlines. --- ## Spacing (8pt base) | Token | px | Use | |---|---|---| | `space-1` | 4 | Icon gaps | | `space-2` | 8 | Chip gaps | | `space-3` | 12 | Label → title | | `space-4` | 16 | Mobile gutter, title → body | | `space-6` | 24 | Card padding (mobile), button gap | | `space-8` | 32 | Card padding (desktop) | | `space-12` | 48 | Headline → content | | `space-16` | 64 | Between cards in a stack | | `space-24` | 96 | Section padding (mobile) | | `space-40` | 160 | Section padding (desktop) | | `space-60` | 240 | Scroll-story breathing room | ## Layout grid - Desktop: 12 columns, max width 1280–1360px, gutter 24px, side margin 40–64px - Tablet: 8 columns, margin 32px - Mobile: 4 columns, margin 16–24px - Hero text column: 5–6 of 12 columns, top-left aligned (Contra) or centred (Aureon) - Feature cards: full content width, 16:9 to 2.2:1 on desktop and 4:5 on mobile ## Radius | Token | px | Use | |---|---|---| | `radius-sm` | 6 | Chips, small UI | | `radius-md` | 10–12 | Product widgets, stat cards | | `radius-lg` | 16 | Feature cards, big panels | | `radius-pill` | 999 (Contra buttons: 24px at 48px height) | Buttons, tags, nav | ## Shadow | Token | Value | |---|---| | `shadow-none` | Default. The style is flat. | | `shadow-float` | `0 30px 60px -20px rgba(0,0,0,.45)` for dark UI floating on paintings | | `shadow-contact` | `0 12px 24px -12px rgba(43,43,41,.35)` for coins on columns | | `shadow-panel` | `0 1px 0 rgba(0,0,0,.04), 0 20px 40px -24px rgba(0,0,0,.18)` for white cards on paper (warm) | ## Borders - Hairline: `1px solid rgba(43,43,41,.12)` - Outline button: `1px solid rgba(43,43,41,.25)` - On dark: `1px solid rgba(255,255,255,.08)` ## Z-layers `0 paper texture` → `1 data texture` → `2 painting` → `3 cut-out overlap` → `4 floating UI` → `10 sticky nav` ``` ### .claude/skills/classical-collage-web-design/references/06-components.md ```md # 06 — Components Every component lists its anatomy, specs, states and do/don't. React versions are in `assets/components/`. --- ## Navigation **Contra pattern:** a sage ribbon/bookmark logo hanging from the top-left (48×72px, `--sage` with a notched bottom and a white mark), a dark "Get in touch" pill and a hamburger on the right. The bar is transparent over the hero; once scrolled it becomes `--bg` at 90% with `backdrop-filter: blur(12px)`. **Aureon pattern:** a lowercase wordmark left ("aureon", grotesk 600, 18px), 4 centred text links (Platform, Solutions, Developers, Company, 14px, `--ink` 80%) and two small pills on the right ("Log in" dark, "Contact us" outline). **Specs:** height 64–72px, side padding = grid margin, links 14–15px, gap 32px. Hover: opacity 1 plus a 1px underline offset 4px. **Mobile:** logo + pill CTA + hamburger. The full-screen menu uses `--bg` with Display M serif links stacked. --- ## Buttons | Variant | Spec (Contra measured) | |---|---| | Primary | bg `--ink` `#2B2B29`, text `--bg`, height 48px, padding 12/24px, radius 24px, 16px grotesk | | Secondary | bg `--bg` or transparent, text `--ink`, 1px border `--ink-25`, same size | | Small (Aureon) | height 32–36px, padding 0/16px, 11px **mono caps** +0.08em, leading dot `●` 6px | | On dark | bg `--bg`, text `--ink` | **Hover:** the label slides up and a duplicate slides in from below (Contra duplicates the label text for this roll effect), 300ms ease-out. Background lightens ~6%. **Focus:** 2px outline offset 2px in `--teal` (cool) or `--gold` (warm). **Don't:** use gradients, icons-only buttons or more than 2 buttons per group. --- ## Eyebrow / label - Cool: `PUBLIC LAUNCH-FOCUSED RESEARCH`, 14px grotesk medium, caps, +0.06em, white on cards and ink on paper - Warm: `// MODERN FINANCIAL INFRASTRUCTURE`, 11px mono caps, +0.08em, ink 60% - A small index can precede it: `01 —`, `[02]` --- ## Hero **Anatomy:** eyebrow → headline (Display XL) → lead (1 sentence) → button group → artwork. **Layout A (Contra, editorial left):** text block top-left (cols 1–6), artwork bleeding off the right and bottom edges, figure cropped at the shoulder, halftone laptop, dot cloud. **Layout B (Aureon, centred stage):** headline centred, cut-out hands entering from both sides holding phones, coins arcing overhead, data texture behind, logo strip anchored at the bottom of the hero. **Specs:** min-height 100svh (desktop) / auto (mobile); headline max 14ch per line; 24px between lead and buttons; 12px between buttons. --- ## Logo strip 5–8 client logos, grayscale, `opacity .45`, height 20–24px, gap 56px, optionally a slow marquee (40s loop). Label above: `TRUSTED BY` in eyebrow style. --- ## Intro block ("A new perspective…") Two columns: Display L headline left (cols 1–6), 14px muted paragraph right (cols 9–12, top-aligned). Below it a full-width painting panel (radius 16) with a large dark product screenshot overlapping its bottom edge by 10–20%. --- ## Feature card (painting card) **Anatomy:** painting background → scrim → eyebrow (top-left, 24–32px inset) → serif title (bottom-left, Display M, white) → optional description + "Learn more" link (shown below the card on Contra, or on hover). **Specs:** radius 12–16px, aspect 16:9 desktop / 4:5 mobile, overflow hidden, image scale 1.04 → 1.0 on enter. **Stacking (Contra):** cards are `position: sticky; top: 96px`, each 16–24px lower than the last, so they pile up as you scroll. **Hover:** the image scales to 1.03 over 900ms and the title shifts up 4px. **Variant — split card (Aureon "Global Payments"):** white card, number index top-left, serif title, cut-out object (coin, key) taking 60% of the card. --- ## Floating product widget See technique #5. Common contents: - **Currency list:** rows with flag/symbol, code (mono) and name (muted caps), with a check on the selected row - **Price ticker:** pair tabs (BTC / ETH / SOL), large price in serif or mono, a 2×2 stat grid - **Balance:** "My Portfolio" label, `$12,486.075` with the decimals at 40% opacity, a sparkline Width 260–360px; floats over the painting, offset from the centre toward the calm area. --- ## Stats **Aureon:** a white panel with a coin on a column (left), a serif intro sentence (right), then stacked huge serif numbers (`5M+`, `600K+`) with 10px mono captions (`TRANSACTIONS PROCESSED`). **Contra:** stacked sage/mint cards (radius 12), number in Display M serif and caption in 14px grotesk, on a teal section. Rules: 2–4 stats max, round numbers with `+`/`M`/`K`, and count up on enter (1.2s, ease-out). --- ## Tag chips Outline pills: 1px border `rgba(251,250,246,.5)` on teal (or `--ink-25` on paper), 14px, padding 6/14px, gap 8px, wrapping. Use them to list audiences or skills. --- ## Testimonial - **Contra:** paint-chip bands plus a mint quote card; quote in serif 40–56px with hanging quotes `“ ”` in serif; attribution `— Name, Role at Company` in 18px grotesk. - **Aureon:** a two-card row. Left: a painting crop with a white serif caption ("Trusted by those who move forward"). Right: a white card with a large `“` mark, serif quote 24–28px, muted body, avatar + name + role, prev/next circular arrows and a logo row along the bottom. --- ## Scroll story ("Built on real-world creative expertise") A mostly empty `--bg` section about 300–400vh tall. Three short serif lines (Display M) appear centred one after another; each fades in, holds, then fades to 20% as the next arrives. Small painting thumbnails (80–220px, 3:4) drift at different parallax speeds around the edges. See `08-motion.md`. --- ## Statement band A full-width dark (`--umber` / `--ink`) or teal band with a centred two-line serif statement ("Execution is free. / Now, judgment is everything."), a one-line grotesk sub and a light pill button. Can sit directly under a wide painting with a gilded-frame edge. --- ## Closing CTA Headline left ("Let's build a stronger foundation for your financial future"), 14px sub, small dark pill, and the strongest metaphor image on the right (the keystone hand). Alternative: centred serif headline with a dark and an outline button, surrounded by drifting thumbnails (Contra "The network for creative expertise"). --- ## Footer Dark (`--ink` / `#12232A`). A big wordmark (lowercase grotesk or serif, 64–160px) or a painting panel bleeding in from above. 3–4 link columns with mono caps headings (`PLATFORM`, `COMPANY`, `RESOURCES`, `LEGAL`) and 14px links at 70% opacity. Bottom row: © plus socials. ``` ### .claude/skills/classical-collage-web-design/references/07-page-blueprints.md ```md # 07 — Page Blueprints Four full landing-page blueprints. Each row lists the section, its layout, its metaphor image and example copy. Swap the copy, keep the rhythm. Rhythm rule: alternate **dense** (cards, stats) and **calm** (statement, scroll story) sections. Never put two image-heavy sections back to back without a breathing section between them, unless they are stacked feature cards. --- ## A. Fintech / payments (warm variant) | # | Section | Layout | Image | Copy example | |---|---|---|---|---| | 1 | Nav | Wordmark left, links centred, Log in + Contact pills | – | – | | 2 | Hero | Centred stage + data texture | Two hands with phones, coins arcing between them | `// MODERN FINANCIAL INFRASTRUCTURE` / "Money moves. The future begins here." / "Powering seamless payments, secure transactions, and global money movement through one unified financial infrastructure." / ● GET STARTED | | 3 | Logo strip | Bottom of hero | – | `TRUSTED BY` | | 4 | Intro | Headline left, para right, painting panel + dark dashboard | Temple ruins + "My Portfolio $12,486.075" | "A new perspective on how finance works together" | | 5 | Services | Headline left, figure right, 3 small white cards overlapping the bottom | Laurel-crowned man with a laptop | `// OUR SERVICES` "We turn financial complexity into seamless connectivity" → cards: Global Payments (coin), Digital Accounts (key), Developer API | | 6 | Feature pair | Two painting cards + floating widgets | Harbour + currency list; ruins + BTC ticker | "Multiple currencies. One seamless experience." / "Stay ahead of every market movement" | | 7 | Stats | White panel, coin on column + serif numbers | Coin on Ionic capital | "Powering seamless payments…" 5M+ TRANSACTIONS PROCESSED, 600K+ ACCOUNTS CONNECTED | | 8 | Testimonial | Painting card + quote card + logos | Hand emerging from clouds | "Trusted by those who move forward" | | 9 | Closing CTA | Text left, cut-out right | Hand placing keystone coin on arch | `// GET STARTED` "Let's build a stronger foundation for your financial future" | | 10 | Footer | Dark, big wordmark | – | – | --- ## B. AI / research / dev tool (cool variant) | # | Section | Layout | Image | Copy example | |---|---|---|---|---| | 1 | Nav | Ribbon logo, Get in touch pill, hamburger | – | – | | 2 | Hero | Editorial left, art bleeding right/bottom | Ivory-gowned woman with halftone laptop, dot cloud | "Creative intelligence." / "A frontier human data and evaluation lab making AI better for creativity." / Request partnership + Explore research | | 3 | Ecosystem | Sage section, headline + lead, 4 sticky stacked cards | Helmets / Scales / Crowd / Microscope | "Meet the [Brand] ecosystem" → Creative Arena, Benchmarking, Creative preference, Trajectories & RL environments | | 4 | Scroll story | 350vh calm, 3 sequential lines + drifting thumbnails | 8–12 figure thumbnails | "Built on real-world creative expertise" → "[Brand] taps a vetted network of practicing creative professionals" → "With real market experience" | | 5 | Wide painting | Full-bleed | Crowd of figures on phones | – | | 6 | Testimonial | Paint-chip bands + mint quote | – | "This was our first time running a benchmark like this…" — Name, Role at Company | | 7 | Value + stats | Teal section, headline, chips, stacked stat cards | – | "Connecting with the missing signal: taste" chips: Graphic designers, Product designers, Engineers…; 1.7M+ creative experts, 400+ skills, $250M+ verified earnings | | 8 | Statement | Painting with gilded frame edge → umber band | Two halftone laptops facing across a gilded table | "Execution is free. Now, judgment is everything." | | 9 | Network CTA | Centred, drifting thumbnails | Figures on a fountain | "The network for creative expertise" / View the research + For AI labs | | 10 | Footer | Deep teal, still-life painting crossing the top edge | Scholar's shelf with bust + laptop | – | --- ## C. Agency / studio / portfolio (either variant; cool recommended) | # | Section | Image | Copy example | |---|---|---|---| | 1 | Hero | Sculptor carving a bust whose face is a halftone screen | "Craft, at the speed of now." / "We design brands and websites for founders who care how things feel." | | 2 | Logo strip | – | `SELECTED CLIENTS` | | 3 | Services (4 stacked cards) | Architect with compass (Web), Signet seal (Brand), Fresco frieze (Motion), Scholar with scroll (Content/SEO) | Card titles: Websites, Identity, Motion, Words | | 4 | Work grid | 2-col case cards: client screenshot inside a gilded frame on a gallery wall | "Selected work" | | 5 | Process | Horizontal scroll of 4 numbered panels with small cut-outs | Discover → Define → Design → Deliver | | 6 | Stats | Laurel wreath | "40+ brands launched", "8 countries" | | 7 | Testimonial | Paint chips | – | | 8 | CTA | Two figures shaking hands over a marble table | "Let's make something that lasts." | --- ## D. D2C / consumer product (warm variant) | # | Section | Image | Copy example | |---|---|---|---| | 1 | Hero | Product on a marble plinth in a museum vitrine, figures admiring it | "Made to be kept." | | 2 | Story | Artisan workshop painting | "Crafted the old way." | | 3 | Ingredients / features | Dutch still life with the product among fruit, with numbered callouts | 3 callouts | | 4 | Product grid | White cards on paper, products on small column capitals | Shop the collection | | 5 | Reviews | Orator to crowd + review cards | Real reviews only (never fabricate) | | 6 | Gifting | Figure offering the product with both hands | "A gift worth keeping." | | 7 | CTA + footer | – | – | --- ## Section count and length - Landing page: 8–11 sections - Desktop page height: 8–12 viewports (scroll stories add length; that's intended) - Template product (Framer marketplace): add Pricing, FAQ, Blog index, About, 404 and Contact pages that reuse the same components ``` ### .claude/skills/classical-collage-web-design/references/08-motion.md ````md # 08 — Motion Motion should feel like **a museum guide turning the lights on, one painting at a time**: slow, weighty and deliberate. ## Timing and easing | Token | Value | Use | |---|---|---| | `ease-out-quint` | `cubic-bezier(0.22, 1, 0.36, 1)` | Default for everything entering | | `ease-in-out` | `cubic-bezier(0.65, 0, 0.35, 1)` | Scroll-linked scale / position | | `dur-fast` | 300ms | Buttons, hovers | | `dur-base` | 700ms | Text and card reveals | | `dur-slow` | 1000–1200ms | Hero art, image scale, counters | | `stagger` | 80–120ms | Lines, chips, cards | Avoid springs with overshoot, bounces and rotations over 10° during entrances. ## Entrance patterns 1. **Headline line reveal:** each line rises 16–24px from `opacity 0` with a 100ms stagger. Optional mask reveal (clip-path from bottom). 2. **Lead and buttons:** fade-up 12px, 150ms after the headline. 3. **Hero art:** scale 1.06 → 1.0 and opacity 0 → 1 over 1200ms. Cut-outs slide in 40px from their entry edge. 4. **Floating coins:** continuous float loop, `translateY ±8px` and `rotate ±3deg`, 5–7s per coin with offset delays. Light pointer parallax (max 12px). 5. **Halftone dots:** dot clusters fade in with a random 0–600ms delay per cluster. ## Scroll choreography ### Sticky stacking cards ```css .card-stack > .card { position: sticky; top: calc(96px + var(--i) * 16px); } ``` As each card arrives the previous one scales to 0.96 and dims to 0.85 (scroll-linked). ### Scroll story (sequential lines) - Section height 300–400vh, inner `position: sticky; top: 0; height: 100vh`. - Map scroll progress 0→1 across N lines. Each line: opacity 0 → 1 (fade in over 10% progress), holds, then → 0.2 and moves up 40px as the next line enters. - Thumbnails: each gets a parallax speed between −0.4 and +0.6, plus a slight scale 0.9 → 1.05. ### Mega word A huge serif word scales from 1.2 to 1.0 and translates −20vw horizontally across its section. ### Paint-chip strip Bands slide in from the left one after another (120ms stagger, 900ms each), and the quote card arrives last. ### Counters Count from 0 to the value over 1200ms (ease-out) when 50% visible. Format with separators. ## Hover - Buttons: label roll (text slides up, duplicate enters from below), 300ms. - Cards: image scale 1.03 over 900ms; title up 4px. - Links: underline grows from the left, 300ms. ## Reduced motion With `@media (prefers-reduced-motion: reduce)`: disable the float loops, parallax, sticky scaling and the mega word; replace reveals with a 200ms opacity fade; show all scroll-story lines statically and stacked. ## Performance - Animate only `transform` and `opacity`. - Use `will-change` on sticky cards only while they are in view. - Lazy-load thumbnails. Don't animate `filter: blur` on large images. - Pause float loops when off-screen (IntersectionObserver). ```` ### .claude/skills/classical-collage-web-design/references/09-copywriting.md ```md # 09 — Copywriting The words must match the art: **calm, certain and timeless**. No hype. ## Voice | Is | Isn't | |---|---| | Declarative ("Money moves.") | Exclamatory ("Supercharge your money!") | | Short, two-beat | Long and clause-heavy | | Concrete outcomes | Buzzwords (revolutionary, seamless × 5, cutting-edge) | | Confident and understated | Salesy, emoji, ALL CAPS shouting | | Plain verbs | Jargon stacks | ## Headline formulas 1. **Two-beat statement.** `[Short truth]. [Bigger promise].` → "Money moves. The future begins here." / "Execution is free. Now, judgment is everything." 2. **Category claim.** `[Adjective] [noun].` → "Creative intelligence." / "Quiet infrastructure." 3. **Perspective.** `A new perspective on how [domain] works together` 4. **Transformation.** `We turn [pain] into [outcome]` → "We turn financial complexity into seamless connectivity" 5. **Invitation.** `Let's build a stronger [metaphor] for your [goal]` 6. **Identity.** `The [network/platform/standard] for [audience/skill]` → "The network for creative expertise" 7. **Ecosystem.** `Meet the [Brand] ecosystem` 8. **Proof sequence (scroll story):** `Built on [X]` → `[Brand] taps [specific source]` → `With [qualifier]` Rules: hero ≤ 8 words. A full stop at the end of short statement headlines; no full stop on longer descriptive headlines. Sentence case always. ## Lead / sub One sentence, 12–24 words, saying exactly what the product does and for whom. > "A frontier human data and evaluation lab making AI better for creativity." ## Labels / eyebrows 2–5 words, caps, a category not a slogan: `MODERN FINANCIAL INFRASTRUCTURE`, `COMPARATIVE MODEL EVALS`, `OUR SERVICES`, `GET STARTED`, `MARKET INSIGHTS`. ## Card titles 1–3 words, noun-led, serif: "Global Payments", "Benchmarking", "Creative preference", "Digital Accounts". ## Card captions on paintings Two short lines: "Multiple currencies. / One seamless experience." "Stay ahead of every / market movement". ## Buttons 2–3 words, verb-first: Get started, Request partnership, Explore research, View the research, Get in touch, Contact us. Never "Click here" or "Submit". ## Stats Number + noun phrase in caps: `5M+ TRANSACTIONS PROCESSED`, `1.7M+ creative experts`, `$250M+ verified expert earnings`. Use real numbers only and get the client's sign-off. ## Testimonials Use real quotes only, with the person's permission. Shape: a specific situation, the result, then trust. Attribution: `— Full Name, Role at Company`. ## Microcopy tone - Empty states: "Nothing here yet. Quiet, like a gallery before opening." - 404: "This page has been lost to history." + "Return home" - Form success: "Received. We'll be in touch within a day." ``` ### .claude/skills/classical-collage-web-design/references/10-build-figma.md ````md # 10 — Build in Figma ## File structure ``` 📄 Cover 📄 01 Moodboard ← references, palette swatches, art direction briefs 📄 02 Art ← raw sources, cut-outs, graded masters, halftone objects 📄 03 Foundations ← colour styles/variables, text styles, grid, effects 📄 04 Components ← buttons, nav, cards, widgets, stats, chips, footer 📄 05 Desktop (1440) 📄 06 Tablet (810) 📄 07 Mobile (390) 📄 08 Prototype / Motion notes 📄 09 Export ``` ## Variables - Collection **Color** with modes `Warm` and `Cool`: bg, surface, ink, ink-muted, ink-25, accent, section-tint-1/2/3, ui-dark, positive, negative. - Collection **Space**: 4, 8, 12, 16, 24, 32, 48, 64, 96, 160, 240. - Collection **Radius**: sm 6, md 12, lg 16, pill 999. Switching mode on the page frame re-themes everything (UI only; the art must be re-graded separately). ## Text styles `Display/XL 96`, `Display/L 64`, `Display/M 44`, `Display/Stat 112`, `Quote/48`, `Lead/22`, `Body/16`, `Small/14`, `Label/12 caps`, `Mono/11 caps`, `Button/16` with the measured tracking from `05-design-tokens.md` (Figma tracking in %: −4% display, −5% card titles, +6% labels). ## Effect styles `Float` (drop shadow 0/30/60/−20, black 45%), `Contact` (0/12/24/−12, ink 35%), `Panel`. ## Layout grids Desktop: 12 col, 64 margin, 24 gutter. Mobile: 4 col, 20 margin, 16 gutter. 8px baseline (soft). ## Art layer recipe (per image) ``` ▾ Card / Benchmarking ▸ Caption (auto layout) ▸ Scrim (linear gradient, black 45% → 0) ▸ Grade (solid #2F6B6B 12%, blend Color) ▸ Halftone object (optional) ▸ Painting (image fill, crop) ▸ Background (teal + dot pattern) ``` Use **Figma's "Remove background"** for cut-outs, and **"Edit with prompt" / Make image** for AI variations where available (as seen in the Aureon build video). ## Component tips - Buttons: auto layout, `hug`, a variant property for `primary / secondary / small / on-dark`, and a `state` property. - Feature card: an instance-swap property for the image, text properties for eyebrow and title, and a boolean for the widget. - Widgets: build them as real auto-layout UI (not screenshots) so they stay crisp. ## Prototype Smart Animate for card stacking (use the "After delay" + scroll-position trick or Figma's scroll animations), plus a "Motion notes" page with timings from `08-motion.md` for the developer. ## Export Images: 2× WebP/PNG from the graded master frame. Cut-outs: PNG with alpha. Icons and the logo: SVG. Name files `section-metaphor-variant@2x.webp` (e.g. `feature-scales-cool@2x.webp`). ```` ### .claude/skills/classical-collage-web-design/references/11-build-framer.md ```md # 11 — Build in Framer contralabs.com is built in Framer, so everything in this style is achievable there without code. ## Project setup 1. **Fonts:** Site Settings → Fonts → add Source Serif 4 (Google) and Inter (or upload licensed GT Standard / Sectra). Add JetBrains Mono. 2. **Color styles:** create `bg`, `ink`, `ink/70`, `ink/25`, `accent`, `teal`, `sage`, `mint`, `umber` (cool) or the warm set. Name them exactly as the tokens. 3. **Text styles:** create the scale from `05-design-tokens.md` with **breakpoint overrides** (Desktop 1440 / Tablet 810 / Phone 390). Use `em` letter-spacing (−0.04em). 4. **Breakpoints:** Desktop 1440, Tablet 810, Phone 390. Contra uses 809/810 as the tablet switch. ## Key build recipes ### Sticky stacking feature cards - Parent stack: vertical, gap 24. - Each card: Position **Sticky**, top = 96 + index × 16. - Add a **Scroll Transform** on each card: as the next card enters, Scale 1 → 0.96, Opacity 1 → 0.85. ### Scroll story (sequential lines + drifting thumbnails) - Section height 350vh; inner frame Sticky top 0, height 100vh. - Each line: **Scroll Transform** keyed to the section, with opacity 0 → 1 → 0.2 and Y 40 → 0 → −40, offset per line. - Thumbnails: absolute-positioned images with Scroll Transform Y over different ranges (−200 → 200, −80 → 120, etc.). ### Floating coins Each coin is an image with a **Loop effect** (Y 0 → −8, rotate 0 → 3°, 5–7s, mirror, ease-in-out) and a different delay. Add **Mouse parallax** via a small code override or Framer's "Follow cursor" with low intensity. ### Halftone Export the halftone laptop from Figma as PNG/SVG. For live halftone, use a Code Component that applies the CSS mask from `assets/halftone.css`. ### Data-text texture Use a text layer (mono, 10px, 6% opacity) filled with generated lines, absolutely positioned behind the hero, with a radial gradient mask (Framer: Mask → gradient). ### Button label roll A component with two variants: Default and Hover. Inside, a clipped stack holds the label twice; Hover moves the stack Y −24. Transition 0.3s ease-out. ### Nav background on scroll A sticky nav with a **Scroll Variant**: when the page scrolls past 80px, switch to the variant with bg `bg/90` and backdrop blur 12. ### Appear effects Text: **Appear → Y 20, Opacity 0, 0.7s, ease [0.22, 1, 0.36, 1], delay 0.1 × line**. Images: Scale 1.06 → 1, 1.2s. ## CMS (for templates) Collections: **Features** (title, eyebrow, description, image, link), **Testimonials**, **Case Studies**, **Blog**. Feature cards map to the CMS so buyers can swap content. ## Packaging as a paid Framer template - Include both colour-mode variants as separate pages or a remix note. - Ship with original, licence-clean artwork, and include `CREDITS` in the template description. - Pages: Home, About, Pricing, Blog, Blog post, Contact, 404, plus a "Style guide" page showing tokens and components. - Name layers and components clearly; buyers judge templates by layer hygiene. - Thumbnail and marketplace screenshots: the hero, the stacked cards and the testimonial chip strip are the money shots. ``` ### .claude/skills/classical-collage-web-design/references/12-build-nextjs.md ````md # 12 — Build in Next.js + Tailwind ## Stack - Next.js (App Router), TypeScript - Tailwind CSS with `assets/tailwind.preset.js` - `motion` (Framer Motion) for reveals and scroll transforms. Lenis is optional for smooth scroll. - `next/font/google` for Source Serif 4, Inter and JetBrains Mono ## Setup ```bash npx create-next-app@latest my-site --ts --tailwind --app npm i motion clsx ``` Copy `assets/tokens.css` into `app/globals.css` (after the Tailwind directives) and `assets/tailwind.preset.js` into the project root. ```js // tailwind.config.js module.exports = { presets: [require('./tailwind.preset.js')], content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'], }; ``` ```tsx // app/layout.tsx import { Source_Serif_4, Inter, JetBrains_Mono } from 'next/font/google'; const serif = Source_Serif_4({ subsets: ['latin'], variable: '--font-serif', weight: ['300','400'] }); const sans = Inter({ subsets: ['latin'], variable: '--font-sans' }); const mono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' }); export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` Switch the variant with `data-variant="warm"` or `"cool"` on ``. All tokens are CSS variables. ## Components Copy `assets/components/*` into `components/`. They are: - `PillButton.tsx`: primary/secondary/small/onDark, with the label-roll hover - `Eyebrow.tsx` - `Reveal.tsx`: fade-up wrapper with stagger - `Hero.tsx`: editorial-left and centred-stage layouts - `FeatureCardStack.tsx`: sticky stacking painting cards - `FloatingCoins.tsx`: float loop + pointer parallax - `DataTexture.tsx`: generated mono background text - `ScrollStory.tsx`: sequential lines + drifting thumbnails - `StatBlock.tsx`: count-up serif stats - `ChipTestimonial.tsx`: paint-chip strip + quote ## Images - Use `next/image` with `sizes`, AVIF/WebP, `priority` on the hero only. - Put a blur placeholder (`placeholder="blur"`) on paintings to avoid layout flashes. - Keep cut-outs as WebP with alpha. ## Accessibility - Decorative textures and thumbnails: `aria-hidden`, empty `alt`. - Meaningful paintings: `alt` with the scene and metaphor. - Sticky and scroll effects must leave the content readable in source order. - Respect reduced motion via `useReducedMotion()` from `motion/react`. ## Performance budget LCP < 2.0s on 4G, hero image ≤ 250KB, total JS ≤ 150KB gzipped, CLS < 0.05. ## Headless Shopify (D2C) The same components work on a Next.js + Shopify Storefront API front end: use product cards on column capitals, and the PDP hero with the product on a marble plinth. ```` ### .claude/skills/classical-collage-web-design/references/13-qa-checklist.md ```md # 13 — QA Checklist Run this before showing work to a client or publishing a template. ## Concept - [ ] The variant (warm or cool) suits the industry and is used consistently - [ ] Every section has exactly one literal metaphor that matches its headline - [ ] No image could swap sections and still make sense - [ ] The modern object is at or near the focal point of each painting ## Art - [ ] Every image is public domain or original; `CREDITS.md` is complete - [ ] No images were copied from reference sites, and no living artists were named in prompts - [ ] All images share one colour grade - [ ] Hands, faces and fingers are clean (no AI artefacts or garbled text) - [ ] Tech objects read as modern (halftone or crisp UI), not painted - [ ] Cut-out edges have no halos ## UI and type - [ ] UI uses only neutrals + one accent; no gradients or glass - [ ] Display serif is light/regular with tight leading and negative tracking - [ ] Labels are caps with positive tracking; at most 2 families plus a mono - [ ] Text on paintings has a scrim and ≥ 4.5:1 contrast - [ ] Buttons are 48px tall (44px minimum on touch), with visible focus rings - [ ] At most two ideas per viewport; section padding is generous ## Copy - [ ] Hero headline ≤ 8 words; sentence case - [ ] No hype words or exclamation marks - [ ] Stats and testimonials are real and approved ## Responsive - [ ] 390 / 810 / 1440 checked; no horizontal scroll - [ ] Mobile art crops (4:5) keep the focal point and modern object visible - [ ] Sticky cards and scroll stories work on iOS Safari - [ ] Mobile headlines ≤ 48px ## Motion and performance - [ ] Easing is slow (ease-out quint, 700ms), with no bounces - [ ] `prefers-reduced-motion` is respected - [ ] Only transform and opacity are animated; float loops pause off-screen - [ ] Hero image ≤ 250KB, LCP < 2s, CLS < 0.05 - [ ] Below-the-fold images are lazy-loaded ## Accessibility - [ ] Meaningful alt text; decorative images use `alt=""` - [ ] Keyboard navigation works through the nav, buttons and menus - [ ] Headings are in logical order (one H1) ```