---
title: "Tech Barcelona design system"
variant: extended
source: https://www.techbarcelona.com/en/
captured_at: 2026-10-12
theme: light
industry: other
generator: Design DNA (https://four.wiralomi.com/style/techbarcelona-com-en)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Tech Barcelona · Design System

> A bold editorial canvas for Barcelona’s tech ecosystem

**Theme:** light · **Industry:** other · **Source:** https://www.techbarcelona.com/en/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Tech Barcelona pairs a dramatic black-and-white opening with a light, modular homepage for its technology community. Vivid blue and coral mark calls to action, event content, and recurring community bands.

## North star

Use a restrained black-and-white editorial framework, then reserve blue and coral for unmistakable community and event signals.

## Overview

The visual strategy contrasts a near-black opening panel with the white canvas used through most of the page. The oversized white geometric TB mark and large, light-weight headline create an immediate identity, while a narrow story column sits beside the main hero field. FavoritPro-Light keeps typography airy and consistent: headlines are spacious and restrained, with uppercase display treatments used selectively. Bright blue is a signal for membership and community strips; coral distinguishes featured event content rather than acting as a general background. Below the hero, full-width architectural photography gives way to compact feature tiles, campus diagrams, event cards, and editorial stories. The layout alternates broad open regions with dense, image-led grids, using thin rules and square-edged controls instead of decorative elevation. Keep whitespace generous, align content deliberately, and let the black, white, blue, and coral blocks do the visual organizing.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light content areas, white text on dark hero regions, and inverse text on dark controls. |
| Soft Ink | `#090707` | `--color-soft-ink` | neutral | Primary reading text and dark footer details; a subtly softened near-black in measured text. |
| Stage Black | `#000000` | `--color-stage-black` | brand | Dramatic hero field, headline text, dark event links, and the footer background. |
| Concrete Grey | `#d9d9d9` | `--color-concrete-grey` | surface | Muted section surface in measured CSS; keep subordinate to the white canvas. |
| Paper Grey | `#f8f8f8` | `--color-paper-grey` | surface | Soft card background for editorial and story tiles. |
| Signal Blue | `#0075ff` | `--color-signal-blue` | accent | Join Us button and repeated community or membership banners. |
| Rule Grey | `#cccccc` | `--color-rule-grey` | semantic | Thin section dividers and outlines around understated category badges. |
| Event Coral | `#f6583f` | `--color-event-coral` | accent | Featured event card surface; a concentrated event highlight rather than a page-wide color. |
| Footer Charcoal | `#4d4d4d` | `--color-footer-charcoal` | neutral | Minor footer border and detail tone; not a defining page surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#d9d9d9` (Concrete Grey) · `--color-surface-2` → `#f8f8f8` (Paper Grey) · `--color-surface-3` → `#000000` (Stage Black) · `--color-text` → `#000000` (Stage Black) · `--color-text-muted` → `#090707` (Soft Ink) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#cccccc` (Rule Grey) · `--color-accent` → `#0075ff` (Signal Blue) · `--color-accent-2` → `#f6583f` (Event Coral) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#d9d9d9` | 14.88:1 | AAA |
| `#000000` | `#f8f8f8` | 19.77:1 | AAA |
| `#090707` | `#ffffff` | 20.09:1 | AAA |
| `#090707` | `#d9d9d9` | 14.24:1 | AAA |
| `#090707` | `#f8f8f8` | 18.92:1 | AAA |
| `#090707` | `#000000` | 1.05:1 | fail |
| `#ffffff` | `#d9d9d9` | 1.41:1 | fail |
| `#ffffff` | `#f8f8f8` | 1.06:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| FavoritPro-Light | `--font-body` | webfont | 400 | All measured text roles, from display and headings to body, navigation, and controls. | Manrope |

- **FavoritPro-Light:** Light, even sans-serif throughout. Display is oversized; H1 is uppercase with tight tracking; captions are lowercase and eyebrows uppercase.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.14 | -0.01em | — | FavoritPro-Light | Oversized hero or brand statement text. |
| h1 | 50px | 400 | 1 | -0.045em | uppercase | FavoritPro-Light | Primary page heading; uppercase display treatment. |
| h2 | 40px | 400 | 1.31 | 0 | — | FavoritPro-Light | Major section headings, including editorial and feature areas. |
| h3 | 35px | 400 | 1.15 | 0 | — | FavoritPro-Light | Subsection and feature-tile headings. |
| h4 | 30px | 400 | 1.15 | -0.01em | — | FavoritPro-Light | Card and smaller editorial headings. |
| body | 16px | 400 | 1.59 | 0 | — | FavoritPro-Light | Story summaries, supporting copy, and explanatory text. |
| caption | 13px | 400 | 1.59 | 0 | lowercase | FavoritPro-Light | Small category labels and metadata. |
| button | 18px | 400 | 1.59 | 0 | — | FavoritPro-Light | CTA labels and prominent action links. |
| nav | 16px | 400 | 1.33 | 0 | — | FavoritPro-Light | Top-level navigation items. |
| link | 22px | 400 | 1.15 | 0 | — | FavoritPro-Light | Prominent text links and full-width event-list action. |
| eyebrow | 12px | 400 | 1.33 | 0.08em | uppercase | FavoritPro-Light | Compact uppercase section and content labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 6, 8, 10, 13, 14, 15, 19, 20, 22, 23, 25, 27, 28 px.
- Section rhythm 39px · element gap — · card padding 23px · max content width 1110px.

The opening uses a strongly asymmetric composition: a narrow identity and latest-stories rail beside a broad headline field. Subsequent sections span the viewport, but their content sits in tidy, aligned grids and image cards. The measured page max width is 1110px; the section gap is 39px, with comfortable density and 23px card padding. Preserve substantial whitespace around the campus and story modules, then use tighter card groupings for events and news. Thin horizontal rules and full-width ticker bands establish rhythm between sections.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat, with no measured shadows or rounded corners. Use square-edged cards and controls, relying on color blocks, whitespace, and thin grey or black rules to separate content. Layering is strongest in the hero, where a dark field and identity rail create a bold split composition.

## Imagery

Use documentary photography of the campus, people, talks, and events, framed as rectangular cards or wide architectural scenes. Keep imagery natural and image-led rather than heavily filtered. The oversized geometric TB logo and campus-map-like outlines provide graphic identity; photographs carry the human and place-based storytelling. Bright coral may appear as a strong event-card field.

## Components

### Hero navigation

A compact horizontal menu and blue Join Us button sit across the top of a black opening area.

### Identity and story rail

Place the white geometric TB mark and wordmark above a thin divider and a latest-story preview in a dark narrow column.

### Hero statement

Set the main ecosystem statement in large, light sans-serif white type against a black field.

### Outline CTA

Use a square-cornered black outline button for Discover how we can help you; measured border is 1px solid black.

### Community ticker

Repeat a large uppercase community message in a bright blue full-width strip with black text.

### Event cards

Mix pale grey and coral event surfaces, with concise event titles, venue details, and date information.

### Editorial story cards

Present news and member stories as image-led rectangular cards with compact category badges and summaries.

### Footer

Finish with a black footer, white identity, grouped navigation links, and restrained social and legal details.

### Measured component styles

- **Primary button** (“Join Us”): background #0075ff · text #ffffff · radius 0px · padding 16px 27px 17px 28px · 400 16px FavoritPro-Light
- **Secondary button** (“Discover how we can help you”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 8px 20px · 400 18px FavoritPro-Light
- **Link** (“Petit Comitech \| Pep Martorell and Luis ”): transparent background · text #212529 · radius 0px · padding 0px · 400 10px FavoritPro-Light
- **Card** (“Growing Without Losing Your Roots, with ”): background #f8f8f8 · text #212529 · radius 0px · padding 21px 32px 13px 27px · 400 10px FavoritPro-Light
- **Badge** (“petit comitech”): transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 3px 10px 1px 10px · 400 13px FavoritPro-Light · lowercase
- **Navigation item** (“About us Community Events Content Campus”): transparent background · text #212529 · radius 0px · padding 0px · 400 10px FavoritPro-Light

## Do

- Build the hero around a high-contrast black-and-white split.
- Keep typography light, clean, and sans-serif.
- Use Signal Blue for membership and community actions.
- Reserve Event Coral for featured event surfaces.
- Use rectangular photography and square-edged cards.
- Separate modules with whitespace and thin rules.

## Don't

- Do not add gradients or decorative shadows.
- Do not round the measured square-cornered controls.
- Do not spread coral across ordinary page sections.
- Do not use blue as the default text color.
- Do not make every section equally dense.
- Do not replace documentary photography with generic 3D visuals.

## Agent prompt

Build a new Tech Barcelona page using a light editorial framework with a dramatic Stage Black (#000000) hero, Gallery White (#ffffff) typography, and an asymmetric identity/story rail beside a broad headline field. Use FavoritPro-Light or a close light sans-serif substitute, with oversized restrained headlines and compact uppercase labels. Keep the remaining canvas open and white; organize campus, event, and story content into rectangular grids with documentary photography and generous whitespace. Use Signal Blue (#0075ff) only for key membership actions and recurring community bands. Reserve Event Coral (#f6583f) for a featured event card. Favor thin Rule Grey (#cccccc) dividers, square corners, flat surfaces, and crisp alignment. Avoid gradients, rounded pills, and shadows; let contrast, photography, and spacing establish hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Asymmetric dark hero with a narrow logo and story rail, broad headline field, and top navigation. | top navigation, join CTA, latest-story preview | black hero field, white geometric logo, large light headline, blue action button |
| 2 | feature-split | Open content section with a text-led introduction and wide campus image. | learn-more CTA, campus introduction | white canvas, thin outline button, full-width photography |
| 3 | feature-grid | Feature tiles and campus information arranged in open, aligned groups. | browse offerings, view campus | image tiles, outlined campus diagram, blue ticker band |
| 4 | content-feed | Two-column event content with one standout card and lighter neighboring cards. | event discovery, view all events | coral featured card, pale cards, venue and date metadata |
| 5 | content-feed | Editorial stories in a horizontal card row with a section action and carousel controls. | view all stories, carousel navigation | portrait and event photography, compact badges, thin dividers |
| 6 | footer | Full-width community band above a broad white breathing space and black multi-column footer. | community links, footer navigation, social links | blue ticker, black footer, white logo and text |

## Source CSS custom properties (selected)

```css
--primary: #007bff;
--secondary: #6c757d;
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--animate-duration: 1s;
--swiper-theme-color: #007aff;
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/techbarcelona-com-en