كورة اليوم

Overview

كورة اليوم is a real-time football live scores and match results platform designed for passionate Arabic-speaking sports fans who demand instant, accurate, and comprehensive match data. The aesthetic is "Data-Driven Clarity"—a minimalist, information-dense interface that prioritizes speed and scannability over decoration. The UI employs a clean white canvas (rgb(255, 255, 255)) with strategic use of Google's signature blue accent (#1a73e8) on all interactive elements, creating a professional, trustworthy visual identity reminiscent of sports journalism and live-score aggregators. The emotional response is one of calm confidence: users feel they are accessing authoritative, real-time information without visual noise or distraction.

The brand voice is direct, factual, and urgent without being sensational. Vocabulary emphasizes precision: "نتيجة مباشرة" (live result), "انتهت" (finished), "قيد التقدم" (in progress). The tone never hypes or editorializes; instead, it delivers scores, standings, and statistics with the neutrality of a sports ticker. Example sentence in brand voice: "ريال مدريد 2 - 1 برشلونة، الدقيقة 67 — تقدم ملكي بعد هدف من بنزيما." (Real Madrid 2 - 1 Barcelona, minute 67 — Royal lead after a Benzema goal.)

Colors

The color system is built on a foundation of neutral surfaces and a single, powerful accent. Primary (#1a73e8) is Google's signature blue, applied exclusively to call-to-action buttons, active navigation states, links, and focus indicators. This creates a consistent, recognizable brand anchor that users associate with interactivity. Secondary (#34a853, success green) is reserved for positive outcomes: match wins, transfer confirmations, and upward statistics. Tertiary (#fbbc04, warning amber) highlights cautionary information or draws attention to upcoming matches. Error (#ea4335, danger red) is used for live-match indicators, red cards, and critical alerts—its pulsing animation (opacity 0.5 to 1.0 over 1.5s) creates urgency without being jarring.

The surface stack uses a light, airy pale

Typography

The type system uses Cairo, a geometric sans-serif optimized for Arabic script, across all weights (300–900). Display (56px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines and page titles, commanding attention while maintaining legibility in RTL layout. Headline-lg (32px, 700 weight) is used for section headers like "أهم الدوريات" (Top Leagues). Body-md (14px, 400 weight, 0.02em letter-spacing) is the workhorse for match scores, team names, and descriptive text—its 20px line-height ensures comfortable reading in dense match lists. Label-md (13px, 600 weight, 0.03em letter-spacing) is applied to badges, button text, and metadata (e.g., "الدقيقة 67", minute 67). On small labels rendered over busy backgrounds (e.g., live-score badges on team cards), apply text-shadow: 0 1p

Layout

The layout follows a 12-column grid system with a fixed max-width of 1280px, centered on the viewport with 16px horizontal gutters on mobile and tablet. The page rhythm is organized into horizontal sections: a sticky header (height 60px, background white, box-shadow 0 1px 3px rgba(0, 0, 0, 0.1)), a ticker bar (10px vertical padding, horizontal scroll on mobile, 4-column grid on desktop), and a main content area split into a 2-column layout (left: match cards and live scores; right: sidebar with leagues and news). Spacing between sections uses the lg token (24px) for breathing room. Cards within sections are separated by md spacing (16px). The container uses padding: 0 16px on all breakpoints, ensuring content never touches viewport edges. On mobile (< 768px), the layout collapses to single

Elevation & Depth

Depth is conveyed through a subtle shadow system and border treatment rather than color shifts. Level 1 (Base): no shadow, 1px solid border at #dadce0. Level 2 (Card/Container): box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); border: 1px solid #dadce0. Level 3 (Hover/Elevated): box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); border transitions to primary (#1a73e8). Level 4 (Modal/Dropdown): box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); z-index: 300+. The search dropdown uses box-shadow: 0 10px 25px rgba(0, 0, 0, 0.

Shapes

The shape philosophy is "Functional Softness"—rounded corners are applied strategically to reduce visual harshness while maintaining clarity and scanability. Buttons use rounded.lg (16px border-radius), creating a friendly, approachable CTA that stands out from text links. Cards use rounded.md (12px), balancing softness with a structured, grid-like appearance. Input fields and small UI elements use rounded.DEFAULT (8px), maintaining visual consistency without excessive rounding. Badges and pills use rounded.full (999px), emphasizing their role as discrete, self-contained status indicators. Mat

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses background: #1a73e8, color: white, padding: 12px 24px, height: 40px, border-radius: 16px, and font-weight: 600. On hover, the background darkens to #1557b0 and box-shadow elevates to 0 4px 12px rgba(0, 0, 0, 0.08). On active/click, the shadow increases to 0 10px 15px rgba(0, 0, 0, 0.1) and the background remains #1557b0. All button transitions use transition: background-color 0.2s ease, box-shadow 0.2s ease. Secondary buttons use background: transparent, border: 1px solid #dadce0, color: #1a73e8, and on hover, the background becomes #f1f3f4 and the border transitions to #1a73e8.

Containers & Surfaces Cards are the foundational container. The card component uses background: white, borde

Do's and Don'ts

**Do**

• Do use primary (#1a73e8) exclusively for interactive elements: buttons, links, active states, and focus indicators. Never use it for backgrounds or body text.
• Do apply the full Cairo font weight range (300–900) to create visual hierarchy: use 700 for headlines, 600 for labels and button text, 400 for body copy.
• Do maintain 16px horizontal gutters on all breakpoints and use the spacing scale (8px, 16px, 24px, 40px) consistently for section separation and internal padding.
• Do render live-match badges with the pulsing animation (opacity 0.5 to 1.0 over 1.5s) to signal real-time urgency without overwhelming the interface.
• Do use 1px solid borders at #dadce0 for all cards and containers, transitioning to primary (#1a73e8) on hover to signal interactivity.

**Don't**

• Don't use primary (#1a73e8) for page backgrounds, body text, or large surface areas; reserve it for CTAs and interactive states only.
• Don't apply border-radius greater than 16px to buttons or cards; excessive rounding dilutes the professional, data-focused aesthetic.
• Don't use shadows heavier than 0 10px 15px rgba(0, 0, 0, 0.1) for standard components; reserve the heaviest shadows for modals and dropdowns only.
• Don't render match scores or team names in font-weight less than 600; they must remain visually dominant in the card hierarchy.
• Don't use color transitions longer than 0.2s for interactive elements; faster feedback (0.15s–0.2s) maintains the snappy, real-time feel of a live-scores platform.