Korek Telecom

Overview

Korek Telecom embodies a 'Vibrant Professionalism' aesthetic—a design language that merges corporate authority with energetic accessibility. The brand serves Iraq's mobile-first population, delivering telecommunications services through a UI that feels simultaneously trustworthy and forward-thinking. The visual identity centers on a striking contrast between a deep navy-blue hero canvas (#0052cc-adjacent in hero sections, visible in the screenshot) and a brilliant golden-yellow primary accent (#ffcd00), punctuated by a teal secondary (#3783e7) and emerald tertiary (#17c191). This palette evokes confidence, connectivity, and growth. The emotional response is one of clarity and momentum: users feel they're engaging with a modern, capable operator that understands their needs.

The brand voice is direct, solution-oriented, and locally grounded. Korek speaks in clear, benefit-driven language without corporate jargon—'Get My Korek App' rather than 'Download Our Platform.' Vocabulary leans toward action verbs (Recharge, Pay Bills, Explore) and concrete outcomes (faster speeds, better coverage, personalized experience). The tone is confident but approachable, never condescending. Example sentence in brand voice: 'Recharge in seconds, stay connected all day—that's the Korek difference.'

Colors

The Korek color system operates on a principle of 'Energetic Contrast': a light, neutral surface (#f8f8f8 body background, #ffffff card backgrounds) provides breathing room, while three distinct accent colors drive interaction and hierarchy. Primary (#ffcd00) is the signature call-to-action color, deployed on the 'Login' button, 'Recharge' tab, and key interactive elements. It commands attention without aggression, evoking optimism and speed. Secondary (#3783e7) is the corporate blue, used for links, secondary buttons, and informational elements—it reinforces brand authority and appears in the hero section's dominant background. Tertiary (#17c191) is the accent for success states, badges, and positive messaging. Error (#f018a6) is reserved for alerts and destructive actions. The surface st

Typography

The type system is anchored in Gilroy, a geometric sans-serif that conveys modernity and approachability. The hierarchy spans from display (52px, 700 weight) for hero statements down to label-sm (12px, 500 weight) for metadata. Display and headline-lg use tighter letter-spacing (-0.02em, -0.01em) to create visual density and impact, while body and label tiers use neutral or slightly positive spacing (0em to 0.02em) for legibility. The 'Urgent Statement' headline in the hero uses display weight at 52px with 700 weight, commanding the viewer's attention. Body copy defaults to 16px (body-md) with 400 weight and 24px line-height (1.5 unitless), ensuring comfortable reading on mobile and desktop. Labels use 600 weight to signal interactivity and hierarchy within dense layouts. Font-weight progr

Layout

Korek uses a 12-column grid with a 1280px max-width container, providing a flexible yet structured canvas. The page rhythm is driven by the spacing scale: section separation uses lg (40px) or xl (64px) margins, card-to-card gutters use md (24px), and internal padding within cards uses md (24px) or sm (12px) depending on density. The hero section occupies full viewport height with a diagonal composition (visible in the screenshot: dark navy band cutting across the blue background), creating visual dynamism. Below the fold, content is organized in a card-based grid: the 'Get My Korek App' section and 'Recharge/Pay Bills' form sit side-by-side on desktop (6 columns each), stacking on mobile. White-space philosophy emphasizes breathing room: cards have 24px padding, sections have 40px vertical

Elevation & Depth

Elevation in Korek is achieved through subtle shadow layering and strategic background color shifts, not dramatic depth. The system uses Material Design 3 elevation tokens: sm (0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)) for cards and input fields, md (0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12)) for hovered cards and modals, and lg (0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)) for floating elements like notifications. Ca

Shapes

Korek employs a 'Soft-Technical' radius philosophy: sharp enough to feel modern and precise, soft enough to feel approachable. Buttons use full radius (9999px) to emphasize their role as primary interactive elements—the 'Login' button's 17.16px radius (approximately 1rem) creates a pill shape that feels friendly and clickable. Cards and containers use md (0.75rem / 12px) or lg (1rem / 16px) radius, providing visual softness without appearing playful. Input fields use DEFAULT (0.5rem / 8px) radius, a subtle curve that signals form elements without distraction. Expansion panels and accordion hea

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses full radius (9999px), golden-yellow background (#ffcd00), dark navy text (#043659), and 8px vertical / 24px horizontal padding for a 40px total height. On hover, the background shifts to primary-fixed-dim (#ffcd00 with 8% opacity reduction) over 200ms, maintaining the pill shape. Secondary buttons use a 6% opacity overlay (rgba(77, 89, 149, 0.06)) with secondary text (#3783e7) and a 1px border in rgba(77, 89, 149, 0.12); on hover, the overlay increases to 12% opacity. Ghost buttons are transparent with secondary text, gaining a subtle background on hover. All buttons use label-md typography (14px, 600 weight) and transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes.

Do's and Don'ts

**Do**

• Do use primary (#ffcd00) exclusively for high-priority CTAs like Login, Recharge, and Continue buttons—never dilute its impact with secondary uses.
• Do maintain 24px gutter spacing between grid columns and 40px section separation to preserve the spacious, breathing aesthetic.
• Do apply full radius (9999px) only to buttons; use md (12px) for cards and DEFAULT (8px) for inputs to maintain clear component hierarchy.
• Do transition all interactive states (hover, focus, active) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for consistent motion language.
• Do use Gilroy exclusively for all typography; never substitute system fonts or serif typefaces.
• Do layer shadows using the Material Design 3 elevation tokens (sm, md, lg) rather than custom values to maintain visual consistency.

**Don't**

• Don't use primary (#ffcd00) for body text, backgrounds, or non-interactive elements—it must remain reserved for CTAs and key interactive states.
• Don't apply border-radius smaller than 4px (sm) or larger than 1.5rem (xl) outside of full-radius buttons; this breaks the soft-technical aesthetic.
• Don't mix Gilroy with other sans-serifs like Poppins or Roboto in the same layout; maintain typographic consistency across all sections.
• Don't create custom shadows; always reference the elevation tokens (sm, md, lg) to ensure depth hierarchy is predictable and scannable.
• Don't reduce padding below 12px (sm) in cards or containers; white-space is a core brand principle and cramped layouts feel cheap.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use on-surface (#3f4254) and surface (#f8f8f8) to maintain warmth and reduce eye strain.