Depot

Depot, dark mode, dark-mode

Preview image. Unlock full-res

Deep space console: focused intensity.

Palette
#04040b
#121113
#323035
#3c393f
#b5b2bc
#eeeef0
#71d083
#366740
#70b8ff
#473876
#ff9592
#46a758

Depot’s aesthetic is a high-contrast dark mode, evoking a command center's precision. Deep, near-black backgrounds frame content, punctuated by vivid green accents that immediately draw the eye to critical interactive elements. A subtle progression of dark grays creates layered surfaces, adding depth and structure without reliance on heavy shadows. The overall impression is one of efficiency and focused power without distraction, like a purpose-built tool designed for speed. Use Carbon Black (#04040b) for primary page backgrounds to maintain a consistent dark theme. Apply Canopy Green (#366740) for all primary call-to-action button backgrounds, paired with Terminal Green (#71d083) text. Implement 6px border radius as the default for most interface elements, with 10px used for key interactive elements like primary buttons. Ensure Red Hat Text Variable with 0.0250em letter-spacing is used for all body text and secondary UI elements for optimal legibility. Maintain a clear visual hierarchy using Red Hat Display Variable for headlines, particularly with its tight -0.0250em letter-spacing to distinguish it from body copy. Utilize Ash Gray (#323035) for button backgrounds and secondary content blocks to create subtle elevation on dark surfaces. Avoid using bright, high-saturation colors for large background areas; colors like Terminal Green (#71d083) are strictly for accents and interactive elements. Do not deviate from the specified letter-spacing values across Red Hat Display Variable and Red Hat Text Variable as they are integral to the system's character. Avoid excessive use of shadows; the system relies on layer colors (Night Sky, Ash Gray) and subtle inset shadows for depth. Do not introduce new typefaces; Red Hat Display, Red Hat Text, and Red Hat Mono are the only approved families. Refrain from using color in body text that does not meet the specified Snow Drift (#eeeef0) or Cloud Burst (#b5b2bc) for readability against dark backgrounds. Do not use generic square or fully rounded (pill) shapes; adhere to the 6px and 10px radii for a consistent, structured appearance.

More like this