Flightradar24

Overview

Flightradar24 is a real-time aviation tracking platform that transforms complex flight data into an accessible, intuitive visual experience. The design system embraces 'Data-Driven Minimalism'—a philosophy that prioritizes clarity and precision while maintaining visual warmth through strategic color accents. The brand serves aviation enthusiasts, professionals, and casual travelers who demand accuracy and responsiveness. The UI evokes a sense of control and transparency: users feel empowered to explore live flight information with confidence, never overwhelmed by technical complexity.

The brand voice is precise, authoritative yet approachable, and never sensationalist. Flightradar24 communicates in concrete facts: flight numbers, altitudes, arrival times, and aircraft types. Example sentence in brand voice: 'Flight BA287 departed London Heathrow at 14:32 UTC, currently cruising at 35,000 feet with an estimated arrival in New York at 17:18 local time.' The vocabulary is technical but accessible, avoiding jargon without sacrificing accuracy.

Colors

The color system balances a neutral, professional foundation with strategic accent colors that guide user attention and convey status. Primary (#64bef1) is a cool, confident cyan used exclusively for interactive elements—buttons, links, focus states, and data highlights on the live map. This color appears frequently but never dominates; it acts as a visual anchor that users learn to associate with actionable elements. Secondary (#f8c023) is a warm, energetic gold that highlights premium features, special offers, and calls-to-action for subscription upgrades; it appears less frequently but with high visual impact. Tertiary (#ff3e5f) is a vibrant coral-red reserved for alerts, errors, and critical status indicators—drawing immediate attention when aircraft are in distress or data is anomalou

Typography

The type system uses Open Sans exclusively, a humanist sans-serif that conveys both technical precision and approachability. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major page titles; headline-lg (40px, 600 weight) introduces key sections like 'Flight tracker map' or 'Premium features'; headline-md (28px, 600 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) carries descriptive copy and feature explanations; body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, list items, and inline data. Label-md (14px, 600 weight, 0.01em tracking) marks buttons, badges, and UI controls; label-sm (12px, 500 weight, 0.02em tracking) annotates secondary information and timestamps. Instruction: apply text-shado

Layout

The layout system uses a 12-column grid with a 1280px maximum container width, maintaining a 24px gutter between columns on desktop and 12px on tablet. The page rhythm follows a 'content-first' approach: the live flight map occupies the dominant visual real estate (typically 60–70% of viewport width), while supporting panels (search, filters, premium prompts) occupy the remaining space in a flexible sidebar. White-space is used strategically: lg spacing (40px) separates major sections (hero, feature blocks, footer), md spacing (24px) groups related content (card stacks, form groups), and sm spacing (12px) provides breathing room within components (button padding, list item margins). Container max-width is enforced at 1280px to prevent line-length from exceeding 80 characters in body text,

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness while maintaining clear layer hierarchy. Level 1 (Base): flat surfaces with no shadow—the live map background and primary content areas. Level 2 (Raised): cards, input fields, and secondary containers use elevation.md (0 3px 8px rgba(0, 0, 0, 0.15))—a soft, close shadow that suggests the element sits slightly above the base. Level 3 (Floating): modals, dropdowns, and popovers use elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12))—a larger, more diffuse shadow that creates clear separation from background content. Hove

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are used to humanize technical interfaces without sacrificing clarity or precision. Buttons use full radius (9999px) to signal strong affordance and create a friendly, approachable CTA aesthetic; this applies to all primary, secondary, and tertiary button variants. Cards and containers use lg radius (1rem / 16px) for a balanced, modern appearance that feels neither too sharp nor too organic. Input fields and form controls use DEFAULT radius (0.5rem / 8px)—slightly rounded to distinguish them from sharp browser defaults while maintai

Components

Action Elements Buttons are the primary interaction mechanism and must signal affordance clearly. Button-primary uses {colors.primary} (#64bef1) background with white text, 40px height, 6px 16px padding, and full radius. On hover, the background transitions to {colors.inverse-primary} (#327db6) over 200ms, darkening the cyan to indicate state change. Button-secondary uses a dark semi-transparent background (rgba(57, 57, 57, 0.9)) for secondary actions like 'Log in' or 'Learn more'; on hover, it darkens further to rgba(48, 48, 48, 1). Button-tertiary is transparent with a 1px primary-colored border, used for low-priority actions; on hover, it fills with {colors.primary-container} (#e0f2f9) to maintain visual hierarchy without overwhelming the interface. All buttons use {typography.label

Do's and Don'ts

**Do**

• Do use {colors.primary} (#64bef1) exclusively for interactive elements—buttons, links, focus states, and map highlights—to create a consistent, learnable interaction model.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) to modals; never mix shadow styles or use custom values.
• Do maintain 24px gutters between grid columns on desktop and 12px on tablet; use {spacing.md} (24px) to separate major sections and {spacing.sm} (12px) within components.
• Do use Open Sans at 600 weight for all interactive labels (buttons, chips, form labels) and 400 weight for passive information (body text, descriptions, timestamps).
• Do transition all interactive state changes (hover, focus, active) over 150–200ms using ease-in-out timing; never apply instant state changes.
• Do use {rounded.full} (9999px) on all buttons and badges to signal affordance; use {rounded.lg} (16px) on cards and modals; use {rounded.DEFAULT} (8px) on input fields.
• Do apply text-shadow 0 1px 2px rgba(0, 0, 0, 0.1) to label-sm elements overlaid on the live map to ensure readability against variable backgrounds.
• Do reserve {colors.tertiary} (#ff3e5f) for error states and critical alerts only; never use it for general UI elements.

**Don't**

• Don't use colors outside the defined palette—no custom hex values, no arbitrary grays, no off-brand accents. Every color must reference a token.
• Don't apply shadows to text elements or use text-shadow for decorative purposes; reserve shadows for surface elevation only.
• Don't hardcode padding, margins, or spacing values; always use {spacing.xs}, {spacing.sm}, {spacing.md}, {spacing.lg}, or {spacing.xl}.
• Don't mix rounded-corner styles within a single component family—all buttons use {rounded.full}, all cards use {rounded.lg}, all inputs use {rounded.DEFAULT}.
• Don't use {colors.secondary} (#f8c023) for general UI elements; reserve it exclusively for premium feature prompts and subscription upgrade calls-to-action.
• Don't apply focus states using outline: 2px solid; use the glow pattern (0 0 0 3px rgba(100, 190, 241, 0.1)) for consistency.
• Don't exceed 1280px container max-width; never allow line-length to exceed 80 characters in body text.
• Don't use opacity or transparency to create depth; use the elevation shadow system instead for clear, predictable layer hierarchy.