--- version: alpha name: "Marketing agency template by 8B" description: "One-page website for a research-led marketing agency, in cool grey, ink and one vermilion, with paper-cut arrows. Free HTML template by 8B, MIT." colors: primary: "#141211" secondary: "#5d5d62" tertiary: "#f83a1d" neutral: "#f0f0f0" surface: "#f0f0f0" on-surface: "#141211" surface-plate: "#f7f7f6" accent-vermilion: "#f83a1d" accent-live: "#c8343a" on-accent-live: "#ffffff" paper-pink: "#f5c3b2" paper-brown: "#2a1f19" paper-taupe: "#8c7668" caption: "#5d5d62" typography: headline-display: fontFamily: Source Serif 4 fontSize: 124px fontWeight: 320 lineHeight: 0.94 letterSpacing: -0.028em headline-lg: fontFamily: Source Serif 4 fontSize: 100px fontWeight: 320 lineHeight: 0.94 letterSpacing: -0.028em headline-md: fontFamily: Source Serif 4 fontSize: 46px fontWeight: 360 lineHeight: 1.02 letterSpacing: -0.018em headline-stack: fontFamily: Geist fontSize: 44px fontWeight: 200 lineHeight: 1 letterSpacing: -0.01em body-lg: fontFamily: Geist fontSize: 24px fontWeight: 300 lineHeight: 1.42 letterSpacing: -0.005em body-md: fontFamily: Geist fontSize: 18px fontWeight: 400 lineHeight: 1.55 label-sm: fontFamily: Geist fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.07em button: fontFamily: Geist fontSize: 15px fontWeight: 500 lineHeight: 1 logo: fontFamily: Source Serif 4 fontSize: 27px fontWeight: 640 lineHeight: 1 letterSpacing: -0.035em rounded: none: 0px full: 999px spacing: gutter-min: 20px gutter: 56px nav-height: 68px nav-height-phone: 60px button-height: 54px button-height-phone: 50px field-height: 52px field-padding: 16px gap-sm: 8px gap-md: 12px gap-lg: 28px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.neutral}" typography: "{typography.button}" rounded: "{rounded.full}" height: "{spacing.button-height}" padding: 28px button-primary-hover: backgroundColor: "{colors.accent-vermilion}" textColor: "{colors.primary}" button-secondary: backgroundColor: "{colors.neutral}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.full}" height: "{spacing.button-height}" padding: 28px button-live: backgroundColor: "{colors.accent-live}" textColor: "{colors.on-accent-live}" typography: "{typography.label-sm}" rounded: "{rounded.full}" height: 34px padding: 16px badge-live: backgroundColor: "{colors.accent-live}" textColor: "{colors.on-accent-live}" typography: "{typography.label-sm}" rounded: "{rounded.full}" input-field: backgroundColor: "{colors.surface-plate}" textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.none}" height: "{spacing.field-height}" padding: 16px icon-button: backgroundColor: "{colors.neutral}" textColor: "{colors.primary}" rounded: "{rounded.full}" size: 54px nav-bar: backgroundColor: "{colors.neutral}" textColor: "{colors.primary}" height: "{spacing.nav-height}" --- # Halyard: marketing agency template ## Overview Halyard is a one-page site for a marketing or communications studio whose argument is its research: a yearly report, six signals and a live series of evenings. The design idea is a compass. A single paper-cut arrow, built from torn pieces in vermilion, pink and brown, turns toward each finding while everything around it stays quiet: cool grey ground, near-black ink, light serif headlines. It should feel like an annotated forecast pinned to a wall, calm and a little editorial, with one loud colour used for direction and for the things you can act on. ## Colors The ground is cool and the ink is warm, and vermilion is the only saturated colour. - **Ink (primary, #141211):** text, outlines, rules, the filled button and the inactive dial ticks. - **Grey ground (neutral and surface, #f0f0f0):** the page, the nav bar once the page scrolls, and the full-screen phone menu. - **Vermilion (tertiary and accent-vermilion, #f83a1d):** the paper-cut arrow, the red sessions sheet, the tape over old measures, the sweep behind a hovered button, the active dial tick, the tint on photos and the text selection. - **Live red (accent-live, #c8343a) with white (on-accent-live, #ffffff):** the "Next live" and "Free" pills and the live link in the nav. It is a deeper red than the artwork, so the pills and the live link stand apart from the artwork. - **Pink paper (#f5c3b2), brown paper (#2a1f19), taupe (#8c7668):** loose torn bits, the grain over the arrow and the sessions sheet, and the dark ground behind photos. They are artwork colours, not interface colours. - **Caption grey (secondary and caption, #5d5d62):** the signals intro, facts line, notes, roles, old measures, and signal names away from the centre. - **Plate (surface-plate, #f7f7f6):** photo caption plates, session strips, the report cover and form fields. ## Typography Two families, both loaded as variable fonts from Google Fonts. - **Source Serif 4** (weights 300 to 700) carries every display line at a light weight, around 320, with tight tracking. It also sets the signal and team names, the quote, the logo (weight 640) and the huge footer wordmark (weight 340). The hero heading is `headline-display`, fluid from 46px on a phone to 124px on a wide screen. Section headings use `headline-lg`, which runs from 42px to 100px. - **Geist** (weights 200 to 600) is the working face: body copy at 16 to 18px, the lead paragraph at weight 300, buttons at 15px weight 500, and the small uppercase labels at 12px with 0.07em tracking. The thin uppercase stacks beside section headings use weight 200 and run from 22px to 44px. Labels and pills are always uppercase and tracked. Headlines are sentence case. Never bold a display line. ## Layout Pages are full-width sections with a fluid side gutter that runs from 20px to 56px (3.6vw in between). There is no fixed container; text blocks are held to narrow measures instead, mostly 30rem to 40rem, and headings to 11 to 14 characters per line, which stacks them into tall ragged blocks. The first screen is two columns: the tall arrow on the left, heading, lead, facts line and two buttons on the right. After that each section pairs a heading and short intro with a list: signals beside a sticky dial, six ledger rows, four session strips, four portraits in a row, a report cover beside its form, FAQ with a head column. Vertical padding is generous, 12svh to 18svh per section. Thin 1px rules at 32 percent ink divide list items. At 960px the nav links collapse into a Menu button, at 860px the two-column sections stack, and at 760px the signals, shifts and field notes switch to single-column layouts. ## Elevation & Depth The page is flat. Depth comes from overlap: torn paper pieces, photo shards and the arrow sit on top of each other, and photos pile over the quote before they part. The only real shadow is on the report cover (`0 40px 70px -40px`, ink at 45 percent), a long, low shadow that makes the cover look lifted off the page. Do not put shadows on buttons, cards or the nav. ## Shapes Two shape languages meet. The interface is plain: buttons, badges, the dial and icon buttons are fully round (999px, or 50 percent for the circular dial), while form fields and the cover are square. The artwork is angular: arrows, tape, bits and photos are clip-path polygons with a grain mask, with four-sided shards for photos. The arrows are CSS, so changing the vermilion variable recolours them. Rules are 1px lines. ## Components - **button-primary:** ink pill, 54px tall, grey text, an arrow icon. On hover vermilion sweeps in from behind and the text turns to ink. - **button-secondary:** the same pill with a 1px ink outline and a transparent fill; same vermilion sweep. - **button-live:** the 34px red pill for the nav live link, white uppercase label, ink sweep on hover. - **badge-live:** the red "Next live" and "Free" pills, 12px uppercase at weight 600 with 0.08em tracking, white text. - **input-field:** square, 52px tall, plate fill, a 1px ink border at 45 percent, labels above in the small uppercase style, a 2px ink focus ring. - **icon-button:** a 54px round outlined button with an arrow, used for back to top. - **nav-bar:** 68px tall (60px on phones), transparent at first, grey after the first scroll, hidden when scrolling down. ## Motion The page loads GSAP 3.13 with ScrollTrigger and SplitText, plus Lenis 1.3 for smooth scrolling. The motion idea is bearing: paper pieces arrive, settle and point. - **First screen:** the arrow drops in over about 1.1 seconds and the heading, lead, facts line and buttons slide in from the right in short stagger, in CSS. Paper pieces flow along the arrow's shaft in a 30 second loop. - **Section headings:** the lines of each heading wipe in from the left, line by line, as they reach the lower part of the screen. - **Signals:** the big arrow swings to each signal's bearing as that item crosses the middle of the screen, a dial tick lights red, and the other names grey out. - **Shifts:** per row, red tape covers the old measure, a small arrow grows and the new measure slides in. - **Field notes:** five photos start piled and part toward the edges while the section is pinned (on wide screens; on phones as it scrolls past), then lift away. - **Sessions:** the red sheet arrives tilted and settles flat; each strip swings into place from a tilt to one side. - **Voices:** the section pins and the portrait track runs sideways, and each red tint slides into place. - **Report:** the cover's arrow parts and three bits fly in and lock together. - **FAQ, contact, footer:** rules draw across, the long contact arrow grows across the section, and the footer wordmark wipes in. Easings are mostly `power3.out` and `power2.inOut`; the nav and button transitions use `cubic-bezier(.7, 0, .2, 1)`. Under reduced motion the entrance and scroll animations, the arrow loop and Lenis are switched off, and the page reads in full; the nav bar still slides away on scroll down and the hover sweeps on buttons still run. Keep the ids and the `data-8b` attributes that the scripts read. ## Do's and Don'ts - Do keep vermilion as the only saturated colour, used for direction and action. - Do set headlines in Source Serif 4 at a light weight with tight tracking. - Do keep labels and pills uppercase and tracked. - Do keep forms square and buttons fully round. - Do build new arrows and bits from clip-paths and the palette variables, not images. - Don't add a third typeface or bold display lines. - Don't add gradients, glass, or shadows on the interface. - Don't round the form fields or the report cover. - Don't add stock icons; the arrow is the only symbol. - Don't widen text blocks past about 40rem.