Umbrel Pro

Overview

Umbrel Pro is a premium home cloud device designed for users who demand complete privacy, local control, and seamless computing without monthly subscriptions. The brand embodies 'Minimalist Tech Brutalism'—a design philosophy that strips away unnecessary ornamentation while celebrating the raw power and precision of the hardware itself. The interface uses a pure black canvas (#000000) with strategic accent colors (electric indigo #5351ea for primary actions, vivid magenta #f91880 for secondary highlights, and vibrant teal #00ba7c for success states) to create a high-contrast, focused user experience. The emotional response is one of clarity and control: users feel empowered, not overwhelmed.

The brand voice is direct, technical yet accessible, and unapologetically premium. Umbrel speaks in declarative statements without marketing fluff—'32 terabytes of cloud. On your desk.' The vocabulary favors precision (storage capacity, privacy guarantees, technical specifications) over aspirational language. The tone is confident but never arrogant, knowledgeable but never condescending. Example sentence in brand voice: 'Run your own Bitcoin node, store your photos locally, and never pay a monthly fee again.'

Colors

The Umbrel Pro color system is built on a foundation of absolute darkness—surface #000000 with carefully calibrated surface containers ranging from #050505 (surface-container-lowest) to #2d2d2d (surface-container-highest) to create depth without introducing gray. The primary accent is electric indigo #5351ea, used exclusively for call-to-action buttons, interactive focus states, and brand-critical UI elements. This color appears on the 'Buy now' button and all primary interactions, commanding attention through saturation and contrast against the black background. Secondary accent magenta #f91880 is reserved for status indicators, alerts, and secondary brand moments. Tertiary accent teal #00ba7c signals success states, confirmations, and positive actions. On-surface text is set to #e8e8e8 (

Typography

The typography system pairs Google Sans for headlines, navigation, and labels with Inter for body text, creating a hierarchy that balances brand personality with readability. Google Sans at weights 600–700 conveys premium tech confidence in display (56px, -0.03em letter-spacing) and headline-lg (36px, -0.02em), while Inter body text at 16–18px with 0.01em letter-spacing ensures legibility on dark backgrounds. The display level (56px, 700 weight, 64px line-height) is reserved for hero statements like '32 terabytes of cloud.' Headline-md (28px, 600 weight) breaks up feature sections. Body-md (16px, 400 weight, 24px line-height) is the workhorse for product descriptions and feature copy. Labels use Google Sans at 500–600 weight with increased letter-spacing (0.02–0.03em) to add visual crispne

Layout

Umbrel Pro uses a fluid 12-column grid with a maximum container width of 1400px, allowing the design to breathe on large displays while maintaining focus on smaller screens. The page rhythm is driven by lg spacing (40px) for section separation and md spacing (24px) for internal component padding, creating a generous, uncluttered layout that reflects the premium positioning. The hero section occupies full viewport height with the product image centered and copy positioned in the lower left, establishing a cinematic composition. Feature sections use alternating left-right layouts with 40px gutters between text and imagery. The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component internals, md (24px) for standard padding, lg (40px) for section breaks, and xl (64

Elevation & Depth

Depth in Umbrel Pro is achieved through subtle shadow layering and strategic use of surface containers rather than dramatic drop shadows. Level 1 (base surface) is pure black #000000 with no shadow. Level 2 (standard cards and containers) uses box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) paired with a 1px border in surface-container-high (#242424), creating a soft separation from the background. Level 3 (elevated modals, hover states, and interactive elements) escalates to box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), which is the most prominent shadow on the page—used on the primary 'Buy now' button

Shapes

The shape language follows 'Technical Precision with Organic Softness'—combining sharp, geometric forms with subtle rounding to balance the industrial hardware aesthetic with digital approachability. Buttons use full rounding (border-radius: 9999px) to create pill-shaped affordances that feel modern and clickable, while cards and containers use lg rounding (1rem / 16px) for a slightly more structured appearance. Input fields use md rounding (0.75rem / 12px) to signal interactivity without excessive softness. The product hero image uses lg rounding (1rem) to soften its edges while maintaining a

Components

Action Elements Primary buttons use background #5351ea with white text, 44px height, 12px vertical / 24px horizontal padding, and full rounding (9999px). On hover, the background shifts to #4341d0 (primary-container) with an enhanced shadow (0 4px 16px rgba(83, 81, 234, 0.5)) and a 200ms transition. On active/press, the background darkens further to #3d3b9f with a tighter shadow (0 2px 8px rgba(67, 65, 208, 0.4)). Secondary buttons (white background, black text) use the same dimensions but with a 1px border and lighter shadow. Ghost buttons are transparent with a 1px outline in #4a4a4a (outline-variant), transitioning to a filled surface-container-high background on hover.

Containers & Surfaces Cards use background #151515 (surface-container) with 1px border in #242424 (surface-co

Do's and Don'ts

**Do**

• Do use the primary indigo (#5351ea) exclusively for high-priority CTAs and interactive focus states—it's the brand's signature accent and must never be diluted or overused.
• Do maintain the pure black background (#000000) as the foundation; all surface containers should be derived from this base using the stepped palette (surface-container-lowest through surface-container-highest).
• Do apply lg spacing (40px) between major sections to create breathing room and reinforce the premium positioning; white space is a design asset, not wasted space.
• Do use Google Sans for headlines and labels to convey technical confidence; reserve Inter for body text to ensure legibility on dark backgrounds.
• Do transition all interactive elements (buttons, cards, inputs) with 150–200ms ease-out timing to create tactile, responsive feedback without feeling sluggish.

**Don't**

• Don't introduce gray backgrounds or near-black surfaces (#333333 or lighter); the stepped surface containers (#050505 to #2d2d2d) are the only approved backgrounds—this maintains visual cohesion and prevents the interface from feeling washe
• Don't use secondary magenta (#f91880) or tertiary teal (#00ba7c) for primary CTAs; these are supporting accents for status and secondary actions only.
• Don't apply shadows with colored tints (e.g., blue or purple shadows); all shadows must use pure black (rgba(0, 0, 0, X)) to maintain the minimalist aesthetic.
• Don't exceed lg rounding (1rem) on cards or containers; full rounding (9999px) is reserved for buttons and badges to maintain a clear visual hierarchy.
• Don't use system fonts or generic sans-serif fallbacks; Google Sans and Inter are required for brand consistency—load them from Google Fonts with explicit font-display: swap.