
Preview image. Unlock full-res
Midnight Command Center
Dovetail employs a dark-mode command center aesthetic centered on crisp functionality. A deep charcoal canvas serves as the backdrop for subtly elevated, monochromatic interface elements. Typography is compact and precise, utilizing negative letter-spacing for large text to convey authority. A singular vivid blue acts as a functional accent, highlighting interactive states and critical data points within an otherwise cool-toned grayscale palette, creating a focused, efficient user experience. Prioritize Dark Frost (#1e1e1e) or Pitch Black (#000000) for interactive elements, reserving Polar White (#ffffff) for primary action roles and key information. Apply negative letter-spacing from the Inter font definition to all headings and large display text for a tight, authoritative feel. Use Data Blue (#6798ff) exclusively for functional accents, interactive states, and data points, avoiding decorative use. Maintain an 8px base unit for all spacing, particularly elementGap and cardPadding, ensuring a consistent density. Render all primary button and card elements with an 8px border-radius to maintain a consistent soft containment. Utilize JetBrains Mono font for any labels, tokens, or data fields that require a fixed-width, technical appearance. Implement the subtle 1px border with Light Gray (#454545) or Polar White (rgba(255, 255, 255, 0.24)) for ghost/outlined elements. Avoid using highly saturated, non-semantic colors beyond Data Blue (#6798ff); maintain a grayscale palette for most UI elements. Do not deviate from the specified negative letter-spacing values for Inter headings; incorrect tracking will compromise the brand's typographic signature. Do not introduce strong shadows or excessive elevation; the system relies on subtle background shifts and borders for depth. Avoid using Polar White (#ffffff) as a general background color; it is reserved for foreground elements on dark surfaces. Do not use default browser link colors (e.g. #0000ee); ensure all interactive text adheres to the defined color palette, typically Data Blue or Silver Dust. Do not apply large, decorative imagery; maintain tight crops or abstract graphics that integrate seamlessly with the dark UI. Avoid irregular border radii; adhere strictly to 8px for most components and 66px for specific circular features.









