Schema

Schema

Preview image. Unlock full-res

Abstract art playground

Industrydesign
Palette
#000000
#ffffff
#e2e2e2
#0f0f0f
#24cb71
#c7f8fb

Schema by Figma employs a bold, graphic language, reminiscent of abstract art on an interactive canvas. Its foundation is a stark black and white palette, punctuated by large, flat blocks of vivid and muted chromatic colors that act as dividers and background accents. Typography is primarily functional, featuring custom sans-serifs that maintain clarity even at large display sizes, often against contrasting backgrounds. The layout is structured yet playfully asymmetric, utilizing full-width sections that transition between solid colors and complex, overlapping geometric patterns, often making strong use of negative space. Prioritize #000000 and #ffffff as primary text and background colors respectively, establishing a high-contrast foundation. Use Figma Sans Display for all major headings and prominent text elements, leveraging its varied sizes and tight line heights for impact. Apply -0.02em letter-spacing to Figma Sans Display at larger sizes (56px and up) to maintain visual density. Utilize Jade Accent (#24cb71) and Aqua Wash (#c7f8fb) as large, flat background color blocks to define sections and provide strong visual breaks. Maintain a clear element gap of 24px between distinct interface elements for spaciousness. Incorporate 1px solid #000000 borders for subtle delineation of interactive states or containers where a delicate definition is needed. Avoid using soft shadows or gradients for elevation; surfaces should primarily be flat and distinct through color blocks or sharp outlines. Do not introduce additional sans-serif fonts; restrict typography to the specified Figma Sans Text, Figma Sans Display, and Source Sans Pro for consistency. Refrain from small, intricate patterns; favor large, bold geometric shapes and solid color fields for graphical elements. Do not introduce more than two distinct chromatic accent colors per page to maintain the graphic rigor. Avoid standard button styles with fills and explicit borders for primary actions; use ghost button treatments or text links within defined areas. Do not use smaller spacing units (e.g., 4px, 8px) for large section separation; reserve 60px for section gaps and 24px for component-level spacing.

More like this