Axis

1. COLORS — Use this exact palette — near-monochrome, concrete and ink: `--bg: #FAFAF8` (page background, warm paper white), `--surface: #FFFFFF` (cards and panels), `--text: #101010` (ink black primary text), `--muted: #6B6B68` (concrete grey, secondary text and labels), `--line: #101010` (full-strength black for 1px hairline grid rules), `--border: #E4E2DC` (light dividers and image frames), stats section background `#101010` with white `#FAFAF8` text. There is no color accent — emphasis comes entirely from type weight, scale, and the 1px black rule grid. The overall palette mood is: cold confidence, like freshly poured concrete in morning light. 2. TYPOGRAPHY — Load "Inter" from Google Fonts (weights 400, 500, 600, 700) for both headings and body; in the design system Helvetica Neue / Neue Haas Grotesk is preferred for headings but Inter is the web-safe fallback used in the HTML reference. Type scale: H1 88px / weight 600 / line-height 0.98 / letter-spacing -0.04em; H2 (section section-head) 14px / weight 600 / letter-spacing 0.10em / UPPERCASE (these are grid section labels, not large headings); H3 (contact heading) 48px / weight 600 / letter-spacing -0.03em / line-height 1.1; H4 (process titles) 24px / weight 600 / letter-spacing -0.01em; Body-L (hero statement) 19px / weight 400 / line-height 1.6 / color `--muted`; Body 16px / weight 400 / line-height 1.6; Eyebrow 11px / weight 600 / letter-spacing 0.16em / UPPERCASE / color `--muted`; Caption 13px / weight 400 or 500 / letter-spacing 0.02em. The logo wordmark is 18px / weight 700 / letter-spacing 0.16em / UPPERCASE. Statement paragraph text is 32px / weight 500 / line-height 1.3 / letter-spacing -0.02em, with the closing italic clause rendered in `--muted` (font-style: normal, just color shift). No gradient text anywhere — color discipline is absolute. 3. PAGE SECTIONS — Build these sections in exact order: sticky nav → hero (eyebrow + H1 left column, muted statement right column, full-bleed image below) → studio statement (1-col label + 2-col large paragraph, 32px) → selected works (2×2 project grid, 4 cards, each with 4:3 image + name/location/year meta row) → project index (numbered list 01–05, five rows with hairline dividers, arrow reveal on hover) → how we work (3-column process grid with 1px black hairline gaps between cells, three numbered phases: Survey / System / Detail) → the practice / team (4-column grid, 4 portrait cards with name and role) → stats bar (full-width `#101010` background, 4 stat cells: 16 years, 40+ buildings, 11 awards, 6 countries) → contact CTA (2-col: left heading "Tell us about the site." + right office details and links) → footer (one-line horizontal: copyright left, nav links right). Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The sticky navigation bar is the defining element. Exact CSS: `background: rgba(250,250,248,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid #101010; position: sticky; top: 0; z-index: 100; height: 68px; padding: 0 32px`. The 1px full-strength black bottom rule is present at all times (not just on scroll) — it is not a subtle grey border but a visible ink line separating the nav from page content. Logo is left-aligned, uppercase, 18px, weight 700, letter-spacing 0.16em. Nav links are center: Work, Studio, Process, Index — each 13px / weight 500 / letter-spacing 0.02em / hover opacity 0.5 at transition 0.2s. CTA link "Contact" is right-aligned with a 1px black underline (border-bottom, not text-decoration) and padding-bottom 2px. No border-radius, no shadow, no background gradient. This defines the aesthetic because it sets the grid-line logic used everywhere: one black hairline, no softening, maximum restraint. 5. COMPONENT SPECS — Primary button: none used as standalone button in this template — the nav CTA "Contact" acts as primary link: `color: #101010; border-bottom: 1px solid #101010; padding-bottom: 2px; font-size: 13px; font-weight: 500; text-decoration: none`. Secondary nav links: `color: #101010; opacity 1 → 0.5 on hover; transition: opacity 0.2s`. Project cards: `border-radius: 0px; no shadow; no border on card container`; image block uses `aspect-ratio: 4/3; overflow: hidden`; meta row has `border-top: 1px solid #E4E2DC; padding-top: 14px; display: flex; justify-content: space-between`; project name 20px / weight 600 / letter-spacing -0.01em; location and year 13px / color `#6B6B68`. Hover on project card: inner image `transform: scale(1.03); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1)`. Process grid cells: `background: #FAFAF8; padding: 40px 32px`; grid container `background: #101010; gap: 1px; border: 1px solid #101010` — the 1px black grid gap is the divider. Nav: height 68px, always has backdrop blur + black border-bottom regardless of scroll position. 6. COPY VOICE — This studio speaks like a founder who has thought for twenty years and wastes no words. Example headline: "Buildings as systems of light and structure." Example subline: "Axis designs residential, cultural, and civic spaces where proportion is the argument and light is the material." Example process label: "We resolve the joint." Example contact CTA: "Tell us about the site." The audience is developers, cultural institutions, private clients, and design press whose pain is being handed an architect who over-talks and under-delivers. Banned generic phrases specific to architecture marketing: "Bringing your vision to life", "We put you first", "End-to-end design solutions", "Innovative spaces for modern living", "Where form meets function". Every line must read like a reasoned assertion, not a sales pitch. 7. BACKGROUND ZONES — Three distinct background levels. Level 1: `#FAFAF8` — main page background used in nav, hero, studio statement, project sections, index, process, team, and contact; this is warm paper white, not pure `#FFFFFF`. Level 2: `#FFFFFF` — used only for card surfaces inside the process grid cells (`background: var(--bg)` pointing to `#FAFAF8`; actual white is reserved for `--surface`). Level 3: `#101010` — full ink-black band used in the stats section (`padding: 100px 0`), which spans full viewport width edge-to-edge with no container constraint on the background color. The stats inner grid uses `background: rgba(250,250,248,0.15)` for the 1px gaps between stat cells, with each cell background returning to `#101010`. No CSS gradient backgrounds on any section except the hero full-bleed image placeholder `linear-gradient(135deg, #2a2a28, #101010)` and team portrait placeholders `linear-gradient(160deg, #2a2a28, #101010)`. No texture or pattern. 8. SCROLL ANIMATIONS — All reveal elements start at `opacity: 0; transform: translateY(22px)` and transition to `opacity: 1; transform: none`. Duration: 700ms. Full cubic-bezier: `cubic-bezier(0.16, 1, 0.3, 1)` (fast-out spring feel). Elements animated: H1 and eyebrow block together (`.reveal`), hero statement paragraph (data-delay="1"), full-bleed hero image (data-delay="1"), studio statement label and paragraph, all project cards (stagger via data-delay="1"), all index rows (data-delay="1", "2"), process cells (data-delay="1", "2"), team cards (data-delay="1", "2", "3"), stat cells (data-delay="1", "2", "3"), contact columns. Delay map: data-delay="1" = 0.1s, data-delay="2" = 0.2s, data-delay="3" = 0.3s — card stagger is 100ms between items. IntersectionObserver threshold: 0.1; once in view, class `in-view` is added and observer disconnects that element. Honor prefers-reduced-motion: `@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }` 9. RESPONSIVE — Breakpoints: Desktop ≥1024px, Mobile ≤767px (no distinct tablet breakpoint in the HTML — 1023px is the tablet cutoff). At ≤1023px: H1 drops from 88px to 56px; hero-head grid collapses from `grid-template-columns: 1fr 1fr` to `1fr`; statement-grid collapses to `1fr` with gap reduced to 32px; project grid collapses from `1fr 1fr` to `1fr`; index-row grid collapses from `60px 1.5fr 1fr 1fr 80px` to `40px 1fr 60px` (ix-type and ix-loc hidden via `display:none`); process-grid collapses from `repeat(3,1fr)` to `1fr`; team-grid collapses from `repeat(4,1fr)` to `1fr 1fr`; stats-grid from `repeat(4,1fr)` to `1fr 1fr`; contact-inner from `1fr 1fr` to `1fr`. At ≤767px: H1 drops to 44px; statement-text drops to 24px; `.nl` (nav links) hidden via `display:none`; team-grid goes to `1fr`; stats-grid goes to `1fr`; contact heading drops to 34px. Nav CTA "Contact" link remains visible on mobile. No explicit full-width button rule needed as link-style CTAs are used. 10. CRITICAL CSS — Always include these exact overrides in a second `<style>` tag placed just before `</head>`: `body { flex-direction: column !important; align-items: stretch !important; }` — 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. The primary `.wrap` utility must be: `.wrap { width: 100%; margin: 0 auto; padding: 0 80px; }` with max-width on inner nav div set separately to 1280px via `.ni { max-width: 1280px; margin: 0 auto; }`. Add a global box-sizing reset: `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }`. Set `body { background: #FAFAF8; color: #101010; font-family: 'Inter', -apple-system, sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6; }`. Add `html { scroll-behavior: smooth; }`. 11. SEMANTIC HTML — Document structure: `<header>` is not used — nav is a bare `<nav>` element at body root. `<main>` contains all sections: `<section class="hero">`, `<section class="statement-sec">`, `<section class="proj-sec">`, `<section class="index-sec">`, `<section class="process-sec">`, `<section class="team-sec">`, `<section class="stats-sec">`, `<section class="contact-sec">`. Project cards use `<article class="proj">` with image div and meta div; no `<figure>` in the HTML reference but the design system recommends `<figure>`/`<figcaption>` for project entries. Exactly one `<h1>` in the hero. Section headings use `<h2>` styled at 14px uppercase via `.sec-head h2` — these are structural labels. `<title>`: "Axis — Buildings as Systems of Light and Structure" (55 chars). `<meta name="description">`: "Axis is an architecture studio designing buildings as systems of light, structure, and proportion. Residential, cultural, and civic work across Europe." (150 chars). OG image: a flagship project exterior photograph. Every `<img>` gets descriptive alt text naming the building, city, and view angle (e.g. alt="Riverside Pavilion exterior, Rotterdam, view from canal, completed 2024"). 12. FOOTER STRUCTURE — Single-row footer with `border-top: 1px solid #101010; padding: 48px 0`. Inner container `.foot-inner` uses `display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; align-items: center`. Left side: copyright text `© 2025 Axis Architects · Amsterdam` at 13px / color `#6B6B68`. Right side: horizontal `<ul>` of four links — Instagram, Index, Press, Privacy — each `font-size: 13px; color: #6B6B68; text-decoration: none; transition: color 0.2s`; hover changes color to `#101010`. No newsletter input. No social icons beyond the text link "Instagram". No address in footer (address lives in the contact section). No logo repeat in footer. The footer is deliberately minimal — one line of information, one line of links. 13. UNIQUE INTERACTIVE — Two distinct interactions exist. First, the project index rows (`.index-row`): each row has `cursor: pointer; transition: padding 0.25s`; on hover, `padding-left` shifts from 0 to 12px (the entire row nudges right), and the arrow character `→` (`.ix-arrow`) transitions from `opacity: 0; transform: translateX(-8px)` to `opacity: 1; transform: translateX(0)` over `0.2s` linear. No JavaScript is required — this is pure CSS hover. The HTML reference does not implement a thumbnail swap (described in the design system); the deployed interaction is the padding-shift + arrow reveal only. Second, project card images (`.proj-img-bg`): on `.proj:hover`, the inner background div scales to `transform: scale(1.03); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1)` — a subtle zoom that stays within the `overflow: hidden` clip of `.proj-img`. ARIA: index rows should carry `role="link"` and `tabindex="0"` with `aria-label` describing the project (e.g. "View Riverside Pavilion project"). No accordion, tabs, or slider is present in this template. — Prompt set generated with Claude Sonnet 4.6 —