
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.
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.









