Filling Pieces

Filling Pieces establishes a confident, minimalist e-commerce aesthetic with a strong emphasis on product presentation. The system uses a limited, high-contrast achromatic palette, allowing product imagery to carry the visual weight. Typography is compact and precise, maintaining overall lightness. Components are structured and refined, relying on subtle borders and uniform radii rather than heavy elevation, contributing to an uncluttered and direct user experience. Prioritize product imagery: UI elements should be achromatic to allow product visuals to dominate the canvas. Maintain high contrast: Use Ink Black (#000000) for all primary text and calls to action against Pure White (#ffffff) or Canvas Ice (#e5e7eb) backgrounds. Apply consistent border-radius: All interactive elements like buttons and inputs, and structural components like cards and modals, must use an 8px border-radius. Utilize tight letter-spacing: Implement a consistent -0.04em letter-spacing for all Favorit text to maintain a compact, precise typographic presence. Employ the 4px base unit: Ensure all spacing (padding, margins, gaps) is a multiple of 4px to maintain rhythm and consistency. Use distinct surface levels: Differentiate main page content (Canvas Ice #e5e7eb) from component backgrounds (Pure White #ffffff) and secondary sections (Fog Gray #efefef) to create visual hierarchy. Favor ghosting for secondary actions: Outline buttons with Ink Black when a less assertive action is required, reserving solid Ink Black fills for primary conversion points. Avoid color in functional UI: Refrain from introducing vibrant or chromatic colors into standard interface elements like buttons, inputs, or navigation, save for specific branded accents if introduced. Do not use generic typography: Stick to the Favorit typeface with its specified weights and letter-spacing for all text to preserve brand identity. Do not vary border-radius: Deviations from the 8px radius will clash with the established component styling and soften the overall sharp aesthetic. Do not introduce heavy shadows or elevation: The design relies on flat surfaces and subtle borders; prominent shadows conflict with this minimalist approach. Avoid arbitrary text sizes or line heights: Adhere strictly to the defined type scale to maintain typographic rhythm and readability. Do not use spacing values outside the 4px grid: Inconsistent spacing will create visual disorder and disrupt the clean layout. Do not add decorative gradients to UI elements: The system emphasizes flat, high-contrast surfaces.