iMore
imore.com · 6 days ago
SaveUnofficial A style guide made by SiteStyleGuide from kooora.com’s public web pages. Not affiliated with or endorsed by KOOORA. The real site is kooora.com ↗
Unofficial style guide
KOOORA’s website (kooora.com) sets its headings in Tahoma and its body text in IBM Plex Sans Arabic. Its palette is led by Light Gold (#FFDA47), Light Tomato (#F25147) and Light Slate Grey (#8A8AA3), with #5C5C66 text on #F7F7F8. Captured from the live site on 26 October 2026.
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
In search results
الموقع العربي الرياضي الأول | كووورة
كووورة هو الموقع الرياضي العربي الأول لمتابعة مباريات اليوم والنتائج المباشرة وأخبار جميع المسابقات الكروية حول العالم.
When shared
kooora.com
الموقع العربي الرياضي الأول | كووورة
كووورة هو الموقع الرياضي العربي الأول لمتابعة مباريات اليوم والنتائج المباشرة وأخبار جميع المسابقات الكروية ح…
Logo & favicons
Found as: schema.org logo. SVG, 1275 × 399.
Light browser tab
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#5C5C66) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Background, text, border · body, .promo-banner_promo-banner__g58zL .fco-promo-banner__image:after
Text, background, border · body, .fco-scoreboard__title:after
Text, background · .cards-section_cards-section__ZFZS2 .fco-cards-section__container--even-columns-, .cards-section_cards-section__ZFZS2 .fco-cards-section__container>:first-child .
Background, border, text · .fco-skeleton, --skeleton-gradient
Background, text, border · .scrollable-section_scrollable-section__kjILC .fco-scrollable-section__controls>, .fco-preferences-with-button__button.fco-button
Background, text · .fco-match-team-with-crest--1-red-cards .fco-team-name:after, .fco-match-team-with-crest--2-red-cards .fco-team-name:after
Text · .footer_page-footer__copyright__L9bZ9 p, .fco-match-start-date
Background · .fco-form-dot, .fco-match-form__dot
Background · .Toastify__toast-theme--colored.Toastify__toast--info, .Toastify__progress-bar--info
Text · .fco-base-register-form__error, .fco-base-log-in-form__error
Used · --countdown-timer-time-text-color, --nav-tabs-gradient-end
Background · .Toastify__toast-theme--colored.Toastify__toast--success, .Toastify__progress-bar--success
Background · .Toastify__toast-theme--colored.Toastify__toast--warning, .Toastify__progress-bar--warning
Background · .Toastify__toast-theme--colored.Toastify__toast--error, .Toastify__progress-bar--error
Used · --nav-tabs-gradient-start, --current-round-gradient-start
Background, text · .fco-cookie-env-switch__entry, .fco-cookie-env-switch__entry--selected
linear-gradient(180deg,rgba(0,0,0,0) 0,rgb(0,0,0))
linear-gradient(0deg,rgb(0 0 0/20%) 0,rgb(0 0 0/20%) 100%)
linear-gradient(0deg,rgb(0 0 0/10%) 0,rgb(0 0 0/10%) 100%)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
Tahoma
System font, or not loaded on this page · weights 500, 700 · headings, buttons · shown in a stand-in if you don’t have it
IBM Plex Sans Arabic
System font, or not loaded on this page · weights 400, 500, 600, 700, 800 · headings, buttons, body · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
كووورة هو الموقع الرياضي العربي الأول لمتابعة مباريات اليوم والنتائج المباشرة وأخبار جميع المسابقات الكروية حول العالم.
كووورة هو الموقع الرياضي العربي الأول لمتابعة مباريات اليوم والنتائج المباشرة وأخبار جميع المسابقات الكروية حول العالم.
Get started
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Button
.trending_trending__UwkqQ .fco-scrollable-section__controls>button · #FFFFFF · radius 1rem
Corner radius
Shadows
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Breakpoints
On a scale of 0 to 1440 px.
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Questions
Quick answers, from the same capture as the rest of this guide.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
/* kooora.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/kooora.com) */
:root {
/* Colours */
--text: #5C5C66;
--background: #F7F7F8;
--colour-white: #FFFFFF;
--colour-cool-dark-grey: #5C5C66;
--colour-near-black: #141415;
--colour-off-white: #EEEEEE;
--colour-light-gold: #FFDA47;
--colour-light-tomato: #F25147;
--colour-light-slate-grey: #8A8AA3;
--colour-deep-dodger-blue: #3B82F6;
--colour-light-dodger-blue: #3498DB;
--colour-red: #F13536;
--colour-royal-blue: #4863FF;
--colour-lime-green: #07BC0C;
--colour-deep-gold: #F1C40F;
--colour-deep-tomato: #E74D3C;
--colour-medium-aqua-marine: #00E6B0;
--colour-dark-slate-blue: #374151;
--gradient-1: linear-gradient(180deg,rgba(0,0,0,0) 0,rgb(0,0,0));
--gradient-2: linear-gradient(0deg,rgb(0 0 0/20%) 0,rgb(0 0 0/20%) 100%);
--gradient-3: linear-gradient(0deg,rgb(0 0 0/10%) 0,rgb(0 0 0/10%) 100%);
/* Typefaces */
--font-headings: 'Tahoma', 'Verdana', sans-serif;
--font-buttons: 'Tahoma', 'Verdana', sans-serif;
--font-body: 'IBM Plex Sans Arabic', 'IBM Plex Sans-fallback', sans-serif;
/* Type scale */
--text-p: 14px;
--leading-p: 1.4;
--text-button: 14px;
--leading-button: 24px;
/* Shape */
--radius-1: 16px;
--radius-2: 999999px;
--radius-3: 8px;
--radius-4: 4px;
--radius-5: 50%;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 375px;
--breakpoint-2: 768px;
--breakpoint-3: 769px;
--breakpoint-4: 882px;
--breakpoint-5: 1023px;
--breakpoint-6: 1024px;
--breakpoint-7: 1025px;
--breakpoint-8: 1440px;
}
{
"site": "kooora.com",
"source": "https://sitestyleguide.com/kooora.com",
"text": "#5C5C66",
"background": "#F7F7F8",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Cool Dark Grey",
"hex": "#5C5C66",
"rgb": [
92,
92,
102
]
},
{
"name": "Near Black",
"hex": "#141415",
"rgb": [
20,
20,
21
]
},
{
"name": "Off White",
"hex": "#EEEEEE",
"rgb": [
238,
238,
238
]
},
{
"name": "Light Gold",
"hex": "#FFDA47",
"rgb": [
255,
218,
71
]
},
{
"name": "Light Tomato",
"hex": "#F25147",
"rgb": [
242,
81,
71
]
},
{
"name": "Light Slate Grey",
"hex": "#8A8AA3",
"rgb": [
138,
138,
163
]
},
{
"name": "Deep Dodger Blue",
"hex": "#3B82F6",
"rgb": [
59,
130,
246
]
},
{
"name": "Light Dodger Blue",
"hex": "#3498DB",
"rgb": [
52,
152,
219
]
},
{
"name": "Red",
"hex": "#F13536",
"rgb": [
241,
53,
54
]
},
{
"name": "Royal Blue",
"hex": "#4863FF",
"rgb": [
72,
99,
255
]
},
{
"name": "Lime Green",
"hex": "#07BC0C",
"rgb": [
7,
188,
12
]
},
{
"name": "Deep Gold",
"hex": "#F1C40F",
"rgb": [
241,
196,
15
]
},
{
"name": "Deep Tomato",
"hex": "#E74D3C",
"rgb": [
231,
77,
60
]
},
{
"name": "Medium Aqua Marine",
"hex": "#00E6B0",
"rgb": [
0,
230,
176
]
},
{
"name": "Dark Slate Blue",
"hex": "#374151",
"rgb": [
55,
65,
81
]
}
],
"fonts": [
{
"name": "Tahoma",
"stack": "\"Tahoma\", \"Verdana\", sans-serif",
"weights": [
500,
700
],
"source": "System font, or not loaded on this page"
},
{
"name": "IBM Plex Sans Arabic",
"stack": "\"IBM Plex Sans Arabic\", \"IBM Plex Sans-fallback\", sans-serif",
"weights": [
400,
500,
600,
700,
800
],
"source": "System font, or not loaded on this page"
}
]
}
Captured from kooora.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by KOOORA; this guide describes the public website for reference.
Analytics cookies
We’d like to use Google Analytics cookies to count visits and see which pages are useful. Nothing is used for advertising.