№ offf-barcelona--schedule-26-ey-doberman

Part of Offf Barcelona - 4 pages captured →

Offf Barcelona

Crisp, cool, technical—geometric forms and stark white space on a vibrant, bold red foundation.

Portfolio Gridminimalism editorial swiss culturelight

The layout prioritizes visual impact with a large, dynamic hero image and strategically placed text blocks. The overall feel is clean and functional, emphasizing the showcased work rather than overt branding. · adobe live, studio space, creative tech, design agency, conference, technology event, visual display, modern workspace, offf barcelona

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#d8191d
OKLCHoklch(56.2% 0.219 28)
RoleDominant
find sites →
Hex#a0151f
OKLCHoklch(45.4% 0.171 25)
RoleSurface
find sites →
Hex#f64439
OKLCHoklch(64.7% 0.216 28)
RoleInk
find sites →
Hex#60978e
OKLCHoklch(63.5% 0.060 183)
RoleAccent
find sites →
Hex#cbaec3
OKLCHoklch(78.2% 0.044 336)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	wfont_05766b_756b171724054cbba4d24c0273f80e3e	49px	400	0.86	-1.4625px	Aa Bb Cc
h2	wfont_05766b_756b171724054cbba4d24c0273f80e3e	16px	400	0.96	-0.16px	Aa Bb Cc
h3	wfont_05766b_756b171724054cbba4d24c0273f80e3e	49px	400	0.86	-1.4625px	Aa Bb Cc
body	Arial	10px	400	1.4	0	Aa Bb Cc
button	Helvetica	14px	400	1.4	0	Aa Bb Cc

Spacing scale

5px

6px

10px

16px

20px

22px

30px

34px

38px

40px

100px

120px

200px

Radius scale

0px

8px

24px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #d8191d;
  --color-surface: #a0151f;
  --color-ink: #f64439;
  --color-accent: #60978e;
  --color-detail: #cbaec3;
}

/* CSS variables exposed by source */
:root {
  --font_9: normal normal 400 14px/0.96em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold;
  --color_55: 217,217,217;
  --color_43: 0,0,0;
  --color_37: 0,0,0;
  --color_12: 217,217,217;
  --color_60: 255,255,255;
  --color_25: 39,23,19;
  --color_48: 0,0,0;
  --color_21: 34,209,255;
  --color_51: 0,0,0;
  --color_50: 255,255,255;
  --color_13: 255,255,255;
  --color_10: 176,176,176;
  --color_54: 217,217,217;
  --color_20: 51,182,255;
  --color_58: 0,0,0;
  --color_65: 217,217,217;
  --color_46: 255,255,255;
  --color_2: 0,0,0;
  --color_3: 237,28,36;
  --color_41: 0,0,0;
  --color_22: 118,61,45;
  --color_30: 41,51,50;
  --color_23: 255,135,60;
  --color_31: 255,234,217;
  --color_42: 0,0,0;
  --font_7: normal normal normal 16px/0.96em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold;
  --font_6: normal normal normal 30px/1em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold;
  --font_3: normal normal normal calc(225 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1em wfont_05766b_06b83cf825b94bf985b93d11e1035441,wf_06b83cf825b94bf985b93d11e,orig_baikal_semi_bold;
  --font_4: normal normal normal 0px/1.1em wfont_05766b_06b83cf825b94bf985b93d11e1035441,wf_06b83cf825b94bf985b93d11e,orig_baikal_semi_bold;
  --color_44: 0,0,0;
  --color_56: 255,255,255;
  --color_9: 114,114,114;
  --color_27: 166,203,199;
  --color_61: 0,0,0;
  --color_62: 0,0,0;
  --color_0: 255,255,255;
  --color_33: 191,159,134;
  --font_5: normal normal normal 0px/1em wfont_05766b_06b83cf825b94bf985b93d11e1035441,wf_06b83cf825b94bf985b93d11e,orig_baikal_semi_bold;
  --font_8: normal normal normal 16px/0.96em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold;
  --color_39: 217,217,217;
  --font_2: normal normal normal calc(34 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold;
  --color_63: 255,255,255;
  --color_4: 0,136,203;
  --color_7: 176,176,176;
  --color_52: 0,0,0;
  --font_0: normal normal 400 calc(69 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/0.86em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold;
  --color_34: 128,106,90;
  --color_47: 0,0,0;
  --color_45: 0,0,0;
  --color_59: 0,0,0;
  --color_5: 255,203,5;
  --color_1: 255,255,255;
  --color_14: 255,255,255;
  --font_10: normal normal normal 12px/1.4em din-next-w01-light,sans-serif;
  --color_17: 255,64,50;
  --color_40: 255,255,255;
  --color_16: 255,129,214;
  --color_19: 51,182,255;
  --color_24: 77,47,39;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Offf Barcelona.
Reference design system (extracted from the live site):
- Palette: #d8191d, #a0151f, #f64439, #60978e, #cbaec3
- Typefaces: wfont_05766b_756b171724054cbba4d24c0273f80e3e, Arial, Helvetica
- Macrostructure: Portfolio Grid
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/offf-barcelona--schedule-26-ey-doberman

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

wfont_05766b_756b171724054cbba4d24c0273f80e3e

49px

400

0.86

-1.4625px

Aa Bb Cc

wfont_05766b_756b171724054cbba4d24c0273f80e3e

16px

400

0.96

-0.16px

Aa Bb Cc

wfont_05766b_756b171724054cbba4d24c0273f80e3e

49px

400

0.86

-1.4625px

Aa Bb Cc

body

Arial

10px

400

1.4

Aa Bb Cc

button

Helvetica

14px

400

1.4

Aa Bb Cc

:root { --color-dominant: #d8191d; --color-surface: #a0151f; --color-ink: #f64439; --color-accent: #60978e; --color-detail: #cbaec3; } /* CSS variables exposed by source */ :root { --font_9: normal normal 400 14px/0.96em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold; --color_55: 217,217,217; --color_43: 0,0,0; --color_37: 0,0,0; --color_12: 217,217,217; --color_60: 255,255,255; --color_25: 39,23,19; --color_48: 0,0,0; --color_21: 34,209,255; --color_51: 0,0,0; --color_50: 255,255,255; --color_13: 255,255,255; --color_10: 176,176,176; --color_54: 217,217,217; --color_20: 51,182,255; --color_58: 0,0,0; --color_65: 217,217,217; --color_46: 255,255,255; --color_2: 0,0,0; --color_3: 237,28,36; --color_41: 0,0,0; --color_22: 118,61,45; --color_30: 41,51,50; --color_23: 255,135,60; --color_31: 255,234,217; --color_42: 0,0,0; --font_7: normal normal normal 16px/0.96em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold; --font_6: normal normal normal 30px/1em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold; --font_3: normal normal normal calc(225 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1em wfont_05766b_06b83cf825b94bf985b93d11e1035441,wf_06b83cf825b94bf985b93d11e,orig_baikal_semi_bold; --font_4: normal normal normal 0px/1.1em wfont_05766b_06b83cf825b94bf985b93d11e1035441,wf_06b83cf825b94bf985b93d11e,orig_baikal_semi_bold; --color_44: 0,0,0; --color_56: 255,255,255; --color_9: 114,114,114; --color_27: 166,203,199; --color_61: 0,0,0; --color_62: 0,0,0; --color_0: 255,255,255; --color_33: 191,159,134; --font_5: normal normal normal 0px/1em wfont_05766b_06b83cf825b94bf985b93d11e1035441,wf_06b83cf825b94bf985b93d11e,orig_baikal_semi_bold; --font_8: normal normal normal 16px/0.96em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold; --color_39: 217,217,217; --font_2: normal normal normal calc(34 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/1em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold; --color_63: 255,255,255; --color_4: 0,136,203; --color_7: 176,176,176; --color_52: 0,0,0; --font_0: normal normal 400 calc(69 * clamp(0px, 100 * 1cqw * 1, min(9999px, 9999px)) / 1920)/0.86em wfont_05766b_756b171724054cbba4d24c0273f80e3e,wf_756b171724054cbba4d24c027,orig_offf_baikal_semi_bold; --color_34: 128,106,90; --color_47: 0,0,0; --color_45: 0,0,0; --color_59: 0,0,0; --color_5: 255,203,5; --color_1: 255,255,255; --color_14: 255,255,255; --font_10: normal normal normal 12px/1.4em din-next-w01-light,sans-serif; --color_17: 255,64,50; --color_40: 255,255,255; --color_16: 255,129,214; --color_19: 51,182,255; --color_24: 77,47,39; }

Build a landing page in the visual style of Offf Barcelona. Reference design system (extracted from the live site): - Palette: #d8191d, #a0151f, #f64439, #60978e, #cbaec3 - Typefaces: wfont_05766b_756b171724054cbba4d24c0273f80e3e, Arial, Helvetica - Macrostructure: Portfolio Grid Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/offf-barcelona--schedule-26-ey-doberman