CORE PHILOSOPHY

⚙

FUNCTION OVER BEAUTY

Directness and honesty over aesthetics. Every element serves a clear purpose. No decoration for decoration's sake.

◼

HONEST MATERIALS

Raw concrete, exposed steel, unfinished surfaces. Materials appear as they are, without concealment or embellishment.

▣

CONFRONTATIONAL DESIGN

Intentionally challenging interfaces that prioritize clarity and impact over comfort and conventional beauty.

DESIGN CHARACTERISTICS

01

MONOLITHIC BLOCKS

Massive geometric forms that reference concrete construction. Heavy rectangles and imposing squares create visual weight and architectural presence.

02

HIGH CONTRAST TYPOGRAPHY

Bold, industrial sans-serifs with dramatic scale differences. Headlines 3-4x larger than body text for immediate impact and clear hierarchy.

03

INSTITUTIONAL COLORS

Concrete grays, charcoal blacks, pure whites. Accent colors are bold and unmodulated: industrial reds and safety oranges used sparingly.

BRUTALIST COMPONENTS

UNCOMPROMISING BUTTON

CONCRETE BLOCK

RAW INTERFACE

Function over form. No decoration.

INSTITUTIONAL PALETTE

BRUTALIST PRINCIPLES

HISTORICAL CONTEXT

  • Post-war reconstruction (1950s)
  • Socialist housing ideals
  • Le Corbusier's Unité d'Habitation
  • Democratic accessibility
  • Rejection of ornamentation
  • Utilitarian honesty

MATERIAL HONESTY

  • Béton brut (raw concrete)
  • Board-marked surfaces
  • Exposed aggregate
  • Unfinished edges
  • Weathered textures
  • Structural visibility

DIGITAL ADAPTATION

  • Neo-Brutalism movement (2010s)
  • Counter to flat design
  • Anti-corporate aesthetics
  • Challenging user interfaces
  • Expressive functionality
  • Honest web technologies

USE CASES

  • Tech company portfolios
  • Cultural institutions
  • Activist organizations
  • Design studios
  • Architecture firms
  • Industrial companies

IMPLEMENTATION GUIDE

ARCHITECTURAL REFERENCES

  • Barbican Estate (London)
  • Boston City Hall
  • Trellick Tower
  • Habitat 67 (Montreal)

CSS TECHNIQUES

  • Box-shadow for hard edges
  • Transform for mechanical motion
  • CSS Grid for modular layouts
  • Custom properties for consistency

TYPOGRAPHY

  • Inter (geometric sans-serif)
  • Work Sans (industrial feel)
  • Oswald (condensed impact)
  • System fonts for performance

ACCESSIBILITY

  • High contrast ratios (4.5:1+)
  • Clear focus indicators
  • Semantic HTML structure
  • Motion preference support