Identity brief — 400.wtf (civic redesign)

Source material for the redesign, kept verbatim. Drafted with ChatGPT; the moodboards in references/ are art direction only — never reproduce them literally. The executable interpretation lives in ../design-system/plan.md.

Design System Identity — 400.wtf

Core concept

A contemporary digital design system inspired by Brazilian public infrastructure: brutalist architecture, metro signage, public schools, civic buildings, urban vegetation, and functional wayfinding systems.

The aesthetic combines the monumental scale of Brazilian modernist and brutalist architecture with the clarity of Swiss graphic design, the precision of transit signage, and the quiet warmth of nature reclaiming concrete.

Keywords: Brazilian brutalism, civic modernism, architectural monumentalism, urban greenery, public infrastructure, Swiss grid, wayfinding, negative space, functional typography, material honesty.

The result should feel like a digital interface designed by an architect who understands public transportation systems — imposing but accessible, utilitarian but beautiful, rigorous but alive.

1. Visual philosophy

The identity revolves around five principles:

Monumentality: Oversized typography, massive architectural imagery, strong geometric forms, and confident compositions. Elements should feel substantial and grounded.
Breathing room: Generous negative space contrasts with dense, structured information. Empty space is an intentional design element, not wasted space.
Functional clarity: Every element should feel like it serves a purpose. Navigation, labels, arrows, numbers, and icons should communicate with the precision of public wayfinding.
Organic contrast: Vegetation, natural light, reflections, and irregular organic forms soften the rigidity of concrete and geometry.
Material honesty: Surfaces should feel tangible. Concrete is concrete, typography is typography, and interface elements should not pretend to be physical objects.

The experience should evoke standing inside a monumental public building: feeling small in relation to the architecture, yet welcomed and oriented by its thoughtful design.

2. Color palette

Use a restrained, predominantly neutral palette with selective, high-contrast accent colors inspired by Brazilian transit signage.

Foundation

Concrete: #B8B7B0 — primary architectural neutral.
Warm off-white: #F2F0E9 — primary light background.
Graphite: #252724 — primary dark surface.
Near-black: #151715 — strong contrast and typography.
Muted gray: #777973 — secondary text and subdued elements.

Organic

Deep botanical green: #24563C — vegetation and nature-oriented accents.
Moss: #777E60 — subdued organic detail.

Wayfinding accents

Signal yellow: #F2BE32 — highlights, warnings, active states, and navigation markers.
Transit blue: #1559A6 — primary interactive elements and informational signage.
Signal red: #C93632 — errors and occasional high-impact accents.

Neutrals should dominate. Green should feel organic rather than decorative. Yellow, blue, and red should function like a transit system’s visual vocabulary, not a generic startup palette.

Maintain accessible contrast and define semantic color tokens separately from decorative colors.

3. Typography

Use a contemporary grotesk sans-serif for display typography and interface text, paired with a restrained monospaced typeface for metadata and technical details.

Suggested families:

Primary: Inter, Geist Sans, or IBM Plex Sans.
Monospaced: IBM Plex Mono or Geist Mono.

Display typography

Large, bold, uppercase headlines.
Tight line height and carefully controlled letter spacing.
Strong typographic hierarchy with occasional dramatic scale differences.
Headlines may occupy substantial portions of the viewport.

Functional typography

Compact uppercase section labels.
Monospaced project numbers, coordinates, timestamps, metadata, and technical annotations.
Highly legible body text with comfortable line height.

Typography should be architectural: confident, direct, and structurally important. Avoid overly expressive typefaces, gratuitous italics, and excessive font variation.

4. Layout and composition

Build on a rigorous modular grid inspired by architectural plans, Swiss editorial design, and transit information systems.

Use generous outer margins and deliberate whitespace.
Alternate expansive full-bleed imagery with restrained, grid-based content sections.
Create tension between massive visual elements and small technical annotations.
Use asymmetrical layouts, split compositions, and occasional overlapping planes.
Establish hierarchy through scale, alignment, spacing, and contrast rather than decorative containers.
Let content sections feel like distinct architectural spaces connected by a coherent underlying grid.
Use thin rules and dividers to establish structure without enclosing everything in cards.

Whitespace should feel like an architectural void: deliberate, spacious, and monumental.

Avoid conventional SaaS layouts, repetitive rounded cards, floating pill collections, and dashboards full of boxed content.

5. Photography and imagery

Photography is a central part of the identity, not an optional decoration.

Prioritize:

Brazilian brutalist and modernist architecture.
Exposed concrete, heavy cantilevers, structural columns, monumental stairs, and long corridors.
Metro stations, public buildings, tiled walls, platforms, and functional signage.
Tropical vegetation growing beside or through architectural structures.
Hard sunlight, deep shadows, dramatic perspective, and strong directional light.
Small human figures within large architectural environments to establish scale.
Quiet, atmospheric scenes with subtle traces of everyday life.

Image treatment

Use natural colors, subdued saturation, strong tonal contrast, and editorial framing. Prefer authentic architectural photography over generic corporate stock imagery.

Images can bleed to the viewport edge or occupy large, uninterrupted blocks. Avoid excessive overlays, rounded image corners, gradients, and artificial glass effects.

The atmosphere should feel contemplative, tactile, urban, and quietly optimistic.

6. Graphic language and wayfinding

Borrow the logic of metro signage and public information systems without directly copying any institution’s protected identity.

Graphic elements

Directional arrows and geometric pointers.
Numbered sections and sequential identifiers.
Route-like lines and colored markers.
Circular symbols, grids, simplified pictograms, and modular iconography.
Thin technical rules, registration marks, and small uppercase annotations.
High-contrast signage panels inspired by transit information boards.

Icons should be simple, geometric, immediately recognizable, and consistent in stroke weight. Favor solid or monoline pictograms over illustrative icon sets.

Create an original icon library using a consistent grid and optical alignment.

These elements must serve navigation, hierarchy, or information architecture. Avoid adding random arrows, coordinates, or technical labels merely for atmosphere.

7. Interface components

Minimal, highly legible, and structurally integrated into the page. Use compact labels, directional indicators, subtle separators, and clear active states.

Buttons and links

Rectangular or minimally rounded geometry. Strong typography, clear focus states, and directional arrows where appropriate. Primary actions may use signal blue or yellow, with neutral alternatives.

Project cards

Treat projects as editorial compositions rather than generic cards. Lead with large images, strong titles, project identifiers, concise descriptions, and restrained metadata.

Use varied image proportions and asymmetrical arrangements within a consistent grid.

Tags and metadata

Small uppercase or monospaced labels. Minimal borders and compact spacing. These should resemble technical annotations or classification markers.

Forms

Architectural precision, clear labels, simple rectangular fields, thin borders, generous vertical spacing, and explicit focus and validation states.

Dividers and panels

Thin rules, changes in surface tone, and alignment should establish most boundaries. Reserve solid panels for meaningful content groupings and wayfinding-style notices.

8. Motion and interaction

Motion should reinforce orientation, scale, and spatial relationships.

Restrained directional transitions.
Subtle parallax in large architectural imagery, used sparingly.
Smooth but purposeful navigation transitions.
Understated hover states involving color, position, or directional indicators.
Occasional scroll-based reveals that emphasize scale and rhythm.

Avoid bouncy easing, playful microinteractions, excessive animation, and motion that compromises usability.

Respect reduced-motion preferences. The experience should remain compelling without animation.

9. Texture and materiality

Use concrete grain, subtle surface irregularities, tiled patterns, and natural shadows as occasional supporting elements.

Texture should come primarily from photography and carefully selected surfaces rather than filters applied to every component.

Keep the underlying interface crisp and modern. Do not make it look distressed, retro, dirty, or artificially aged.

The intended contrast is between the physical imperfection of architecture and the precision of digital design.

10. Brand personality

The identity should communicate:

Curiosity and experimentation.
Technical competence without corporate sterility.
Intellectual rigor without pretension.
Respect for public space and collective experience.
A fascination with systems, structures, cities, and the natural world.

It should feel distinctly Brazilian through its architectural and urban references, not through stereotypical national symbols or excessive use of the national flag palette.

11. Implementation principles

Translate the identity into a reusable design system rather than a collection of styled pages.

Define:

Semantic color and surface tokens.
A consistent typography scale.
Spacing and responsive grid tokens.
Border, divider, and radius conventions.
A coherent icon system.
Reusable navigation, button, link, form, metadata, and project components.
Responsive layouts with intentional mobile compositions.
Accessible interaction states and color contrast.

Prefer CSS variables and composable components. Keep decorative treatments separate from semantic component behavior.

Use a consistent design language across the entire experience, but allow compositions to vary according to their content.

12. What to avoid

Generic startup and SaaS aesthetics.
Excessive rounded corners and soft shadows.
Glassmorphism and gratuitous gradients.
Neon cyberpunk colors.
Faux-industrial grunge and excessive noise.
Random brutalist decorations without functional purpose.
Overcrowded layouts that eliminate negative space.
Minimalism so sterile that it loses materiality and atmosphere.
Direct imitation of official metro logos, pictograms, or government branding.

Final design test

Every screen should balance three forces:

MONUMENTALITY × CLARITY × ORGANIC LIFE

If the design feels too heavy, introduce light, whitespace, and vegetation.

If it feels too sterile, introduce material texture, photographic depth, and organic forms.

If it feels too decorative, remove elements until the hierarchy becomes obvious.

The goal is not to make a website look like concrete. It is to translate the spatial experience of monumental Brazilian architecture and the functional intelligence of public wayfinding into a contemporary digital experience.

The final impression: a quiet, monumental, meticulously structured digital space where concrete, typography, vegetation, and information coexist naturally.

Redesign brief

Reimagine my existing website, 400.wtf, using this identity as the design foundation. You may completely replace the current visual direction and layout.

First inspect the existing codebase, framework, components, assets, and available content. Preserve meaningful projects, working functionality, and relevant personal information, but rethink the presentation from the ground up.

Start by establishing the global design tokens, typography, grid, spacing, and core components. Then implement a cohesive, production-quality portfolio experience.

Prioritize a striking architectural hero, editorial project showcases, generous negative space, deliberate transitions between light and dark surfaces, original transit-inspired wayfinding graphics, and restrained botanical accents.

Use existing project assets when appropriate. Do not invent project details or rely on generic placeholders when real content is available. Do not reproduce the reference moodboard literally; use it as an art direction reference and create an original design.

Make the implementation responsive, accessible, and performant. Inspect the rendered result and refine it until the typography, composition, spacing, imagery, and overall atmosphere feel cohesive.

The result should feel like an immersive architectural experience, not a conventional developer portfolio with a brutalist skin.