
Preview image. Unlock full-res
organized content on frosted glass
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.









