System Blue
#007affBlue wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
PORTO ROCHA
portorocha.com
Website preview
The design language
Porto Rocha is an editorial design system dressed in a gallery wall aesthetic: near-total monochrome, surgical use of one Apple-blue accent for links, and typography that behaves like a printed monograph. The interface is structurally two-column — a fixed left rail of agency metadata and project index, and a wide content field of image-led cards arranged in a three-column grid. Surfaces are flat white with hairline gray borders; elevation is communicated through stacking and whitespace, never shadows. The single blue accent (#007aff) is reserved for interactive text and active states, creating a restrained system where color only appears when something is actionable or linked. The design reads as anti-decorative: no gradients, no rounded buttons, no illustrations — content and photography carry every screen.
Color palette
brand
neutral
Ink Black
#000000Body text, headings, nav borders, card borders, button borders
Ash Gray
#808080Secondary text, card borders, nav dividers, muted metadata
Paper White
#ffffffPage background, card surfaces, sidebar background
Typography
Type scale
heading
23px · 400 · 1.17 · 0.46px trackingThe quick brown fox jumps
heading-sm
18px · 1.35The quick brown fox jumps
body
16px · 1.4The quick brown fox jumps
body-sm
14px · 400 · 1.25The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
SF Pro Display
- Weights
- 400
- Sizes
- 23px and up
- Line height
- 1.17
- Letter spacing
- 0.02em
- Fallback
- Inter, Helvetica Neue, system-ui
Display and heading weight — used for article titles, section headers, and the 'PORTO ROCHA' wordmark. The unusual +0.02em positive letter-spacing on display type (most sites use negative tracking on large sizes) creates a slightly more open, editorial cadence rather than a tight display feel.
Additional typeface
SF Pro Text
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.25
- Fallback
- Inter, -apple-system, BlinkMacSystemFont, Helvetica Neue
Body text, nav labels, button text, captions, project descriptions, dates. Single weight (400) across the entire system — no bold variants for emphasis; hierarchy is built through size and color alone, keeping the typographic voice flat and consistent.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Section gap
- 24-32px
- Card padding
- 16px
- Element gap
- 8px
Border radius
tags
9999pxcards
8pxinputs
8pxbuttons
8pxSpacing scale
3px8px10px12px16px20pxGuidelines
Do
- Use #007aff exclusively for interactive text and active states — never as a decorative fill or background
- Apply 8px border-radius to all cards, buttons, and nav elements for a consistent subtle softness
- Set 16px padding on all content cards with 1px Ash Gray (#808080) top borders for separation
- Use SF Pro Text 14px weight 400 as the single body style — build hierarchy through size, not weight
- Reserve SF Pro Display 23px with +0.02em letter-spacing for headlines and the wordmark
- Let the two-column layout (sidebar + content) define the page structure — 25/75 split with no overlap
- Use hairline borders (1px) and whitespace for card separation instead of shadows or background fills
Don’t
- Do not introduce additional accent colors — the system is monochrome plus one blue
- Do not use bold or semibold weights — the system runs on a single 400 weight
- Do not apply shadows, glows, or blur effects — elevation is communicated by stacking alone
- Do not use negative letter-spacing on display text — the +0.02em tracking is intentional and signature
- Do not round buttons to pill shapes (38px) as a default — keep the 8px radius consistent with cards
- Do not fill cards with gray or colored backgrounds — all surfaces are pure white
- Do not add decorative elements, icons, or illustrations to the UI chrome — content photography carries the visual weight
Components
Project Index Card
Sidebar list item showing a project name and brand iconWhite card with 8px radius, 16px padding, 1px Ash Gray bottom border, 40px circular brand icon on left, project name in SF Pro Text 14px weight 400 Ink Black on right, short gray description below in 12-13px.
Sidebar Info Block
Static agency metadata panelFixed left column, white background, no border, contains agency wordmark at top, current date/time in SF Pro Text 14px, 'About us' label in uppercase tracking, and project list. No background fill — sits directly on the page canvas.
Hero Image Panel
Full-width dominant visual at the top of the content fieldLarge photograph or composite, contained within the content column, no border, no radius, flush to the grid. Images bleed to the column edges without padding to maximize visual weight.
Article Card
Content card in the three-column grid below the heroWhite surface, 8px border-radius, 16px padding, 1px Ash Gray border on top. Date label in SF Pro Text 14px weight 400 Ink Black at top. Title in SF Pro Display 23px weight 400 with 0.02em tracking. Body excerpt in SF Pro Text 14px Ash Gray. No shadow, no fill — relies on hairline border to separate from the canvas.
Date Label
Timestamp displayed above article titlesSF Pro Text 14px weight 400 Ink Black, left-aligned, no separator or bullet. The date is its own line, creating a clear typographic step before the headline.
Brand Mark Icon
Circular logo thumbnail representing a project in the sidebar40-48px diameter, fully circular, contains the project's brand symbol or monogram. No border, sits directly on white. The circle is a hard mask — no rounding artifacts.
Toggle Switch
'Show all projects' control at the top of the sidebariOS-style toggle: 51x31px track, 27px circular thumb, white thumb with subtle shadow, Ash Gray track in off state, System Blue track in on state. Sits inline with its label text.
Wordmark
Agency name display in the sidebar header'PORTO ROCHA' in SF Pro Display 23px weight 400 Ink Black with 0.02em tracking, all caps, centered or left-aligned. Functions as the only typographic logo element.
Text Link
Inline interactive text for navigation and referencesSF Pro Text 14px weight 400 System Blue (#007aff), no underline by default, underline on hover. The System Blue is the sole chromatic element in an otherwise monochrome interface.
Nav Row
Sidebar project listing with dividersStacked rows separated by 1px Ash Gray horizontal borders, 16px vertical padding per row, 8px gap between icon and text. No background fill per row — white canvas shows through.
Surfaces & elevation
Level 1
Canvas
#ffffffFull page background across sidebar and content area
Level 2
Card Surface
#ffffffArticle cards, project cards, and sidebar info blocks — same hex as canvas, separated by 1px borders
The design system intentionally avoids shadows entirely. Surface separation is achieved exclusively through 1px hairline borders in Ash Gray (#808080) and generous whitespace. This flat, border-driven approach gives the interface a printed/monograph quality — every element feels laid out on paper rather than floating in digital space.
Layout & imagery
Layout
The page uses a persistent two-column layout: a fixed left sidebar (~25% width) and a fluid content field (~75%). The sidebar contains the agency wordmark, live date/time, about copy, and a scrollable project index with circular brand icons. The content field is a three-column card grid for articles and a full-column-width hero image at the top. The sidebar has a 1px Ash Gray right border separating it from the content. There is no global max-width constraint — the layout fills the viewport. Vertical rhythm is 24-32px between card rows, with 16px padding inside each card. Navigation is sidebar-based, not top-bar. The grid is rigid: sidebar left, three equal columns right, no asymmetric or overlapping compositions.
Imagery
Photography is the primary visual content, not the UI. Hero images are large, full-column-width composites of printed brand collateral, book spreads, and packaging systems — these are project showcases, not lifestyle photography. Article thumbnails in the grid show architectural photography, event documentation, and product/brand artifacts. Images are presented with no masking, no rounded corners, and no overlay treatments; they sit flush in their grid cells. The image style itself is editorial: natural light, documentary tone, printed-material focus. No illustrations, no 3D renders, no abstract graphics appear in the interface itself — all visual richness comes from the project photography.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 (Ink Black) - background: #ffffff (Paper White) - border: #808080 (Ash Gray) for hairlines, #000000 for emphasis borders - accent: #007aff (System Blue) — links and active states only - primary action: no distinct CTA color **3-5 Example Component Prompts** 1. *Article Card*: White surface, 8px border-radius, 16px padding, 1px #808080 top border. Date label at top in SF Pro Text 14px #000000. Title in SF Pro Display 23px #000000, letter-spacing 0.02em. Body excerpt in SF Pro Text 14px #808080. 2. *Sidebar Project Row*: 16px vertical padding, 1px #808080 bottom border, 40px circular brand icon on left, project name in SF Pro Text 14px #000000, short description in SF Pro Text 13px #808080 below. 3. *Hero Image*: Full content-column width, no border, no radius, flush to grid edges. No overlay, no caption inside the image frame. 4. *Inline Text Link*: SF Pro Text 14px #007aff, no underline at rest, underline on hover. Sits within body text copy. 5. *Wordmark*: 'PORTO ROCHA' in SF Pro Display 23px #000000, +0.02em letter-spacing, all caps, weight 400.
Similar brands
Wieden+ Kennedy
Agency portfolio sites with large editorial photography, sidebar project index, and minimal typographic chrome
Pentagram
Design agency sites that function as monographs — monochrome palette, project-led grid, typographic restraint
Instrument
Minimal agency sites with hairline-bordered cards, flat surfaces, and content photography as the sole visual element
Ramotion
Agency/brand sites using single-weight typography, no shadows, and border-based surface separation
Manual (manualcreative.com)
Design studio portfolios with two-column sidebar+grid layouts and anti-decorative visual systems
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
