Base style · contemporary · balanced

Athletic Sport

Matchday energy: condensed italic capitals slanted forward, giant jersey numbers, diagonal bands and racing stripes, scoreboard figures and tickers, in hard high-contrast colour.

Use this style Designs in this style

Moods: bold, rebellious, raw, futuristic
Suits: health, wellness, events, gaming, ecommerce, fashion
Type: Barlow Condensed + Barlow

Principles

Set every heading in condensed italic capitals at weight 800–900; the type leans forward, never sits upright
Drive diagonals through the page: tilted headlines, skewed colour bands and slanted stripes at −4° to −20°
Make numbers the heroes: jersey numbers, scores and prices at the top of the type scale, in the link colour
Use racing stripes (8 px and 2 px rules, slanted bars) to open and close sections instead of whitespace
Keep contrast hard: square corners, solid fills, no soft shadows, no gradients

Hard rules

No upright, light or regular-weight headings; no sentence-case display type; no serif faces.
No rounded corners, pills, soft shadows, glows or gradients.
No pastel or muted palettes; text never sits on mid-tone fills without the generated `on` colour.
No centred hero headline floating in whitespace — headlines are anchored to the bottom or left and overlap a photo or band.
No icon grids, no three equal feature cards; features are full-width zone rows or numbered rules.
No stock photos of people smiling at the camera; no illustrations.

7 options

Full page preview with sample copy, rendered from the same tokens and layout the agent receives.

For coding agents

Rules and live patterns

Every pattern Athletic Sport owns, drawn by the same renderer as the picker with the style's default tokens and sample copy. Each has an anchor (#<pattern id>). A design's own DESIGN.md and tokens.json stay the source of truth; this page shows what the patterns look like.

Reference render of the default design llms.txt

Do

Set display, h1–h4, numbers and labels in the heading face (condensed), uppercase, italic, weight 800–900, tight leading (0.85–0.95) and slightly tight tracking.
Tilt display headlines by the tree's `rotate` (−4° to −6°) and skew colour bands with `transform: skewY(-6deg)` (un-skew the text inside); stripes slant at −20°.
Use numbers big: jersey and squad numbers at step 8, scores at step 6–8, prices at step 5, always italic, in the link colour or onAccent on a band.
Open and close sections with stripes: an 8 px rule above a 2 px rule, or three slanted bars (`shape: bar`) in the accent colour.
Use the `thick` border token (4 px, heading colour) for left rules on scores, lane numbers and tiers.
Use action photography: tight crops, motion, sweat; grayscale or duotone under coloured bands so the band colour pops.
Run tickers (marquees) like a live scoreboard — results, fixtures, sponsors — and stop them under `prefers-reduced-motion`.
Animate with snap (`motion.easing`, 180 ms): buttons slide their arrow 4 px forward, cards shift 4 px right on hover.
At 375 px: stack in source order, keep the italics and caps, halve rotations, cap display at step 6, hide decorative stripes marked `mobile: hide`.

Don't

No upright, light or regular-weight headings; no sentence-case display type; no serif faces.
No rounded corners, pills, soft shadows, glows or gradients.
No pastel or muted palettes; text never sits on mid-tone fills without the generated `on` colour.
No centred hero headline floating in whitespace — headlines are anchored to the bottom or left and overlap a photo or band.
No icon grids, no three equal feature cards; features are full-width zone rows or numbered rules.
No stock photos of people smiling at the camera; no illustrations.
Never italicise or tilt body paragraphs, form fields or buttons' box shapes (button labels may be italic caps).
No more than one skewed band and one ticker per screen.

Heroes (4)

Jersey number

hero.athletic-jersey-number · hero

Rule: A giant italic number (step 8, link colour) in 10–12 overlaps the top-right corner of a tall 4:5 athlete photo in 8–12; the uppercase italic headline at step 5 fills 1–7 tilted −6°; three slanted stripes in 1–4; subhead and two buttons under it.
Slots: index, heroImage, eyebrow, headline, subhead, cta, cta2, meta
Grid: stripes 1-4 · number 10-12 · photo 8-12 · headline 1-7 · action 1-7 · meta 9-12
Notes: Rows: stripes 1, photo 1–4, number 1–2 (top-aligned, painted over the photo's top-right corner like a shirt number), eyebrow 2, headline 3–4 (beside the photo, never over it), action and meta 5.

Explicit rows, ≥90 vh, bottom-aligned. Row 1: three slanted accent stripes in 1–4. Rows 1–4: a tall 4:5 action photo in 8–12 and a giant italic number at step 8 in the link colour, right-aligned in 10–12 and top-aligned on rows 1–2 so it overlaps the photo's top-right corner like a shirt number. Row 2: italic caps eyebrow in 1–6. Rows 3–4: the headline at step 5 (it fills the column; long headlines stay three to five lines), italic caps, weight 900, tilted −6°, in 1–7 beside the photo (never over it). Row 5: subhead and two large buttons in 1–7, an italic caps meta line right-aligned in 9–12. Phone: number hidden.

Open alone, full size (desktop, tablet, phone; layout tree included)

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Booking projects from June 2026

Phone, 390 px

Diagonal band

hero.athletic-diagonal-band · hero

Rule: A grayscale 21:9 action photo across 1–12; an accent band skewed −6° overlaps its lower edge in 1–9 carrying the headline; the CTA in 10–12; a three-figure scoreboard row closes the hero.
Slots: heroImage, headline, subhead, cta, facts[3..3]
Grid: photo 1-12 · band 1-9 · cta 10-12 · scores 1-12
Notes: Skew the band with transform: skewY(-6deg) and un-skew its text. Each score has a 4 px left rule.

A grayscale 21:9 action photo across 1–12 (rows 1–3). An accent band in 1–9 (rows 3–4), skewed −6°, overlapping the photo's lower edge: the headline at step 7 (italic caps, onAccent, rotate −4°) and the subhead. A large primary button in 10–12 on row 4. Row 5: three scores in a row, each with a 4 px left rule — number at step 6 and an italic caps label.

Open alone, full size (desktop, tablet, phone; layout tree included)

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

140+

launches shipped

years independent

9 of 10

clients return

Desktop

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

140+

launches shipped

years independent

9 of 10

clients return

Phone, 390 px

Starting line

hero.athletic-starting-line · hero

Rule: Bottom-anchored: lane numbers run across the top, then the eyebrow, a step-8 italic headline, two stripes (8 px and 2 px) and a base line with subhead 1–5, CTA 7–9 and meta 10–12.
Slots: items[4..8], eyebrow, headline, subhead, cta, meta
Grid: subhead 1-5 · cta 7-9 · meta 10-12

At least 85 vh, content anchored to the bottom. At the top, a row of four to eight lane numbers (mono italic, each with a 4 px left rule). At the bottom: the italic caps eyebrow in the link colour, the headline at step 8 (≤12 ch), an 8 px stripe and a 2 px stripe, then the base line — subhead in 1–5, a large primary button in 7–9, an italic caps meta right-aligned in 10–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026

Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026

Phone, 390 px

Ticker split

hero.sport-ticker-split · hero

Rule: Marquee tickers above and below; between them an accent2 block in 1–5 with eyebrow, a stacked italic headline and the CTA, beside a full-height photo filling 6–12.
Slots: tagline, eyebrow, headline, subhead, cta, heroImage, meta
Grid: block 1-5 · photo 6-12
Notes: Tickers read like a live scoreboard (results, dates); they stop under prefers-reduced-motion.

Full-bleed. An accent ticker (h3 size, onAccent) on top. Then, at ≥80 vh: an accent2 block in 1–5 with the eyebrow at the top, the headline at step 7 (≤8 ch, so it stacks into two or three words per line) in the middle and the subhead plus a secondary button at the bottom, all onAccent2; a photo filling 6–12 edge to edge. A second ticker (label size) at the bottom running the other way.

Open alone, full size (desktop, tablet, phone; layout tree included)

Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026Booking projects from June 2026

Desktop

Strategy and design for companies that make thingsPositioningIdentityWebsitesStrategy and design for companies that make thingsPositioningIdentityWebsites

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Phone, 390 px

Navigation (2)

Stripe bar

nav.athletic-stripe-bar · nav

Rule: Boxed wordmark in 1–3, italic uppercase links in 4–9, a primary button in 10–12, closed by a 4 px stripe and a 1 px stripe.
Slots: siteName, pages, cta
Grid: logo 1-3 · links 4-9 · cta 10-12

Boxed wordmark (4 px border) in 1–3, italic caps links in 4–9 (scroll horizontally on phones), a small primary button in 10–12. Two stripes close the bar: 4 px then 1 px, 4 px apart.

Open alone, full size (desktop, tablet, phone; layout tree included)

Northfold

Services
Work
About
Contact

Start a project

Desktop

Northfold

Services
Work
About
Contact

Start a project

Phone, 390 px

Scoreboard bar

nav.sport-scoreboard-bar · nav

Rule: Monogram in 1–2, a mono live-score chip on accent in 3–5, slash links in 6–10, a secondary button in 11–12.
Slots: siteName, meta, pages, cta
Grid: logo 1-2 · score 3-5 · links 6-10 · cta 11-12

Monogram in 1–2, a mono italic live-score chip on accent ("LIVE · CITY 2–1 ROVERS", hidden on phones) in 3–5, slash-separated italic caps links in 6–10, a small secondary button in 11–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

NNorthfold

Booking projects from June 2026

Services
/
Work
/
About
/
Contact

Start a project

Desktop

Services
/
Work
/
About
/
Contact

Start a project

Phone, 390 px

Content blocks (12)

Scoreboard

stats.athletic-scoreboard · stats

Rule: A full-bleed accent2 band: italic title across the grid, then three or four giant italic figures (step 7) in a four-column row, each behind a 4 px left rule, with an uppercase label pinned to the bottom of its column.
Slots: title, stats[3..4]
Grid: title 1-12 · scores 1-12

A full-bleed accent2 band. The italic caps title at step 4 across the grid, then three or four scores in a four-column row, each behind a 4 px left rule: the figure at step 7 (italic, weight 900) on top and an italic caps label pinned to the bottom of the column so labels line up, all onAccent2.

Open alone, full size (desktop, tablet, phone; layout tree included)

Twelve years in numbers

140+

launches shipped

years independent

9 of 10

clients return

31%

average lift in demo requests

Desktop

Twelve years in numbers

140+

launches shipped

years independent

9 of 10

clients return

31%

average lift in demo requests

Phone, 390 px

Fixture list

list.athletic-fixture-list · list

Rule: Title and a 'full schedule' link on one row; four to eight fixtures as ruled rows: mono date 1–2, italic uppercase match title 3–7, venue 8–10, a small ticket button 11–12.
Slots: title, cta, items[4..8]
Grid: date 1-2 · match 3-7 · venue 8-10 · action 11-12

The italic caps title (step 5) and an arrow link to the full schedule on one row. Four to eight fixtures as ruled rows: mono date in 1–2, the match ("CITY v ROVERS") in italic caps h3 in 3–7, the venue in 8–10, a small secondary "Tickets" button in 11–12, vertically centred.

Open alone, full size (desktop, tablet, phone; layout tree included)

Services

Start a project

2 weeks

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

View

1 day

Positioning workshop

A day with your leadership to agree on one story.

View

8 weeks

Identity design

Logo, type, colour, motion and a working toolkit.

View

10 weeks

Website

Strategy, copy, design and build in Webflow or Next.js.

View

4 weeks

Launch support

Training, templates and a month of on-call design.

View

Ongoing

Retainer

A senior designer embedded two days a week.

View

Desktop

Services

Start a project

2 weeks

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

View

1 day

Positioning workshop

A day with your leadership to agree on one story.

View

8 weeks

Identity design

Logo, type, colour, motion and a working toolkit.

View

10 weeks

Website

Strategy, copy, design and build in Webflow or Next.js.

View

4 weeks

Launch support

Training, templates and a month of on-call design.

View

Ongoing

Retainer

A senior designer embedded two days a week.

View

Phone, 390 px

Training zones

features.athletic-training-zones · features

Rule: Display title in 1–8, a line in 9–12; then three to five full-width zone rows on the surface colour: a giant italic number in 1–2, a slanted stripe in 3, title 4–7, text 8–12.
Slots: title, body, features[3..5]
Grid: title 1-8 · line 9-12 · number 1-2 · stripe 3-3 · name 4-7 · text 8-12

Display title at step 6 (≤16 ch) in 1–8, bottom-aligned with a line in 9–12. Then three to five zone rows on the surface colour, 8 px apart, each full width: a giant italic number at step 7 in the link colour in 1–2, a slanted accent stripe in column 3, the italic caps h3 in 4–7 and a paragraph in 8–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

What we do

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Positioning

Find the one sentence your best customers already believe.

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

Websites

Fast, editable sites built on the CMS your team already knows.

Sales enablement

Decks, one-pagers and demos your reps actually use.

Desktop

What we do

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Positioning

Find the one sentence your best customers already believe.

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

Websites

Fast, editable sites built on the CMS your team already knows.

Sales enablement

Decks, one-pagers and demos your reps actually use.

Phone, 390 px

Action strip

gallery.athletic-action-strip · gallery

Rule: Italic title and an arrow link on one row; four to eight duotone 3:4 action shots in a horizontal carousel, each with an italic caps caption and a small meta line.
Slots: title, cta2, items[4..8]

Italic caps h2 and an arrow link on one row. Four to eight duotone 3:4 action shots in a horizontal carousel (scroll-snap), each with an italic caps caption and a small meta line.

Open alone, full size (desktop, tablet, phone; layout tree included)

Selected work

Read case studies

Corvid Robotics — identity

2026

Fieldstack — website

2025

Tidewater Labs — naming

2024

Arklow — trade show

2023

←→

Desktop

Selected work

Read case studies

Corvid Robotics — identity

2026

Fieldstack — website

2025

Tidewater Labs — naming

2024

Arklow — trade show

2023

Phone, 390 px

Locker-room quote

testimonial.athletic-locker-room · testimonial

Rule: The quote in italic caps at step 5 across 2–11, the athlete's name behind a short accent bar in 2–7, and their jersey number giant in the link colour in 10–12.
Slots: quote, author, role, index
Grid: quote 2-11 · name 2-7 · number 10-12

The quote at step 5 in italic caps (≤28 ch) across 2–11. Below in 2–7: a short accent bar beside the athlete's name (italic caps label) and a muted role. The athlete's jersey number at step 8 in the link colour, right-aligned in 10–12 (hidden on phones).

Open alone, full size (desktop, tablet, phone; layout tree included)

“They understood our product faster than our own sales team did.”

Hanna Lindqvist

CEO, Corvid Robotics

Desktop

“They understood our product faster than our own sales team did.”

Hanna Lindqvist

CEO, Corvid Robotics

Phone, 390 px

Finish line

cta.athletic-finish-line · cta

Rule: A full-bleed accent band: three slanted onAccent stripes in 1–4, the headline at step 7 tilted −4° in 1–8, the line and a secondary button in 9–12.
Slots: headline, body, cta
Grid: stripes 1-4 · headline 1-8 · action 9-12

A full-bleed accent band: three slanted onAccent stripes in 1–4, then the headline at step 7 (italic caps, onAccent, rotate −4°) in 1–8, bottom-aligned with a line and a secondary button in 9–12 (never let the button run past the band's right edge).

Open alone, full size (desktop, tablet, phone; layout tree included)

Have a hard thing to explain?

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Start a project

Desktop

Have a hard thing to explain?

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Start a project

Phone, 390 px

Roster

team.athletic-roster · team

Rule: Italic title, then four to twelve players four per row: a duotone 3:4 portrait, then name (italic caps) and squad number (step 4, link colour) on one baseline, and a mono position.
Slots: title, team[4..12]

Italic caps title at step 5. Four to twelve players, four per row (two on phones): a duotone 3:4 portrait, then the name in italic caps h4 and the squad number at step 4 in the link colour on one baseline, then the mono position.

Open alone, full size (desktop, tablet, phone; layout tree included)

The studio

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Desktop

The studio

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Phone, 390 px

Membership tiers

pricing.athletic-membership-tiers · pricing

Rule: Italic title, then two to four tiers as ruled rows: tier name at step 4 in 1–4, inclusions 5–8, price at step 5 in 9–10, a primary button in 11–12.
Slots: title, plans[2..4]
Grid: tier 1-4 · detail 5-8 · price 9-10 · action 11-12

Italic caps title at step 5. Two to four tiers as rows with 4 px rules: tier name at step 4 (italic caps) in 1–4, inclusions in 5–8, the price at step 5 in 9–10, a primary button in 11–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

Engagements

Sprint

Two-week positioning sprint with a written brand platform.

€18k

Choose Sprint

Rebrand

Positioning, identity and a launch toolkit over 12 weeks.

€85k

Partner

A standing team for product launches and campaigns.

€14k/mo

Choose Partner

Desktop

Engagements

Sprint

Two-week positioning sprint with a written brand platform.

€18k

Choose Sprint

Rebrand

Positioning, identity and a launch toolkit over 12 weeks.

€85k

Partner

A standing team for product launches and campaigns.

€14k/mo

Choose Partner

Phone, 390 px

Match reports

blog.athletic-match-reports · blog

Rule: The lead report in 1–7 (duotone 16:9, italic caps headline, standfirst); three or four more reports as a ruled list in 8–12 with mono date and italic caps title.
Slots: image, title, body, posts[3..4]
Grid: lead 1-7 · list 8-12

The lead report in 1–7: a duotone 16:9 photo, the italic caps h2 headline and a standfirst. Three or four further reports as a ruled list in 8–12: mono date, italic caps h4 title.

Open alone, full size (desktop, tablet, phone; layout tree included)

Field notes

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

Mar 1, 2026 · 5 min

The case against the brand book

Jan 22, 2026 · 6 min

Naming a product in 2026

Desktop

Field notes

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

Mar 1, 2026 · 5 min

The case against the brand book

Jan 22, 2026 · 6 min

Naming a product in 2026

Phone, 390 px

Rulebook

faq.athletic-rulebook · faq

Rule: Display title in 1–5; four to eight rules in 6–12 as a ruled list on a 7-column sub-grid: italic number in 1, question and answer in 2–7.
Slots: title, faqs[4..8]
Grid: title 1-5 · rules 6-12

Display title at step 6 (≤10 ch) in 1–5. Four to eight rules as a ruled list across 6–12, each a 7-column sub-grid: the rule number at step 3 in the link colour in column 1, the italic caps question and the answer in 2–7.

Open alone, full size (desktop, tablet, phone; layout tree included)

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.

Desktop

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.

Phone, 390 px

Join the club

contact.athletic-join-club · contact

Rule: An accent panel in 1–5 with the italic title, a line and the club's address, phone and email; the sign-up form (name, email, phone, message) in 7–12.
Slots: title, body, address, phone, email, contact
Grid: panel 1-5 · form 7-12

An accent panel in 1–5 padded 48 × 40 px: italic caps h2, a line, the address, the phone number in italic caps and the email, all onAccent. The sign-up form (name, email, phone, message) in 7–12 with square fields and a 4 px bottom border.

Open alone, full size (desktop, tablet, phone; layout tree included)

Start a conversation

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Rua da Boavista 72, 1200-066 Lisboa

+351 21 340 5512

hello@northfold.com

Name

Your name

you@example.com

Phone

+44 7700 900123

Message

Tell us a little about your project…

Send message

Desktop

Start a conversation

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Rua da Boavista 72, 1200-066 Lisboa

+351 21 340 5512

hello@northfold.com

Name

Your name

you@example.com

Phone

+44 7700 900123

Message

Tell us a little about your project…

Send message

Phone, 390 px

Footers (2)

Final whistle

footer.athletic-final-whistle · footer

Rule: An 8 px stripe, stacked links in 1–4, address in 5–8, legal in 9–12, then the club name in italic caps at step 8 across the full grid.
Slots: pages, address, legal, siteName
Grid: links 1-4 · address 5-8 · legal 9-12 · name full

An 8 px stripe, then stacked links in 1–4, the address in 5–8 and the muted legal line in 9–12; the club name in italic caps at step 8 across the full grid closes the page.

Open alone, full size (desktop, tablet, phone; layout tree included)

Desktop

Phone, 390 px

Stripe base

footer.sport-stripe-base · footer

Rule: Three slanted stripes in 1–2, boxed wordmark in 3–5, slash links in 6–10, legal in 11–12.
Slots: siteName, pages, legal
Grid: stripes 1-2 · logo 3-5 · links 6-10 · legal 11-12

Three slanted accent stripes in 1–2 (hidden on phones), the boxed wordmark in 3–5, slash-separated links in 6–10, the muted legal line in 11–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

Desktop

Phone, 390 px

Hero library heroes that suit Athletic Sport

Split, diagonal seamhero.split-diagonal · splitA surface-coloured copy panel in 1–6 meets the image (6–12) on a diagonal seam; the panel holds the headline, one CTA and a row of 2–3 stats.Full-bleed, bottom platehero.fullbleed-overlay-bottom · full-bleedA photograph fills the whole viewport; a solid page-colour plate sits on its bottom-left (columns 1–7) holding eyebrow, headline, subhead and one CTA; a small caption plate sits bottom-right in 10–12.Giant wordmarkhero.giant-wordmark · oversized-typeThe site name runs edge to edge at the largest step, sitting on the bottom of the hero; a three-zone strip above it carries eyebrow (1–4), headline + subhead (5–9) and CTA (11–12).Justified type stackhero.type-stack-justified · oversized-typeTwo bands of type between 2 px rules, each fitted to the full measure: the site name heavy at step 8, then the headline light at step 5 (one or two lines); a strip above (eyebrow, meta) and a strip below (subhead 1–5, CTA 10–12).Ticker type bandshero.type-ticker · oversized-typeA slim intro row (h1 at step 3 in 1–6, subhead 7–10, CTA 11–12) above three full-bleed marquee bands of huge type: an accent band, a plain band and a surface band, alternating direction.Full-screen video with bandhero.video-fullscreen · videoA muted looping video fills the viewport; a pause control sits top-right; a solid accent band across the bottom carries the headline (1–8) and one CTA (10–12).Photo crossed by a marquee bandhero.marquee-band · collageHeadline (1–8) and subhead + CTA (10–12) above a full-bleed 21:9 photo; an accent marquee band runs across the middle of the photo, edge to edge.Full-bleed photo with captionhero.fullbleed-photo-caption · full-bleedA photograph spans the full viewport width at 21:9; under it, a caption row like a museum plate: headline 1–7, caption and CTA 9–12. No text on the image.Split with vertical videohero.video-split · videoCopy in 1–6 with a 3–4 row chapter list (timestamp + title); a 9:16 vertical video in 8–11 with a small 'now playing' caption under it.

Signature looks that suit it

Kinetic headlinekinetic-type · about 34 KB JS Pinned scroll storyscroll · about 45 KB JS Parallax layersscroll · about 45 KB JS Page transitionstransition · about 1 KB JS Variable font wavekinetic-type · about 2 KB JS Smooth scrollscroll · about 5 KB JS