Fortis · Tiered Hero System
Design System · Hero Framework

Tiered hero system — nested & rational

One hero language across four tiers. Moving down a tier changes visual weight, scale and density — never the component language. Corners, buttons, arrows and header stay identical; only boldness, type size, image role and vertical space step down. This is a guide, not a rulebook: each tier describes the expected feel, and pages flex within it based on purpose (a press release needs no CTA; a category page may skip media).

The single rule: a tier changes weight/scale/density; it does not change tokens. Signature 0 10px 0 10px corners, one accent colour, and one arrow style are shared by every tier.

Headline size

T1 Destination52–56px
T2 Hub40–44px
T3 Detail32–34px

Surface / colour

T1Bold indigo field
T2Light, text-first
T3Neutral white

Image role

T1Dominant
T2Optional / contextual
T3Supporting only

Primary CTA

T1 ExpectedConversion
T2 OptionalCategory
T3–T4Task / none
T1Destination — Home, Solutions, brand hubsBoldest · 52–56px · dominant visual / video
▶ Potential video / animation
Decades of biology · Farm-to-Bench-to-Batch

One integrated partner to accelerate your programs.

Antibodies, diagnostic components, reagents, nanoparticles and viral vectors — one Farm-to-Bench™ system.

Talk to a Scientist ›Explore products ›
Optional module
50% OFF

AbNano® VHH Libraries

Half the cost through Sept 30.

New Lab Start-Up Program

Support for newly opened labs.

T1 · Destination
  • Visual weightBoldest surface on the site — one clear focal point.
  • Hero heightTallest / most vertical space.
  • Type scaleLargest headline (52–56px).
  • ColorBold indigo field; strongest brand colour.
  • Image / videoDominant. Homepage may use video or animation.
  • Primary CTAExpected — a single primary conversion CTA.
  • DensityGenerous — lots of air.
  • Typical useHome, Solutions by Challenge, brand hubs, flagship campaigns.
Core: eyebrow · headline · short text · primary CTA · optional secondary CTA · large visual. Optional modules (promotions, campaign tiles, search, featured pathway) are homepage-level — not required on every T1 page.
T2Section landing — Services, Products, AboutModerate · 40–44px · text-first
Home/Products/ Lateral Flow Reagents
Arista Biologicals

Lateral Flow Antibodies, Antigens & Gold Conjugates

Capture and detector antibodies, antigens and colloidal gold conjugates for point-of-care diagnostics. Matched-pair reagents, bulk supply and integrated conjugation.

Request Bulk ›Talk to a specialist ›
Optional contextual media

Diagnostic & Assay Services

The team that makes these reagents can build them to spec.

Explore services
T2 · Section landing
  • Visual weightModerate — clearly below T1.
  • Hero heightReduced height vs T1.
  • Type scaleMedium headline (40–44px).
  • ColorLighter; accent used sparingly.
  • Image / videoOptional / contextual — never dominant. Illustration, icon, scientific image or video preview.
  • Primary CTAOptional — category-level CTA when it fits the purpose.
  • DensityMedium.
  • Typical useServices, Products, major section landings, About.
Text-first is the safe default; media and CTA are supported but not mandatory. Weight follows the section purpose, not a fixed template.
T3Category / detail — PDP, article, protocol, eventNeutral · 32–34px · content-led
Home/Products/LFA Reagents/ Mouse anti-Beta LH mAb
Arista Biologicals

Mouse anti-Beta LH Monoclonal Antibody

Cat # ABBLH-0401 CompareDocuments Target LH betaHost Mouse
UnconjugatedColloidal Gold
Price on request
Request Pricing › Datasheet (ABBLH-0401)
Core hero + PDP-specific extension
T3 · Category / detail
  • Visual weightNeutral — the surface recedes, content leads.
  • Hero heightHeight set by content, not decoration.
  • Type scaleSmaller headline (32–34px).
  • ColorNeutral; colour reserved for actions.
  • Image / videoSupporting only — product image, figure, thumbnail.
  • Primary CTAOptional — transactional on PDP; often absent on articles.
  • DensityDenser — metadata and utility actions.
  • Typical usePDP, category pages, articles, protocols, events, distributor pages.
Universal core: breadcrumb · eyebrow · title · metadata · primary task · optional media. PDP adds a commerce extension (SKU, specs, pricing / Request Pricing, documents) — that is a PDP feature, not the whole tier.
T4Gated / utility — whitepaper, data pack, press, formQuietest · task-led
Home/Resources/ The Six Pillars of Antibody Validation
White Paper

The Six Pillars of Antibody Validation

A practical framework for evaluating specificity, reproducibility and application fit before committing a reagent to your workflow.

Download form
Get the paper ›
T4 · Gated / utility
  • Visual weightQuietest — the asset or task is the subject.
  • Hero heightCompact.
  • Type scaleSmall headline.
  • ColorMinimal colour; mostly neutral.
  • Image / videoSmall or none — a cover thumbnail at most.
  • Primary CTAUncommon — often no marketing CTA; the form or utility action is the point.
  • DensityTight, functional.
  • Typical useGated content, whitepapers, data packs, press releases, forms, utility pages.
Reuses the same tokens at the lowest weight. On a press release or form there may be no promotional CTA at all — that is expected, not a gap.
The underlying logicAs page depth increases, the hero becomes more compact, less decorative and more task-focused — while corners, buttons, arrows and header stay identical. A tier changes weight, scale and density, never the component language.
Fortis tiered hero system · concept for review — weight, scale & density step down; component language stays constant.