pluto.app

pluto.app

Preview image. Unlock full-res

Bright canvas, dark contrast

Industryother
Palette
#111111
#ffffff
#d4dbe0
#000000
#767676
#444444
#00a4a6

GoDaddy's Pluto.app page uses a direct, functional interface language on a bright canvas. Dark surfaces and robust typography provide clarity, anchored by a single vibrant teal accent for key interactive elements. Content is structured within clear, card-like containers, employing subtle elevation to distinguish interactive panels without heavy ornamentation, prioritizing straightforward information presentation. Use Midnight Ink (#111111) for primary text and dark backgrounds and Canvas White (#ffffff) for light backgrounds and main surfaces, adhering to robust contrast. Apply Action Teal (#00a4a6) exclusively for primary interactive elements, critical links, and distinct accents to guide user attention. Standardize on 6px border-radius for cards and buttons to provide a consistent soft-edged feel. Maintain a clear visual hierarchy using gdsherpa at various weights and sizes, reserving larger, bolder text for key headlines. Structure content with a default element gap of 8px and card padding of 16px for comfortable density and readability. Employ the subtle card shadow rgba(0, 0, 0, 0.1) 0px 5px 10px 0px for interactive panels to provide a soft lift without heavy elevation. Do not introduce new saturated accent colors beyond Action Teal (#00a4a6) to maintain focus and brand consistency. Avoid strong, multi-layered shadows; elevation should be subtle, not a dominant visual feature. Do not use highly decorative or script fonts; stick to the gdsherpa family for all text to preserve the clean, direct tone. Refrain from varying border-radius values excessively; maintain 6px for most interactive elements and cards for visual harmony. Do not center-align large blocks of body text; left-alignment is preferred for readability within content sections. Avoid full-bleed, uncontained element layouts outside of hero sections; use max-width containers and consistent spacing for content.

More like this