Cobalt Action
#0075ffPrimary 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
Tech Barcelona
techbarcelona.comWebsite preview
The design language
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.
Color palette
brand
neutral
Ink Black
#090707Headline color, image borders, large display text — near-black with the slightest warmth, chosen over pure black to feel printed rather than digital
Graphite
#212529Body text, nav links, icon strokes, card borders — the working neutral for interface chrome and readable paragraph copy
Pure White
#ffffffPage canvas, card surfaces, text on dark hero and dark logo backgrounds — establishes the light-mode base and all content surfaces
Hairline Gray
#ccccccSubtle dividers and secondary borders — thin separator lines on light surfaces where #212529 would be too heavy
Pure Black
#000000Dark borders and separators for elevated surfaces and inverted UI.
Shadow Whisper
#eeeeeeNear-invisible ambient shadow tint for button states — a 1px 1px wash so faint it barely registers, used instead of full drop-shadows
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
80px · 400 · 1 · -3.6px trackingThe quick brown fox jumps
heading
50px · 400 · 1 · -2.25px trackingThe quick brown fox jumps
heading-sm
22px · 400 · 1.2 · -0.22px trackingThe quick brown fox jumps
text-20
20px · 400 · 1.2The quick brown fox jumps
subheading
18px · 400 · 1.33 · -0.18px trackingThe quick brown fox jumps
text-16
16px · 400 · 1.33The quick brown fox jumps
body
14px · 400 · 1.5 · -0.14px trackingThe quick brown fox jumps
text-13
13px · 400 · 1.59The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
FavoritPro-Light
- Weights
- 400
- Sizes
- 10px, 12px, 13px, 14px, 16px, 18px, 20px, 22px, 50px, 80px
- Line height
- 1.00–1.59
- Letter spacing
- -0.045em at display sizes (50–80px), -0.01em at body, +0.08em and +0.09em reserved for tracked-out labels and small uppercase
- Fallback
- Inter, Neue Haas Grotesk, or Helvetica Neue Light at matching weight
- Features
- "ss01" on, "cv11" on
Single-family type system used for every interface element — nav, body, buttons, headlines, and 80px display. Weight 400 throughout is a signature choice: the system relies on scale jumps (14px body → 50px subhead → 80px display) rather than bold weights to establish hierarchy, giving the entire site an understated, editorial cadence
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1440px
- Section gap
- 50-80px
- Card padding
- 16px
- Element gap
- 4-10px
Border radius
tags
0pxcards
0pximages
0pxinputs
0pxbuttons
0pxSpacing scale
1px2px3px4px5px6px8px10px14px15px16px17px18px19px20px22px23px25px27px30px32px35px43px50px76px143pxGuidelines
Do
- Use FavoritPro 400 at every size and weight — do not introduce bold or medium weights; hierarchy comes from scale alone
- Use #0075ff exclusively for filled primary action buttons — never as a background surface, icon fill, or decorative accent
- Set headline letter-spacing to -0.045em at 50px and above to compress the display type into confident, tight masses
- Use 0px border-radius on all components — buttons, cards, inputs, and images all share sharp corners to maintain editorial discipline
- Maintain at least 50px vertical space between major content sections to let the large typography breathe
- Use +0.08em and +0.09em letter-spacing only for uppercase labels and tracked-out metadata, never on sentence-case body text
- Let the dark hero band (#000000) appear once per page; all subsequent sections should resolve to white #ffffff canvas
Don’t
- Do not use shadows or elevation effects — the system is intentionally flat with hairline borders only
- Do not introduce additional chromatic colors — the blue/cobalt is the sole accent and its power depends on singularity
- Do not use bold (600+) or semibold weights — the entire interface speaks at weight 400 and louder weights would break the voice
- Do not apply rounded corners (border-radius) to any element — the squared-off geometry is load-bearing
- Do not add gradients, textures, or background patterns to any surface — every surface is a flat solid color
- Do not use #ffffff as a filled button background for actions — the only filled action color is #0075ff; everything else is ghost or text-link
- Do not compress line-height below 1.0 on display sizes — the tight tracking combined with the geometric letterforms already create visual density
Components
Primary Action Button
The only filled chromatic button in the systemBackground #0075ff, text #ffffff, no border, 0px radius (square corners), 10–16px vertical padding, 15px horizontal padding. FavoritPro 400 at 14–16px. The vivid blue against white creates immediate focal hierarchy. Used once in nav ('Join Us') and for key conversion moments.
Ghost Button
Secondary or tertiary action on light surfacesTransparent background, 1px border in #212529 or #cccccc, text #212529, 0px radius, 10–16px padding. FavoritPro 400 at 14px. Used for 'Discover how we can help you' and similar exploratory CTAs where visual weight should not compete with the primary blue.
Top Navigation Bar
Persistent header across all pagesWhite or transparent background, 40–48px height, horizontal nav links in FavoritPro 400 at 13–14px in #212529. Primary blue button anchored top-right. Search icon and language selector (EN ↗) sit to the right of nav links with thin dividers. No drop-shadows or borders on the bar itself.
Hero Block
Full-bleed dark opening bandBackground #000000, full viewport width. Oversized geometric logo (white square pixel-art mark) at 300–400px on the left, large display headline in white #ffffff at 50–80px weight 400 with -3.6px tracking, positioned right of logo. Stats ticker bar below in a thin band with white text on dark.
Stats Ticker Bar
Horizontal numerical proof bandNarrow full-width strip (40–60px height) with white text on black #000000. Label-numeric pairs ('COMPANIES', 'PARTNERS', 'AUDIENCE', 'MEMBERS') in FavoritPro 400 with +0.08em tracking and uppercase treatment. Serves as the visual bridge between dark hero and light content sections.
Full-Bleed Image Block
Editorial photography sectionFull viewport width, no border-radius, no padding around image. Photographs are environmental/architectural (brick buildings, cityscape) with natural color. Often used as section dividers or context setters between text blocks.
Story Card
Content preview tile for articles/newsWhite background, 0px radius, 1px border in #cccccc or #212529. Title in FavoritPro 400 at 16–18px in #090707, metadata label above in tracked uppercase. Small category tag below. No shadows, no rounded corners — relies on hairline border and type hierarchy.
Section Divider
Vertical or horizontal rule between content blocks1px line in #cccccc or #212529, full container width. Used instead of background-color changes to separate content bands while keeping the white canvas uninterrupted.
Language Switcher
Locale toggle in navCompact text element showing current locale ('EN') with an arrow indicator, FavoritPro 400 at 13px in #212529. No background, no border, no chevron icon — just text and a glyph.
Category Tag
Small label for content taxonomyNo background, no border, text only. FavoritPro 400 at 10–12px in #212529, often with +0.08em tracking and uppercase. Sits adjacent to or below a card title to indicate content type.
Surfaces & elevation
Level 1
Hero Canvas
#000000Dark hero band with oversized white logo and display headline
Level 2
Page Canvas
#ffffffDefault light surface for all content sections below the hero
Level 3
Accent Surface
#0075ffSparingly used filled surface for primary action buttons only
The system deliberately avoids all but the faintest ambient shadow. A single 1px 1px 0px wash in #eeeeee appears on one button state. Components are defined by hairline 1px borders in #cccccc or #212529, not by drop-shadows. The flatness reinforces the editorial, print-inspired character of the type-first design — it reads as laid-out rather than assembled.
Layout & imagery
Layout
The page model is a sequence of full-width horizontal bands: dark hero → stats ticker → light content sections with full-bleed photos → footer. No max-width container constrains the layout — every band spans the full viewport. The hero is a split composition with oversized logo left and large display headline right, both vertically centered on a black canvas. Below the hero, content shifts to white canvas with generous vertical space (50–80px section gaps) and full-bleed photography serving as visual punctuation between text blocks. Navigation is a slim top bar (40–48px) with no sticky behavior indicated. The overall rhythm is editorial: large type, full-width imagery, hairline dividers, and wide white margins creating a magazine-like cadence rather than a dense product UI.
Imagery
Photography is environmental and architectural: brick facades, city buildings, physical Tech Barcelona signage mounted on real walls. Shots are warm-toned with natural daylight, no lifestyle people, no abstract gradients. Full-bleed presentation with no border-radius, often used as section dividers between text blocks. The only non-photographic visual is the geometric pixel-art logo mark — a grid of white squares forming an abstract 'TC' monogram on the dark hero. Imagery density is low to moderate: most sections are text-dominant, with photographs appearing as full-width breaks rather than inline illustrations.
Design notes
Agent Guide
primary action: #0075ff (filled action) Create a Primary Action Button: #0075ff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. ## Quick Color Reference - Text (primary): #090707 - Text (body): #212529 - Background (page): #ffffff - Background (hero): #000000 - Border (hairline): #cccccc - Accent: #0075ff (primary action) ## Example Component Prompts 1. **Dark Hero Band**: Full-viewport-width background #000000. Oversized pixel-art logo (white #ffffff squares) at 360px, positioned left. Display headline 'Empowering Barcelona's digital ecosystem' at 80px FavoritPro 400 #ffffff, letter-spacing -3.6px, positioned right of logo. 2. **Primary CTA Button**: Background #0075ff, text #ffffff, 0px border-radius, 12px 16px padding. Label 'Join Us' in FavoritPro 400 at 14px. This is the only filled chromatic element. 3. **Ghost Outline Button**: Transparent background, 1px solid #212529 border, 0px border-radius, 10px 16px padding. Label 'Discover how we can help you' in FavoritPro 400 at 14px #212529. 4. **Stats Ticker Bar**: Full-width strip at 48px height, background #000000. Horizontal row of label-value pairs in FavoritPro 400 at 14px #ffffff with +0.08em tracking, uppercase labels. 5. **Full-Bleed Photo Section**: 100% viewport width, 0px border-radius, 60–80px vertical margin above and below. No overlay text, no captions — let the image stand alone as a visual pause between text bands.
Similar brands
MIT Media Lab
Same editorial type-first approach with oversized light-weight headlines and minimal chrome
IDEO
Similar white-canvas discipline with a single accent color and full-bleed photography as section breaks
Arc'teryx
Shares the neo-grotesque single-weight typography philosophy and stark white/black contrast treatment
New York Review of Books
Same print-editorial cadence: large light-weight display type, generous whitespace, hairline dividers, photography as content divider
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
