Altason

Altason

Preview image. Unlock full-res

Black & White Gallery

Industrydesign
Palette
#ffffff
#000000
#b0b0b0

Atlason's visual system evokes a gallery of curated industrial design, prioritizing form and function through stark contrasts and precise typography. The aesthetic is black and white, with expansive negative space framing product visuals. Typography is compact and commanding, set in a sans-serif that conveys a sense of modernity and clarity. The overall impression is one of sophisticated minimalism, where every element is intentional and serves to highlight the featured works. Use Canvas White (#ffffff) as the primary background for all page content to maintain a clean, expansive feel. Employ Ink Black (#000000) for all primary text, headings, and significant borders to achieve strong contrast and visual impact. Utilize Haas Grotesk DS Pro, weight 500, for all display-level headings (48px and above) with compact line heights to create impactful typographic blocks. Apply Haas Grotesk TX Pro, weight 400 or 500, for all body text, links, and secondary information, distinguishing its usage from display headings. Maintain a clear visual hierarchy by placing product visuals framed by generous Canvas White (#ffffff) space and minimal text overlays. Use 8px as the default elementGap for vertical spacing between related content elements and 48px for sectionGap between distinct content blocks. Border product thumbnail cards with a 1px solid Ink Black (#000000) line to create distinct content modules. Avoid introducing saturated colors outside of embedded imagery; the interface should remain monochrome. Do not use subtle variations of black or white for background or text where Ink Black or Canvas White provide sufficient contrast. Refrain from using any form of elevation (shadows) on UI elements; the design emphasizes flat surfaces. Do not use rounded corners on any UI components; all elements should maintain sharp, defined edges. Avoid dense, text-heavy blocks. Break up information with imagery and ample whitespace. Do not use generic system fonts; stick to haas-grotesk-tx-pro and haas-grotesk-ds-pro or their designated substitutes. Do not create highly interactive or animated elements; the motion profile is functional and subtle (ease, durations 0.3-0.5s).

More like this