Documentation Index
Fetch the complete documentation index at: https://developers.vfbulk.ie/llms.txt
Use this file to discover all available pages before exploring further.
Vodafone Ireland
Overview
Vodafone Ireland presents as bold, urgent, and commercially driven, with a strong emphasis on promotions and clear calls to action. The interface is dense in content but organized with predictable hierarchy, making it feel practical rather than decorative. The emotional tone is confident and energetic, using vivid red as a constant brand signal across hero messaging, category icons, and purchase prompts.Colors
- Primary (#E60000): Vodafone red, used for brand marks, sale messaging, progress indicators, icon circles, and primary promotional emphasis. It is the dominant attention color and the main conversion accent.
- Secondary (#121212): A near-black used for the top utility bar, cookie consent panel, and other grounded UI areas that need strong contrast and a retail-media feel.
- Tertiary (#FFFFFF): Pure white used for text on dark or red backgrounds, button fills in high-contrast contexts, and clean separation from the saturated promotional red.
- Neutral (#D9D9D9): A light gray used for broad page surfaces and structural bands that sit behind navigation, tabs, and lower-content regions.
- Surface (#F2F2F2): Soft off-white page and card-adjacent background tone that helps content blocks and controls sit above the surrounding gray system.
- On-surface (#0D0D0D): The main text and control color on light surfaces; it provides sharp readability without appearing as absolute black.
- Border (#374151): A muted dark border used for card outlines and subtle separation in low-elevation components.
- Muted (#A3A3A3): Mid-gray used for secondary UI affordances, inactive indicators, and subdued interface details.
- Error (#D93025): Reserved for negative states or destructive actions where a strong alert hue is needed without competing with brand red.
Typography
The system uses the custom Vodafone family first, with Open Sans and sans-serif fallbacks for resilience. Headings are compact, bold, and highly legible:headline-display and headline-lg carry the main promotional message, while headline-md and headline-sm can appear lighter and more editorial. Body text remains relatively large and airy (body-lg and body-md), supporting quick scanning in a commerce-heavy layout. Labels and navigation use body-sm, label-md, and label-sm at practical sizes, with no visible uppercase treatment and minimal letter spacing for a straightforward retail voice.
Layout & Spacing
The layout is structured as a full-width retail homepage with stacked bands rather than a narrow centered editorial container. Major sections use clear horizontal divisions: top utility bar, main navigation, large hero, carousel navigation, category shortcuts, and content tabs. Spacing follows a compact but breathable rhythm based on 8px, 16px, 20px, 28px, and 56px increments, with buttons and panels favoring functional padding over excess whitespace. Cards and banners typically use 16px interior padding, while large promotional areas expand to edge-to-edge coverage.Elevation & Depth
Depth is subtle and mostly achieved through contrast, layering, and tonal separation rather than dramatic shadows. Most surfaces are flat, with the main hero relying on saturated color and imagery to create hierarchy. The cookie banner and some promotional modules use clear rectangular containment and dark/light contrast instead of elevation-heavy styling. Borders are restrained and mostly functional, reinforcing a clean commerce interface.Shapes
The shape language is softly rectangular with modest rounding. Interactive controls use 6px corners for buttons and 8px corners for cards, giving the system a friendly but disciplined feel. Larger promotional surfaces remain mostly square-edged, which keeps the interface grounded and commercially direct. Fully rounded chips and icon badges provide contrast against the otherwise structured geometry.Components
Buttons are the most visible interactive pattern.button-primary uses a white fill, dark text, 44px height, and 8px by 20px padding for strong contrast on red or dark backgrounds. button-secondary is outlined and transparent, suitable for less-prominent actions while preserving the same size and radius. button-link is minimal, with no border and no padding, used for inline navigation or low-friction utility actions.
Cards use card with a dark background, 1px border, 8px radius, and 16px padding. They should feel contained but not elevated, especially in informational or account-related areas. Inputs should follow the same visual logic as buttons: light fill, dark text, 6px radius, and comfortable padding for quick data entry. Chips and category badges should be small, fully rounded, and brand-red when they represent active selections or quick-entry categories.
Navigation uses a dark top bar with small, restrained link text and minimal chrome. Promo heroes such as promo-hero should be visually dominant, using the primary red background and white type to signal urgency. Cookie and consent surfaces should remain dense, dark, and clearly separated, with strong button hierarchy for accept/reject actions. Lists, tabs, and utility actions should stay simple, with line-based structure and minimal ornament so the promotional content remains the focus.
Do’s and Don’ts
- Do keep red reserved for brand moments, promotions, badges, and key CTAs.
- Do use large, legible type with short line lengths for hero and sale messaging.
- Do rely on flat contrast and borders more than shadows for hierarchy.
- Do keep interactive controls compact, consistent, and easy to scan.
- Don’t introduce decorative gradients, glass effects, or heavy depth treatments.
- Don’t use overly rounded corners on primary navigation or major content panels.
- Don’t overcomplicate the layout with dense multi-column grids where a simple stacked band works.
- Don’t weaken the brand by replacing Vodafone red with generic blues or pastel accents.