Create a bold typography agency website where type is the design. Headlines are huge, expressive and structural: they create the layout instead of sitting inside it.
Brief
Subject: Loud & Clear — a naming and verbal identity agency for consumer brandsThe words are the visuals, so they have to be good: a sharp positioning line, invented client names and projects, services described in plain languageType is the layout: headlines span the viewport, overlap textures and push to the edges; there is almost nothing elseDesign Tokens
Use these exact values. Where the spec is silent, stay consistent with them.
colors:
accent: "#2b4cff"
background: "#f2f0eb"
border: "#111111"
borderSoft: "color-mix(in srgb, #111111 18%, transparent)"
muted: "color-mix(in srgb, #111111 70%, #f2f0eb)"
placeholder: "color-mix(in srgb, #111111 42%, #f2f0eb)"
surface: "#111111 for the inverted marquee band, with background-coloured text"
text: "#111111"
effects:
aboutMark: "transparent fill, 2px stroke of the text at 8%"
heroTexture: "transparent fill, 1px stroke of the text at 11%, masked linear-gradient(180deg, transparent, black 25%, black 75%, transparent)"
outlineNumerals: "transparent fill, 2px stroke in the text colour"
workReveal: "clip-path inset(50% 0 50% 0) → inset(0); scale 1.04 → 1"
fonts:
body:
fallback: "system-ui, -apple-system, 'Segoe UI', sans-serif"
family: Instrument Sans
weights: [400, 500, 600]
display:
fallback: "'Arial Black', system-ui, sans-serif"
family: Syne
weights: [700, 800]
layout:
breakpoints:
mobile: 640px
tablet: 900px
container: full width; everything sits inside the gutters
gutter: "clamp(1rem, 4vw, 3rem)"
motion:
durations:
button: 250ms
imageReveal: "550ms, scale 800ms"
lineRise: 1.05s
marquee: 38s
name: 600ms
numberFill: 350ms
easings:
all: "cubic-bezier(0.2, 0.8, 0.2, 1)"
marquee: linear
radii:
badge: "50%"
everythingElse: 0
pill: 999px
shadows:
everywhere: none
spacing:
section: "clamp(4rem, 10vw, 9rem) top and bottom"
type:
body:
font: body
lineHeight: 1.55
size: "1.0625rem; ledes clamp(1rem, 1.3vw, 1.1875rem)"
tracking: 0
weight: 400
caption:
font: body
lineHeight: 1.4
size: "0.8125rem, uppercase"
tracking: 0.08em
weight: 600
display:
font: display
lineHeight: 0.88
size: "clamp(2.75rem, calc(12 * 1.08vw), 12rem): the max size scales the type at every width; if a line would not fit, the size steps down"
tracking: -0.055em
weight: 800
headline:
font: display
lineHeight: 0.92
size: "clamp(2.5rem, calc(12 * 0.83vw), 12rem)"
tracking: -0.055em
weight: 800
title:
font: display
lineHeight: 1
size: "clamp(1.75rem, 3.4vw, 3.25rem)"
tracking: -0.04em
weight: 800
Style Rules
The display font at weight 800 carries every headline with line-height 0.85–0.92 and -0.04 to -0.06em tracking; Instrument Sans at 1.0625rem is the quiet companionScale contrast is the whole system: viewport-wide headlines against 0.8125–1.0625rem text, nothing in between except the about linesComposition by alignment: lines flush left, indented and flush right; headlines may touch the gutters but never cross them, clip or cause sideways scrollOutlined type (transparent fill, text stroke) is the only textureThe text colour on the background everywhere; one inverted band (the marquee); the accent in exactly two placesLabels are small uppercase 600 with 0.08em tracking and a parenthesised index, used once per sectionMotion belongs to type: lines rise, the marquee moves, numbers fill, names shiftPage Layout
full width inside clamp(1rem, 4vw, 3rem) gutters; ─ = 1px rule in the text colour
LOUD & CLEAR ································ WORK ABOUT SERVICES CONTACT ← fixed, difference blend
░ outlined texture words ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ← hero
NAMES ◉ badge, accent, -12°
PEOPLE
SAY OUT
LOUD.
─────────────────────────────────────────────────────────────────────
"Line." lede ·························· Est. year — cities ······ Scroll ↓
╲▓▓ SERVICE ● SERVICE ● SERVICE ● SERVICE ● … ▓▓╲ rotated -2° ← marquee
(01) Selected work ································· 2023 — 2025 ← work
─ PROJECT NAME ················ [photo on hover] ·········· client / disc / year
─ PROJECT NAME ×5
(02) About ⟨giant outlined mark⟩ ← about
Sentence one, flush left.
Sentence two, flush right.
Sentence three.
Sentence four.
— cite
(03) Services ·································· What we do, in plain English ← services
─ ⓪① outlined │ Title / description / (TAG)(TAG)(TAG)
LET'S ← contact
TALK.
─ intro / email (accent, underlined) / offices │ name__ email__ / type__ / message__ / (Send it →)
OUTLINED AGENCY NAME (cropped) / © · links ← footer
Sections
Hero — At least 100svh, content anchored to the bottom, padding 6rem and the gutter on top, 2rem at the bottomContent:Title: the positioning line split over four lines (2–3 words each)Badge: one impressive count with a captionLede: one short line in quotes plus one sentence on what they do for whomComponents:Header: fixed, mix-blend-mode difference in white, padding 1.1rem and the gutter; the agency name in the display font 800 at 1.125rem; four uppercase links at 0.8125rem 600 with an underline growing from the left over 300msTitle: four lines in the display size, each in an overflow-hidden mask: line 1 flush left, line 2 indented, line 3 flush left, line 4 flush right. Every line fits inside the gutters at every width: the indent is at most the space the line leaves free, and the size steps down if the longest line would not fit; no word is ever clippedTexture: the agency's key words repeated in rows behind the title, display 800 uppercase at clamp(3rem, 8vw, 8rem), transparent with a 1px stroke of the text at 11%, rows offset -12% and -38%, masked to fade at the top and bottomBadge: a circle clamp(6.5rem, 12vw, 10rem) wide in the accent, background-coloured text, rotated -12°, overlapping the top-right of the title: a big number in the display font over a two-line captionFoot row: under a 1px rule, the lede (max 44ch, the agency name in the display font 800), the founding year and cities, and 'Scroll ↓'Mobile: Under 640px line 2 indents 8vw, the badge moves above the title, the foot row stacks; the title stays inside the screenMotion: Each line rises from translateY(110%) over 1.05s, 0.12s apart, after 0.15sMarquee — A band 110% wide (-5% margin) rotated -2°, text-colour fill and background-colour text, clamp(2rem, 5vw, 4rem) of space around it; the items in the display font 800 uppercase at clamp(1.75rem, 4vw, 3.75rem), separated by 0.32em dotsContent:Eight services or capabilities in 1–3 words eachMobile: Same band; items shrink with the clampMotion: Scrolls left over 38s, linear, pausing on hoverWork — Full width inside the gutters with section padding; rows stack with a closing 1px ruleContent:Five projects: a name the agency created, the client, the discipline and the yearComponents:Label row: '(01) Selected work' in the label style on the left, the year range on the rightRow: under a 1px rule, the project name in the headline size with mix-blend-mode difference in white, and the meta (client, discipline, year as three lines, 0.875rem 500) right-aligned at the baselineReveal: a 4:5 photo (clamp(10rem, 24vw, 24rem) wide) centred on the pointer's x position behind the name, revealed by clip-path inset from 50% to 0 over 550ms while it settles from scale 1.04 over 800msMobile: Meta drops under the name on one line, split by middotsMotion: Hover shifts the name 0.12em right over 600msAbout — Sentences in the display font 700 at clamp(2rem, 5.4vw, 6.25rem), line-height 0.98, -0.04em, balanced; odd lines flush left with 10vw right padding, even lines flush right with 10vw left padding; a giant outlined mark (the agency's ampersand or initial) at clamp(16rem, 45vw, 40rem), stroke 2px of the text at 8%, behind the top rightContent:'(02) About' labelFour short sentences, one per line, that state the agency's philosophyA cite line naming the teamMobile: All lines flush left with no side paddingServices — Rows with clamp(1.5rem, 3vw, 2.5rem) vertical padding and a closing ruleContent:'(03) Services' and 'What we do, in plain English'Five services with a two-sentence description and three tags eachComponents:Service row: under a 1px rule, two columns 1fr / 1.25fr: the number in the headline size, transparent with a 2px text stroke; the title in title size, a description (max 46ch) and pill tags (1px border, 0.75rem 600 uppercase, 0.25rem 0.7rem)Mobile: One column under 900pxMotion: Hover fills the number with the text colour over 350msContact — The title, then under a 1px rule two columns 1fr / 1.1fr: intro, email and offices on the left, the form on the rightContent:One sentence inviting a briefThe emailTwo offices with addressesFields: name, email, project type, messageComponents:Title: 'Let's' / 'talk.' in the display font 800 at clamp(2.75rem, calc(12 * 1.25vw), 12rem), the second line flush rightEmail: the display font 800 at clamp(1.5rem, 3.4vw, 3rem) in the accent, underlined at 0.08em with a 0.14em offset that grows to 0.26em on hoverFields: borderless with a 2px bottom border in the text colour, 0.6rem vertical padding, placeholders at 42%; name and email side by side, then project type and a messageButton: a pill in the text colour with background-coloured text, the display font 800 at 1.25rem, padding 0.9rem 1.6rem, a 2px border; hover empties it to an outline and nudges the arrow 0.25emStates:On submit a 600-weight status line confirmsMobile: One column under 900px; fields and offices stack under 640pxImagery & Icons
Five picsum photos at 4:5, one per work row, hidden until hover or focusTexture is type: outlined repeated words behind the hero, a giant outlined mark behind the about section, outlined numerals and an outlined footer wordArrows are the → and ↓ charactersImplementation Notes
A footer: the agency name huge and outlined at clamp(2.75rem, calc(12 * 1.17vw), 12rem), cropped by overflow, over a bar with © and links under a 1px ruleThe marquee duplicates its list (aria-hidden on the copy) for a seamless loop; the work reveal follows the pointer with a small scriptDon'ts
No coloured single word in any headline, and no gradient textNo accent beyond the hero badge and the contact emailNo photos except the work-row reveals, and no illustrations or iconsNo cards, shadows, gradients or rounded boxes; only pill tags, the pill button and the badge are roundNo horizontal page scroll: overflow-x is clipped on html and bodyNo fonts, colours, radii or shadows outside the design tokens and rules aboveNo sections, features or effects that this spec doesn't listNo placeholder copy (lorem ipsum, "Elevate your workflow"): every word comes from the subjectNo pill-shaped eyebrow labels above headings and no gradient text, unless this spec asks for themNo grid of identical icon cards: vary size and emphasis by importanceQuality Floor
Mobile-first and responsive from 360px to 1440px and wider, with no horizontal scrollingText contrast meets WCAG 2.1 AA: 4.5:1 for body text, 3:1 for large textSemantic landmarks (header, nav, main, section, footer), one h1, descriptive alt textEvery interactive element has hover, visible focus and active states and works from the keyboardHonour prefers-reduced-motion: keep opacity fades, drop movementTech Stack
Framework: HTML/CSS/JS — Deliver one self-contained index.html: styles in a <style> block, scripts in a <script type="module"> block, no build step.Styling: Vanilla CSS — Plain CSS. Declare every design token as a custom property on :root (--color-accent, --font-display, --radius-card…) and use only those properties for colours, fonts, radii, shadows and timing.Language: JavaScript — JavaScript as ES modules; no TypeScript.UI library: None — No component library: build every component from the design tokens.Motion: CSS only — CSS transitions and keyframes only, with durations and easings from the design tokens.Icons: Inline SVG — Inline SVG icons drawn for this style, with one stroke width and corner treatment across the page.Acceptance Checklist
Headlines use the display font at 800 with tight negative tracking; body copy is Instrument SansThe hero, work names and contact title scale with clamps whose maximum is the max-size variableThe accent appears in exactly two places: the hero badge and the contact emailNo word inside a headline is coloured differentlyThe hero lines rise in one by one; the marquee band is rotated -2° and scrollsWork rows reveal a photo behind the name on hover and focus, with the name in difference blendService numbers are outlined and fill in on hoverNothing scrolls sideways at 375px, even at the maximum heading sizeRules are 1px in the text colour; there are no cards, shadows or gradientsUnder reduced motion the lines appear in place, the marquee stops and wraps, and transitions are instant
