Loft taste grid

Families

One card per style family, in library order. Pick one family per project. Thumbnails jump to the board row.

Swiss / International

Aesthetic: Swiss / International. grid, Helvetica-like grotesque, flush-left ragged-right, strict baseline, limited palette, large numerals, condensed caps (board row 18). (keywords UNVERIFIED, model knowledge)
Reference: row 18 OOH, 03-crawford-trends-ooh-red-poster.jpg; row 28 Astra, 04-crawford-concepts-astra-h1.jpg; row 33 Claro, 05-crawford-hire-us-claro-your-numbers.jpg. Match feel, not content.
Intent: Grid-based and objective: information first, decoration last. A trade or a consultant looks plain, clear and sure of itself, and the type does the work a photo would.
Guardrails: always one strict grid, one sans-serif, flush-left text, colour used sparingly and hard, and one bold move such as numerals as objects or a headline off the grid. Never red on light grey below AA, a viewport-width headline without clamp at 390, six identical icon cards, hands-on-a-laptop stock photos, small uppercase eyebrows above every heading.

Fits: Local service company, Consultant or portfolio.

Board rows

Show Swiss / International rows on the board

Brutalist

Aesthetic: Brutalist. monospace, hard borders, system fonts, harsh contrast, visible grid, no shadows, oversized type, typewriter headline (board row 21). (keywords UNVERIFIED, model knowledge)
Reference: row 21 thinking_about_ai, 03-crawford-trends-thinking-about-ai-mono.jpg. Match feel, not content.
Intent: Raw and anti-polish: the page looks like a document, on purpose. It suits a portfolio or a gallery site that has zero images and still has to read designed.
Guardrails: always a visible grid, hard borders, one mono face for display and labels, a plain sans for body. Never mono body copy past three lines, shadows, emoji as icons, decoration nobody asked for.

Fits: not listed.

Board rows

Show Brutalist rows on the board

Editorial

Aesthetic: Editorial. serif display, drop cap, pull quote, captions, generous leading, photography-led, italic key words (board row 12). (keywords UNVERIFIED, model knowledge)
Reference: row 4 Cadence, picture and page transition (Studio Monet), 02-cadence-page-transition-01.jpg; row 12 Prova Health, 03-crawford-trends-prova-health-hero.jpg; row 44 Rest + Wild, 07-crawford-seven-rest-wild-room-to-breathe.jpg. Match feel, not content.
Intent: A magazine feel where photography and reading lead. It fits a café, a shop, or a design-led trade or consultant with real photos and a story worth reading slowly.
Guardrails: always big serif headlines, generous margins, photos treated like a magazine spread, one photo grade across every photo, AA contrast on every ground tone. Never more than one wave divider per page, header and hero buttons at equal weight, a centred layout without the white space to hold it, cream with terracotta, stock-photo handshakes.

Fits: Local service company (design-led trades), Restaurant or cafe, Consultant or portfolio, Small shop. Warm minimal rows count here.

Board rows

Show Editorial rows on the board

Bento grid

Aesthetic: Bento grid. uneven cards, rounded 16 to 24px, tile hierarchy, consistent gap, one hero tile, subtle borders. (keywords UNVERIFIED, model knowledge)
Reference: No board row yet. Find one in discovery step 2.
Intent: Modular tiles of different sizes, with one clear hero tile. It suits a varied catalogue, a SaaS page, or a business with many small services, where each service gets a tile and one leads.
Guardrails: always uneven tiles with one hero tile, one consistent gap, subtle borders. Never three identical rounded cards in a row with an icon and two lines, emoji as icons, decoration nobody asked for.

Fits: Small shop (varied catalogues), SaaS or app landing page.

Board rows

No board row yet.

Glassmorphism

Aesthetic: Glassmorphism. backdrop-blur, translucent fill, 1px light border, soft glow, layered depth, vivid backdrop, glass caption card (board row 6). (keywords UNVERIFIED, model knowledge)
Reference: row 6 Cadence, parallax (Arden, Atelier, Haruka), 02-cadence-parallax-01.jpg. Match feel, not content.
Intent: Frosted translucent layers over a vivid backdrop. Used sparingly on a SaaS page, one glass layer adds depth over the product, as in Skiftly's glass callouts.
Guardrails: always glass on one surface at a time, such as the sticky header once scrolled 40 px or one caption card, with a 1px light border. Never a purple or blue-to-purple gradient as the backdrop, parallax on mobile or under reduced motion, animation on anything but transform and opacity.

Fits: SaaS or app landing page, used sparingly.

Board rows

Neo-brutalism

Aesthetic: Neo-brutalism. thick black outlines, hard offset shadow, flat saturated colour, rounded chunky buttons, sticker feel. (keywords UNVERIFIED, model knowledge)
Reference: No board row yet. Find one in discovery step 2.
Intent: Playful brutalism, chunky and friendly. It suits a loud young café or a young shop brand that wants to look confident, not polished.
Guardrails: always one shadow token, the hard offset, and thick outlines on every control. Never an animated box-shadow (move the element with transform), more than one accent per screen, emoji as icons.

Fits: Restaurant or cafe (loud young place), Small shop (young brand).

Board rows

No board row yet.

Linear-style

Aesthetic: Linear-style. near-black, thin borders, subtle gradient glow, tight tracking, small type, restrained motion. (keywords UNVERIFIED, model knowledge)
Reference: row 43 Harwick & Associates, 07-crawford-seven-harwick-financial-hero.jpg (the board calls it Linear-style restraint on a light theme). Match feel, not content.
Intent: Dark, precise SaaS. A SaaS page or a technical consultant reads exact and calm; on a light theme the same restraint carries a finance firm.
Guardrails: always thin borders, tight tracking, restrained motion with one labelled line per moving part in DESIGN.md. Never near-black with an acid accent, numbers the client cannot back, stock tower photos.

Fits: Consultant or portfolio (technical consultants), SaaS or app landing page.

Board rows

Apple-style

Aesthetic: Apple-style. huge headline, centred, full-bleed imagery, SF-like sans, scroll reveal, whitespace, two weights, spec sheet as annotation (board row 14). (keywords UNVERIFIED, model knowledge)
Reference: row 14 Jesko Jets, 03-crawford-trends-jesko-jets-product.jpg; row 11 Cadence, video (Sable, Kova, Apple), 02-cadence-video-01.jpg. Match feel, not content.
Intent: Product-led minimalism: one product, a lot of space, and the type annotates the object. It fits a shop with a single hero product, a SaaS page, or a consultant with one clear offer.
Guardrails: always the product as the only picture, whitespace, two weights, the poster frame as the LCP image when video is in. Never scrolljacking, grey labels on sand below AA, video heavier than the rest of the page, scroll-scrubbed video as an mp4.

Fits: Consultant or portfolio, Small shop (single hero product), SaaS or app landing page.

Board rows

Show Apple-style rows on the board

Craft

Aesthetic: Craft. paper or linen texture, hand-made photography, earthy palette, characterful display face, grain, uneven edges, stamped or stickered labels. (keywords UNVERIFIED, model knowledge)
Reference: No board row yet. Find one in discovery step 2.
Intent: Hand-made and textured: the material leads, the grid follows. It suits a maker whose product you can touch, such as the yarn shop, where the texture is the proof.
Guardrails: always one grain overlay at 3 to 5 percent that never animates, one photo grade for every photo, a display face whose licence covers web use. Never cream with terracotta, a hero with no product, person or place, fonts from a third-party CDN.

Fits: not listed.

Board rows

No board row yet.

Board

Every row on the taste board. Open a screenshot for the full size.

(full size, opens in a new tab)

Row 1Editorial

BONT video title card, "LVL.03 Sell umbrellas when it rains" (Adrián Somoza, 2026-10)

Editorial poster, Swiss

Steal. The title block: a hairline rule across the top edge, one oversized numeral as the object (LVL.03 at about half the frame height, light weight), small meta text pinned in the corners (author top right, a tiny caption with a mascot bottom left), the headline in a second corner at a quarter of the numeral size. One emoji as the only colour. Maps to Numerals as objects, Mono caps eyebrows and Sticker labels in ../motion-patterns.md. Fits the joinery (step numerals) and the accounting firm (section numbers as title blocks).

Avoid. It is a video frame, not a page. White type only works because the photo is dark and out of focus; on a lit photo it needs a grade. The Korean caption is decoration, do not copy text you cannot read.
(full size, opens in a new tab)
Row 2Editorial

Cadence, reveal section (cadence.rubenstom.com, Ruben Stom, 2026-10)

Editorial, warm minimal

Steal. Reveal as the baseline: blocks fade up in order (eyebrow, headline, lines, image). Photos wipe up from the bottom edge inside their box, not the whole card. A three-card row with eyebrow in mono caps above, caption block below. Then a quiet two-column: small portrait top left, caption bottom left, big portrait right.

Avoid. Nine captures of nearly the same frame. Reveal on everything is a template tell; the point is the order and the wipe, not the fade.
8 more shots
(full size, opens in a new tab)
Row 3Editorial

Cadence, text reveal

Editorial dark

Steal. A paragraph at display size on near-black, words go from 20 percent grey to white as you scroll past them, driven by scroll not time. One block per page, max two paragraphs.

Avoid. Not for body copy. Fails if the muted state is unreadable under reduced motion: static version must be full ink.
1 more shot
- 02-cadence-text-reveal-02
(full size, opens in a new tab)
Row 4Editorial

Cadence, picture and page transition (Studio Monet)

Editorial serif

Steal. The photo stays centred in a frame, the page ground behind it changes tone (paper to off-white) as the project changes, and two small mono-caps labels sit left and right at the photo's baseline (PROJECT 02/02/2026, THE FIELD Art Direction). Serif wordmark top centre, a pill MENU under it.

Avoid. Centred layout only works with this much white space. The ground tone must keep AA contrast for the labels.
2 more shots
- 02-cadence-page-transition-02
- 02-cadence-page-transition-03
(full size, opens in a new tab)

Row 5unmapped

Cadence, prompt recipe

n/a

Steal. How to ask for a reveal: 01 Type (fade, wipe, slide), 02 Direction (fade up, wipe right, slide down), 03 Elements (which blocks on the page). Three words and a list, that is the whole prompt.

Avoid. Copying the recipe without the DESIGN.md Motion label line. Both go in.
(full size, opens in a new tab)
Row 6Editorial

Cadence, parallax (Arden, Atelier, Haruka)

Editorial luxury

Steal. Display wordmark sits behind the subject, the subject is cut out and moves slower than the type. A glass caption card bottom left scrolls off first. Hanging objects (discs) at three depths. Exploded view: balloon, text, mountain and water are separate layers.

Avoid. Needs a cut-out subject or a layered photo. Text never moves on our sites; here the type is the back layer, which is the exception that makes it premium. Off on mobile and reduced motion.
5 more shots
(full size, opens in a new tab)
Row 7unmapped

Cadence, parallax types

n/a

Steal. Three named types: 01 Layers (stacked cards at depth), 02 Side by side (a photo grid where columns move at different speeds), 03 In a frame (one photo moves inside a fixed window). Name the type in DESIGN.md.

Avoid. Mixing types on one page.
2 more shots
- 02-cadence-parallax-types-02
- 02-cadence-parallax-types-03
(full size, opens in a new tab)
Row 8Editorial

Cadence, loading and intro

Editorial

Steal. A loader sequence: wordmark letters track in, one photo fades, the contact sheet of 21 photos, five vertical strips that become one landscape, the photo inside the wordmark as a text mask, photos scatter and converge, a stack that settles, the caption splits to the sides (PROJECT, OLIVE GROVE). Rule on the prompt card: under 3 seconds, first visit only, coming back goes straight to the page.

Avoid. A loader on every visit. Any loader on a Lighthouse 100 site unless it is pure CSS on cached assets. Not for a trade site, maybe for the café or the yarn shop once.
16 more shots
(full size, opens in a new tab)
Row 9Editorial

Cadence, travel (Fieldnotes)

Dark editorial

Steal. A 3x3 grid of photos tilts into perspective and becomes a floor of photographs flying under a headline that un-blurs (A field of photographs). Mono caps eyebrow with the year range. Get in touch pill top right.

Avoid. WebGL or 3D transforms on 60 images. Experiment page only. Blur on text costs paint time.
3 more shots
(full size, opens in a new tab)
Row 10unmapped

Cadence, slide-over project panel (Paul Hamilton)

Dark portfolio

Steal. Project list on the left in a serif display name plus three rows of role, tool and one paragraph, hairlines between. The project page slides in from the right as a tall panel with its own close button. Prev and next as round buttons. Visit the live website as a pill.

Avoid. The panel is a mock, not a live site. Dark page with a light panel needs the panel at full contrast.
3 more shots
(full size, opens in a new tab)
Row 11Apple-style

Cadence, video (Sable, Kova, Apple)

Product editorial

Steal. Three triggers: 01 on load (keyboard assembles from exploded layers while the headline Built in layers sits bottom left), 02 on a trigger (Unveil button pulls the cloth off the piano, then the spec row 274 cm, 88, 480 kg appears), 03 tied to the scroll (Apple camera module rotates as you scroll). Wordmark as a text mask over the video (Sable). Page counter 01 / 04 bottom left.

Avoid. Generated video weighs more than everything else on the page. Scroll-scrubbed video is an image sequence, not an mp4. Start frame equals the previous clip's end frame.
15 more shots
(full size, opens in a new tab)
Row 12Editorial

Prova Health (a bycrawford.com build, shown 2026-10)

Editorial, corporate

Steal. Navy ground, serif display with the two key words in italic pink ("health innovation"), one bold phrase in the subhead, a single white Get in touch button. A data-chart illustration is the hero object instead of a stock photo. A soft wave divider hands over to a white Trusted by logo row, then What we do as three navy cards. Fits Hallberg Redovisning: the numbers are the picture.

Avoid. One wave divider per page at most; it is a template tell when repeated. The header and hero both carry Get in touch at equal weight, which breaks the one call to action rule.
1 more shot
- 03-crawford-trends-prova-health-services
(full size, opens in a new tab)
Row 13Editorial

The Electric Car Scheme

Conversion, warm minimal

Steal. Centred hero in a strict order: Trustpilot proof line, two-line headline that states the outcome (Save up to 50 percent on EV charging), one-sentence subhead, filled primary plus outlined secondary, four check-mark benefits in one row, then a cropped happy-customer photo. A deep green band closes the first screen. The six-cell Why employers choose grid: pale green tiles, hairline gaps, a headline plus one paragraph per cell, no icons.

Avoid. Two buttons at equal size pull two ways; our rule is one primary. The yellow header button is a third.
1 more shot
- 03-crawford-trends-electric-car-scheme-grid
(full size, opens in a new tab)

Row 14Apple-style

Jesko Jets (product page, shown as a motion-led example)

Product editorial, luxury

Steal. The product shot from above as the only picture, centred, with the spec sheet pinned to the left margin as mono-caps pairs (label grey, value black) and a short paragraph top right. Nav left, contact right, one pill button bottom centre. Type as annotation around an object: the same move as Ek Snickeri's dimension lines.

Avoid. He shows it as the kind of page that scrolljacks. Copy the layout, not the scroll. Grey labels on sand fail contrast.
(full size, opens in a new tab)

Row 15Editorial

Apex consultancy (dark, shown as motion-led)

Dark editorial, luxury

Steal. Left column only: mono-caps eyebrow, a four-word headline stacked one word per line in a light serif, one word in acid green, three numbers in the same green on a hairline baseline. The photo fills the right half and is darkened to near black at its edges, so page and photo read as one surface.

Avoid. The headline reveals line by line on load, which holds the LCP. Three numbers (240+, 2.4B, 94 percent) are the stat slop pattern unless they are true.
(full size, opens in a new tab)

Row 16Editorial

Dragonfly Insurance

Warm minimal, trade

Steal. "Sick of Bad Insurance. So Are We." A headline that takes the customer's side in seven words. Logo in the middle of the nav, a subhead that names who it is for (small businesses), then one rounded photo card of a real tradesperson at work. Hero copy as a voice example for the roster.

Avoid. Two equal buttons again. A cookie bar on a site with no tracking to justify it.
(full size, opens in a new tab)

Row 17unmapped

Interdoor (industrial doors, trade)

Corporate, trade

Steal. Caps headline in a condensed grotesk over a blue-tinted photo, a hairline rule under it, paragraph and outlined button left, and three service cards (We Install, We Service, We Repair) with an icon badge, overlapping the hero's bottom edge. The three-verb card trio fits Ek Snickeri's services.

Avoid. Search box, phone number, Contact and Learn more: four asks on one screen. The blue wash turns the photo to mud.
(full size, opens in a new tab)

Row 18Swiss / International

OOH (out-of-home advertising)

Swiss poster, bold

Steal. Two-line headline in red condensed caps at the full viewport width, a one-line subhead, one red pill button, nothing else. The photo starts below the fold and sits offset right, so the type is the hero. Fits the yarn shop or a bold trade direction.

Avoid. Red on light grey needs the darker red for AA. A headline this size wraps badly at 390 unless it is set in clamp.
(full size, opens in a new tab)

Row 19Editorial

Eclipse (marketing studio)

Editorial, one colour

Steal. A single lime radial circle behind a two-line serif headline with one word in italic. Nav spread across the full width, one black pill button, a thin arrow pointing down. One colour, one shape, one face.

Avoid. Body copy on the lime-to-white gradient fails contrast; keep text on the flat part. An arrow that tells people to scroll is a tell.
(full size, opens in a new tab)
Row 20unmapped

La Palatine (baroque ensemble) and Glossier

Collage, maximalist

Steal. Collage as the hero: cut-out people, a plaster bust, lime burst rays and a magenta hand on a marble ground, serif wordmark right with a pull quote. Glossier: the wordmark at viewport width over a product-filled photo, two sticker circles for the sale. Both are type behind or over the subject, done with real objects.

Avoid. Needs a photo shoot and cut-outs; stock cannot do it. He shows both as the trend noise, not as advice.
1 more shot
- 03-crawford-trends-glossier-wordmark
(full size, opens in a new tab)

Row 21Brutalist

thinking_about_ai (personal blog)

Mono, plain

Steal. One mono face for display and labels: a three-line typewriter headline, a two-sentence subhead in a sans, a filled black button and a ghost one, hairlines, a row of topic chips, then a dated post list. A work-in-progress bar at the top. Zero images and it still reads designed. Fits the gallery site or a portfolio.

Avoid. Mono body copy tires after three lines; keep mono for display and labels.
(full size, opens in a new tab)
Row 22unmapped

Silicon Hills Talent Partners, and Bassline (venue)

Dark photo hero

Steal. Silicon Hills: a dark robot-arm photo, a proof pill above the headline (300+ roles filled), a two-line headline, a subhead that names the niche, lime pill primary plus white pill secondary, then a white card rising from the bottom edge labelled Our Credentials. Bassline: a lime caps wordmark over a darkened venue photo, a tagline under it, nothing else.

Avoid. Silicon Hills has the proof pill, Get Started and Book a Call: three asks. Bassline is a poster, not a page.
1 more shot
- 03-crawford-trends-bassline-venue
(full size, opens in a new tab)
Row 23unmapped

Avoid set from the same video

n/a

Steal. What he calls finished-looking slop: Valmera with five messages competing in the hero (his red arrows), the neon Build the impossible motion-led hero, CodeBlast's yellow on white at about 1.5 to 1, Flowly's form with no labels, an Our Amazing Clients logo row, FinanceTrack's centred serif plus stats template. Use them in the critique's could-this-be-any-other-company pass.

Avoid. Everything in them.
5 more shots
(full size, opens in a new tab)
Row 24Editorial

Podcast Studios (in Crawford's concepts video, 2026-05)

Dark editorial

Steal. The first screen is the whole sales argument: eyebrow, outcome headline ("Creating the best content in your industry just got a whole lot easier"), one paragraph, a green Book now, three check-mark proofs along the bottom edge, and a five-star quote with a face sitting on the hero photo. Inner page: Studio One and Studio Two as tabs under one headline. Fits Skiftly and any dark direction.

Avoid. Dark green on near-black needs the contrast check on body text.
1 more shot
- 04-crawford-concepts-podcast-studios-dark
(full size, opens in a new tab)
Row 25Editorial

The 50X Program, homepage and landing page (same video)

Corporate, editorial

Steal. He labels the hero parts: headline with one word in script ("Transform"), subheadline, image, two buttons. The landing-page twin keeps the same offer with no nav, one long column of copy, the form beside it and one filled button. The pair is the homepage versus landing page lesson in one frame: front door for everyone, landing page for one action and one visitor.

Avoid. Two filled buttons in the hero at equal weight. The blob-shaped photo masks read as a template.
1 more shot
- 04-crawford-concepts-50x-landing-page
(full size, opens in a new tab)
Row 26unmapped

Bold Leadership, SME Matters, Tanager (his annotation frames)

Corporate

Steal. Three teaching frames. Bold Leadership: the button says "Get Free Strategy Call", which names what you get; "Learn More" beside it is the weak one. SME Matters: hierarchy through size and colour, one coral button, one testimonial with a face. Tanager (public media): his boxes around the empty space show that the margins are the design, and "Trusted by Public Media Stations Nationwide" sits right under the numbers.

Avoid. The CTA frame keeps both buttons; ship one.
2 more shots
- 04-crawford-concepts-sme-matters-about
- 04-crawford-concepts-white-space-annotated
(full size, opens in a new tab)
Row 27unmapped

Cheap against premium: BizBoost and Tanager side by side

n/a

Steal. The comparison frame. BizBoost crams six calls to action, yellow and red blocks and a stock team photo into one screen; Tanager gives the headline, four numbers and one quote room. Hangs next to row 23 in critique: if a page looks like the left one, nothing else matters.

Avoid. Everything on the left.
1 more shot
- 04-crawford-concepts-premium-tanager
(full size, opens in a new tab)
Row 28Swiss / International

Astra and Investment criteria (typography hierarchy frames)

Swiss, corporate

Steal. Astra: "We acquire exceptional businesses" as the H1 with one word in the accent, a mountain photo behind, a short paragraph, one button. Investment criteria: an H2 with one accent word, six items in a three-column grid, each a small icon, a bold label and two lines of body. That H1, H2, body ladder is the whole hierarchy lesson.

Avoid. Six identical icon cards is a template tell; vary the first one or cut the icons.
1 more shot
- 04-crawford-concepts-investment-criteria-h2
(full size, opens in a new tab)
Row 29Editorial

Crawford's own pages: designer page, Start a Project, badges footer, Web Designer New York

Corporate, editorial

Steal. Hero with the form beside the headline so the ready visitor never hunts for contact. Three laurel badges (Squarespace Marketplace Expert, Community Leader, Circle Member) under the buttons and again in the footer, which he calls the highest-leverage proof per pixel. The Start a Project form promises a reply within 24 hours above the fields. The New York page is the same hero retargeted to one city with a local case beside it: one of about 80 landing pages by industry and place.

Avoid. Laurel wreaths are a cliché; use the client's real accreditation marks. The Hybrid Way frame puts a logo row above the hero, which his own avoid set argues against.
4 more shots
(full size, opens in a new tab)
Row 30unmapped

hire-us.bycrawford.com hero (Crawford, 2026-10)

Corporate, dark

Steal. One screen that does the whole job: eyebrow "From YouTube? This is for business owners", headline "A website that actually wins you work" with one word highlighted, a four-line paragraph, a video sales letter where the hero photo would be, and the enquiry form beside it with four fields, a five-star line with the 200+ review count and one quote, a green Send enquiry, and "Rather talk it through? Book a call" under the button. A handwritten "Work with us" arrow points at the form. The live 390 capture shows the same order stacked.

Avoid. A video in the hero only works when the visitor already knows the face; for a stranger it is a photo.
2 more shots
- 05-crawford-hire-us-hero-vsl
- 05-crawford-hire-us-live-390
(full size, opens in a new tab)
Row 31unmapped

Qualification block: hire-us and the Veridian generic

Corporate

Steal. "Before you get in touch: who this is for" as two cards. Left, dark, three green ticks: you run a business that already has customers, you want a website that brings enquiries, you want it done properly. Right, light, three crosses: you are a designer (keep watching the videos), you are after the cheapest site, your budget is under the minimum. Then Book a call, and for the wrong visitor a link to the right video so nobody leaves empty-handed. The Veridian frame is the same block in a generic template with his arrows on the two routes out.

Avoid. Only works when the client will say the minimum budget out loud.
1 more shot
- 05-crawford-hire-us-veridian-qualification
(full size, opens in a new tab)
Row 32Editorial

Case cards with the action beside the proof (hire-us)

Editorial

Steal. Each case is a two-column row: industry in mono caps, the client name as the heading, two lines on the business problem, and a Book a call pill with his headshot and a green online dot, next to an angled stack of the site's screens. The button sits inside the proof, so the visitor acts while the result is fresh. Three cases, three industries.

Avoid. The angled screenshot stack is a 2024 agency look; a flat crop at 1440 and 390 shows the work more honestly.
2 more shots
- 05-crawford-hire-us-case-prova-health
- 05-crawford-hire-us-case-lucky-voice
(full size, opens in a new tab)
Row 33Editorial

Claro, the accounting site in his case cards

Editorial, Swiss

Steal. The site Hallberg Redovisning should learn from. "Beyond the Balance Sheet" on navy with a plant photo, "Your Numbers, Perfected" over four product photos (calculator, tablet, notebook, chart), "FINANCIAL ARCHITECTURE" in condensed caps over hands on paper, "The Claro Advantage" as three numbered rows on hairlines (01 Proactive Guidance, 02 Transparent Pricing, 03 Tech-Driven Efficiency), and testimonials as 01 02 03 in a serif numeral column.

Avoid. Hands-on-a-laptop stock photos. Use the numbers as the picture instead (row 12).
3 more shots
(full size, opens in a new tab)
Row 34Editorial

Offer and add-ons as cards (hire-us)

Dark editorial

Steal. "Hosted and managed websites that win work": four columns, each a bespoke mini-screen of the thing (build, hosting, change request, monthly report) above a label and two lines, one fee line and one Book a call. Then the add-ons as a three-card row where the core plan is the dark card and SEO and AI search and Paid ads sit beside it with a plus sign joining them, each tied to the main offer in one sentence.

Avoid. Four columns stack into a long scroll at 390; collapse to two.
1 more shot
- 05-crawford-hire-us-add-ons
(full size, opens in a new tab)
Row 35Editorial

Process, channel proof, testimonials, FAQ, final booking (hire-us)

Editorial

Steal. "From here to live in three steps" with a drawn mini-screen per step and the step name in mono caps (The brief, The plan, Live). "The channel shows you how. We do it for you." with 33.5K, 626 and 2M+ as three tiles, three video thumbnails and a handwritten note signed Sam. Testimonials as one highlighted dark card plus two supporting and the 200+ count. "Questions viewers ask first" as a plain accordion (Will I actually speak to Sam, How much does it cost, Do you do one-off builds, Do I have to add SEO or paid ads). "Rather talk it through? Book a call" with the calendar in the page and the reviews repeated.

Avoid. An embedded calendar adds a third-party script and cookies; on a showcase site it is a link.
4 more shots
(full size, opens in a new tab)
Row 36Editorial

Finano, the lime finance pages, two quiet editorial pages, Harmony by Design (hire-us examples)

Corporate, editorial, warm minimal

Steal. Finano is the "first screen isn't finished" frame: three equal buttons and an illustrated chart, nothing to decide. The lime pages show one colour doing all the work: a newsletter box with one line and one field, and "Trusted where financial wellbeing matters" with five logos, one quote and four numbers on the same lime ground. "How we designed this page" and "Let's make some room" are a serif page that explains its own layout in three notes on the right and closes with one line and an email. Harmony by Design is a sage-green landscape hero with a Gmail count badge as the joke.

Avoid. Lime at 390 needs dark text everywhere, no white type on it.
5 more shots
(full size, opens in a new tab)
Row 37unmapped

Avoid set from hire-us: company news, the history wall, two equal buttons

n/a

Steal. What he strips off a sales page: "Latest updates from our team" as three news cards on a conversion page, a full company history with a timeline and eight photos, and the Dragonfly hero with "Request a free quote" and "Request a policy review" as twins (his red ring). The rule under it: if you cannot say what a block does for the visitor, take it out and see whether the page got clearer.

Avoid. n/a
2 more shots
- 05-crawford-hire-us-avoid-company-history
- 05-crawford-hire-us-dragonfly-two-buttons
(full size, opens in a new tab)
Row 38Editorial

Tremendo and an architecture studio (Juan Mantz, 2025-09)

Editorial, bold

Steal. Tremendo: "Avoid just-fine, win great clients." in a serif with the key words in italic, a black-and-white hand reaching in from the top right, dark rocks as props, one yellow Book a call, mono caps meta. The resources page lists Strategy Call (Free), Tremendo Studio (Starts at 10K), Work with me (Now booking for June) as three plain rows with the price on the line. The architecture site: a sculptural render, nav in mono caps, "Replace fear of the unknown with curiosity" and a black BOOK A CALL block.

Avoid. The floating 3D props are a motion-led look; keep the type and the price rows.
1 more shot
- 06-mantz-great-websites-architecture-hero
(full size, opens in a new tab)
Row 39Swiss / International

Dapper and the product-led founders page (Mantz)

Swiss, editorial

Steal. Dapper: "Hire a B2B Creative Powerhouse" with Creative in italic serif, green pixel marks as the brand gesture, small photos pinned at the edges, a one-line paragraph and Discover more; the inner page "A custom Demand Team built for your goals" with chips (Content, Google, LinkedIn, Video) scattered around a phone. The founders page: "Design and development partner for product-led founders", four small polaroids as the nav (Work, Services, About, Plans), two buttons at the foot, everything else empty.

Avoid. Scattered chips need a static fallback and a reduced-motion state.
2 more shots
- 06-mantz-great-websites-dapper-demand-team
- 06-mantz-great-websites-product-led-founders
(full size, opens in a new tab)
Row 40Swiss / International

Caladan, Pricefy, Estra, March of Glaciers (Mantz)

Dark, Swiss, SaaS, experiment

Steal. Caladan: dark ground, mono caps eyebrows (ALIGNED EXPERTISE, WHAT WE DO), giant outlined words for the services with a one-line description and an arrow each, a drawn chart as the illustration, a careers page that is a plain list with a prompt-style icon per role. Pricefy: SaaS hero with the product photo in a circle, price stickers around it (My price, Amazon, eBay), one filled and one outline button, a platform logo row under "Connect your store with one click". Estra: a poster in the page, the campaign photo doing all the work. March of Glaciers: a title card with "use your cursor to carve a glacial path", the experiment end.

Avoid. Caladan's outlined display words need weight on a phone; the glacier page is a portfolio piece, not a client pattern.
5 more shots
(full size, opens in a new tab)
Row 41Editorial

Markups.ai before and after (Sam Crawford rebuild, 2026-07)

Editorial, SaaS

Steal. The after: a line-drawn duck mascot, a pill eyebrow "All Work. No Platform." in the accent, headline "Any Contract. Anywhere.", one line of context (Agent Marko is trained on your historical contracts), one filled pill "Book a demo", then "Trusted by the World's Most Innovative Companies & Firms" over a logo row (Wolters Kluwer, Science Exchange, Grubhub, wonder). Headline, context, proof, action in one screen, and the visitor could decide without scrolling. The before: teal ground with a wall of faded contract text behind "Custom Contract Revisions in Your Inbox in 15 min", a logo sitting off its line, an outlined "Schedule a call" that was not a proper button.

Avoid. The before: text behind text, a vague button label, no proof in the first screen.
3 more shots
(full size, opens in a new tab)
Row 42Swiss / International

Spark, SEOSpace, HomebuilderAI: the four-part hero (Crawford, 2026-07)

Swiss, SaaS, editorial

Steal. Spark: "AI training and transformation for agencies and brands" numbered on screen as 1 headline, 2 context, 3 proof, with a pink filled button and an outline arrow button, a photo of a full room with a green asterisk as the mark, and "Trusted by ambitious agencies and brands" (jkr, GRIND, Wonderhood, EPOCH) directly under the hero. SEOSpace: dark purple, a Google 5.0 rating and "35,000+ installs" line above the H1, "Get Your Squarespace Website Found In [Perplexity]" with a rotating last word, one mint "Start Free Trial", the product screenshot rising from the bottom edge. HomebuilderAI: yellow pill buttons, the book cover as the hero image, "Download your free copy".

Avoid. A rotating headline word needs a static fallback and reduced-motion state.
3 more shots
(full size, opens in a new tab)
Row 43Editorial

Harwick & Associates and Meridian Financial Group (Crawford, the two finance heroes)

Editorial, Linear-style restraint on a light theme

Steal. Harwick: cream ground, FINANCIAL ADVISORY as a mono eyebrow, "Measured Decisions. Lasting Wealth." in a serif with the second line in a lighter blue, one paragraph, filled Our Services beside a plain Learn More, glass towers bleeding off the right edge, then a navy band with four numbers ($4.2B, 1,800+, 28, 94%) and a label under each. Meridian: TRUSTED BUSINESS FINANCIAL ADVISORS eyebrow, "Clarity and Confidence in Every Financial Decision" in navy, an office photo with a floating card "Average client savings $84,000/yr" as the proof, Get a Consultation filled in the header, Schedule a Free Call in the hero. The closest frames on the board to Hallberg Redovisning, at a smaller scale: one honest number card, not a stats band.

Avoid. Stock tower photos. Harwick's numbers are big-firm numbers; a one-person firm invents nothing.
1 more shot
- 07-crawford-seven-meridian-financial-hero
(full size, opens in a new tab)
Row 44Editorial

Rest + Wild, Slopes Bio, Tanager under the squint test (Crawford, white space and hierarchy)

Editorial, luxury

Steal. Rest + Wild: a full-bleed photo of a dog asleep on a bed by a window, "A LITTLE ROOM TO BREATHE" in light serif caps at the bottom right, a thin "569 reviews, 4.9 stars" line under the hero; further down a maroon AS FEATURED IN band (Condé Nast, Marie Claire, Mr & Mrs Smith, The Times) and IN YOUR OWN WORDS with three five-star quotes set as serif caps headlines. Slopes Bio: a three-line headline, a short paragraph, one filled and one plain button, and the bottom third of the hero left empty on purpose, which his arrow labels "White space". Tanager: the hero still reads through a blur spotlight, which is the squint test on screen.

Avoid. Tanager's blurred frame is a test, not a look.
4 more shots
(full size, opens in a new tab)
Row 45Swiss / International

Proof at the point of doubt: Electric Car Scheme, Crawford's pricing (Crawford, 2026-07)

Swiss, SaaS

Steal. Electric Car Scheme: "Excellent, five green stars, Trustpilot" above the H1, Book a demo in green as the one high-contrast element on a pale mint page, and off the site a Trustpilot profile at 4.8 from 1,113 reviews. Crawford's own pricing: three columns (from $4,500, from $9,500, Let's talk) with a What's included list each, and the review grid directly under the prices. The placement rule: logos by the hero, the testimonial beside the price, the rating on the thing being decided.

Avoid. A reviews page nobody clicks; a logo row headed Our Amazing Clients.
2 more shots
- 07-crawford-seven-electric-car-scheme-trustpilot
- 07-crawford-seven-hire-us-pricing-with-reviews
(full size, opens in a new tab)
Row 46unmapped

Mobile: 37 against 63, thumbs and tap targets (Crawford, 2026-07)

n/a

Steal. A crypto course landing page at desktop and on a phone with 37% and 63% under them, his split of visitors; a consulting page on a phone with red circles on buttons that sit too close for a thumb. The habit: real phone, one hand, read without zooming, tap the main button without hitting another target, nothing off the edge.

Avoid. Nothing to steal from the pages; the frame is the test.
1 more shot
- 07-crawford-seven-phone-tap-targets-annotated
(full size, opens in a new tab)
Row 47unmapped

Avoid set from the seven principles (Crawford, 2026-07)

n/a

Steal. CapitalNext: four icon cards, two quote boxes, a newsletter field and three footer columns all in the first screen, nothing leading. iBridge: "Revolutionize the way you do business" boxed in red, an empty boxed area beside it, a tiny orange button, everything at one weight. AiNexaPro: "THE #1 AI PLATFORM FOR SERIOUS BUSINESS PEOPLE" in yellow on a blue gradient, shown next to Slopes as bad against good. TaskFlow: "Schedule a Call" as the vague SaaS button. "Business operations, finally legible." set in light grey on white. "Find Your Perfect Stay in Canmore": white text on a lake photo with no scrim. The neon "AUTOMATION PLATFORM YOU WILL EVER NEED!!!" with eight buttons. EliteFinance: a script face on the headline, the subhead and the body of a finance site. A page called Client Testimonials with a 1,200-review wall far from any decision.

Avoid. All of it.
7 more shots
(full size, opens in a new tab)

Row 48unmapped

The premium principles checklist (Crawford's one-pager)

n/a

Steal. Seven numbered rows, each with a WEAK line in red, a STRONG line in blue and one checkbox question under it. The body text is blurred in the video, the shape is the point: weak against strong per principle, one question to tick. Loft's critique checklist is the same device.

Avoid. Gated behind an email address at bycrawford.com/premium-principles.
(full size, opens in a new tab)
Row 49Editorial

Seed DS-01 landing page built from the "Poop Every Day" ad (Will Sartorius with Dara Denney, 2026-10)

Editorial, conversion page

Steal. Dark green hero panel: mono eyebrow DS-01 DAILY SYNBIOTIC, H1 "Poop every day. No bloat after every meal." lifted verbatim from the brand's winning ad, a three-line lede with the trial numbers, a price chip "From $49.99 / month, cancel anytime", filled Start Now beside an outline How it works, a mini trust line (4.8 stars, 13,647 reviews, clinically studied), the jar on a cream card with a BESTSELLER tag. Then the page order: why it works (four benefit cards beside the product), a results timeline (7 days, 2 weeks, 4 weeks, 6 weeks as four cards), a four-number stats row, a dark capsule band with four numbered points, persona quotes, proof bars from the trial, a comparison table (DS-01 against other probiotics), reviews, a lime risk-free band, a mission band, FAQ as accordions, a final dark call to action that repeats the H1 and the price. One page, one job, no way out except the buy box.

Avoid. The page is the ad's promise in page form and only works when the ad exists. Every number came from the brand's own pages; the build flagged what it would not guess.
10 more shots
(full size, opens in a new tab)
Row 50unmapped

The playbook's four gates in Claude Code (Sartorius, 2026-10)

n/a

Steal. Intake gate: what was filed (ads, product text, education pages, images, live tokens) and what is still missing. Page type gate: conversion page (recommended, with the whole section order in one line), listicle, quiz, each with when it fits the ad. Hero gate: Hero A bold ad-verbatim, Hero B relief plus science, or blend, each spelled out as eyebrow, H1, lede, price chip, mini trust. Ship gate: a QC score, a "Needs the client (never guessed)" list (real product IDs, the discount code, the licensed webfont, review attributions), then deploy noindex, hold for review, or freeze the learnings into a filled brief and checklist.

Avoid. The score is the playbook grading itself; read the list under it, not the number.
3 more shots
(full size, opens in a new tab)
Row 51unmapped

The inputs: Ad Library statics and a DevTools font scrape (Sartorius, 2026-10)

n/a

Steal. Meta Ad Library filtered to one brand, sorted by impressions, media type set to statics with copy on them; the ad that keeps coming back ("Poop Every Day", "I'm finally pooping every day") names the angle for the page. Then DevTools on the brand's own H1 with the styles filter set to "font", copied as text, and again with "color": the live type hierarchy and palette without a brand book.

Avoid. A scrape gives values, not the reasoning behind them; a brand book still wins when one exists.
1 more shot
- 08-sartorius-landing-page-devtools-font-scrape

Premium moves

Written 2026-10-14 after site 1 (Ek Snickeri). The first build was clean but read as stock: contained hero photo, modest headline, every section at the same rhythm, no motion. The list below is the shared vocabulary for round 2 on Ek Snickeri and for sites 2 to 5. Pick a few per site, never all. The rule in Loft is one named bold move per site under Direction in DESIGN.md. The rest is finish. The motion side of this list grew into ../motion-patterns.md on 2026-10-14, with build recipes, guardrails and a per-site plan; that note is the one to read for motion.

Signature (the bold move)

Drawing annotations. Hairline dimension lines and millimetre ticks drawn over the hero photo and the project photos, in the accent colour, like a workshop drawing. Ties straight to the Ek Snickeri direction ("read like a carpenter's drawing"). Nobody else's joinery site has it.
Numerals as objects. The 01, 02, 03 and the stats at display size, partly overlapping the photo edge, outlined (stroke, no fill) when behind a photo.
Headline off the grid. Display headline at clamp 3.5rem to 8rem, running under or across the hero photo instead of above it.
Place ticker. A slow marquee strip of the towns served (Karlskrona, Lyckeby, Nättraby, Rödeby, Jämjö, Ronneby, Sturkö) in display type, as a band between sections. Pauses on hover, respects reduced motion.
Dark closing band. The footer on the near-black text colour with the wordmark at full width, so the page ends with weight.

Surface

Grain. One SVG feTurbulence noise as a fixed overlay on the paper ground, 3 to 5 percent opacity, pointer-events none, never animated. Kills the flat vector look. One data URI, no cost to Lighthouse.
Photo grade. One treatment for every photo: slight warm tint on a dark paper multiply, 4 to 6 percent, so stock photos read as one shoot. Hover lifts it off.
Sticky header. Transparent over the hero, then a translucent paper backdrop (backdrop-filter blur) with a hairline rule once scrolled 40 px. Shrinks the wordmark. Hides on scroll down, shows on scroll up at 390.

Motion (one system, transform and opacity only)

Reveal on scroll. IntersectionObserver adds is-in. Blocks fade and rise 12 px over 500 ms, staggered 60 ms inside a group. Photos reveal with a clip-path wipe from the bottom edge, like a plank laid down.
Headline on load. Lines mask-reveal upwards, 80 ms apart.
Count-up. The stats (2, 17, 50 km) count from zero once in view, 900 ms, once.
Parallax, restrained. Hero photo and the three project photos only, translateY at 0.1 to 0.15 of scroll, requestAnimationFrame, text never moves.
Photo hover. Scale 1.03 over 600 ms, caption slides up, dimension lines draw in.
prefers-reduced-motion: everything above collapses to static. Lighthouse 100 stays a hard line: no animation library, no layout thrash, CSS and one small script.

Controls

Primary button. Fill wipes from left on hover, arrow icon slides 4 px right, 200 ms. Active state darkens.
Secondary. A plain underline link whose underline grows from 1 px to 3 px in the accent colour. No outlined pill.
Form. Field border animates to the accent on focus, label lifts. Submit shows a 300 ms check draw-in on success.

Trade sites

Site	Date	Take	Avoid
nordiskakok.se	2026-10-14	Warm low-contrast photo grade, oak grain readable, logo and tracked caps floating on the photo	Language splash, not a home layout; cookie card bottom left
dinesen.com	2026-10-14	Sticky white header, small orange wordmark, tall portrait photo against a text column, pale ground	Weight 300 headline over dark wood loses contrast; clips at 390
sebastiancox.co.uk	2026-10-14	Off-grid headline: three display words inset left, stacked down a full-bleed photo	Oxblood serif on foliage, loud red bar, empty 13 700 px page at 390

Families

Swiss / International

Board rows

Brutalist

Board rows

Editorial

Board rows

Bento grid

Board rows

Glassmorphism

Board rows

Neo-brutalism

Board rows

Linear-style

Board rows

Apple-style

Board rows

Craft

Board rows

Board

BONT video title card, "LVL.03 Sell umbrellas when it rains" (Adrián Somoza, 2026-10)

Cadence, reveal section (cadence.rubenstom.com, Ruben Stom, 2026-10)

Cadence, text reveal

Cadence, picture and page transition (Studio Monet)

Cadence, prompt recipe

Cadence, parallax (Arden, Atelier, Haruka)

Cadence, parallax types

Cadence, loading and intro

Cadence, travel (Fieldnotes)

Cadence, slide-over project panel (Paul Hamilton)

Cadence, video (Sable, Kova, Apple)

Prova Health (a bycrawford.com build, shown 2026-10)

The Electric Car Scheme

Jesko Jets (product page, shown as a motion-led example)

Apex consultancy (dark, shown as motion-led)

Dragonfly Insurance

Interdoor (industrial doors, trade)

OOH (out-of-home advertising)

Eclipse (marketing studio)

La Palatine (baroque ensemble) and Glossier

thinking_about_ai (personal blog)

Silicon Hills Talent Partners, and Bassline (venue)

Avoid set from the same video

Podcast Studios (in Crawford's concepts video, 2026-05)

The 50X Program, homepage and landing page (same video)

Bold Leadership, SME Matters, Tanager (his annotation frames)

Cheap against premium: BizBoost and Tanager side by side

Astra and Investment criteria (typography hierarchy frames)

Crawford's own pages: designer page, Start a Project, badges footer, Web Designer New York

hire-us.bycrawford.com hero (Crawford, 2026-10)

Qualification block: hire-us and the Veridian generic

Case cards with the action beside the proof (hire-us)

Claro, the accounting site in his case cards

Offer and add-ons as cards (hire-us)

Process, channel proof, testimonials, FAQ, final booking (hire-us)

Finano, the lime finance pages, two quiet editorial pages, Harmony by Design (hire-us examples)

Avoid set from hire-us: company news, the history wall, two equal buttons

Tremendo and an architecture studio (Juan Mantz, 2025-09)

Dapper and the product-led founders page (Mantz)

Caladan, Pricefy, Estra, March of Glaciers (Mantz)

Markups.ai before and after (Sam Crawford rebuild, 2026-07)

Spark, SEOSpace, HomebuilderAI: the four-part hero (Crawford, 2026-07)

Harwick & Associates and Meridian Financial Group (Crawford, the two finance heroes)

Rest + Wild, Slopes Bio, Tanager under the squint test (Crawford, white space and hierarchy)

Proof at the point of doubt: Electric Car Scheme, Crawford's pricing (Crawford, 2026-07)

Mobile: 37 against 63, thumbs and tap targets (Crawford, 2026-07)

Avoid set from the seven principles (Crawford, 2026-07)

The premium principles checklist (Crawford's one-pager)

Seed DS-01 landing page built from the "Poop Every Day" ad (Will Sartorius with Dara Denney, 2026-10)

The playbook's four gates in Claude Code (Sartorius, 2026-10)

The inputs: Ad Library statics and a DevTools font scrape (Sartorius, 2026-10)

Premium moves

Signature (the bold move)

Surface

Motion (one system, transform and opacity only)

Controls

Trade sites