uBreakiFix by Asurion

Overview

uBreakiFix by Asurion embodies a 'Professional Minimalism' aesthetic—clean, confident, and service-oriented. The design prioritizes clarity and accessibility, using a sophisticated dark-mode foundation (surface #130f17) paired with vibrant accent colors (primary purple #8223d2, tertiary lime #d2fa46) that signal trust and energy. The brand serves consumers and businesses seeking reliable device repairs, and the UI evokes competence, approachability, and neighborhood-scale service.

The voice is direct, reassuring, and human. uBreakiFix speaks in active, solution-focused language: 'When your tech stops working, we start.' Vocabulary emphasizes speed ('same-day repairs'), quality ('authorized provider'), and accessibility ('neighborhood tech hub'). The tone avoids corporate jargon; instead, it uses concrete device names and relatable scenarios. Example sentence in brand voice: 'Your iPhone screen cracked? We'll have it fixed before you finish your coffee.'

Colors

The color system anchors on a dark, tech-forward surface palette (surface #130f17, surface-dim #040308) that reduces eye strain and conveys professionalism. The primary accent is Asurion purple (#8223d2)—a bold, energetic hue used exclusively for primary CTAs ('Start a repair'), links, and focus states. This purple appears frequently enough to establish brand recognition but sparingly enough to maintain hierarchy. Secondary accents include lime-green (#d2fa46) for highlights and status indicators, and cyan (#6efac3) for supporting UI elements. The on-surface text is a soft lavender (#f8eef9, not pure white) to reduce contrast harshness on dark backgrounds. Outline tokens (#7c757e for primary, #4a454e for subtle) provide card borders and dividers at 0.0625rem (1px) weight. Usage rules: prim

Typography

The type system uses Apercu (a geometric sans-serif from the Asurion design system) across all scales, creating visual cohesion and a contemporary, tech-forward personality. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; headline-lg (48px, 300 weight) provides elegant, lightweight secondary messaging; body-md (16px, 400 weight, 24px line-height) ensures readability on dark backgrounds with 1.5x line-height ratio. Label-md (14px, 600 weight) is applied to buttons and form labels with 0.01em tracking for subtle emphasis. On dark surfaces, apply a subtle text-shadow (0 1px 2px rgba(0, 0, 0, 0.3)) to small labels (12px and below) when layered over photographic or textured backgrounds to maintain legibility. Font weights are deliberately limited to

Layout

The layout uses a 12-column grid with a max-width of 1440px, supporting both desktop and mobile viewports. The spacing scale is semantic: unit (8px) is the base; sm (12px) for tight component spacing; md (24px) for section gutters and card padding; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. Container padding is consistently 24px (md) on desktop, reducing to 16px on tablets and 12px on mobile. White-space is generous—sections are separated by lg (40px) gaps to create visual breathing room and reduce cognitive load. Cards and containers use md (24px) internal padding with 1rem (16px) gaps between child elements. The hero section spans full-width with a 2:1 image-to-text ratio, establishing immediate visual hierarchy. Grids for product cards use auto-fi

Elevation & Depth

Depth is conveyed through a layered shadow and surface-container system rather than dramatic drop shadows. Level 1 (Base): surface (#130f17) with no shadow. Level 2 (Standard Card): surface-container (#130f17) with a 1px border at outline-variant (#4a454e) and box-shadow: 0 4px 14px -2px rgba(0, 8, 16, 0.08). Level 3 (Elevated/Modal): surface-container-high (#221e26) with a 1px border at outline (#7c757e) and box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12). Interactive pressed states use an inset shadow: inset 2px 2px 4px 4px rgba(0, 0, 0, 0.2), creating a tactile 'pressed' effect. Hover states inc

Shapes

The shape philosophy is 'Functional Precision'—rounded corners are used strategically to soften hard edges without sacrificing clarity. Buttons and form inputs use sm (2px) or DEFAULT (4px) radius, maintaining a technical, professional appearance. Cards and elevated containers use lg (12px) radius to create visual distinction from buttons and improve perceived depth. The full (9999px) radius is reserved for pill-shaped buttons and badges, signaling secondary or supplementary actions. Border-radius is never applied to the page background or full-width sections; only contained elements receive r

Components

Action Elements Buttons follow a three-tier system: primary (filled, purple #8223d2 background, white text, 48px height, 12px vertical / 24px horizontal padding, 4px radius), secondary (outlined, transparent background, 1px border at on-surface, 48px height, full radius), and tertiary (filled, lime #d2fa46 background, dark text, 48px height). All buttons use label-md typography (14px, 600 weight). Hover states increase opacity to 0.92 and shift the background 1–2 shades darker. Active/pressed states apply the inset shadow (2px 2px 4px 4px rgba(0, 0, 0, 0.2)) and reduce opacity to 0.88. Focus states add a 2px outline at primary color with 2px offset. Transition timing is 150ms ease-out for all state changes.

Containers & Surfaces Cards use surface-container (#130f17) background wit

Do's and Don'ts

**Do**

• Do use primary purple (#8223d2) exclusively for primary CTAs and brand moments—never for decorative elements or secondary actions.
• Do maintain 1.5x line-height on body text (24px line-height for 16px font) to ensure readability on dark backgrounds.
• Do apply 24px (md) padding to all cards and containers; never use asymmetric padding unless explicitly designing for visual emphasis.
• Do use the full (9999px) radius only for pill-shaped buttons and badges; use lg (12px) for cards and md (8px) for inputs.
• Do transition all interactive state changes over 150ms using ease-out timing to feel responsive without being jarring.
• Do layer text-shadow (0 1px 2px rgba(0, 0, 0, 0.3)) on small labels (12px and below) when placed over photographic backgrounds.

**Don't**

• Don't use secondary or tertiary accent colors for primary CTAs; reserve purple (#8223d2) for the most important user actions.
• Don't apply border-radius to full-width sections or page backgrounds; rounding signals interactivity and should be reserved for contained, clickable elements.
• Don't use pure white (#ffffff) for text on dark backgrounds; use soft lavender (#f8eef9) to reduce eye strain and maintain brand cohesion.
• Don't exceed 32px blur radius on shadows; larger shadows make the interface feel disconnected and reduce perceived hierarchy.
• Don't mix Apercu with system fonts or web-safe fallbacks in the primary type hierarchy; always load Apercu via @font-face to maintain visual consistency.
• Don't use more than two accent colors in a single component; limit to primary + one secondary to avoid visual chaos.