Norton

Overview

Norton is a cybersecurity authority that transforms complex threat protection into intuitive, confidence-building experiences. The brand serves individuals and businesses seeking comprehensive device protection without technical friction. The design language embraces "Confident Minimalism"—a philosophy that pairs bold, action-oriented yellow (#FEEB29) accents with clean, neutral surfaces (#242424 on #F8F8F7) to communicate both security expertise and approachable simplicity. The UI evokes a sense of calm control: users feel protected without being overwhelmed by security jargon or visual noise.

Norton's voice is authoritative yet conversational, avoiding fear-mongering while emphasizing proactive protection. The brand speaks in clear, benefit-driven language: "Protection you don't have to think about" rather than "Defend against 47 threat vectors." Typography is bold and modern (Inter at weights 500–800), with generous whitespace that reflects the brand's confidence in its core message. Every interaction—from button clicks to form submissions—should feel decisive and reassuring, never tentative.

Colors

Norton's color system centers on a striking primary yellow (#FEEB29) paired with a deep charcoal (#242424) and soft neutral surfaces (#F8F8F7). The primary yellow is the brand's signature accent, used exclusively on call-to-action buttons ("Get started", "Get Offer"), key links, and interactive focus states. This high-contrast pairing (yellow on dark backgrounds, dark text on yellow) ensures accessibility (WCAG AA+) while commanding visual attention. Secondary blue (#0F71F0) supports secondary actions, toggles in the "on" state, and informational elements like badges and links. Tertiary blue (#3F8DF3) provides a softer alternative for less critical interactions. The surface stack uses warm, off-white tones: surface-container-lowest (#F5F4F4) for subtle backgrounds, surface-container-high (

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys both technical precision and human warmth. Display (60px, 700 weight) anchors hero sections with commanding presence; headline-lg (40px, 700) introduces major sections; headline-md (28px, 600) breaks up content into digestible chunks. Body text is set at 16px (body-md, 500 weight) for UI labels and 18px (body-lg, 400) for longer prose, maintaining 1.5x line-height (24px and 28px respectively) for comfortable reading. Labels use 14px (label-md, 600 weight) with 0.01em letter-spacing for crisp button and form text; smaller labels drop to 12px (label-sm, 500 weight) with 0.02em tracking for density. Font weights are deliberately limited to 400, 500, 600, 700, and 800 to avoid visual chaos; button text uses 800 weight

Layout

Norton uses a 12-column fluid grid with a max-width of 1300px, centered on the viewport. The gutter is consistently 24px (md spacing), creating breathing room between columns without excessive whitespace. Container sections use lg spacing (40px) for vertical separation between major blocks (hero, product showcase, testimonials), while internal card padding is md (24px). The homepage follows a "hero → value proposition → product grid → social proof → CTA" rhythm, with each section occupying roughly 100–120vh of vertical space to encourage natural scrolling. Horizontal padding on mobile is sm (12px) per side, expanding to md (24px) on tablet and lg (40px) on desktop. The design avoids centered text for body copy; left-aligned text (on-surface #242424) improves scannability. Whitespace betwee

Elevation & Depth

Norton uses a restrained shadow system to create subtle depth without visual heaviness. Level 1 (Base): no shadow; flat surfaces on the neutral background. Level 2 (Cards & Containers): box-shadow 0 1px 1px 0 rgba(7, 29, 43, 0.24), a thin, tight shadow that defines edges without lifting the element far from the page. Level 3 (Modals & Overlays): box-shadow 0 4px 12px rgba(7, 29, 43, 0.12), a softer, more diffuse shadow that creates clear separation. Level 4 (Floating Actions): box-shadow 0 16px 40px rgba(7, 29, 43, 0.16), reserved for floating CTAs or persistent navigation elements. Hover stat

Shapes

Norton employs "Geometric Precision"—a shape philosophy that balances technical authority with approachability. Buttons use full-radius (40px border-radius on 40–48px height elements), creating pill-shaped forms that feel modern and clickable. Cards and containers use lg radius (16px) for a softer, less corporate feel than sharp corners, while maintaining clear definition. Form inputs use DEFAULT radius (6px), a subtle rounding that signals interactivity without drawing attention away from content. Modals and overlays use xl radius (20px) to emphasize their elevated status. The header and foot

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use #FEEB29 background with #242424 text, 800 font-weight, and full radius (40px). Standard height is 40px with 10px vertical / 26px horizontal padding; large variants (button-primary-lg) are 48px tall with 16px / 30px padding. Hover state transitions to #FDD700 over 150ms (ease-in-out), maintaining the same text color. Active/pressed state uses #E6D600 with a 2px inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.1)). Disabled buttons use surface-container-highest (#E9E9E7) background with on-surface-variant (#555551) text at 50% opacity. Secondary buttons mirror the primary structure but use white background with #242424 border (1px solid) and text; hover state fills to surface-container-high (#EFEFED). Tertiar

Do's and Don'ts

**Do**

• Do use primary yellow (#FEEB29) exclusively on CTAs and interactive focus states—never on passive elements or backgrounds.
• Do maintain 24px gutter spacing between grid columns and 40px vertical spacing between major sections to preserve the calm, confident rhythm.
• Do apply 800 font-weight to button text and 600 weight to labels to create clear visual hierarchy without introducing new weights.
• Do use full-radius (40px) on all buttons to signal interactivity; reserve lg-radius (16px) for cards and DEFAULT (6px) for inputs.
• Do transition hover states over 150ms (ease-in-out) for buttons and cards to feel responsive without jarring.
• Do pair dark text (#242424) on light surfaces with light text on dark surfaces; never use mid-tone gray text on mid-tone backgrounds.
• Do use secondary blue (#0F71F0) for secondary actions, toggles-on, and focus outlines; reserve tertiary blue (#3F8DF3) for softer, less critical elements.

**Don't**

• Don't use primary yellow on any surface or background; it is reserved for interactive elements only.
• Don't introduce new border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); consistency is critical.
• Don't use shadows heavier than lg elevation (0 16px 40px) on any element; the system is deliberately restrained.
• Don't mix font weights outside the approved set (400, 500, 600, 700, 800); avoid 300, 900, or intermediate weights.
• Don't center-align body text; use left-alignment for improved scannability and a more modern feel.
• Don't apply color overlays or tints to the primary yellow; use the defined primary-container (#FFF4B3) for lighter variants.
• Don't use the error color (#D40404) for non-critical warnings; reserve it for destructive actions and critical alerts only.