Preview image. Unlock full-res
Crisp Editorial Blocks
Clase bcn employs a stark, editorial aesthetic centered on strong typography and a modular layout. It operates primarily in monochrome with occasional, deliberate use of vivid, flat color blocks as section backgrounds, creating a distinct visual break and impact. The design emphasizes clear content presentation through large, confident text and a comfortable spacing rhythm, allowing the eye to focus on the work examples the agency presents without distraction. Interactive elements are subtly integrated, maintaining the clean, minimalist feel.
Always use 'SuisseIntl-Regular' for all text elements to maintain typographic consistency.
Utilize 0px border-radius universally to enforce a sharp, modern aesthetic.
Apply Ink Black (#000000) for primary text and Canvas White (#ffffff) for backgrounds to ensure high contrast.
Use Ash Gray (#939393) for secondary navigation or less prominent text to create subtle hierarchy.
Employ Vivid Succulent (#43d491), Blush Sand (#efccbe), Jet Black (#0a0000), or Muted Sage (#adada0) as solid background blocks for feature sections to create visual impact and delineate content areas. Do not use gradients.
Maintain a comfortable rhythm with elementGap at 20px for internal component spacing and sectionGap at 100px between large content blocks.
Ensure all interactive links, particularly 'See the case' links, are rendered in Ink Black or Canvas White depending on the background, with a distinct right arrow graphic.
Do not use rounded corners; the system is defined by its hard edges.
Avoid any drop shadows or elevation effects; the design relies on flat, layered blocks of color and content.
Do not introduce new typefaces; 'SuisseIntl-Regular' is the sole typographic voice.
Refrain from using gradients; all color applications should be flat and solid.
Do not vary from the established spacing relationships; 20px for elements and 100px for sections are fixed.
Avoid decorative imagery that competes with the editorial typography; visuals are primarily large, full-bleed backgrounds for project cards.
Never use generic blue for links; links should be Ink Black or Canvas White to match the surrounding text.
