Skip to content
Library

Tech Barcelona. Editorial tech manifesto on white marble.

  • Brand
  • Mixed theme
  • 7 colors
  • 1 typeface

Tech Barcelona operates on a typographic-first language: a single custom neo-grotesque (FavoritPro) set at a whisper-light 400 weight governs the entire interface, letting scale and whitespace do the structural work rather than weight contrast. The canvas is predominantly white and quiet, with a single vivid cobalt blue (#0075ff) reserved exclusively for action — it appears once as a filled button in the nav and never decorates elsewhere. A near-black #090707 carries headlines and image content, creating stark tonal contrast against the white surface. The hero band inverts this relationship: black canvas, white type, oversized geometric logo. Components are flat and minimal — hairline borders, no shadows, no gradients — letting the photography and large-scale type carry visual weight. The overall rhythm is editorial: generous vertical space, oversized display sizes up to 80px, and tight letter-spacing pulling large headlines into compact, confident masses.

Screenshot of Tech Barcelona
Captured from techbarcelona.com on October 11, 2026

Tech Barcelona design system

Tech Barcelona

Brand1

  • Primary CTA buttons, the only chromatic accent in the entire interface — one vivid blue against monochrome neutrals, used sparingly so it signals action without competing with content

Neutrals6

  • Dark borders and separators for elevated surfaces and inverted UI.

  • Headline color, image borders, large display text — near-black with the slightest warmth, chosen over pure black to feel printed rather than digital

  • Body text, nav links, icon strokes, card borders — the working neutral for interface chrome and readable paragraph copy

  • Subtle dividers and secondary borders — thin separator lines on light surfaces where #212529 would be too heavy

  • Near-invisible ambient shadow tint for button states — a 1px 1px wash so faint it barely registers, used instead of full drop-shadows

  • Page canvas, card surfaces, text on dark hero and dark logo backgrounds — establishes the light-mode base and all content surfaces

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Pure Black on Cobalt Action

4.99 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.