Lusion

Lusion, high-contrast, clean

Preview image. Unlock full-res

Computational Laboratory Blueprint — high-contrast text on bright surfaces, accented by vivid blue and lime green.

Industryagency, agency
Palette
#000000
#ffffff
#f0f1fa
#2b2e3a
#e4e6ef
#121416
#1a2ffb
#c1ff00

This design system conjures a computational laboratory aesthetic, balancing stark functionality with precise, vivid accents. The dominant bright off-white surfaces provide a clean canvas for sharp black typography, creating a high-contrast, information-focused layout. Carefully placed vivid blue and lime green appear in interactive elements, like focused indicators or calls to action, injecting focused energy against the predominantly neutral backdrop. Subtle elevation and generous border radii on active components soften the underlying hard-edged forms, implying a blend of digital precision and user-friendly interaction. Prioritize 'Absolute Black' (#000000) for all primary body text, headings, and critical UI labels. Use 'Canvas White' (#ffffff) as the default background for main content areas and cards, creating a bright, spacious canvas. Apply 'Deep Space Blue' (#1a2ffb) as the primary accent color, specifically for interactive elements, links, and focused states. Ensure all buttons use an 87.5px border-radius unless specified, maintaining a soft, pill-like form. Utilize Aeonik at weight: 500 for headings and important UI labels, combined with a negative letter-spacing for a modern, compact feel. Enforce a base padding unit of 16px around interactive elements like buttons and 25px for inputs to ensure ample breathing room. Introduce 'Whisper Off-White' (#f0f1fa) specifically for less prominent interactive elements or background differentiation in forms. Avoid using multiple accent colors in close proximity; 'Deep Space Blue' and 'Electric Lime' should be used sparingly and distinctly. Do not deviate from the specified negative letter-spacing for Aeonik, as it is a core characteristic of the typographic identity. Do not use sharp corners for interactive elements; maintain the consistent application of generous border radii for buttons and inputs. Avoid generic or default shadow values; use the specified shadow rgba(0, 0, 0, 0.04) 0px 6px 10px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px for subtle elevation. Do not introduce highly saturated primary colors beyond 'Deep Space Blue' and 'Electric Lime' without specific justification. Avoid dense information blocks; maintain generous inter-element and inter-section spacing, aligning with the spacious density.

More like this