Dock

Dock, saas, clean

Preview image. Unlock full-res

Digital workbench illuminated by electric blue. The experience is like working in a crisp, highly functional digital environment with precise tools.

Industrysaas, dev-tools
Palette
#121722
#ffffff
#faf9f7
#efefef
#a5a5a5
#0068f9
#024bb1
#f4f0ff
#046645
#d5ecff

This design system presents as a 'digital workbench' – a bright, well-organized interface designed for productivity. The prominent use of a vibrant, electric blue against a near-white background creates an energetic yet focused atmosphere. Subtle gray tints and soft shadows provide depth and separation, akin to tools neatly arranged on a clean workspace. The typography, featuring a custom sans-serif with nuanced letter-spacing, emphasizes clarity and directness in communication. Prioritize Electric Blue (#0068f9) for all interactive Call-to-Action elements. Use Roobert font with specific letter-spacing for all text elements to maintain brand voice. Apply 48px border-radius to all primary and secondary buttons for a consistent pill shape. Utilize Cloud White (#ffffff) as the dominant page background color to ensure a bright, expansive feel. Employ Horizon Gray (#faf9f7) for subtle background shifts to differentiate content blocks without harsh lines. Use a specific padding of at least 24px around card content for comfortable breathing room. Introduce Inkwell (#121722) as the primary text color for maximum contrast and readability on light backgrounds. Avoid using highly saturated colors other than Electric Blue (#0068f9) and Mint Green (#046645) as main accents. Do not use generic square buttons; all buttons should conform to a 48px or 100px radius. Avoid heavy drop shadows; stick to subtle, single-layer box shadows like rgba(0, 0, 0, 0.07) 0px 1px 1px 0px for depth. Do not vary font families; stick exclusively to Roobert for all typography. Refrain from tight spacing between content elements; maintain 8px-16px element gaps and 80px-120px section gaps. Do not use highly textured or photographic backgrounds; keep surfaces clean and predominantly solid colors or subtle gradients. Avoid mixing transparent and opaque button styles within the same hierarchical level of action.

More like this