PORTO ROCHA

PORTO ROCHA's visual system evokes a meticulous, editorial aesthetic, balancing dense information display with distinct graphic elements. Typography drives hierarchy, utilizing a subtle letter-spacing for large text and monochromatic backgrounds that let content and occasional vibrant imagery take center stage. Components are understated, opting for soft corners and ghosted forms, providing a sophisticated framework without visual clutter. The overall impression is one of grounded, professional clarity with precise, almost architectural spacing. Use 'Canvas White' (#ffffff) as the default background for all page sections and primary content areas. Apply 'Midnight Ink' (#000000) for all primary text, main headings, and significant borders to maintain sharp contrast. Employ sf-pro-text, weight 400, with a size of 14px and lineHeight 1.25 for all body copy and standard interface labels. Utilize sf-pro-display, weight 400, with a size of 23px, lineHeight 1.17, and letter-spacing 0.0200em for prominent headlines. Implement an 8px radius ('default') for all cards, buttons, and navigation elements. Separate content blocks with a consistent 20px marginTop between cards to ensure comfortable density. Utilize 'Storm Gray' (#808080) for secondary details, helper text, and subtle visual distinctions. Avoid using multiple chromatic colors; 'Accent Blue' (#007aff) is reserved for very specific, isolated highlights. Do not introduce heavy shadows or thick borders; design relies on subtle elevation and clean separation. Do not deviate from the specified font families; custom typefaces are integral to the brand's editorial feel. Avoid arbitrary padding values; adhere to the 8px base unit and specified component paddings (e.g., 16px horizontal for buttons). Do not use dark backgrounds for primary content sections; the system is designed around a light theme. Avoid making text small or condensed; the type system prioritizes readability with moderate sizes and generous line heights.