KitCulture

Overview

KitCulture is a premium football jersey e-commerce platform serving Sri Lanka with an energetic, sports-forward aesthetic rooted in **Athletic Maximalism**—a design philosophy that celebrates bold color contrasts, confident typography, and dynamic visual hierarchy to evoke the passion and authenticity of professional football. The brand serves passionate fans and collectors seeking authentic club and national team kits with custom personalization. The UI combines deep navy authority (#14213d) with vibrant gold accents (#fca311) to create a sense of prestige and excitement, mirroring the emotional intensity of match day. Every interaction—from product discovery to checkout—reinforces the feeling of owning a piece of football heritage.

The voice is direct, celebratory, and action-oriented. KitCulture speaks in short, punchy sentences that honor the sport's intensity: "Wear the Badge. Own the Game." The brand avoids corporate jargon, instead using football vernacular ("kits," "badges," "match-spec") and emphasizing authenticity ("Real kits, real badges"). Tone is confident but never arrogant—the focus is always on the customer's connection to the sport, not the brand itself. Example: "Authentic football jerseys from the world's biggest clubs and national teams. Real kits, real badges, shipped to your door."

Colors

The color system is built on a **Navy-Gold Contrast Model** that mirrors the visual language of professional football kits and stadium environments. Primary (#fca311, a warm golden-orange) is the signature accent, deployed on all call-to-action buttons, active navigation underlines, and hero badges to command attention and drive conversion. Secondary (#14213d, a deep navy) anchors the interface as the authoritative base color for headers, navigation, and text, evoking trust and professionalism. Tertiary (#25d366, WhatsApp green) is reserved for messaging and order-confirmation states, creating a direct visual link to the brand's preferred communication channel.

The surface stack progresses from pure white (#ffffff) for primary content areas through carefully calibrated grays (#f5f5f5 surf

Typography

The type system pairs **Kanit** (a geometric, high-contrast Thai typeface) for display-level headlines at 72px / 800 weight to deliver maximum impact and brand distinctiveness, with **Inter** for all body and label text to ensure accessibility and legibility at smaller sizes. This pairing creates a clear visual separation between hero messaging and supporting content: Kanit's bold, angular letterforms (particularly in the display size with -0.04em letter-spacing) command attention and convey confidence, while Inter's neutral, open counters (16px / 400 weight for body-md with 24px line-height) ensure comfortable reading at any screen size. Headlines use -0.02em to -0.04em letter-spacing to tighten the visual weight, while body copy maintains 0em spacing for optimal word spacing. All labels

Layout

The page layout follows a **12-column fluid grid** with a max-width of 1280px, centered with symmetric padding of 24px (gutter) on desktop and 16px on mobile. The hero section uses a 50/50 split (6 columns text, 6 columns imagery) on desktop, stacking vertically on tablet and mobile. Section separation is enforced with 40px (lg spacing) between major content blocks, while internal card padding uses 24px (md spacing) to create breathing room. The sticky navigation occupies 112px on desktop (96px on mobile) and uses a semi-transparent white background (rgba(255, 255, 255, 0.6)) with backdrop-filter: blur(16px) to maintain visual hierarchy while allowing content to scroll beneath. Container elements (cards, input fields) use 16px padding (md spacing) internally, with 12px (sm spacing) between

Elevation & Depth

Depth is conveyed through a **Layered Minimalism** approach using subtle shadows and strategic use of white space rather than heavy drop shadows. Level 1 (Base/Surface): pure white background (#ffffff) with no shadow, establishing the clean foundation. Level 2 (Standard Cards): 0 4px 12px rgba(0, 0, 0, 0.08) with a 1px border at rgba(0, 0, 0, 0.05) to define card boundaries without visual weight. Level 3 (Elevated/Hover States): 0 20px 60px rgba(0, 0, 0, 0.12) with a 2px translateY(-4px) transform on hover, creating a sense of lift and interactivity. Navigation elements use a 1px gradient bord

Shapes

The shape system follows **Technical Roundness**—a philosophy that uses rounded corners strategically to soften hard edges while maintaining a modern, engineered aesthetic. Buttons and primary CTAs use full radius (9999px) to create pill-shaped forms that feel friendly and clickable, with 16px padding (sm spacing) on the y-axis and 28px on the x-axis for optimal touch targets (48px minimum height). Cards and containers use 1.5rem (24px) border-radius to create a softer, more approachable feel while remaining distinctly modern. Input fields use 1rem (16px) radius to balance usability with visua

Components

Action Elements Buttons are the primary drivers of user intent and use a 300ms cubic-bezier(0.4, 0, 0.2, 1) transition for all state changes. Primary buttons (button-primary) use the gold accent (#fca311) with black text, 16px vertical padding, 28px horizontal padding, and full radius (9999px). On hover, the background shifts to #e69200 (a darker gold) with a 0 8px 20px rgba(252, 163, 17, 0.3) shadow and a -2px translateY transform to signal lift. Active state uses #cc8200 with no transform. Secondary buttons (button-secondary) use the navy background (#14213d) with white text and identical padding/radius, shifting to #1e325c on hover. Ghost buttons use transparent backgrounds with a 2px navy border, shifting to a light gray background on hover. All buttons include a 0 4px 12px shadow

Do's and Don'ts

**Do**

• Do use the primary gold (#fca311) exclusively on CTAs, active states, and hero badges—never on body text or secondary elements.
• Do maintain the 50/50 hero split (text left, imagery right) on desktop to balance messaging with product showcase.
• Do apply the 300ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive elements (buttons, cards, links) for consistent responsiveness.
• Do use Kanit at 72px / 800 weight for hero headlines and Inter at 16px / 400 for body copy to maintain the type hierarchy.
• Do enforce 24px (md spacing) padding inside cards and 40px (lg spacing) between major sections to create visual breathing room.
• Do use the navy (#14213d) for navigation and headers to anchor the interface and establish authority.

**Don't**

• Don't use the primary gold (#fca311) for backgrounds or large surface areas—it's an accent color, not a fill color.
• Don't mix Kanit and Inter at the same size or weight; use Kanit only for display/headline levels (28px and above).
• Don't apply shadows heavier than 0 20px 60px rgba(0, 0, 0, 0.12)—the design system prioritizes subtlety and clarity.
• Don't use border-radius smaller than 0.25rem (4px) on interactive elements; maintain the Technical Roundness philosophy.
• Don't place small text (label-sm, 12px) over busy product imagery without a text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) for contrast.
• Don't override the 48px minimum height for buttons or input fields—this ensures accessibility and touch-target compliance.