UniFi

Overview

UniFi represents a paradigm shift in enterprise IT infrastructure design—a unified, license-free ecosystem that transforms complex networking, security, and physical access control into an intuitive, data-driven interface. The brand serves IT professionals, system integrators, and enterprise decision-makers who demand both technical rigor and visual clarity. The aesthetic is 'Technical Minimalism': a clean, light-dominant palette anchored by a vivid cobalt blue (#006fff) that signals actionable intelligence and trust. The UI evokes precision, scalability, and control—every pixel serves the user's need to visualize and manage distributed infrastructure at scale. The emotional response is one of confidence: users feel empowered to orchestrate complex systems without cognitive overload.

Voice and personality: UniFi speaks in the language of engineers—direct, factual, solution-oriented. The tone is never breathless or hyperbolic; instead, it is measured, authoritative, and occasionally wry. Example sentence: 'Your network is now unified. Deploy with confidence.' The vocabulary favors concrete nouns (gateway, topology, throughput) over abstract marketing language. The brand personality balances technical depth with accessibility: it respects the user's intelligence while remaining approachable to those new to enterprise infrastructure.

Colors

The color system is anchored by a primary cobalt blue (#006fff) used exclusively for interactive elements—buttons, links, active states, and focus indicators. This high-saturation accent cuts through the neutral palette and signals interactivity with unmistakable clarity. The surface stack uses a near-white foundation (#ffffff) with carefully calibrated grays for depth: surface-container-low (#f0f0f0) for subtle backgrounds, surface-container-high (#e0e0e0) for elevated surfaces, and outline-variant (#b7bcc2) for borders and dividers. The on-surface text color is a dark charcoal (#212327) that maintains 14.5:1 contrast ratio against white, ensuring legibility in dense data tables and complex dashboards. Secondary accent colors include a muted red (#ee6368) for error states and alerts, and

Typography

The type system uses Inter and Lato as the primary font stack, chosen for their exceptional clarity at small sizes and their neutral, professional demeanor. The hierarchy spans from display (42px, 700 weight) for hero headlines down to label-sm (11px, 500 weight) for captions and metadata. Display and headline-lg use a subtle negative letter-spacing of -0.02em to -0.01em, tightening the letterforms and creating a sense of density and authority—appropriate for a platform that manages thousands of devices. Body text (13px–15px, 400 weight) sits at the intersection of readability and information density; line-height is set to 20px–24px to ensure comfortable scanning of long lists and descriptions. Label styles (11px–13px, 600 weight) are used for form labels, badges, and UI chrome, with a mod

Layout

The page layout uses a 12-column grid with a max-width of 1280px, providing ample breathing room for complex data visualizations and multi-panel interfaces. The gutter width is 24px, consistent with the lg spacing token, allowing cards and sections to breathe without feeling scattered. White-space is treated as a first-class design element: sections are separated by lg spacing (24px) vertically, and internal card padding uses md spacing (16px) to create clear visual containment. The container-max-width of 1280px accommodates side-by-side dashboard panels (e.g., topology view + device list) without forcing horizontal scrolling on standard desktop monitors. Horizontal rhythm is maintained through consistent use of the spacing scale: xs (4px) for micro-interactions like icon-to-text gaps, sm

Elevation & Depth

Depth in UniFi is conveyed through subtle shadows and layering rather than color shifts or glassmorphism. The elevation system defines three levels: Level 1 (Base) uses no shadow, representing the primary surface. Level 2 (Standard Cards & Modals) applies box-shadow: 0 8px 24px rgba(33, 35, 39, 0.08), 0 0 1px rgba(33, 35, 39, 0.08)—a soft, spread shadow that lifts the element slightly from the background without creating harsh contrast. Level 3 (Elevated Modals & Overlays) uses box-shadow: 0 12px 48px rgba(33, 35, 39, 0.12), 0 0 1px rgba(33, 35, 39, 0.08), a more pronounced shadow that creates

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used sparingly and purposefully, never as decoration. Buttons and form inputs use a minimal 4px border-radius (DEFAULT), creating subtle softness without sacrificing the technical aesthetic. Cards and larger containers use 8px (md radius), providing enough rounding to feel approachable while maintaining a structured, grid-like appearance. Modals and elevated surfaces use 10px (lg radius), distinguishing them as primary interaction surfaces. The full radius (9999px) is reserved exclusively for toggle switches, badges, and pill-sh

Components

Action Elements Buttons are the primary call-to-action mechanism. The primary button uses background-color: rgb(0, 111, 255), color: rgb(255, 255, 255), border-radius: 4px, padding: 8px 12px, height: 32px. On hover, the background shifts to #0056cc (a darker blue) with a transition duration of 150ms, providing immediate visual feedback. On active/pressed state, the background becomes #0e69d8 with a subtle inset box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) to convey tactile depression. Secondary buttons use a transparent background with a 1px solid border in outline-variant (#b7bcc2), text color primary (#006fff), and the same padding and height. On hover, the background becomes surface-container-low (#f0f0f0) without changing the border, creating a subtle fill effect. Tertiary button

Do's and Don'ts

**Do**

• Do use primary blue (#006fff) exclusively for interactive elements—buttons, links, focus states—to create unambiguous affordance.
• Do maintain consistent 24px gutter spacing between major sections to ensure visual rhythm and prevent information overload.
• Do apply the label-md typography (13px, 600 weight) to all form labels and UI chrome to establish a clear visual hierarchy.
• Do use the elevation shadow system (Level 1/2/3) to create depth without relying on color shifts; shadows should be soft and desaturated.
• Do test all interactive elements at 13px and smaller font sizes to ensure legibility; apply text-shadow: 0 1px 2px rgba(0,0,0,0.1) when necessary.
• Do use the full rounded radius (9999px) only for toggles, badges, and pill-shaped elements; use 4–8px for buttons and cards.
• Do pair Inter (geometric, precise) with Lato (warm, approachable) to balance technical authority with human-centered design.

**Don't**

• Don't use secondary red (#ee6368) or tertiary blue (#4797ff) as primary CTAs; reserve these for error states, warnings, and supporting actions.
• Don't apply rounded corners greater than 10px to any component; excessive rounding undermines the technical aesthetic.
• Don't use decorative gradients or glassmorphism effects; the system relies on clean surfaces, subtle shadows, and opacity for depth.
• Don't exceed 1280px container width; wider layouts fragment attention and make data tables difficult to scan.
• Don't use system fonts (system-ui, -apple-system) in place of Inter/Lato; the type pairing is essential to brand identity.
• Don't apply text-shadow or blur effects to body text; reserve these techniques for small labels over complex backgrounds only.
• Don't mix rounded and sharp corners within a single component; consistency in shape language reinforces the technical aesthetic.
• Don't use opacity below 0.5 for disabled states; aim for opacity: 0.5 or a desaturated color shift to maintain legibility.