One identity.
One complete system.

Start here

This is the designer and developer handoff for the agreed Sylhet Falcons direction. The HTML files are editable, linked static prototypes. They are not a deployed website, live fixture feed, working enquiry service or finished policy set.

Open index.html for the homepage. Use the PDF for the full brief and the handoff files for content, tokens, CMS requirements and launch checks.

Brand architecture

United Sylhet. We Rise Together.

One club. Four districts. Proud, inclusive and ambitious. National recognition is an ambition, not an accreditation claim.

Logo, colour and type

Keep the supplied logo unchanged. It is a 1536 x 559 raster image with a black background. A designer must prepare approved vector, transparent, single-colour and compact variants before final deployment.

Proposed clear space: 25% of the visible crest height on all sides. Full lockup: at least 180 CSS px wide; prefer 194-220 px in navigation and 360-490 px in the hero. On mobile, this prototype uses a 152 px crest as a provisional exception; replace with an approved compact mark if the descriptor is too small.

Barlow Condensed + Inter

Production: Barlow Condensed 400/500 for headings and Inter 400/500 for reading. The original concept character subsets are embedded in this preview; the original Google Fonts import supplies the full faces when online. Obtain complete licensed font masters for deployment. See ORIGINAL_CONCEPT_RESTORED.md for exact source and font details.

Layout and responsive rules

1440 px desktop reference; 1180 px maximum content width. Test 1024, 850, 768, 520, 390 and 320 px. Gutters are 22 px on most sizes and 18 px below 520 px.

The homepage uses the original v4 CSS: 1180 px maximum frame, 22 px base gutters (14 px at 520 px and below), 100 px main section padding (72 px on small screens), and 44 px minimum action height. Inner-page components inherit the same brand system. Do not override the homepage to fit a new spacing scale.

Page inventory

Homepage priority

1. HMSS announcement strip and primary navigation.
2. Hero: crest, United Sylhet message, Discover our story and Fixtures & results.
3. Facts: 04 districts, 01 club, 12 BTCB teams, 05 tournament days.
4. Latest club update.
5. Competition feature, next fixture and squad announcement.
6. HMSS story, four district tiles and shared-identity statement.
7. Unity, Development and Ambition principles.
8. Partnership invitation.
9. Club information and legal footer.

After confirmed news exists, a compact three-story news grid may follow the competition block. It should not displace the primary cricket information. Do not add a board wall to the homepage.

Approved direction and copy

Hero

Built on our own HMSS identity, Sylhet Falcons unite Habiganj, Moulvibazar, Sylhet and Sunamganj under one badge. As Sylhet Division's sole team, we compete in BTCB's 12-team, five-day tournament.

HMSS story

HMSS is our own United Sylhet identity - bringing Habiganj, Moulvibazar, Sylhet and Sunamganj together beneath the Sylhet Falcons badge. It defines who we represent, wherever the competition takes us.

Partnerships

Partner with Sylhet Falcons and connect your organisation with supporters and communities across Habiganj, Moulvibazar, Sylhet and Sunamganj.

Content models and states

Accessibility and interaction

Use WCAG 2.2 AA as the production target, not as an untested compliance claim. Minimum normal-text contrast 4.5:1; large-text and meaningful non-text contrast 3:1. Do not communicate status with colour alone.

• One H1 per page; semantic landmarks and meaningful heading order.
• Visible focus and a skip link; mobile menu opens by keyboard and closes with Escape.
• Contact inputs have labels, native required/email validation and a truthful live preview message.
• No autoplay, ticker motion, external embeds or analytics in this prototype.
• Review at 200% text size and 400% zoom, and with reduced motion enabled.

Reference: W3C WCAG 2.2 Quick Reference.

Production handoff

• Secure CMS with editor/approver roles and an audit trail for published changes.
• Secure server-side enquiry delivery, validation, anti-spam, limits and an approved recipient. No credentials in client code.
• Approved privacy/cookie documents reflecting actual services; do not treat these draft pages as legal advice.
• Responsive image sizes; AVIF/WebP photos, lazy load below the fold, fixed image dimensions.
• Unique titles/descriptions, real canonical URLs, sitemap and appropriate structured data after verification.
• Keep noindex on staging. Remove it only from approved public pages at launch; exclude designer, player/match demo and policy drafts.
• Custom 404 routing, backups, uptime/error monitoring and a named club content owner.

Designer delivery checklist

• Figma pages: Foundations, Components, Desktop, Tablet, Mobile, Templates, Content states, Handoff.
• Approved vector master crest; transparent and single-colour variants; compact square icon; favicon set.
• Original player, team, supporter and district photography with documented rights/consent.
• Editable components and colour/type/spacing tokens; hover, focus, active, empty, error, loading and success states.
• Club-approved copy, schedule, squad, board roles, contact details, partner logos and policy files.
• Final QA sign-off on mobile and desktop before launch.

Reference direction

The cricket-first information hierarchy is informed by official club sites: Lancashire Cricket groups fixtures/results, teams and news separately from its Club/officers material; Surrey / The Kia Oval presents current news, upcoming matches and results prominently. These are navigation and content references, not copied designs. Reviewed 12 September 2026.

The visual identity, HMSS meaning and competition statements in this pack come from the supplied club brief and logo. This handoff is not a fresh audit of the live sylhetfalcons.com website.