--- version: alpha name: "Tailor template by 8B" description: "A tailor website template for a bespoke clothier: near-black ground, bottle green and gold, extra-wide capitals and pill-shaped photos. Free HTML template by 8B, MIT." colors: primary: "#1d5a49" secondary: "#e2a73c" neutral: "#121413" surface: "#121413" on-surface: "#f3f2ee" caption: "#c2c8c4" hairline: "#3b403d" pill-ground: "#1c201e" typography: headline-display: fontFamily: TikTok Sans fontSize: 112px fontWeight: 800 lineHeight: 0.8 letterSpacing: -0.01em headline-statement: fontFamily: Funnel Display fontSize: 68px fontWeight: 400 lineHeight: 1.04 letterSpacing: -0.01em headline-lg: fontFamily: Funnel Display fontSize: 52px fontWeight: 400 lineHeight: 1.06 letterSpacing: -0.01em title-md: fontFamily: Funnel Display fontSize: 36px fontWeight: 400 lineHeight: 1.06 letterSpacing: -0.01em body-md: fontFamily: Geist fontSize: 16px fontWeight: 400 lineHeight: 1.6 body-sm: fontFamily: Geist fontSize: 14px fontWeight: 400 lineHeight: 1.45 label-md: fontFamily: Geist fontSize: 14px fontWeight: 500 lineHeight: 1.35 label-caps: fontFamily: Geist fontSize: 12.5px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.04em button: fontFamily: Geist fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.04em rounded: none: 0px card: 20px full: 999px spacing: gutter: 40px gutter-min: 16px section-y: 150px section-y-min: 88px head-gap: 24px nav-height: 72px components: button-primary: backgroundColor: transparent textColor: "{colors.on-surface}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 12px 22px height: 48px button-primary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-surface}" button-header: backgroundColor: transparent textColor: "{colors.on-surface}" rounded: "{rounded.full}" padding: 9px 15px height: 44px input-field: backgroundColor: transparent textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 10px 0 height: 48px card-portrait: backgroundColor: "{colors.pill-ground}" textColor: "{colors.on-surface}" typography: "{typography.label-caps}" rounded: "{rounded.card}" pill-photo: backgroundColor: "{colors.pill-ground}" rounded: "{rounded.full}" row-trunk-show: backgroundColor: transparent textColor: "{colors.on-surface}" rounded: "{rounded.full}" padding: 16px 150px 16px 40px height: 96px row-commission: backgroundColor: transparent textColor: "{colors.on-surface}" typography: "{typography.title-md}" padding: 32px 0 --- # Tailor template by 8B ## Overview Haldane is a one-page site for a bespoke tailor who fits clients in a workroom and on tour. The idea is a dark atelier: a near-black page, a bottle-green opening panel and gold used like a thread of couture silk. Display words are stretched wide, as if a pattern had been pulled across the cutting table, and photos are cut into pills like bolts of cloth. The feeling is quiet and expensive, aimed at someone choosing a maker for a commission. It reads as a craft with a process, not as a shop. ## Colors - **Bottle green `#1d5a49`** (primary): the full-height panel that opens the page, the fill that sweeps across most buttons on hover, and the green glow under portrait stickers. - **Gold `#e2a73c`** (secondary): focus outlines, the step labels, the outlines and sparkles of the trunk show rows, the octagonal stamp, lit progress sparkles and the ring around a sticker on hover. It is always a small mark. - **Night `#121413`** (surface): the page ground, the header bar fill once you scroll, and the fill of the opening button on hover. - **Ivory `#f3f2ee`** (on-surface): main text, button outlines, the dashes under the steps and the dash in the closing headline. - **Mist `#c2c8c4`** (caption): notes, cloth mills, form labels and FAQ answers. - **Hairline `#3b403d`**: rules, price row dividers, the unfilled progress line. - **Pill ground `#1c201e`**: what shows behind a photo before it loads, and the select list's background. ## Typography Three faces, all loaded from Google Fonts. **TikTok Sans** is loaded at weight 800 only, with a width axis from 75% to 150%: step words, trait words, the closing headline and the footer wordmark are uppercase at the 150% width, tight at line height 0.8. The header wordmark is the same face at normal width, 19px. **Funnel Display** at regular weight carries the opening sentence (32px to 68px), section headings (32px to 52px), menu links, commission names, prices, city names and FAQ questions. **Geist** at 400 to 600 handles body text, notes and form fields; labels and buttons are uppercase 12.5px to 13.5px with 0.02em to 0.04em tracking. Sizes are fluid. The opening sentence runs from about 32px on a phone to 68px, and the trait words, the closing headline and the footer wordmark size themselves from a character count held in a `--len` custom property, so a longer line gets a smaller size. The step words size from the viewport instead. ## Layout The page is a single column of full-width sections with a gutter of 16px to 40px and section padding of 88px to 150px. Most sections open with a two-column head: heading on the left, a short paragraph on the right, 24px to 88px apart. Under that sit the wide devices: a row of six tall swatches, a sideways track of four steps, three tilted portraits, four trait words beside one tall photo, hairline price rows with the price in a right column, five trunk show rows, a split block with a photo and three terms, and a two-column contact block. The fixed header bar is 72px high, or 64px under 860px, where the links and button give way to a menu icon. Under 860px the contact grid and the questions block fall to one column. At 760px and under the heads, the archive and the footer columns do too, the swatches form two rows of three, and the portraits alternate left and right. ## Elevation & Depth Shadows are rare. Portrait stickers carry one wide green glow, and on hover a one pixel gold ring is added. Depth otherwise comes from the green panel against the black page, from sticky views that hold while content moves through them, and from the tilt of the portrait stickers. The header bar gains a near-opaque night fill once you scroll. ## Shapes Corners are either fully round or square. Photos, buttons and the trunk show rows are pills (999px, with a 40px radius on phones for the rows). Portrait stickers are 20px-rounded squares with greyscale photos. Form fields have no box, only a hairline underline. The stamp is a gold octagon with a text ring set on an SVG path, and small four-point sparkles mark rules, lists and the FAQ. Crops are tall for cloth (about 0.44 ratio), wide for the process photos and tall for the house cut portrait (0.52). ## Components - **button-primary:** a pill with a 1px ivory outline at 60% opacity and uppercase label; on hover a circle opens from the left edge and fills it green. In the opening panel the fill is night instead, as green on green would vanish. - **button-header:** the same fill sweep without an outline. - **input-field:** underline only, 17px Geist; labels are small mist capitals above. - **card-portrait:** a rounded greyscale photo with a tilt and a capitalised caption. - **pill-photo:** any photo in a full pill. - **row-trunk-show:** a gold-outlined pill row with a city, dates and a book link; rows still waiting turn grey. - **row-commission:** a name, terms and a "from" price between hairlines, with a sparkle at the price divider. ## Motion The page loads GSAP, ScrollTrigger, SplitText and Lenis. Lenis smooths scroll (lerp 0.085) and offsets anchor jumps by the header height. One idea runs through everything: things are pulled into place, like cloth drawn straight on a table. - **Opening:** the two photo pills inside the headline open from a slit on load, 0.9s, one after the other. - **Headings:** SplitText cuts them into masked lines that rise 1.05s with an expo ease on arrival. - **Hairlines:** the line draws across in 1.3s and its sparkles spin in with a back ease. - **Cloth:** the board holds for about 1.1 screens while six swatches straighten from tilted, scattered positions and their frames open into tall pills. - **Fittings:** the view holds while the four-step track moves sideways; dashes draw, photos open from slits and a progress line lights four sparkles. The hold is 0.72 of the track's travel, about three to four screens. - **Cutters:** each portrait rises onto its tilt from a lower, rotated, smaller start as it fades in. - **House cut:** each word widens from 75% to 150% of the face's width as it rises, while its sparkle turns. - **Trunk shows:** the gold stamp rolls down beside the list; rows it has not reached keep a grey outline and sparkle. - **Archive:** a photo is rebuilt from five bands that slide into register. - **Closing headline:** the two words slide in from the edges onto a dash that shrinks. - **Header bar:** it hides on a scroll down past 160px and returns on scroll up, in 0.55s. With reduced motion on, the entrance and scroll animations and smooth scrolling are off, and the pinned views do not apply, so the steps stack and the swatches show as pills. Button fills, the FAQ and the header bar's hide-on-scroll keep working. ## Do's and Don'ts - Do keep gold to small marks: labels, sparkles, outlines, the stamp. Never fill a section with it. - Do keep green for the opening panel and hover fills, and the rest near-black. - Do set every extra-wide uppercase word with its `--len` equal to its character count. - Do keep photos as pills or the 20px sticker, and portraits greyscale. - Do keep the wide capitals for single words and the regular-weight Funnel Display for sentences. - Don't add drop shadows, gradients or rounded rectangles between 20px and 999px. - Don't add a fourth typeface or bold the Funnel Display headings. - Don't put body text on the green panel in mist; use ivory. - Don't stack more motion on a section than its single idea. - Don't remove the `data-8b-section`, `data-8b-motion` and `data-8b-part` attributes the scripts read.