Umbrel

Umbrel's design system evokes a sense of deep, sophisticated technology housed within a warm, user-centric environment. The prevailing darkness, created by near-black backgrounds, is punctuated by rich, vibrant gradients that give a feeling of digital depth and energy. Subtle contrasts and varied text weights maintain readability within the dark theme, while rounded corners and soft shadows on elements like buttons and cards introduce approachability to the complex technical offering. Prioritize Midnight Void (#000000) for all page and primary section backgrounds, ensuring a consistent dark theme. Use Moonlight Glimmer (#ffffff) for primary text on dark backgrounds, and Warm Gray (#61635d) or Cool Steel (#cccccc) for secondary or tertiary text hierarchy. Apply Violet Impulse (#5351f3) consistently only to primary call-to-action buttons for clear visual guidance. Utilize Inter font family for all textual content, leveraging its multiple weights (400, 500, 600, 700) and varying letter spacing to establish clear typographic hierarchy. Employ generous padding of 12px vertically and 16px horizontally for all prominent buttons, using a 32px or 99px corner radius to create a soft, approachable pill shape. Integrate the brand gradients (e.g., Deep Web Gradient, Plasma Flow Gradient) judiciously as background fills for feature sections or distinct content blocks to add visual dynamism and depth. Maintain a clear visual hierarchy by contrasting headline sizes using Inter Display 600 at 43px with tight letter spacing against body text at 16px Inter 400. Avoid introducing bright or highly saturated colors outside the defined brand and accent palette; they will detract from the sophisticated dark theme. Do not use sharp corners for interactive elements or cards; maintain the established softer aesthetic with radii like 24px, 32px, or 99px. Refrain from using more than two distinct gradients close to each other; allow gradients to breathe as distinct background elements for different sections. Do not place plain text directly on complex gradient backgrounds without sufficient contrast or a text container; ensure readability at all times. Avoid excessive shadow usage on every element; reserve prominent shadows (like rgba(0,0,0,0.24) -12px -12px 32px 0px) for truly elevated elements to indicate interactive depth or importance. Do not use generic system fonts when Inter or its customized variants are available; maintaining the specific typographic choices is crucial to brand identity. Avoid using small, pixel-based letter spacing adjustments on body copy; reserve negative letter spacing for larger headlines as defined in the type scale.