Marco

Marco

Preview image. Unlock full-res

organized content on frosted glass

Industrydesign
Palette
#ffffff
#f7f7f9
#f2f2f2
#eff0ff
#fff9ed
#333333
#707070
#949494
#cccccf
#1685c7
#6366f1
#ff4d79

Macro.fyi presents a functional white-canvas aesthetic, emphasizing content organization within distinct, softly shadowed containers. The system balances readability with a dense information display, utilizing a largely achromatic palette punctuated by a sole vivid violet for actionable elements and subtle gradient accents for dynamic cards. Use Text Primary (#333333) for all main content and headings. Apply Card Frost (#f7f7f9) as the default background for content cards, reserving Canvas White (#ffffff) for the page background. Utilize 32px border-radius for main content cards and larger organizational blocks. Employ Outline Blue (#1685c7) for borders of interactive elements when a filled background is not desired. Ensure generous 32px padding within all Default Content Card elements. Differentiate interactive elements using Interactive Violet (#6366f1) for borders on focus or active states. Maintain a clear visual hierarchy by limiting prominent box shadows to Layered Detail Card elements, and keep them subtle. Do not use highly saturated colors for large background areas; maintain the overall achromatic canvas. Avoid using multiple distinct colors for primary call-to-action buttons; the system emphasizes outlined chromatic actions. Do not use generic border-radii; adhere to the specified 32px for cards, 230px for pill buttons, and 8px for inputs. Avoid deep, dark shadows; elevation is achieved through subtle, light box-shadows or subtle colored tints. Do not use large, decorative imagery; product screenshots and UI examples should be contained within cards. Refrain from drastically altering default typography letter-spacing for body text; rely on the defined values for each font family. Do not introduce new border styles; primarily use 1-4px solid borders with neutral or accent colors.

More like this