Preview image. Unlock full-res
grid on soft sage
Rocc Naturals presents a minimal, product-focused aesthetic, blending soft neutrals with a signature muted green. Textures are subtle, with a visual grid framework providing structure against clean surfaces. The design feels grounded and approachable, relying on direct communication and sparse visual elements rather than elaborate decoration.
Use Canvas White (#ffffff) for all main page backgrounds and component surfaces unless a Dusty Sage filled button.
Prioritize Dusty Sage (#526e3e) for primary calls to action, ensuring it is the main brand accent.
Apply the Suisse font family for all text elements, utilizing appropriate weights (300, 500) and sizes (13px, 15px, 16px) for hierarchy.
Maintain a comfortable rhythm between sections using an 80px section gap.
Ensure all buttons have an 8px border radius, creating a consistent soft corner styling.
Employ 1px border radius for inputs to maintain a subtle, almost-sharp form that contrasts with the buttons.
Use Graphite Text (#636363) for primary body copy across the site to ensure readability against light backgrounds.
Do not introduce new saturated colors; adhere strictly to the established Dusty Sage for brand accents.
Avoid heavy shadows or gradients; the design thrives on flat surfaces and subtle distinctions.
Do not deviate from the specified spacing values of 10px for button padding and 15px for input padding.
Do not use letter spacing greater than 0.0120em or less than 0.0100em; these values are precisely set.
Do not use black for text; Graphite Text (#636363) and Muted Text (#6e6e6e) are the darkest sanctioned text colors.
Avoid complex component borders; stick to the 1px solid border pattern where needed, especially in inputs.
