Concrete

1. COLORS — Set the page background to #F2F0E9 (off-white paper), surface/card background to #EDEADE (slightly cooler off-white), deep inverted blocks to #0F0E0C (near-black ink), primary text and all borders to #0F0E0C, muted/secondary text to #5A5850, accent CTA and shock blocks to #E4FF1A (acid yellow), and danger/alarm sparingly at #FF4D2E. No gradients anywhere in the UI — flat fills only. Hard offset shadows are 4px 4px 0 #0F0E0C (large lift) and 6px 6px 0 #0F0E0C (hover lift); never blur the shadow. The palette mood is: ink-on-newsprint with a single electric slap. 2. TYPOGRAPHY — Load "Archivo" (weights 400, 500, 700, 800, 900) and "Space Mono" (weights 400, 700) from Google Fonts. H1: Archivo 96px weight 900, line-height 0.92, letter-spacing -0.04em, UPPERCASE; one key phrase gets an inline acid-yellow (#E4FF1A) highlight box via background-color on a <span>. H2: Archivo 52–64px weight 900, line-height 0.95, letter-spacing -0.02em, UPPERCASE. H3: Archivo 34px weight 700, line-height 1.1, letter-spacing 0. H4: Archivo 22px weight 600, line-height 1.25, letter-spacing 0. Body-L: Archivo 18–19px weight 400, line-height 1.55. Body: Archivo 16px weight 400, line-height 1.55. Eyebrow/mono labels: Space Mono 11–13px weight 700, letter-spacing 0.04–0.12em, UPPERCASE. Caption: Space Mono 12px weight 400, line-height 1.5. Services list item names: Archivo 28px weight 800, UPPERCASE. Stat numbers: Archivo 72px weight 900, letter-spacing -0.04em. 3. PAGE SECTIONS — Build sections in this exact order: sticky nav → hero (96px UPPERCASE headline, highlighted span, mono tag row, two CTAs, muted descriptor) → clients strip (mono "CLIENTS" label, 6 client names: Nomad, Orbit Labs, Meridian, Pulsar, Forma, Crest) → work grid (4 case-study cards in 2-col grid, each with a colored visual block, mono category + year, uppercase card title: "Nomad — The Office of the Future", "Orbit — Charge the Grid", "Meridian — Diagnostic Infrastructure", "Forma Magazine — Volume 1") → services list (black inverted background, 6 numbered rows 01–06: Brand Strategy, Visual Identity, Campaign Concepting, Web Design, Art Direction, Motion & Film, each with right-aligned mono descriptor) → stats band (acid-yellow background, 4 bordered boxes: 47 Brands built / 8yr In operation / 12 Full-time creatives / 3× Avg. client retention) → testimonials (3 bordered quote cards: Jana Novak / Theo Bakker / Sophie Wren) → contact section (2-col: left side heading + contact links, right side form with name/email/company/message fields) → final CTA banner (acid-yellow block, "Don't think. Brief us." headline, dark CTA button) → footer. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The defining aesthetic is the hard offset box-shadow on every interactive block: box-shadow: 4px 4px 0 #0F0E0C on rest state, expanding to box-shadow: 6px 6px 0 #0F0E0C and transform: translate(-2px, -2px) on hover. Every card, button, and bordered block uses border: 2px solid #0F0E0C with border-radius: 0. Transition is transition: box-shadow 0.12s, transform 0.12s — fast and punchy, never smooth. No backdrop-filter, no blur, no rgba borders. This hard "sticker lift" shadow — combined with zero border-radius and 2px ink borders everywhere — is what makes the template feel hand-assembled and confrontational rather than digitally refined. 5. COMPONENT SPECS — Primary button (acid): background #E4FF1A, color #0F0E0C, padding 12px 20px, border-radius 0, border 2px solid #0F0E0C, box-shadow 4px 4px 0 #0F0E0C, font Archivo 13px weight 800 UPPERCASE letter-spacing 0.04em; hover: box-shadow 6px 6px 0 #0F0E0C + transform translate(-2px,-2px), transition 0.12s. Secondary button (dark): background #0F0E0C, color #F2F0E9, same padding/border/shadow/hover behavior. Nav bar: height 64px, sticky top 0, background #F2F0E9, border-bottom 2px solid #0F0E0C, z-index 100; logo Archivo 18px weight 900 UPPERCASE; nav links Space Mono 13px weight 700 UPPERCASE letter-spacing 0.04em, each separated by border-left 2px solid #0F0E0C, padding 0 16px, height 64px; hover on nav links sets background #E4FF1A. Cards: border 2px solid #0F0E0C, border-radius 0, padding 24–28px, box-shadow 4px 4px 0 #0F0E0C, background #F2F0E9 or #0F0E0C for dark cards. Work cards: background #0F0E0C, overflow hidden, image area aspect-ratio 16/9. Nav never goes transparent — it stays #F2F0E9 with the 2px border at all scroll positions. 6. COPY VOICE — The audience is founders and CMOs who are allergic to "purpose-driven storytelling" and want something people actually notice. Their core pain point: every agency they've tried makes them look like everyone else's client. Four specific headlines: "We build brands that can't be ignored" (H1), "What we actually do" (services H2), "Let's build something uncomfortable" (contact H2), "Don't think. Brief us." (final CTA). Five banned phrases for this template: "We are passionate about your vision", "Award-winning creative agency", "Let's create something amazing together", "Elevating brands to the next level", "Full-service agency with a human touch". Mono sub-copy examples: "Est. Berlin, 2017 · Creative Agency" and "Work that changes minds. Not moods." Fine print line: "No stock photos were harmed in the making of this website." 7. BACKGROUND ZONES — Three distinct background levels. Zone 1 (off-white paper): #F2F0E9 — used for page body, hero, clients strip, work grid section, testimonials section, contact section; cards within these sections use #EDEADE for subtle separation. Zone 2 (acid yellow): #E4FF1A — used for the stats band (full-width bleed, border-top 2px solid #0F0E0C, border-bottom 2px solid #0F0E0C) and the final CTA banner (same border treatment); both bleed edge-to-edge within their section container. Zone 3 (ink black): #0F0E0C — used for the services section and the footer; on-black text is #F2F0E9, muted text is rgba(242,240,233,0.35)–rgba(242,240,233,0.6). No gradients between zones; each zone is separated by a hard 2px solid #0F0E0C border. No texture or pattern — the grid structure itself provides visual rhythm. 8. SCROLL ANIMATIONS — Elements start at opacity: 0 and transform: translateY(20px), then animate to opacity: 1 and transform: none. Duration: 500ms. Easing: cubic-bezier(0.16, 1, 0.3, 1) (spring-like, slightly stiff). Use IntersectionObserver with threshold 0.12 to trigger the in-view class; unobserve after triggering so the animation only fires once. Stagger delays: data-delay="1" = 80ms, data-delay="2" = 160ms, data-delay="3" = 240ms applied via transition-delay. Every card in the work grid, every testimonial card, every service row, and every stat box gets a reveal + sequential data-delay. Headings and paragraph descriptors in each section also get reveal class. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Breakpoints: desktop ≥1024px, tablet 768–1023px, mobile ≤767px. H1: 96px desktop → 60px tablet → 44px mobile. CTA banner H2: 64px desktop → 40px mobile. Work grid: 2-col desktop → 1-col tablet and mobile. Stats grid: 4-col desktop → 2-col tablet → 2-col mobile (with reduced padding 32px 20px and stat number 48px). Testimonials masonry: 3-col desktop → 1-col tablet. Services row: 3-col grid (60px number / 1fr name / 200px desc) desktop → single column stacked mobile. Contact section: 2-col desktop → 1-col tablet. Hero bottom: 2-col desktop → 1-col tablet (CTA buttons left-aligned). Footer grid: 3-col desktop → 1-col tablet. Nav links (.nl) hide on mobile (display:none at ≤767px); only logo and CTA button remain. Buttons go full-width on mobile via width:100% on the wrapping flex container. 10. CRITICAL CSS — Always include these exact overrides: Add a <style> tag before </head> containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. Additionally include these base resets in the main stylesheet: *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: #F2F0E9; color: #0F0E0C; font-family: 'Archivo', sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.5; } 11. SEMANTIC HTML — Document structure: <header> wraps the <nav> element. <main> contains one <section id="hero">, <section id="work">, <section id="services">, <section id="stats">, <section id="testimonials">, <section id="contact">, <section id="cta">. Case-study blocks use <article class="work-card"> inside the work section; testimonial blocks use <article class="t-card">. The clients strip is a <div> (not a section) between hero and work. Exactly one <h1> in the entire document (inside #hero). All other headings are <h2>. <footer> is outside <main>. SEO: <title>Concrete — We Build Brands That Can't Be Ignored</title> (55 chars). <meta name="description" content="Concrete is a brutalist creative agency. No mood boards, no stock photography, no safe ideas. We build visual systems that actually change behavior."> (155 chars). og:image: bold acid-yellow #E4FF1A background with black #0F0E0C uppercase CONCRETE wordmark, 1200×630px. Every <article class="work-card"> image/visual block must have a descriptive alt attribute, e.g. alt="Nomad brand identity — office photography and typography system". 12. FOOTER STRUCTURE — Three-column grid (grid-template-columns: 2fr 1fr 1fr, gap 48px) above a bottom bar. Column 1 (brand, width 2fr): large "CONCRETE" wordmark in Archivo 28px weight 900 UPPERCASE color #F2F0E9, followed by a 13px body paragraph in rgba(242,240,233,0.35) — "A Berlin-based creative agency that builds brands willing to take a position. Not for everyone. Deliberately." Column 2 (Studio): Space Mono 10px weight 700 UPPERCASE letter-spacing 0.12em color rgba(242,240,233,0.3) column header "Studio", then links: About, Work, Careers, Press — Archivo 14px weight 700 UPPERCASE color rgba(242,240,233,0.6), hover to #E4FF1A. Column 3 (Contact): same header treatment "Contact", links: New Project, Instagram, LinkedIn, Are.na. Padding: 64px top 40px bottom. Separator between grid and bottom bar: border-bottom 2px solid rgba(242,240,233,0.1), 56px padding-bottom. Bottom bar (foot-bot): flex row space-between, Space Mono 11px color rgba(242,240,233,0.25). Left: "© 2025 Concrete Studio GmbH · Brunnenstraße 145, Berlin 10115". Right: "No stock photos were harmed in the making of this website." No newsletter input. No social icons beyond the text links in the Contact column. 13. UNIQUE INTERACTIVE — The services section (#services) uses a hover-reveal interaction on each list row (.sv-item). On mouseenter, the row background fades to rgba(228,255,26,0.05) and the mono number (e.g. "01") changes color from rgba(242,240,233,0.3) to #E4FF1A — both via CSS transition: background 0.12s, color 0.12s. No accordion open/close — all six service rows are always visible. The nav links have a hover fill: background transitions to #E4FF1A over 0.12s (transition: background 0.12s) with no delay. Work cards and testimonial cards use the offset-shadow lift interaction (described in prompt 4) on hover. The contact form fields use bottom-border-only styling (border: none; border-bottom: 2px solid #0F0E0C; background: transparent) with focus state transition: border-color 0.15s to #0F0E0C (thickness stays 2px, color reinforces). No JavaScript interactions beyond IntersectionObserver scroll reveal. ARIA: services list is a <ul role="list"> with each <li> having role="listitem"; nav links have aria-current="page" on the active item; form inputs have matching <label> elements (visually hidden if not shown); focus outline is 3px solid #0F0E0C at 2px offset across all interactive elements. — Prompt set generated with Claude Sonnet 4.6 —