Switch between the rendered Visual preview and the Raw DESIGN.md.
Porto Rocha embodies a refined, minimalist aesthetic rooted in strategic clarity and elegant simplicity. The design system prioritizes content hierarchy through generous whitespace, precise typography, and restrained color use. This approach reflects a global design agency's commitment to craft and sophistication—every element serves a purpose, nothing is ornamental. The visual language is contemporary yet timeless, supporting complex narratives through clean, approachable interfaces that feel both professional and inviting.
Key Characteristics:
#007AFF): Primary interactive element, CTAs, links, and brand accent. Used sparingly for emphasis and navigation affordance.rgba(0, 0, 0, 0.04)): Hover states, link backgrounds, and light interactive surfaces. Creates tactile feedback without visual harshness.#000000): Primary text color, headers, body copy, and structural elements. Dominant throughout the system.#EFEFEF): Secondary neutral tone for subtle backgrounds and dividers.#E2E6E3): Tertiary neutral for muted backgrounds and secondary content zones.#F5F5F5): Light background surfaces and card fill states.#D9D6D5): Accent neutral for borders and fine details.#FFFFFF): Primary surface, cards, and content containers. Default background for readable content.Primary: SF Pro Text (system font stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif)
Secondary: SF Pro Text (same family, varied weights for hierarchy)
Fallback: System UI font stack ensures consistent rendering across platforms.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | SF Pro Text | 32px | 400 | 40px | -0.5px | Large statements, page titles |
| Heading / H2 | SF Pro Text | 24px | 400 | 30px | -0.3px | Section headers |
| Subheading / H3 | SF Pro Text | 18px | 400 | 22px | 0px | Tertiary headings |
| Body / Paragraph | SF Pro Text | 14px | 400 | 17.5px | 0px | Default text, main content |
| Small / Caption | SF Pro Text | 12px | 400 | 15px | 0px | Footnotes, metadata, secondary labels |
| Navigation Link | SF Pro Text | 14px | 400 | 17.5px | 0px | Inline navigation, action links |
| Button / CTA | SF Pro Text | 14px | 400 | 17.5px | 0px | Interactive elements |
Primary Button
SF Pro Text14px40017.5px12px 24px40px#007AFF#FFFFFF0px nonenone#0059D6 (darkened 20%)#0047A3 (darkened 35%)Secondary Button
SF Pro Text14px40017.5px12px 24px40pxrgba(0, 0, 0, 0.04)#0000000px nonenonergba(0, 0, 0, 0.08)rgba(0, 0, 0, 0.12)Ghost Button
SF Pro Text14px40017.5px10px 10px0pxrgba(0, 0, 0, 0)#0000000px nonenonergba(0, 0, 0, 0.04)rgba(0, 0, 0, 0.08)Standard Card (Minimal)
SF Pro Text14px40017.5px0px0pxrgba(0, 0, 0, 0)#0000000px nonenoneLight Surface Card
SF Pro Text14px40017.5px16px 16px10px#F5F5F5#0000000px nonenone#EFEFEFWhite Surface Card
SF Pro Text14px40017.5px16px 16px10px#FFFFFF#0000001px solid #E2E6E3noneText Input
SF Pro Text14px40017.5px10px 12px6px#F5F5F5#0000001px solid #E2E6E3none1px solid #007AFF, Background #FFFFFFrgba(0, 0, 0, 0.4)Form Label
SF Pro Text12px40015px0px#0000006pxNavigation Container
SF Pro Text14px40017.5px0px0pxrgba(0, 0, 0, 0)#0000000px nonenoneNavigation Link (Active)
SF Pro Text14px40017.5px0px 16px40pxrgba(0, 0, 0, 0.04)#0000000px nonenoneNavigation Link (Inactive)
SF Pro Text14px40017.5px10px 10px0pxrgba(0, 0, 0, 0)#0000000px nonenonergba(0, 0, 0, 0.04)Base Unit: 8px
Spacing Scale:
4px (micro spacing): Tight button padding, compact form inputs8px (xs): Icon spacing, tight component gaps16px (small): Card padding, section dividers, input padding20px (medium): Section margin, content spacing32px (large): Major section breaks, layout gutter48px (xl): Large gap between major content blocks64px (2xl): Page-level spacing, hero sectionsUsage Context:
16px for cards and containers20px for content blocks48px standard, 64px for emphasis8px from adjacent text or elementsMax Width: 1440px (content area)
Margin Sides: 20px minimum on mobile, 32px on tablet, 48px on desktop
Column Strategy: Flexible fluid grid. 12-column system recommended for complex layouts; single-column on mobile, 2-column on tablet, 3+ on desktop.
Section Patterns:
64px vertical gap)16px gapsWhitespace is a primary design element, not a void. Generous spacing around content creates visual hierarchy, improves readability, and communicates premium positioning. Every section breathes—minimum 48px vertical spacing between content blocks, with 20px–32px horizontal margins providing frame and context. Whitespace guides the eye and allows typography to lead.
0px (sharp): Navigation elements, minimal cards, structural borders6px (small): Form inputs, subtle contained elements10px (standard): Cards, light surface containers, contained sections40px (pill): Buttons, rounded navigation links, compact interactive elements| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Primary surfaces, cards, containers |
| Subtle | 0px 2px 4px rgba(0, 0, 0, 0.04) | Elevated cards, hover states |
| Elevated | 0px 4px 8px rgba(0, 0, 0, 0.08) | Modals, dropdowns, focus states |
| High | 0px 8px 16px rgba(0, 0, 0, 0.12) | Floating elements, overlays, prominence |
Shadow Philosophy:
Porto Rocha's design system avoids heavy shadows, maintaining the minimalist aesthetic. Shadows are minimal and serve functional purposes—they clarify depth only when necessary to distinguish interactive or modal elements from the background. Most surfaces remain flat (box-shadow: none), allowing layout and typography to create visual hierarchy. When shadows are employed, they use soft, diffuse opacity values that feel integrated rather than applied.
48px vertical gap).#000000 as primary text color for maximum contrast and legibility.#007AFF blue exclusively to primary CTAs, active states, and brand emphasis.SF Pro Text at 14px as the default body size for consistency.0px border radius and rgba(0, 0, 0, 0) background unless content requires container distinction.16px for card interiors, 20px for section margins.rgba(0, 0, 0, 0.04)) for hover states on interactive elements.14px line-height 17.5px for readability on mobile and desktop.#007AFF is the exclusive brand blue.border-radius) to primary navigation or structural elements.48px gaps without explicit reason; maintain visual cohesion.#000000 for body copy and headings.SF Pro Text font family; ensure fallback system fonts are maintained.| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single column, 20px margins, 14px type, full-width cards, stacked navigation |
| Tablet | 768px–1023px | 2-column grids, 32px margins, increased spacing, side navigation |
| Desktop | 1024px+ | 3+ columns, 48px margins, full layout, max-width 1440px |
| Large Desktop | 1440px+ | Max-width container centered, consistent side margins |
40px × 40px (buttons, links, nav items)8px40px height40px height and width44px × 44px for comfortable mobile interaction32px (desktop H1) to 24px (tablet) to 18px (mobile).64px (desktop) to 48px (tablet) to 32px (mobile).768px; drawer menu preferred.16px card padding on all breakpoints; adjust container margins instead.14px on all breakpoints for readability; never reduce below 12px for body copy.#007AFF)#000000)#FFFFFF)#F5F5F5)#E2E6E3)rgba(0, 0, 0, 0.04))#D9D6D5)Typography Foundation: All body text is SF Pro Text, 14px, weight 400, line-height 17.5px. Never deviate without explicit reason; scale only by font size, not weight.
Color Hierarchy: #000000 dominates (text, structure); #FFFFFF and #F5F5F5 are backgrounds; #007AFF is the exclusive brand accent for CTAs and primary interactions only.
Spacing Consistency: Default vertical section gap is 48px (desktop), 32px (tablet), 20px (mobile). Horizontal margins follow: 48px (desktop), 32px (tablet), 20px (mobile).
Component Simplicity: Prefer minimal components—0px border-radius, rgba(0, 0, 0, 0) background, no shadows—unless content or usability requires a contained surface. Card padding is always 16px when backgrounds are applied.
Interactive States: Hover states use rgba(0, 0, 0, 0.04) background overlay. Buttons apply a 20% darker shade of their base color on hover. Links remain text-only with subtle background only on touch/hover.
Layout Max-Width: Constrain content to 1440px max-width; center on desktop, full-width below tablet. Maintain responsive margins above.
Whitespace Philosophy: Whitespace is primary visual tool. Between major content sections: 64px (desktop), 48px (tablet), 32px (mobile). Avoid cramped layouts; clarity over density.
Border Radius Strategy: Use 0px for navigation, minimal cards, structural elements. Use 10px for contained cards and light surfaces. Use 40px (pill shape) exclusively for buttons and compact interactive links.
Shadows & Depth: Avoid shadows by default. If needed: subtle (0px 2px 4px rgba(0, 0, 0, 0.04)) for elevated cards, elevated (0px 4px 8px rgba(0, 0, 0, 0.08)) for modals/dropdowns. Never use heavy shadows.
Mobile-First Responsive: Start design at 320px. Single column, 20px margins, 14px type. Scale up: tablet adds 2-column grids and 32px margins; desktop unlocks 3+ columns and 48px margins. Touch targets always 40px minimum height.