IFTTT

IFTTT's design system is a high-contrast, functionally colorful environment where dark surfaces meet crisp white text and vivid branded modules. The aesthetic emphasizes a clear, almost utilitarian presentation of information and service connections. Visual hierarchy is achieved through a mix of typography and distinct color blocks rather than extensive use of elevation or soft gradients. Components are well-defined, often with generous padding and prominent rounded corners, facilitating clear interaction in a dense ecosystem. Prioritize high contrast between text and background, typically #ffffff on #222222 or #333333, and vice-versa, for all primary content. Use Avenir Next across all text, carefully selecting from its weights to establish hierarchy and tone, with consistent '0.0200em' letter-spacing. Apply 100px border-radius for primary action buttons to achieve a distinct 'pill' shape, indicating interactive elements. Utilize the diverse palette of saturated brand colors (#0099ff, #2cbe60, #2c6efc, etc.) as solid background fills for service cards and functional blocks, promoting immediate recognition. Maintain an 8px border-radius for all cards, input fields, and category filter buttons to ensure a consistent, approachable geometry for non-primary interactive elements. Employ a base unit of 8px for all spacing decisions, including padding, margins, and gaps, for harmonious scaling and alignment. Emphasize the dark theme by setting section backgrounds to Midnight Ink (#222222) or Deep Graphite (#333333), using Canvas White (#ffffff) for foreground elements and text. Avoid using soft shadows or subtle gradients for elevation; rely instead on solid color blocks and sharp contrast for visual layering. Do not deviate from Avenir Next as the primary typeface; introducing other fonts will break the established typographic rhythm. Refrain from using achromatic colors for brand accents; all visual branding should leverage the vibrant, saturated palette. Do not introduce complex border styles; all borders should be simple solid lines, usually in neutral tones like rgba(255, 255, 255, 0.3) or #eeeeee. Avoid excessive whitespace; the design system leans towards a comfortable density, ensuring elements are clearly delineated but not overly spaced. Do not use subtle tonal variations for states (e.g., hover, active); instead, use distinct color shifts or outline changes from the defined color palette. Avoid blurring or masking imagery; visuals should typically be presented within clear, defined card or section boundaries.