Fuser

Fuser

Preview image. Unlock full-res

Frosted glass network — a cool, translucent interface connecting modular, vivid ideas.

Industryai
Palette
#0a0a0a
#171717
#432dd7
#312c85
#00c950
#262626
#404040
#525252
#737373
#828282
#b7b7b7
#d4d4d4

Fuser establishes a crisp, expansive canvas for AI workflow orchestration. Its visual system prioritizes clarity and a sense of depth, achieved through a subtle, cool-toned gray scale as the primary surface treatment, punctuated by vivid violets and vibrant greens for interactive elements. Imagery is encased in soft-cornered cards that float above a sparse, grid-like background, suggesting modularity and precision. Typography combines a sharp, modern sans-serif with a distinctive display serif for headlines, creating an aesthetic that is both functional and subtly artistic. Always use 'Canvas' (#f5f5f5) as the primary page background to maintain an expansive, light feel. Apply 'Deep Space Violet' (#432dd7) only to interactive icons and borders to signal interactivity and brand presence clearly. Ensure all cards, images, and interactive elements use a border-radius of at least 6px, and up to 24px for larger content cards, to maintain the soft, approachable aesthetic. Utilize Marund for all display-level typography (size 48px and above) with its specific letter-spacing and stylistic sets to convey brand distinctiveness. Create visual depth using 'Fog' (#e5e5e5) for card backgrounds, elevating them above the main page 'Canvas' (#f5f5f5). Employ the rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px shadow for cards requiring subtle elevation and interaction emphasis. Implement consistent 16px element gaps for vertical stacking of related components and 12px padding for internal card content. Avoid using highly saturated colors for large background areas; they should be reserved for small, functional accents like 'Deep Space Violet' (#432dd7) or 'Sage Bloom' (#00c950). Do not use Marund for body text; reserve it entirely for headlines and display text to preserve its unique impact and legibility at smaller sizes. Never introduce hard, 0px border-radii for interactive elements or containers; maintain the consistent soft cornering established by 6px minimal radius. Refrain from using strong, dark shadows on navigation or primary action elements; elevation should be subtle and primarily for content grouping. Do not vary line-height significantly from the established semantic type scale; maintaining the rhythm of 1.2 for headings and 1.5 for body text ensures a cohesive reading experience. Avoid arbitrary custom letter-spacing; adhere to the defined letterSpacing values for Inter and Marund to control visual density. Do not use dark backgrounds for primary sections unless specifically integrating a full-bleed visual or hero where a dark gradient is explicitly defined.

More like this