Nokia DESIGN.md

Connectivity-for-the-AI-era branding with cool gradients, dark technological depth, and clean industrial structure. Nokia’s current site uses bright blues and teals, dark network surfaces, and modular enterprise storytelling to make infrastructure feel modern and consequential.

1. Visual Theme & Atmosphere

Overall Aesthetic

Nokia’s current web presence communicates critical infrastructure with future-facing optimism. It blends dark sections, bright gradient accents, chip-and-network visuals, and clean enterprise structure to tell a story about global connectivity and the AI supercycle.

Mood & Feeling

• Foundational: the brand should feel essential, not optional
• Innovative: AI-era connectivity is central to the message
• Industrial-modern: technical, but not cold
• Clear: complex solution stories should remain easy to follow
• Global: scale and trust matter as much as visual modernity

Design Density

Medium density. Nokia sections often contain stats, category modules, and solution pathways, but spacing and modular imagery keep them scannable.

Visual Character

• Deep navy backgrounds with teal-to-blue gradients
• Bright accent moments around connectivity and signal themes
• Clear category cards and product pathways
• Clean enterprise typography with spacious section rhythm
• Technical photography and abstract network visuals

2. Color Palette & Roles

Core Palette

Neutral Foundation

Color Usage Rules

• Use blue and teal as connected signal accents.
• Let dark sections carry the technical premium feel.
• Keep lighter content surfaces crisp and readable.
• Use gradients selectively for brand energy, not as page wallpaper everywhere.

3. Typography Rules

Font Stack

css/* Modern enterprise-tech sans */
--font-sans: Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Roboto Mono', Menlo, monospace;

Type Scale

Typography Philosophy

Nokia typography should feel clear, elevated, and future-oriented. It must balance technical authority with readability for broad business audiences.

Practical Rules

• Use concise, high-level headlines.
• Support them with short explanatory text.
• Let category names and proof points remain literal and easy to scan.

4. Component Stylings

Buttons

Primary Button

css.button-primary {
  background: #169BFF;
  color: #FFFFFF;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #169BFF;
  border-radius: 999px;
  font: 600 14px/1 Inter, sans-serif;
}

Secondary Button

css.button-secondary {
  background: transparent;
  color: #169BFF;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #169BFF;
  border-radius: 999px;
}

Inputs

Text Input

css.input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: #FFFFFF;
  color: #16202A;
  border: 1px solid #EAF0F5;
  border-radius: 14px;
  font: 400 16px/1.2 Inter, sans-serif;
}

Cards

Solution Card

css.card {
  background: #FFFFFF;
  border: 1px solid #EAF0F5;
  border-radius: 22px;
  padding: 24px;
}

Dark Signal Card

css.signal-card {
  background: linear-gradient(180deg, #0B3D91 0%, #071A2B 100%);
  color: #FFFFFF;
  border-radius: 24px;
  padding: 28px;
}

5. Layout Principles

Spacing Scale

Layout Rules

• Break the connectivity story into distinct industry or solution chapters.
• Use stats and highlight modules sparingly but clearly.
• Balance dark technical sections with lighter explainer sections.
• Keep CTA pathways obvious for providers, enterprises, and cloud audiences.

6. Depth & Elevation

Surface Hierarchy

Shadow System

css.shadow-card {
  box-shadow: 0 8px 18px rgba(7, 26, 43, 0.08);
}

.shadow-dark {
  box-shadow: 0 16px 30px rgba(7, 26, 43, 0.18);
}

Depth Rules

• Use gradients and contrast before strong shadow.
• Keep cards crisp and modern on light surfaces.
• Let dark hero bands feel immersive but still readable.

7. Do's and Don'ts

Do

• Use blue and teal accents to suggest connectivity and flow.
• Keep infrastructure stories modular and easy to scan.
• Use dark surfaces confidently for premium technical sections.
• Maintain a clean enterprise tone.
• Pair visuals with short, focused copy.

Don't

• Overload the page with too many gradients.
• Use playful consumer styling.
• Let technical depth become visual clutter.
• Crowd category cards with too much detail.
• Lose contrast on dark sections.

8. Responsive Behavior

Responsive Rules

• Stack solution cards and proof modules cleanly.
• Keep hero copy concise enough to wrap without losing impact.
• Simplify gradient-heavy sections on smaller screens when needed.
• Maintain strong button contrast and spacing.
• Preserve scan-friendly category paths on mobile.

Mobile Character

Nokia mobile layouts should still feel foundational and modern. The brand’s dark-to-bright signal story should remain clear even in a stacked format.

9. Agent Prompt Guide

Quick Reference

• Mood: foundational, connected, AI-era, global
• Core palette: navy, bright blue, teal, cyan
• Typography: modern enterprise sans
• Layout: modular solution chapters with dark/light rhythm
• Components: pill CTAs, crisp cards, gradient signal sections

Prompt Snippet

textDesign this interface in the style of Nokia’s current connectivity-for-the-AI-era website. Use deep navy sections, bright blue and teal signal accents, clean enterprise typography, modular solution cards, and gradient-backed premium highlights. The result should feel foundational, modern, and technically credible without becoming cluttered.