Sidibari

Overview

Sidibari is a bold, high-energy sports media platform serving the Maldivian community with dynamic coverage across football, futsal, basketball, volleyball, and emerging sports. The design system embraces a 'Dark-Accent Dynamism' aesthetic—a high-contrast approach where a deep charcoal canvas (#171717) provides visual stability while vibrant accent colors (coral-red #ff6c5f for primary action, deep indigo #2e2986 for secondary, and golden-yellow #ffbf01 for highlights) create explosive focal points. This creates an atmosphere of urgency and passion, mirroring the intensity of live sports. The UI evokes confidence, immediacy, and national pride.

Sidibari's voice is direct, celebratory, and inclusive. The brand speaks in short, punchy sentences that build momentum—never flowery, always action-oriented. Vocabulary emphasizes community ('connecting the nation'), achievement ('wins', 'champions'), and real-time energy ('live', 'breaking'). Example sentence in brand voice: 'Maziya wins Cup Winners' Cup for the very first time—history made in 90 minutes.'

Colors

The color system is built on a dark-first philosophy optimized for night-time sports viewing and mobile consumption. Surface (#171717) and its container variants (surface-container-low #131313 through surface-container-highest #2e2e2e) create a sophisticated depth stack that prevents eye strain during extended browsing. On-surface text (#f0f0f0) maintains 16:1 contrast ratio for accessibility.

Primary (#ff6c5f) is the coral-red accent used exclusively for call-to-action buttons, active states, and hero headlines. It commands attention without aggression—warm enough to feel approachable, saturated enough to cut through the dark background. Secondary (#2e2986) is a deep indigo reserved for category badges, secondary navigation, and container backgrounds where a cooler tone supports visual h

Typography

The type system pairs Lora (serif, display/headline) with Inter (sans-serif, body/labels) to balance editorial authority with modern clarity. Lora headlines (30–60px, fontWeight 600) convey journalistic credibility and gravitas—essential for sports journalism where accuracy and prestige matter. Inter body copy (16–18px, fontWeight 400, lineHeight 24–28px) ensures readability on mobile and maintains the contemporary, accessible tone.

Display (60px, Lora, -0.02em letter-spacing) is reserved for hero headlines and major story announcements. Headline-lg (40px) and headline-md (30px) are used for section titles and article headers. Title-lg (20px, Inter, 600) marks subsection headers and card titles. Body-lg (18px) and body-md (16px) are the workhorses for article text and descriptions. Label-

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on desktop and full-width on mobile (< 768px). The spacing scale uses semantic tokens: xs (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Hero sections span full-width with 40px vertical padding (lg spacing) above and below to create breathing room. Content cards use md (24px) padding internally and are separated by lg (40px) vertical spacing. Navigation uses gutter (24px) horizontal padding on desktop, reducing to sm (12px) on mobile. Container max-width of 1280px ensures text remains scannable; never exceed 75 characters per line for body copy.

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic background color shifts rather than dramatic drop shadows. Level 1 (Base): surface (#171717) with no shadow—the foundation. Level 2 (Cards/Inputs): surface-container (#1a1a1a) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—subtle lift for interactive elements. Level 3 (Modals/Popovers): surface-container-high (#242424) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25)—pronounced separation for overlays. Hover states elevate cards from Level 2 to Level 3 shadow with a 120ms transition (transition: box-shadow 120ms ease-out). Never

Shapes

The shape philosophy is 'Technical Minimalism'—sharp enough to feel modern and purposeful, rounded just enough to soften the dark aesthetic and improve touch targets. Buttons use rounded-md (0.75rem / 12px) for a balanced, professional appearance that works at 44px height. Input fields use rounded-DEFAULT (0.5rem / 8px) for a tighter, more utilitarian feel. Cards use rounded-md (12px) to match buttons and create visual consistency. Navigation items and list elements use rounded-md (12px) when they have background fills, or no radius when they're transparent. Badges and tags use rounded-full (9

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (44px height, 12px 24px padding, rounded-md, background #ff6c5f, color white, label-md typography) is used for all primary CTAs: 'Read More', 'Watch Now', 'Share'. On hover, background shifts to #ff8a7a and shadow elevates to 0 8px 24px rgba(0, 0, 0, 0.25) with a 120ms ease-out transition. On active/press, background darkens to #e85a4f. Button-secondary (same dimensions, transparent background, 2px solid #ff6c5f border, text color #ff6c5f) is used for secondary actions like 'View All' or 'Filter'. On hover, background fills with rgba(255, 108, 95, 0.08) without changing text color.

Containers & Surfaces Cards (rounded-md, background #1a1a1a, padding 24px, shadow 0 3px 8px rgba(0, 0, 0, 0.15)) are the prima

Do's and Don'ts

**Do**

• Do use primary (#ff6c5f) exclusively for CTAs and active states—never for body text or backgrounds.
• Do maintain 16:1 contrast ratio between on-surface (#f0f0f0) and surface (#171717) for WCAG AAA compliance.
• Do apply 120ms ease-out transitions to all hover state changes (box-shadow, background-color, border-color).
• Do use Lora headlines with text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) when overlaid on photos.
• Do limit rounded corners to 12px (md) for cards/buttons and 8px (DEFAULT) for inputs—no 50% except avatars.
• Do use md (24px) spacing for card padding and lg (40px) for section separation.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to Level 2 elements (cards, dropdowns).

**Don't**

• Don't use secondary (#2e2986) or tertiary (#ffbf01) as primary button colors—reserve them for badges and accents.
• Don't apply blur or glassmorphism effects; the dark aesthetic requires crisp, defined surfaces.
• Don't exceed 75 characters per line in body copy; use max-width: 600px for article text.
• Don't use shadows larger than 0 8px 24px rgba(0, 0, 0, 0.25)—excessive depth contradicts the technical minimalism.
• Don't mix serif (Lora) and sans-serif (Inter) in the same headline; use Lora for all display/headline levels.
• Don't apply color to more than 3 interactive elements per screen; maintain focus hierarchy.
• Don't use outline (#737373) for primary dividers; use outline-variant (#595959) for low-emphasis separators.